transfrom scale缩放出现偏移的情况

元素出现偏移

scale后白色的div缩放后没有位于左上角了

设置：transform-origin

transform-origin: 0 0;

鼠标事件发生了偏移

在本次应用中，需要通过拖动几个点更改元素的宽高位置、缩放后按照之前的逻辑会出现鼠标和我们改边的元素的边界不同步了
解决：
在添加偏移量的时候乘以1/scale
代码：

//拖拽整个shape
  const handleMouseDownOnShape = (e: React.MouseEvent<HTMLDivElement>) => {
    
    
    e.stopPropagation();
    e.preventDefault();
    const pos = {
    
     ...props.current.style }
    const startY = e.clientY;
    const startX = e.clientX;
    // 如果直接修改属性，值的类型会变为字符串，所以要转为数值型
    const startTop = Number(pos.top);
    const startLeft = Number(pos.left);

    let hasMove: boolean = false
    const move = (moveEvent: any): void => {
    
    
      hasMove = true;
      const scale: number = 1 / props.scale  //乘以缩放的比例倒数，否则鼠标事件出现偏移
      const curX = moveEvent.clientX;
      const curY = moveEvent.clientY;
      pos.top = (curY - startY) * scale + startTop;
      pos.left = (curX - startX) * scale + startLeft;
      //更改位置
      const current = {
    
     ...props.current, style: {
    
     ...pos } }
      props.changeList(current)
    };

    const up = () => {
    
    
      hasMove = false;
      document.removeEventListener("mousemove", move);
      document.removeEventListener("mouseup", up);
    };

    document.addEventListener("mousemove", move);
    document.addEventListener("mouseup", up);
  }