React+HTML5 Canvas图片旋转功能异常问题求助

核心问题分析 #

旋转时先偏移再旋转、旋转后无法选中，本质是旋转基点错误和旋转后位置/选中逻辑未适配旋转状态导致的。下面针对handleRotate函数及关联逻辑给出具体修复步骤：

1. 修正旋转时的偏移问题 #

旋转必须以图片中心为原点，错误的变换顺序会导致偏移。调整handleRotate中的Canvas绘制逻辑：

// 绘制旋转后的图片时，严格遵循「平移到中心 → 旋转 → 平移回原位置」的顺序
const drawRotatedImage = (ctx, img, x, y, width, height, rotation) => {
  const centerX = x + width / 2;
  const centerY = y + height / 2;
  
  ctx.save();
  // 先把坐标系移到图片中心
  ctx.translate(centerX, centerY);
  // 应用旋转角度（转弧度）
  ctx.rotate((rotation * Math.PI) / 180);
  // 坐标系移回原位置
  ctx.translate(-centerX, -centerY);
  // 绘制图片
  ctx.drawImage(img, x, y, width, height);
  ctx.restore();
};

同时，拖动计算角度时，要基于图片中心计算鼠标的相对角度，而非Canvas原点：

// 鼠标拖动时计算旋转角度的逻辑
const handleRotateMouseMove = (e) => {
  if (!rotateState.isRotating) return;
  const { x, y, width, height } = currentImg;
  const centerX = x + width / 2;
  const centerY = y + height / 2;
  
  // 计算鼠标相对于图片中心的坐标
  const mouseRelX = e.clientX - centerX;
  const mouseRelY = e.clientY - centerY;
  // 计算当前鼠标对应的角度
  const currentMouseAngle = Math.atan2(mouseRelY, mouseRelX) * 180 / Math.PI;
  // 最终旋转角度 = 初始角度 + 鼠标拖动的角度差
  const newRotation = rotateState.initialAngle + (currentMouseAngle - rotateState.initialMouseAngle);
  
  // 更新图片的旋转状态
  setCurrentImg(prev => ({ ...prev, rotation: newRotation }));
};

2. 修复旋转后的位置记录与选中问题 #

旋转后原有的x/y坐标不再能准确表示图片的实际区域，需要维护包含旋转状态的图片数据，并修改选中判断逻辑：

• 维护图片状态时，新增rotation字段：

  // 图片状态示例
  const [currentImg, setCurrentImg] = useState({
    x: 0,
    y: 0,
    width: 200,
    height: 200,
    rotation: 0, // 新增旋转角度字段
    img: null
  });
  

• 选中判断时，把鼠标坐标逆变换到图片的局部坐标系（抵消旋转影响），再判断是否在原矩形内：

  const isImgClicked = (mouseX, mouseY) => {
    const { x, y, width, height, rotation } = currentImg;
    const centerX = x + width / 2;
    const centerY = y + height / 2;
    const rad = (rotation * Math.PI) / 180;
    
    // 逆变换：将鼠标坐标转换为图片未旋转时的局部坐标
    const dx = mouseX - centerX;
    const dy = mouseY - centerY;
    const localX = dx * Math.cos(rad) + dy * Math.sin(rad);
    const localY = -dx * Math.sin(rad) + dy * Math.cos(rad);
    
    // 判断是否在原矩形范围内
    return localX >= -width/2 && localX <= width/2 && localY >= -height/2 && localY <= height/2;
  };
  

3. 完善旋转交互的状态控制 #

在旋转的鼠标按下事件中，记录初始状态，避免拖动时的突兀偏移：

const handleRotateMouseDown = (e) => {
  const { x, y, width, height, rotation } = currentImg;
  const centerX = x + width / 2;
  const centerY = y + height / 2;
  const mouseRelX = e.clientX - centerX;
  const mouseRelY = e.clientY - centerY;
  
  setRotateState({
    isRotating: true,
    initialAngle: rotation,
    // 记录鼠标初始的相对角度
    initialMouseAngle: Math.atan2(mouseRelY, mouseRelX) * 180 / Math.PI
  });
};

// 鼠标松开时结束旋转
const handleRotateMouseUp = () => {
  setRotateState(prev => ({ ...prev, isRotating: false }));
};

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