有没有一种简单的方法可以仅在按下鼠标中键时平移?默认行为是平移任何鼠标按钮被按下(或任何触摸)。
看起来很有希望,beforepan
但您只能获得旧位置和新位置,而不知道是什么触发了平移。
我可能可以使用它来让它工作,customEventsHandler
但对于一些简单的检查来说似乎需要做很多额外的工作。
有没有一种简单的方法可以仅在按下鼠标中键时平移?默认行为是平移任何鼠标按钮被按下(或任何触摸)。
看起来很有希望,beforepan
但您只能获得旧位置和新位置,而不知道是什么触发了平移。
我可能可以使用它来让它工作,customEventsHandler
但对于一些简单的检查来说似乎需要做很多额外的工作。
在元素上调用 之前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>
不,没有简单的方法可以更改处理平移的事件。你基本上有2个解决方案:
customEventsHandler
. 是的,这不是微不足道的,但你会得到不改变核心的好处。它应该非常简单,因为您可以使用panBy
并仅传递上次鼠标位置和当前鼠标位置之间的增量(无需担心 SVG 当前缩放/缩放)。