时间戳

首页 > 解决方案 > 如何使用鼠标中轮按钮拖动 Openseadragon 画布

javascript - 如何使用鼠标中轮按钮拖动 Openseadragon 画布

问题描述

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

标签： javascriptdom-eventsmousefabricjsopenseadragon

解决方案

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;
    }
  }
});

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

推荐阅读