如何使用鼠标中轮按钮拖动 Openseadragon 画布答案

【问题标题】：How to drag an Openseadragon canvas with mouse middle wheel button如何使用鼠标中轮按钮拖动 Openseadragon 画布
【发布时间】：2018-11-20 06:19:37
【问题描述】：

我正在使用带有 fabricjs 覆盖的 Openseadragon 库。我有一种情况，我想拖动画布，而不是鼠标主按钮，我想用鼠标中键拖动它。谁能帮我得到想要的行为？

【问题讨论】：

标签： javascript dom-events mouse fabricjs openseadragon

【解决方案1】：

OpenSeadragon 没有相应的标志，但您可以使用 MouseTracker 轻松构建它。这是一个示例（根据内存编码，未经测试，但它应该可以让您了解）。

var drag;

var mouseTracker = new OpenSeadragon.MouseTracker({
  element: viewer.container, 
  nonPrimaryPressHandler: function(event) {
    if (event.button === 1) { // Middle
      drag = { 
        lastPos: event.position.clone()
      };
    }
  },
  moveHandler: function(event) {
    if (drag) {
      var deltaPixels = drag.lastPos.minus(event.position);
      var deltaPoints = viewer.viewport.deltaPointsFromPixels(deltaPixels);
      viewer.viewport.panBy(deltaPoints);
      drag.lastPos = event.position.clone();
    }
  },
  nonPrimaryReleaseHandler: function(event) {
    if (event.button === 1) {
      drag = null;
    }
  }
});

编辑：我在上面的示例代码中有一个错误；固定。

【讨论】：

我可以用鼠标中键拖动画布，但画布移动非常快。
这里是 plunker：plnkr.co/edit/t5kUse2ztmdyoDKTyAjZ?p=preview
我明白了！我在第一个示例中犯了一个错误，即太早将位置转换为视口坐标；视口四处移动的事实导致点不准确。我现在将位置保存在网络坐标中并在最后一分钟转换为视口，这会产生正确的结果。我也有 minus 向后所以它的方向是错误的。如果现在可行，请告诉我！
优秀；很高兴听到！ :)

【解决方案2】：

扩展@iangilman 的答案...

为了改善在拖动时在 MouseTracker 的元素之外释放中间按钮时的用户体验，导致 nonPrimaryReleaseHandler 永远不会被调用，可以捕获指针......像这样：

var trackerElement = viewer.container;
var drag;

function capturePointer(event) {
  if (OpenSeadragon.MouseTracker.havePointerCapture) {
    if (OpenSeadragon.MouseTracker.havePointerEvents) {
      // Can throw InvalidPointerId
      try {
        trackerElement.setPointerCapture(event.originalEvent.pointerId);
      } catch () {
        //
      }
    } else {
        trackerElement.setCapture(true);
    }
  }
}

function releasePointer(event) {
  if (OpenSeadragon.MouseTracker.havePointerCapture) {
    if (OpenSeadragon.MouseTracker.havePointerEvents) {
      // Can throw InvalidPointerId
      try {
        trackerElement.releasePointerCapture(event.originalEvent.pointerId);
      } catch () {
        //
      }
    } else {
        trackerElement.releaseCapture();
    }
  }
}

var mouseTracker = new OpenSeadragon.MouseTracker({
  element: trackerElement,
  nonPrimaryPressHandler: function(event) {
    if (event.button === 1) { // Middle
      capturePointer(event);
      drag = {
        lastPos: event.position.clone()
      };
    }
  },
  moveHandler: function(event) {
    if (drag) {
      var deltaPixels = drag.lastPos.minus(event.position);
      var deltaPoints = viewer.viewport.deltaPointsFromPixels(deltaPixels);
      viewer.viewport.panBy(deltaPoints);
      drag.lastPos = event.position.clone();
    }
  },
  nonPrimaryReleaseHandler: function(event) {
    if (event.button === 1) {
      releasePointer(event);
      drag = null;
    }
  }
});

【讨论】：