Question

我一直在尝试使用以下方法来模糊圆圈：

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

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

但是出现此错误：

rect.cahce不是函数

有帮助吗？

Answer 1

如果您使用的是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);

如何在React-Konva中将诸如模糊之类的填充器应用于元素

1 个答案: