时间戳

首页 > 解决方案 > 如何根据父 div 元素调整画布大小（反应）？

javascript - 如何根据父 div 元素调整画布大小（反应）？

问题描述

我正在尝试调整 div 容器内的画布大小。目前，div容器很大，canvas是里面的蓝色框，我希望canvas占据整个灰色框。画布图片

这是我的画布功能

function Canvas() {
  const canvasRef = useRef(null);
  const contextRef = useRef(null);
  const [isDrawing, setIsDrawing] = useState(false);

  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext("2d");
    context.scale(1, 1);
    context.lineCap = "round";
    context.strokeStyle = "white";
    context.linewidth = 5;
    contextRef.current = context;
  }, []);
  const startDrawing = ({ nativeEvent }) => {
    const { offsetX, offsetY } = nativeEvent;
    contextRef.current.beginPath();
    contextRef.current.moveTo(offsetX, offsetY);
    setIsDrawing(true);
  };

  const finishDrawing = () => {
    contextRef.current.closePath();
    setIsDrawing(false);
  };

  const draw = ({ nativeEvent }) => {
    if (isDrawing) {
      const { offsetX, offsetY } = nativeEvent;
      contextRef.current.lineTo(offsetX, offsetY);
      contextRef.current.stroke();
    } else {
      return;
    }
  };
  return (
    <div className="canvas">
      <div className="canvas__header">
        <h1 className="word">Random Word</h1>
      </div>
      <div className="canvas__body">
        <canvas
          onMouseDown={startDrawing}
          onMouseUp={finishDrawing}
          onMouseMove={draw}
          ref={canvasRef}
        ></canvas>
      </div>
    </div>
  );
}

这是画布的 .css 文件，如果我将宽度和高度设置为 100%，画布会变得模糊并溢出 div 容器框。

.canvas {
  flex: 0.6;
  display: flex;`enter code here`
  flex-direction: column;
}

.canvas__header {
  padding: 20px;
  background-color: #1b1b1b;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(126, 255, 158, 0.1);
  max-height: 5vh !important;
  min-height: 5vh !important;
}

.canvas__header > .word {
  color: #7eff9e;
  font-size: 20px;
}

.canvas__body {
  background-color: #242124;
  flex: 1;
}

.canvas__body > canvas {
  background-color: blue;
}

标签： javascripthtmlcssreactjscanvas

解决方案

我可以通过在 useEffect 函数中添加这 4 行代码来解决这个问题：

canvas.style.width = "100%";
canvas.style.height = "100%";
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

推荐阅读