Как перетащить холст Openseadragon с помощью средней кнопки колесика мыши

Я использую библиотеку Openseadragon с наложением fabricjs. У меня есть случай, когда я хочу перетащить холст, но вместо основной кнопки мыши я хочу перетащить его нажатием средней кнопки мыши. Может ли кто-нибудь помочь мне добиться желаемого поведения?


javascript dom-events mouse fabricjs openseadragon
person Fateh    schedule 20.11.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

ИЗМЕНИТЬ: у меня была ошибка в приведенном выше примере кода; фиксированный.

person iangilman    schedule 28.11.2018
comment
Я могу перетаскивать холст с помощью средней кнопки колесика мыши, но движение холста происходит очень быстро. - person Fateh; 06.12.2018
comment
Вот плункер: plnkr.co/edit/t5kUse2ztmdyoDKTyAjZ?p=preview - person Fateh; 06.12.2018
comment
Я понимаю! В моем первом примере я допустил ошибку, слишком рано преобразовав положение в координаты области просмотра; тот факт, что окно просмотра перемещалось, приводил к неточности точек. Сейчас я сохраняю позицию в веб-координатах и ​​конвертирую в область просмотра в последнюю минуту, что дает правильный результат. У меня также был minus назад, поэтому он шел в неправильном направлении. Сообщите мне, работает ли это сейчас! - person iangilman; 11.12.2018
comment
Превосходно; рад это слышать! :) - person iangilman; 13.12.2018

arrow_upward
0
arrow_downward

Расширяя ответ @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;
    }
  }
});
person Mark Salsbery    schedule 15.03.2021