svgpanzoom：return false 上的 beforeZoom 不会停止

Question

我正在使用这个很棒的插件。但是缩放暂停有问题

        panZoom = svgPanZoom('#svg3336', {
            zoomEnabled: true,
            controlIconsEnabled: false,
            fit: true,
            center: true,
            panEnabled: true,
            zoomScaleSensitivity: 2,
            beforeZoom: function(){

                if(zoomed)
                {
                    return false;
                }
                else
                {
                    zoomed = true;
                }
            },
            mouseWheelZoomEnabled: false,
            minZoom: 0.1
        });

等等 return false 我的地图消失了。我有检查矩阵数据，我看到坐标有一个很大的负数

transform="matrix(5.630453109741211,0,0,5.630453109741211,-2396.02587890625,-7678.998046875)"

如何解决这个问题？

Answer 1

问题是当您使用 mousescroll 缩放时，它是相对于鼠标指针位置的点完成的。因此，您不仅可以滚动，还可以平移。

在您的示例中，仅阻止缩放，但在使用 mousescroll 滚动时平移仍然有效。

一个解决方案是在缩放后立即取消平移：

beforeZoom: function(){
  isZooming = true;
  if(zoomed) {
    return false;
  } else {
    zoomed = true;
  }
},
beforePan: function(){
  if(isZooming) {
    isZooming = false;
    return false;
  }
}

svgpanzoom：return false 上的 beforeZoom 不会停止

svgpanzoom: beforeZoom on return false doesn't halt

javascript

svgpanzoom