Konva Изображение отображается черным при загрузке - PullRequest
Новая
       106

Konva Изображение отображается черным при загрузке

0 голосов
/ 06 мая 2020

Я пытаюсь использовать сетку в качестве фона, используя ImageKonva и заполняя ее узором. Проблема в том, что когда я загружаю холст, ImageKonva выглядит полностью черным, и он появляется, как только я добавляю дочерние элементы. https://codesandbox.io/s/angry-river-kszh0?file= / src / App. js

Примечание: это не всегда воспроизводимо (не могу понять, что это за шаблон). Иногда этого не происходит, и мне нужно открыть консоль chrome и обновить sh страницу, чтобы это произошло.

Вы увидите черный ящик, и он покажет только сетка после нажатия кнопки. Кнопка добавляет только дочерний элемент ... оттуда всегда будет отображаться изображение. Эта проблема возникает только при первой загрузке.

1 Ответ

0 голосов
/ 06 мая 2020

Кажется, я понял это, кажется, я не учел, что изображение можно добавить асинхронно ... поэтому, когда я загружаю холст, изображения еще нет.

Итак решение состоит в том, чтобы загружать ImageKanvas только после загрузки изображения с помощью установки метода onload для объекта image 

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

...