javascript - svgpanzoom: beforeZoom on return false 不会停止

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

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

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

一个解决方案是如果在缩放之后也取消平移：

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