鼠标滚轮事件在 JointJS 中有抖动的缩放/缩放答案

【问题标题】：Mouse wheel event has jittery zoom/scale in JointJS鼠标滚轮事件在 JointJS 中有抖动的缩放/缩放
【发布时间】：2019-05-30 21:29:21
【问题描述】：

我正在尝试在 JointJS 中使用鼠标滚轮实现缩放功能。目的是使用 paper.scale() 函数并将鼠标坐标用于 ox & oy 选项。但是，当我移动鼠标时，它会在翻译中产生抖动效果。

通过 google 快速搜索可以使用多种缩放实现，但它们似乎都遇到了同样的问题。

这是我的代码，基于我对 JointJS 文档的最佳迭代。我假设 x & y 已经翻译成纸空间。

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 选项时，它似乎可以工作。但是，当我移动鼠标时，它会产生抖动的翻译效果。 ox & oy 坐标似乎被一个事件延迟了。

这是我的尝试JSFiddle。

这是我通过谷歌找到的尝试JSFiddle

【问题讨论】：

这有点老了，但你指的是当你放大/缩小时你首先滚动，然后实际缩放开始的部分？

标签： javascript svg jointjs

【解决方案1】：

我终于做到了：

paper.on("blank:mousewheel", function(evt, x, y, delta) {
  evt.preventDefault();
  const oldscale = paper.scale().sx;
  const newscale = oldscale + 0.2 * delta * oldscale

  if (newscale>0.2 && newscale<5) {
    paper.scale(newscale, newscale, 0, 0);
    paper.translate(-x*newscale+evt.offsetX,-y*newscale+evt.offsetY);
  }
});

https://jsfiddle.net/nj5cqusg/1/

【讨论】：