基于鼠标移动的JS选中元素缩放功能故障排查求助

我正在开发一款支持拖拽选择元素、通过鼠标移动实现元素缩放的应用，元素选择功能（选中元素存储于canvas.selected.elements）运行正常，但元素缩放功能存在问题。

鼠标移动事件处理代码（原问题代码） #

editor_container.onmousemove = function(e) {
  if (canvas.mousedown && canvas.grabbed.resize) {
    const x = (e.clientX - canvas.mousedown.clienX) * (1 / canvas.scale);
    const y = (e.clientY - canvas.mousedown.clienY) * (1 / canvas.scale);
    resizeElement(x, y, canvas.grabbed.resize, canvas.selected.elements);
  }
};

缩放逻辑函数（原问题代码） #

const resizeElement = (clientX, clientY, direction, elements) => {
    let x, y, x1, x2, y1, y2, width, height;
    switch (direction) {
        case "nw":
            elements.forEach(element => {
                x = element.x; 
                y = element.y; 
                width = element.w; 
                height = element.h; 
                x1 = x + clientX; 
                y1 = y + clientY; 
                x2 = (x - x1) + width; 
                y2 = (y - y1) + height;
                let l = (x2 * (1 / canvas.scale)) >= 0; let t = (y2 * (1 / canvas.scale)) >= 0;

                if (l) { element.style.left = x1 + 'px'; element.style.width = (x2) + 'px'; }
                if (t) { element.style.top = y1 + 'px'; element.style.height = (y2) + 'px'; }
            }); break;
        case "ne":
            elements.forEach(element => {
                x = element.x; 
                y = element.y; 
                width = element.w; 
                height = element.h; 
                x1 = x + clientX; 
                y1 = y + clientY; 
                x2 = width + clientX; 
                y2 = (y - y1) + height;
                let t = (y2 * (1 / canvas.scale)) >= 0;
                if (t) { element.style.top = y1 + 'px'; element.style.height = (y2) + 'px'; }
                element.style.width = x2 + 'px';
            }); break;
        case "sw":
            elements.forEach(element => {
                x = element.x; 
                y = element.y; 
                width = element.w; 
                height = element.h; 
                x1 = x + clientX; 
                y1 = y + clientY; 
                x2 = (x - x1) + width; 
                y2 = height + clientY;
                let l = (x2 * (1 / canvas.scale)) >= 0;
                if (l) { element.style.left = x1 + 'px'; element.style.width = (x2) + 'px'; }
                element.style.height = y2 + 'px';
            }); break;
        case "se":
            elements.forEach(element => {
                x = element.x; 
                y = element.y; 
                width = element.w; 
                height = element.h; 
                x1 = x + clientX; 
                y = y + clientY; 
                x2 = width + clientX; 
                y2 = height + clientY;
                element.style.width = x2 + 'px'; element.style.height = y2 + 'px';
            }); break;
        default: return null;
    }
};

问题排查 #

1. 拼写错误：鼠标移动事件中canvas.mousedown.clienX应为canvas.mousedown.clientX，直接导致鼠标偏移量计算完全错误。
2. 无初始基准计算：原代码直接用鼠标偏移量叠加修改元素属性，未基于缩放开始时的元素初始状态计算，导致每次移动都叠加偏移，缩放逻辑失控。
3. 属性同步缺失：仅修改元素的style属性，未同步更新元素自身的x、y、w、h属性，下次缩放时会基于旧值计算，逻辑混乱。
4. 笔误问题：se方向分支中错误写为y = y + clientY，应为y1 = y + clientY。
5. 尺寸限制逻辑混乱：原尺寸有效性判断与实际计算不匹配，导致元素可能缩放到无效尺寸。

修复方案 #

1. 修正鼠标移动事件拼写错误 #

editor_container.onmousemove = function(e) {
  if (canvas.mousedown && canvas.grabbed.resize) {
    // 修正clienX为clientX
    const x = (e.clientX - canvas.mousedown.clientX) * (1 / canvas.scale);
    const y = (e.clientY - canvas.mousedown.clientY) * (1 / canvas.scale);
    resizeElement(x, y, canvas.grabbed.resize, canvas.selected.elements);
  }
};

2. 补充鼠标按下时的初始状态记录 #

在触发缩放的onmousedown事件中，记录鼠标按下位置及每个选中元素的初始状态，作为缩放计算的基准：

// 缩放手柄的鼠标按下事件示例
handleResizeMouseDown = (e, direction) => {
  canvas.mousedown = true;
  canvas.grabbed.resize = direction;
  // 记录鼠标按下时的位置
  canvas.mousedown.clientX = e.clientX;
  canvas.mousedown.clientY = e.clientY;
  // 记录每个选中元素的初始位置与尺寸
  canvas.selected.elements.forEach(el => {
    el.initialX = parseFloat(el.style.left) || el.x;
    el.initialY = parseFloat(el.style.top) || el.y;
    el.initialW = parseFloat(el.style.width) || el.w;
    el.initialH = parseFloat(el.style.height) || el.h;
  });
};

3. 重写缩放逻辑函数 #

基于初始状态和鼠标偏移量计算新属性，同步更新元素的样式与自身属性，并限制最小尺寸：

const resizeElement = (deltaX, deltaY, direction, elements) => {
  // 定义元素最小尺寸，避免缩放到无效值
  const minSize = 20;

  elements.forEach(element => {
    const { initialX, initialY, initialW, initialH } = element;
    let newX = initialX;
    let newY = initialY;
    let newW = initialW;
    let newH = initialH;

    switch (direction) {
      case "nw":
        newX = initialX + deltaX;
        newY = initialY + deltaY;
        newW = initialW - deltaX;
        newH = initialH - deltaY;
        // 限制最小尺寸，同时调整位置保证元素不反向
        if (newW < minSize) {
          newX = initialX + initialW - minSize;
          newW = minSize;
        }
        if (newH < minSize) {
          newY = initialY + initialH - minSize;
          newH = minSize;
        }
        break;
      case "ne":
        newY = initialY + deltaY;
        newW = initialW + deltaX;
        newH = initialH - deltaY;
        if (newW < minSize) newW = minSize;
        if (newH < minSize) {
          newY = initialY + initialH - minSize;
          newH = minSize;
        }
        break;
      case "sw":
        newX = initialX + deltaX;
        newW = initialW - deltaX;
        newH = initialH + deltaY;
        if (newW < minSize) {
          newX = initialX + initialW - minSize;
          newW = minSize;
        }
        if (newH < minSize) newH = minSize;
        break;
      case "se":
        newW = initialW + deltaX;
        newH = initialH + deltaY;
        if (newW < minSize) newW = minSize;
        if (newH < minSize) newH = minSize;
        break;
      default:
        return;
    }

    // 同步更新元素的样式与自身属性
    element.style.left = `${newX}px`;
    element.style.top = `${newY}px`;
    element.style.width = `${newW}px`;
    element.style.height = `${newH}px`;
    element.x = newX;
    element.y = newY;
    element.w = newW;
    element.h = newH;
  });
};

内容的提问来源于stack exchange，提问作者make