加载时显示黑色的 Konva 图像

Question

我正在尝试使用ImageKonva 将网格作为背景并用图案填充它。 问题是当我加载画布时，ImageKonva 看起来完全是黑色的，并且在我添加子元素时它就会显示出来。

import React from 'react'
import { Stage, Layer, Image as ImageKonva } from 'react-konva'

const Canvas = ({ children, width, height, onClick }) => {
  const image = new Image()

   // this hash is the image of a grid
  image.src =   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQoU2NkIAK8e/fuPyMR6hhGFeINJXDwgAhiwhIAOZAl5YYZd5AAAAAASUVORK5CYII='


  return (
    <Stage width={width} height={height}>
        <Layer>
          <ImageKonva
            preventDefault={false}
            width={width / 2}
            height={width / 2}
            fillPatternImage={image}
            onClick={onClick}
          />
          {children}
        </Layer>
    </Stage>
  )
}

我创建了这个代码框，您可以在其中看到问题：https://codesandbox.io/s/angry-river-kszh0?file=/src/App.js

注意：它并不总是可重现的，（无法弄清楚模式是什么）。 有时它不会发生，我需要打开 chrome 的控制台并刷新页面才能实现。

您会看到黑框，它只会在您单击按钮后显示网格。该按钮仅添加一个子元素..从那里，图像将始终显示。此问题仅在第一次加载时发生。

Answer 1

我相信我已经想通了，似乎我没有考虑可以异步添加图像......所以当我加载画布时，图像还没有。

因此，解决方案是通过将onload 方法设置为image 对象来加载图像后才加载ImageKanvas

const Canvas = ({ children, width, height, onClick }) => {
  const [loadGrid, setLoadGrid] = useState(false);
  const image = new Image();

  // this hash is the image of a grid
  image.src =
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQoU2NkIAK8e/fuPyMR6hhGFeINJXDwgAhiwhIAOZAl5YYZd5AAAAAASUVORK5CYII=";

  image.onload = () => {
    setLoadGrid(true);
  };

  return (
    <Stage width={width} height={height}>
      <Layer>
        {loadGrid && (
          <ImageKonva
            preventDefault={false}
            width={width / 2}
            height={width / 2}
            fillPatternImage={image}
            onClick={onClick}
          />
        )}
        {children}
      </Layer>
    </Stage>
  );
};

https://codesandbox.io/s/wild-wind-br2qo?file=/src/App.js