时间戳

首页 > 解决方案 > React-konva 和 konva 不绘制模糊图像

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

问题描述

应用模糊滤镜时无法在图层上绘制图像。在父组件中，我使用 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 中工作。

标签： reactjskonvajs

解决方案

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

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

推荐阅读