需要帮助在 React 中构建响应式画布

Question

我正在使用 React 开发一个类似绘画的应用程序，并且我已经成功实现了画布大小调整。但是，我面临一个问题，即当我调整画布大小时，画布上的绘图无法适当缩放。它们要么消失，要么溢出到画布边界之外。

我尝试过使用 P5 或 konva lib，但也无法解决这个问题。 有人可以告诉我一个调整图纸大小的功能吗？

Answer 1

import React, { useRef, useEffect } from 'react';

function PaintApp() {

  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    
    // Draw some initial lines
    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.lineTo(100, 100);
    ctx.stroke();

    function resizeCanvas() {
      // Resize the canvas to match its container
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;

      // Scale the existing drawings
      const scaleX = canvas.width / canvas.offsetWidth; 
      const scaleY = canvas.height / canvas.offsetHeight;
      ctx.scale(scaleX, scaleY);
    }

    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

    return () => window.removeEventListener('resize', resizeCanvas);

  }, []);

  return <canvas ref={canvasRef} />;

}

要点：

1. 调整大小时，按新尺寸与旧尺寸的比率缩放上下文
2. 这将放大现有绘图以适应新的画布尺寸
3. 确保设置画布宽度/高度以匹配容器尺寸
4. 在 init 和窗口调整大小时调用调整大小处理程序

如果这有帮助或者您有任何其他问题，请告诉我！