React中HTML Canvas窗口resize后手绘内容未适配问题求助

手绘线条本质是一系列连续坐标点的集合，解决适配问题的核心是让这些坐标点跟随Canvas尺寸的变化做等比例转换，具体可以按以下两种方式处理：

方式一：存储相对坐标（推荐） #

在记录手绘点的时候，不要保存Canvas上的绝对像素值，而是保存相对于当前Canvas宽高的比例值：

• 手绘时，每个点的相对坐标计算为：relX = clientX / canvasWidth，relY = clientY / canvasHeight
• 将这些相对坐标存在React状态中（比如const [freeDrawLines, setFreeDrawLines] = useState([])，每条线对应一个相对点数组）

resize后重绘时，用新的Canvas宽高乘以相对坐标得到实际绘制位置：

// 重绘函数示例
const redraw = () => {
  const ctx = canvasRef.current.getContext('2d');
  ctx.clearRect(0, 0, newWidth, newHeight);
  
  // 遍历所有手绘线条
  freeDrawLines.forEach(line => {
    ctx.beginPath();
    line.forEach((point, index) => {
      const x = point.relX * newWidth;
      const y = point.relY * newHeight;
      if (index === 0) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }
    });
    ctx.stroke();
  });
  
  // 你的矩形、圆形等基础图形重绘逻辑...
};

方式二：基于旧尺寸转换已存的绝对坐标 #

如果已经存储了绝对像素坐标，需要在resize时计算缩放比例，批量转换所有点：

1. 在React状态中额外保存上一次的Canvas尺寸（const [prevSize, setPrevSize] = useState({width: initialWidth, height: initialHeight})）
2. resize时，计算宽高缩放比例并转换坐标：

   const handleResize = () => {
     const newWidth = window.innerWidth;
     const newHeight = window.innerHeight;
     const scaleX = newWidth / prevSize.width;
     const scaleY = newHeight / prevSize.height;
     
     // 转换所有手绘线条的绝对坐标
     const updatedLines = freeDrawLines.map(line => 
       line.map(point => ({
         x: point.x * scaleX,
         y: point.y * scaleY
       }))
     );
     
     setFreeDrawLines(updatedLines);
     setCanvasSize({width: newWidth, height: newHeight});
     setPrevSize({width: newWidth, height: newHeight});
     redraw();
   };
   

关键注意事项 #

• 不要直接修改Canvas的width/height属性后就重绘，必须先完成坐标转换再执行重绘逻辑
• 如果Canvas有padding或border，计算相对坐标时要排除这些额外尺寸，使用Canvas的内部绘图区域尺寸（而非offsetWidth/offsetHeight）

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