Question

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

图像已添加到componentDidMount中：

if(p.getLocation().getWorld().getBlock(0,0,0).getTyp() == Material.AIR){
//Check for air in the players world at 0,0,0
}

我的渲染功能：

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();
}

}

它似乎是由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不会绘制模糊的图像

1 个答案: