svgPanZoom：仅使用鼠标中键平移

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

不，没有简单的方法可以更改处理平移的事件。 您基本上有2个解决方案：

• 更改源代码并编译自己的版本。 这应该很简单，但是缺点是，每当库更新时，如果要最新版本，就必须重新编译版本。 另一方面，版本3非常稳定，在过去两年中只有很小的变化。
• 使用customEventsHandler 。 是的，这并非微不足道，但您会获得不更改核心的好处。 这应该非常简单，因为您可以使用panBy并仅在最后一个鼠标位置和当前鼠标位置之间传递增量（而无需担心SVG当前缩放/缩放）。