在 Canvas 上反應 useRef 得到 null 或 undefined

Question

我正在嘗試引用畫布 DOM 元素以使其寬度與其父元素相同，而不會弄亂畫布的比例。 這樣做時，我得到一個Uncaught TypeError: _canvasRef$current.getContext is not a function error 並且不完全確定如何修復它。

我控制台記錄了一些事情只是為了讓應用程序運行，但問題在於useEffect

import SignaturePad from 'react-signature-canvas'

const canvasRef = useRef<HTMLCanvasElement>(null)

useEffect(() => {
    const ctx: CanvasRenderingContext2D | null | undefined =
        canvasRef.current?.getContext('2d')
    const ctxContainer = document.getElementById('ctxContainer')

    console.log('ctx: ', ctx)
    // if (ctx && ctxContainer) {
    //     ctx.style.width = '100%'
    //     ctx.style.height = '100%'
    //     ctx.width = ctxContainer.clientWidth
    // }
}, [])

const save = () => {
    console.log('saved!')
}

console.log('canvasRef: ', canvasRef)

return (
    <div id={`ctxContainer`} className={'signatureInput__option-draw'}>
        <SignaturePad
            ref={canvasRef}
            canvasProps={{
                className: 'signatureInput__option-draw__canvas',
            }}
            onEnd={save}
        />
    </div>
)

Answer 1

嘗試這個。

請注意，您可能仍需要對以下代碼進行一些更改以完全滿足您的全部要求（例如用戶更改屏幕尺寸時的事件處理。）以下代碼將解決您現在面臨的問題。

  useEffect(() => {
    if (canvasRef.current) {
      const canvas = canvasRef.current.getCanvas();
      const ctx = canvas.getContext('2d');

      // do something with the canvas ref
      if (ctx) {
        ctx.canvas.width = window.innerHeight;
        ctx.canvas.height = window.innerHeight;
      }
    }
  }, []);

Answer 2

嘗試使用 getCanvas() 。 我不認為 getContext() 是隨包一起提供的

function App() {
  const canvasRef = React.createRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    console.log(canvas.current);
    const ctx = canvas.getCanvas();
    const ctxContainer = document.getElementById("ctxContainer");

    console.log("ctx: ", ctx);
    if (ctx && ctxContainer) {
      ctx.style.width = "100%";
      ctx.style.height = "100%";
      ctx.width = ctxContainer.clientWidth;
    }
  }, []);

  const save = () => {
    console.log("saved!");
  };

  console.log("canvasRef: ", canvasRef);

  return (
    <div className="App">
      <div id={`ctxContainer`} className={"signatureInput__option-draw"}>
        <SignaturePad
          ref={(ref) => {
            canvasRef.current = ref;
          }}
          canvasProps={{
            className: "signatureInput__option-draw__canvas",
          }}
          onEnd={save}
        />
      </div>
    </div>
  );
}