反应- 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块外，并将其应用于两个图像，则首次绘制non。

有什么想法吗？

我已经用这个问题创建了一个小演示

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

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

我还注意到，对于这个演示，所有的浏览器都有不同的工作方式。如我前面所描述的。一个图像显示，另一个只在刷新后显示。火狐一开始并不是在重新加载后才被点击，边缘浏览器似乎也没有这个问题。工作就像魅力！不工作在互联网浏览器，因为任何原因。

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