求将MouseX、MouseY转换为(0,0)的公式：实现对象拖拽缩放

核心逻辑 #

按下对象边界手柄时，以按下瞬间的鼠标位置为临时原点，拖拽过程中计算鼠标相对该原点的偏移量，用偏移量调整对象宽高（需根据手柄位置适配计算方式，避免对象偏移）。

分步实现 #

1. 按下手柄时初始化状态 #

• 记录当前选中对象的初始宽高（initialWidth、initialHeight）
• 记录按下瞬间的鼠标全局坐标（startGlobalX、startGlobalY），以此作为拖拽的临时原点
• 标记当前激活的手柄类型（如右下角、左边、上边等），绑定鼠标移动和抬起事件

2. 拖拽过程中计算与应用 #

实时获取当前鼠标坐标，计算相对原点的偏移量：

deltaX = 当前鼠标X坐标 - 按下时的鼠标X坐标
deltaY = 当前鼠标Y坐标 - 按下时的鼠标Y坐标

根据手柄类型，将偏移量应用到对象的宽高和位置：

• 右下角手柄：直接用偏移量增加宽高
  对象.width = initialWidth + deltaX
对象.height = initialHeight + deltaY
• 左边手柄：偏移量反向调整宽度，同时调整对象X位置避免偏移
  对象.width = Math.max(最小宽度值, initialWidth - deltaX)
对象.x += deltaX
• 上边手柄：偏移量反向调整高度，同时调整对象Y位置避免偏移
  对象.height = Math.max(最小高度值, initialHeight - deltaY)
对象.y += deltaY
• 左上角手柄：同时反向调整宽高，同步偏移对象的X、Y位置
  对象.width = Math.max(最小宽度值, initialWidth - deltaX)
对象.height = Math.max(最小宽度值, initialHeight - deltaY)
对象.x += deltaX
对象.y += deltaY

3. 手柄抬起时清理状态 #

清除激活的对象和手柄标记，解绑鼠标移动与抬起事件，结束拖拽流程。

示例代码（JavaScript伪代码） #

// 全局状态存储
let activeObj = null;
let initW, initH;
let startX, startY;
let activeHandle = null;

// 手柄按下触发函数
function handleDown(e, targetObj, handleType) {
  activeObj = targetObj;
  activeHandle = handleType;
  // 记录初始宽高
  initW = targetObj.width;
  initH = targetObj.height;
  // 记录按下时的鼠标全局位置
  startX = e.clientX;
  startY = e.clientY;
  // 绑定拖拽事件
  document.addEventListener('mousemove', handleDrag);
  document.addEventListener('mouseup', handleUp);
}

// 拖拽过程处理
function handleDrag(e) {
  if (!activeObj || !activeHandle) return;
  
  const deltaX = e.clientX - startX;
  const deltaY = e.clientY - startY;
  const minSize = 10; // 限制最小宽高

  switch(activeHandle) {
    case 'bottom-right':
      activeObj.width = initW + deltaX;
      activeObj.height = initH + deltaY;
      break;
    case 'left':
      activeObj.width = Math.max(minSize, initW - deltaX);
      activeObj.x += deltaX;
      break;
    case 'top':
      activeObj.height = Math.max(minSize, initH - deltaY);
      activeObj.y += deltaY;
      break;
    case 'top-left':
      activeObj.width = Math.max(minSize, initW - deltaX);
      activeObj.height = Math.max(minSize, initH - deltaY);
      activeObj.x += deltaX;
      activeObj.y += deltaY;
      break;
    // 可补充右、下、右上、左下等其他手柄的处理逻辑
  }
}

// 拖拽结束清理
function handleUp() {
  activeObj = null;
  activeHandle = null;
  document.removeEventListener('mousemove', handleDrag);
  document.removeEventListener('mouseup', handleUp);
}

额外优化点 #

• 按住Shift键时可开启等比缩放：按下Shift时，将deltaX和deltaY按初始宽高比例同步（如deltaY = deltaX * (initH / initW)）
• 处理鼠标超出画布的情况：确保事件绑定在document上，避免拖拽中断
• 多对象场景下，需通过点击事件正确识别当前选中的对象和手柄

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