将容器或阶段比例匹配到画架中的鼠标事件坐标

Question

刚刚开始我的第一个画架项目，我在尝试缩放+拖放时遇到了一些麻烦。

如果查看Plunkr，我可以看到我有一个受鼠标滚轮影响的简单缩放系数

  function MouseWheelHandler(mouseWheelEvent) {
    if (Math.max(-1, Math.min(1, (mouseWheelEvent.wheelDelta || -mouseWheelEvent.detail))) > 0) {
      zoom = 1.1;
    } else {
      zoom = 1 / 1.1;
    }
    container.scaleX = container.scaleY *= zoom;
    gravesStage.update();
  }

然后我创建一个圆圈，并尝试使用evt.stage坐标将其拖动。

  circle.on("pressmove",
    function(evt) {
      evt.target.x = evt.stageX * zoom;
      evt.target.y = evt.stageY * zoom;

我似乎无法正确地进行此计算。它似乎将鼠标相对于画布，而不是考虑缩放。 有人能够在这里向我解释这个问题吗？

谢谢， 布赖恩

>> Plunkr here <<

Answer 1

想出来！在问之前我应该​​更坚持......

解决方案：

  evt.target.x = evt.stageX / container.scaleX;
  evt.target.y = evt.stageY / container.scaleY;

问题在于缩放是增量缩放量，但我真正需要做的是缩放新的X / Y值，而不是缩放阶段/容器的比例。