如何拖动缩放的元素

Posted 2023-02-22

【中文标题】如何拖动缩放的元素

【英文标题】：How to drag a scaled element

【发布时间】：2020-08-05 11:31:46

【问题描述】：

我正在制作一个拖动的图像。它可以正常工作。我也有缩放图像的按钮。缩放后，药物起作用，但它会切断位置。我找不到合适的词来描述这种行为。在第一个动作中，图像的位置略有变化

我还需要做什么计算。在缩放元素后获得平滑的拖动。

https://codesandbox.io/s/laughing-tree-1zqhf?file=/src/App.js

提前谢谢你

【参考方案1】：

你必须保留最初的 X 并且只计算移动的差异。

const onMouseDown = e => 
    e.persist();
    var initialX = e.pageX;
    const onMouseMove = ev => 
      var newX = initialX - ev.pageX;
      setX(x - newX);
    ;


    const onMouseUp = () => 
      window.removeEventListener("mousemove", onMouseMove);
      window.removeEventListener("mouseup", onMouseUp);
    ;

    window.addEventListener("mousemove", onMouseMove);
    window.addEventListener("mouseup", onMouseUp);
  ;

分叉沙箱链接：https://codesandbox.io/s/compassionate-ishizaka-kvmnk?file=/src/App.js

【讨论】：

感谢您的回复，但很遗憾这不起作用

是的，这种情况下获取页面坐标更合理..我只是需要加快元素的移动速度......非常感谢！

另外...translate($x / scalepx, 0px) 给了我想要的速度