javascript - svgPanZoom:仅使用鼠标中键进行平移

Question

有没有一种简单的方法可以仅在按下鼠标中键时进行平移？默认行为是平移任何按下的鼠标按钮(或任何触摸)。

beforepan 看起来很有希望，但你只能得到旧的和新的位置，而不知道是什么触发了平移。

我也许可以使用customEventsHandler让它工作但对于一些简单的检查来说似乎需要做很多额外的工作。

Answer 1

在元素上调用 svgPanZoom 之前，您可以绑定(bind) mousedown 事件并调用 stopImmediatePropagation .

DEMO

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>