Reactjs 反应konva，konva不会绘制模糊图像

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

在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块的外面，并将它应用到两个图像上，则第一次绘制非

有什么想法吗

更新 我已经创建了一个关于这个问题的小演示

来源

现场演示

我还注意到，所有浏览器在这个演示中的工作方式都不同。 如上所述的铬。显示一个图像，另一个仅在刷新后显示。 Firefox不会只在重新加载后才在第一次点击时绘制 边缘浏览器似乎也没有这个问题。很有魅力

---

!!!由于某些原因，在Internet explorer中根本不起作用。

加载映像后，需要应用筛选器和缓存

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节点。不要用新Konva手动创建它们 不要在渲染函数中创建新图像。更新组件时，可能会出现意外行为。在此处查看演示：

---

你能做个演示吗？有一个关于过滤器的教程部分：谢谢你，谢谢你！这就是我要找的。我猜代码的最后一行应该是this.konvaLayer.current.draw；我发现的所有过滤器示例都缺少这一关键事件部分。IE仍然不工作，但出于某些原因。将尝试修复它并更新我的演示源代码。