React-konva 和 konva 不绘制模糊图像

Question

应用模糊滤镜时无法在图层上绘制图像。在父组件中，我添加了两个带有 konva 图像的组件实例。一种是原样，另一种带有图像模糊滤镜。第一个正确绘制，第二个不显示图像。有趣的是，如果我转到另一条路线并且 return 如果我添加相同的图像，它会正确绘制。

图片添加到componentDidMount:

componentDidMount() {
var img = new Konva.Image({
  image: this.state.imageStateScaled,
  width: 300,
  height: 250
});
let st: Konva.Stage = this.konvaLayer.current.getStage();

if (this.state.blured) {
  img.filters([Konva.Filters.Blur]);
  img.blurRadius(30);
  img.cache({ width: this.konvaLayer.current.getWidth(), height: this.konvaLayer.current.getHeight() });
}

this.konvaLayer.current.add(img);
st.draw();
}

我的渲染函数：

 public render() {
let stageWithImage =
  <Stage ref={this.konvaStage} width={300} height={250}>
    <Layer ref={this.konvaLayer}></Layer>
  </Stage>
return ({ stageWithImage })

}

看起来像是 konva.image.cache() 函数引起的。如果我把它放在 if 块外面，并且它被应用到两个图像，non 是第一次绘制。

有什么想法吗？

更新我已经创建了一个带有问题的小演示

来源https://github.com/CAIIIA/konvaDrawImageIssue

现场演示http://domit.co.uk/demo/index.html

我还注意到所有浏览器在这个演示中的工作方式都不同。 Chrome 如上所述。一张图片显示，另一张仅在刷新后显示。 Firefox 只有在重新加载后才会在第一次点击时绘制 EDGE 浏览器似乎也没有这个问题。像魅力一样工作 !!!由于某种原因根本无法在 Internet Explorer 中工作。

Answer 1

您需要在加载图像后应用滤镜和缓存。

var img = new Konva.Image({
  image: this.props.image,
  width: 300,
  height: 250
});
this.konvaLayer.current.add(img);


this.props.image.onload = () => {
  if (this.props.blurred) {
    img.filters([Konva.Filters.Blur]);
    img.blurRadius(30);
    img.cache({ width: this.konvaLayer.current.getWidth(), height: this.konvaLayer.current.getHeight() });
    this.konvaLayer.current.draw();
  }
}

题外话：

尝试在渲染函数中定义所有 Konva 节点。不要使用 new Konva.Something()
不要在渲染函数中创建 new Image()。更新组件时可能会出现意外行为。在这里查看演示：https://konvajs.github.io/docs/react/Images.html

React-konva 和 konva 不绘制模糊图像

React-konva and konva doesn't draw blurred image

reactjs

konvajs