svgPanZoom:只使用鼠标中间按钮的pan

Question

当鼠标中间的按钮被按下时，是否有一种简单的方法来只进行平底？默认的行为是按下任何鼠标按钮(或任何触摸)。

beforepan看起来很有希望，但你只得到了新的老位置，而不知道是什么触发了摇摄。

我可能可以使用customEventsHandler让它工作，但是对于几个简单的检查来说，这似乎是很多额外的工作。

Answer 1

在对元素调用svgPanZoom之前，可以绑定一个mousedown事件并调用stopImmediatePropagation。

演示

​

document.getElementById('svg-id').onmousedown = function (e) {
  if (e.button !== 1) e.stopImmediatePropagation();
}

svgPanZoom('#svg-id', {
  zoomEnabled: true,
  controlIconsEnabled: true,
  fit: true,
  center: true,
  minZoom: 0.1
});

#container{
  width: 300px; height: 300px; border:1px solid black;
}

<script src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>

<div id="container">
  <svg id="svg-id" height="300px" xmlns="http://www.w3.org/2000/svg">
    <g>
      <g stroke="#000" fill="#FFF">
        <rect x="10" y="10" width="120" height="120" fill="red"/>
        <path d="M 10 10  L 130 130 Z"/>
      </g>
    </g>
  </svg>
</div>

​

Answer 2

不，没有一种简单的方法来改变处理摇摄的事件。基本上有两个解决方案：

• 更改源代码并编译自己的版本。这应该是直截了当的，但是它的缺点是，每当库更新时-如果您想要最新版本，就必须重新编译您的版本。另一方面，第3版非常稳定，在过去的两年里只有一些小的变化。
• 使用customEventsHandler。是的，这并不是微不足道的事情，但你可以得到不改变核心的好处。它应该非常简单，因为您可以使用panBy，并且只传递鼠标最后位置和当前鼠标位置之间的增量(不需要担心SVG当前缩放)。