Событие колеса мыши имеет джиттер-зум / масштаб в JointJS - PullRequest
Новая
       20

Событие колеса мыши имеет джиттер-зум / масштаб в JointJS

1 голос
/ 31 мая 2019

Я пытаюсь реализовать функцию масштабирования с помощью колесика мыши в JointJS. Намерение состоит в том, чтобы использовать функцию paper.scale () и использовать координаты мыши для параметров ox & oy. Однако, когда я двигаю мышь, в переводе возникает дрожащий эффект.

Существует несколько реализаций масштабирования с помощью быстрого поиска в Google, но, похоже, все они страдают от одной и той же проблемы.

Вот мой код, основанный на моей лучшей интерпретации документации JointJS. Я предполагаю, что x & y уже переведены в paperpace. 

paper.on('blank:mousewheel', function(evt, x, y, delta) {


    var normalizedDelta = Math.max(-1, Math.min(1, (delta))) / 50;
    var newScale = paper.scale().sx + normalizedDelta; // the current paper scale changed by delta

  if (newScale > 0.4 && newScale < 2) {
    paper.translate(0, 0); // setOrigin is deprecated, replaced by translate
    paper.scale(newScale, newScale, x, y);
  }
})

Вот код увеличения, который я нашел, прибегая к помощи. Это имеет тот же эффект. Я возился с использованием offsetX / offsetY, локальных координат и бумажных координат, все без удачи. 

paper.$el.on('mousewheel DOMMouseScroll', onMouseWheel);

function onMouseWheel(e) {

  e.preventDefault();
  e = e.originalEvent;

  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))) / 50;
  var offsetX = (e.offsetX || e.clientX - $(this).offset().left); // offsetX is not defined in FF
  var offsetY = (e.offsetY || e.clientY - $(this).offset().top); // offsetY is not defined in FF
  var localPoint = offsetToLocalPoint(offsetX, offsetY);

  var newScale = V(paper.viewport).scale().sx + delta; // the current paper scale changed by delta

  if (newScale > 0.4 && newScale < 2) {
    paper.translate(0, 0);  // setOrigin is deprecated, replaced by translate
    paper.scale(newScale, newScale, localPoint.x, localPoint.y); //p.x, p.y);
  }
}

function offsetToLocalPoint(x, y) {
  var svgPoint = paper.svg.createSVGPoint();

  svgPoint.x = x;
  svgPoint.y = y;

  // Transform point into the viewport coordinate system.
  var pointTransformed = svgPoint.matrixTransform(paper.viewport.getCTM().inverse());
  return pointTransformed;
}

Я ожидаю, что это увеличит любую точку, в которой находится мышь. Масштабирование работает очень хорошо, когда ox & oy установлены на ноль. Когда я пытаюсь использовать координаты мыши для параметров ox & oy, это работает. Тем не менее, когда я перемещаю мышь, появляется эффект дрожания перевода. Похоже, координаты быка задерживаются на одно событие.

Вот моя попытка JSFiddle .

Вот попытка, которую я нашел через Google JSFiddle

...