如何将模糊填充物应用于React-Konva中的元素

Question

我一直试图通过使用以下方式获得模糊的圆圈：

var circle = <Circle
    width={200}
    fill={'#ff55ff'}
    x={100}
    y={100}
  />;

circle .cahce();
circle .filters([Konva.Filters.Blur]);
circle .blurRadius(10);

但得到这个错误：

react.cache不是一个函数

有帮助吗？

Answer 1

如果您使用React：

此代码将创建“react元素”：

var circle = <Circle
  width={200}
  fill={'#ff55ff'}
  x={100}
  y={100}
/>;

如果你愿意的话，你可以阅读更多关于“反应组分”与“反应元素”的内容。

但shape.cache()，shape.filters([])是Konva节点的方法。如果要访问Konva节点，则需要使用组件引用访问它：

class MyRect extends React.Component {
  componentDidMount() {
    this.rect.cache();
  }
  render() {
    return (
      <Rect
        filters={[Konva.Filters.Noise]}
        noise={1}
        x={10}
        y={10}
        width={50}
        height={50}
        fill="red"
        shadowBlur={10}
        ref={node => {
          this.rect = node;
        }}
      />
    );
  }
}

你可以在这里看到一个演示：https://konvajs.github.io/docs/react/Filters.html

没有反应：

您可以使用以下命令创建圆形节点实例：

var circle = new Konva.Circle({
    radius: 200,
    fill: '#ff55ff',
    x: 100,
    y: 100
});

然后你可以使用它的所有方法：

circle.cache();    // not "cahce"
circle.filters([Konva.Filters.Blur]);
circle.blurRadius(10);