svgPanZoom:只使用鼠标中键平移

时间:2016-12-08 13:38:22

标签: javascript svgpanzoom

按下鼠标中键时是否只有平移的简单方法?默认行为是平移任何按下的鼠标按钮(或任何触摸)。

beforepan看起来很有希望但你只能在不知道触发平移的情况下获得新旧职位。

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

2 个答案:

答案 0 :(得分: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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

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

  • 更改源代码并编译您自己的版本。这应该是直截了当的,但有一个缺点,即每当库更新时 - 如果你想要最新版本,你将不得不重新编译你的版本。另一方面,版本3非常稳定,过去两年中只有一些小的变化。
  • 使用customEventsHandler。是的,这不是微不足道的,但是你可以获得不改变核心的好处。它应该非常简单,因为您可以使用panBy并仅传递最后一个鼠标位置和当前鼠标位置之间的差值(无需担心SVG当前比例/缩放)。