Angular 17自定义拖拽缩放旋转功能：缩放异常问题求助

核心问题根源 #

• 缩放时未指定正确的变换原点（transform-origin），导致缩放基准错误，无法固定其他边角位置
• 旋转后直接使用屏幕坐标计算缩放，未做坐标系逆转换，导致元素位置偏移

具体修复方案 #

1. 动态绑定缩放基准点 #

在触发缩放的mousedown事件中，根据点击的控制点位置，给目标元素设置对应的变换原点：

// 映射控制点到对应的transform-origin值
setTransformOrigin(controlPoint: string) {
  const originMap = {
    'top-left': '0% 0%',
    'top-center': '50% 0%',
    'top-right': '100% 0%',
    'middle-left': '0% 50%',
    'middle-right': '100% 50%',
    'bottom-left': '0% 100%',
    'bottom-center': '50% 100%',
    'bottom-right': '100% 100%'
  };
  this.targetElement.style.transformOrigin = originMap[controlPoint] || '50% 50%';
}

点击控制点时调用该方法，确保缩放以当前点击的控制点为基准，其他边角会围绕此点固定缩放。

2. 旋转后坐标逆转换校正 #

当元素已有旋转角度时，需要把鼠标的屏幕坐标转换为元素本地坐标系的坐标（抵消旋转影响），再计算缩放比例：

// 将屏幕坐标转换为元素本地坐标（逆旋转）
getLocalMousePos(clientX: number, clientY: number, element: HTMLElement): {x: number, y: number} {
  const rect = element.getBoundingClientRect();
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;
  
  // 鼠标相对于元素中心的原始偏移
  const dx = clientX - centerX;
  const dy = clientY - centerY;
  
  // 提取当前旋转角度
  const rotateMatch = element.style.transform.match(/rotate\((\d+)deg\)/);
  const rotateAngle = rotateMatch ? parseInt(rotateMatch[1]) : 0;
  const rad = (rotateAngle * Math.PI) / 180;
  
  // 逆旋转计算本地坐标
  const localX = dx * Math.cos(rad) + dy * Math.sin(rad);
  const localY = -dx * Math.sin(rad) + dy * Math.cos(rad);
  
  return { x: localX + centerX, y: localY + centerY };
}

在mousemove的缩放逻辑中，用转换后的本地坐标计算缩放比例，避免旋转角度干扰缩放位置。

3. 整合缩放逻辑 #

修改缩放处理函数，结合上述两个步骤：

onScaleMouseDown(event: MouseEvent, controlPoint: string) {
  event.preventDefault();
  this.targetElement = event.target as HTMLElement;
  this.setTransformOrigin(controlPoint);
  
  const startRect = this.targetElement.getBoundingClientRect();
  const startPos = this.getLocalMousePos(event.clientX, event.clientY, this.targetElement);
  const startWidth = startRect.width;
  const startHeight = startRect.height;
  
  const onMouseMove = (e: MouseEvent) => {
    e.preventDefault();
    const currentPos = this.getLocalMousePos(e.clientX, e.clientY, this.targetElement);
    
    // 根据控制点计算对应缩放比例
    let scaleX = 1, scaleY = 1;
    switch(controlPoint) {
      case 'top-left':
        scaleX = (startRect.left - currentPos.x) / startWidth + 1;
        scaleY = (startRect.top - currentPos.y) / startHeight + 1;
        break;
      case 'bottom-right':
        scaleX = (currentPos.x - startRect.left) / startWidth;
        scaleY = (currentPos.y - startRect.top) / startHeight;
        break;
      // 其他控制点按位置逻辑补充对应计算
    }
    
    // 保留原有变换（位移、旋转），仅更新缩放
    const currentTransform = this.targetElement.style.transform || '';
    this.targetElement.style.transform = `${currentTransform.replace(/scale\([\d.]+\s*,\s*[\d.]+\)/, '')} scale(${scaleX}, ${scaleY})`;
  };
  
  const onMouseUp = () => {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  };
  
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
}

关键注意事项 #

• 每次缩放前必须重置transform-origin，否则会沿用之前的原点导致错误
• 旋转后的坐标转换必须基于元素中心，确保缩放逻辑不受旋转角度干扰
• 应用变换时要保留原有位移和旋转属性，避免覆盖之前的操作

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