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

Question

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

在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 块之外并将其应用于两个图像，则第一次绘制非。

有什么想法吗？

更新 我用这个问题创建了一个小演示

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

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

我还注意到，所有浏览器在此演示中的工作方式都不同。 如上所述的铬。显示一张图像，另一张仅在刷新后显示。 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();
  }
}

题外话：

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