konvajs - 加载时显示黑色的 Konva 图像
问题描述
我正在尝试使用网格作为背景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 的控制台并刷新页面才能实现。
您会看到黑框,它只会在您单击按钮后显示网格。该按钮仅添加一个子元素..从那里,图像将始终显示。此问题仅在第一次加载期间发生。
解决方案
我相信我已经想通了,似乎我没有考虑可以异步添加图像......所以当我加载画布时,图像还没有。
因此,解决方案是通过为对象设置方法来仅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>
);
};
推荐阅读
- metrics - 使用千分尺的 Datadog 事件
- java - Spring Boot 热部署 jar 并取消部署
- haskell - GHC 如何处理核心中的类型类和实例?
- java - XMLEncoder - 这是一个错误还是我错过了什么?
- java - ApiFuture 的完整监听器
使用 Firestore 管理员 - html - 如何在标题中将电子邮件放在电话号码旁边
- swift - 从 firebase 填充包含多个 UILabel 的 UITableViewCell
- spring-boot - Hystrix 断路器不选择 application.yml
- javascript - 按钮上的单击事件似乎没有触发
- python - 将 shapefile 转换为地理坐标