在React的HTML Canvas中如何保持边框图的上下左右宽度一致？

你遇到的核心问题是直接将边框图整体拉伸到Canvas的宽高，导致边框的边角和边部被不等比例拉伸。当Canvas宽高比与边框原图不一致时，就会出现左右边框和上下边框宽度不均的情况。

解决方案：九宫格缩放（9-slice scaling） #

这是解决边框拉伸变形的标准方案，原理是将边框图分割为9个区域：四个角保持原始大小不拉伸，上下边仅拉伸宽度，左右边仅拉伸高度，中间透明区域自适应拉伸，确保无论Canvas尺寸如何变化，边框粗细始终一致。

具体实现步骤 #

1. 确定边框图固定边距：测量边框原图的左/右边框宽度（记为borderLR）、上/下边框高度（记为borderTB），替换你代码中的魔法数。
2. 分区域绘制边框：按九宫格拆分边框图，分别绘制每个区域，仅对需要拉伸的边做对应方向的缩放。

修改后的React代码 #

// 假设已定义对应useState：const [canvasWidth, setCanvasWidth] = useState(500); const [canvasHeight, setCanvasHeight] = useState(700); const canvasRef = useRef(null);

useEffect(() => {
  const canvas = canvasRef.current;
  if (!canvas) return;
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 封装图片加载为Promise，确保两张图都加载完成再绘制
  const loadImage = (src) => {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.src = src;
      img.onload = () => resolve(img);
      img.onerror = reject;
    });
  };

  Promise.all([loadImage(mainImageSrc), loadImage(borderImageSrc)])
    .then(([mainImage, borderImage]) => {
      // 根据边框图实际尺寸调整这两个值
      const borderLR = 70; // 左右边框宽度
      const borderTB = 60; // 上下边框高度

      // 绘制主图：基于边框边距动态计算位置和大小
      ctx.drawImage(
        mainImage,
        borderLR,
        borderTB,
        canvasWidth - 2 * borderLR,
        canvasHeight - 2 * borderTB
      );

      const borderW = borderImage.width;
      const borderH = borderImage.height;

      // 九宫格绘制边框
      // 左上角
      ctx.drawImage(borderImage, 0, 0, borderLR, borderTB, 0, 0, borderLR, borderTB);
      // 上边中间
      ctx.drawImage(
        borderImage,
        borderLR,
        0,
        borderW - 2 * borderLR,
        borderTB,
        borderLR,
        0,
        canvasWidth - 2 * borderLR,
        borderTB
      );
      // 右上角
      ctx.drawImage(
        borderImage,
        borderW - borderLR,
        0,
        borderLR,
        borderTB,
        canvasWidth - borderLR,
        0,
        borderLR,
        borderTB
      );
      // 左边中间
      ctx.drawImage(
        borderImage,
        0,
        borderTB,
        borderLR,
        borderH - 2 * borderTB,
        0,
        borderTB,
        borderLR,
        canvasHeight - 2 * borderTB
      );
      // 右边中间
      ctx.drawImage(
        borderImage,
        borderW - borderLR,
        borderTB,
        borderLR,
        borderH - 2 * borderTB,
        canvasWidth - borderLR,
        borderTB,
        borderLR,
        canvasHeight - 2 * borderTB
      );
      // 左下角
      ctx.drawImage(
        borderImage,
        0,
        borderH - borderTB,
        borderLR,
        borderTB,
        0,
        canvasHeight - borderTB,
        borderLR,
        borderTB
      );
      // 下边中间
      ctx.drawImage(
        borderImage,
        borderLR,
        borderH - borderTB,
        borderW - 2 * borderLR,
        borderTB,
        borderLR,
        canvasHeight - borderTB,
        canvasWidth - 2 * borderLR,
        borderTB
      );
      // 右下角
      ctx.drawImage(
        borderImage,
        borderW - borderLR,
        borderH - borderTB,
        borderLR,
        borderTB,
        canvasWidth - borderLR,
        canvasHeight - borderTB,
        borderLR,
        borderTB
      );
    })
    .catch((err) => console.error('图片加载失败:', err));
}, [canvasWidth, canvasHeight, mainImageSrc, borderImageSrc]);

// JSX部分保持不变
<div className="w-1/2">
  <canvas
     ref={canvasRef}
     width={canvasWidth}
     height={canvasHeight}
     className="max-w-full aspect-auto"
  ></canvas>
</div>

注意事项 #

• 必须根据你的边框图实际尺寸调整borderLR和borderTB，否则主图与边框的对齐会出现偏差。
• 使用Promise.all确保主图和边框图都加载完成后再绘制，避免因加载顺序导致的绘制异常。
• 替换原有的魔法数为基于边框边距的动态计算，保证在任何Canvas尺寸下，主图都能正确嵌入边框内。

内容的提问来源于stack exchange，提问作者Dominic Lapitan Doms