Как ограничить ограничение панорамирования для увеличения в svg с помощью svgPanZoom? - PullRequest
Новая
       42

Как ограничить ограничение панорамирования для увеличения в svg с помощью svgPanZoom?

0 голосов
/ 01 ноября 2019

Обратите внимание, что в этом примере jsfiddle ограничение панорамирования работает, когда svg масштабируется или уменьшается. Однако при увеличении вы больше не можете панорамировать.

Хотелось бы увеличить изображение и все еще иметь возможность панорамирования, сохраняя при этом края svg привязанными к краям окна просмотра.

Ссылка: https://jsfiddle.net/hefys2gc/

        var beforePan

    beforePan = function(oldPan, newPan){
      var stopHorizontal = true
    , stopVertical = true
 ,  gutterWidth = (panZoom.getSizes().viewBox.width  * panZoom.getSizes().realZoom)
        , gutterHeight = (panZoom.getSizes().viewBox.height  * panZoom.getSizes().realZoom)
          // Computed variables
        , sizes = this.getSizes()
        , leftLimit = -((sizes.viewBox.x + sizes.viewBox.width) * sizes.realZoom) + gutterWidth
        , rightLimit = sizes.width - gutterWidth - (sizes.viewBox.x * sizes.realZoom)
        , topLimit = -((sizes.viewBox.y + sizes.viewBox.height) * sizes.realZoom) + gutterHeight
        , bottomLimit = sizes.height - gutterHeight - (sizes.viewBox.y * sizes.realZoom)

      customPan = {}
      customPan.x = Math.max(leftLimit, Math.min(rightLimit, newPan.x))
      customPan.y = Math.max(topLimit, Math.min(bottomLimit, newPan.y))

      return customPan
    }

    // Expose to window namespace for testing purposes
    window.panZoom = svgPanZoom('#limit-svg', {
      zoomEnabled: true
    , controlIconsEnabled: true

    , beforePan: beforePan
    });
...