svgPanZoom：仅使用鼠标中键平移答案

【问题标题】：svgPanZoom: only pan using middle mouse buttonsvgPanZoom：仅使用鼠标中键平移
【发布时间】：2016-12-08 13:38:21
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript svgpanzoom

【解决方案1】：

在元素上调用svgPanZoom之前，你可以绑定一个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>

【讨论】：

【解决方案2】：

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

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

【讨论】：