Как применить заливки как размытие к элементу в React-Konva - PullRequest
Новая
       7

Как применить заливки как размытие к элементу в React-Konva

0 голосов
/ 15 сентября 2018

Я пытался получить размытый круг, используя: 

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

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

Но получаю эту ошибку:

rect.cahce не является функцией

Любая помощь?

1 Ответ

0 голосов
/ 16 сентября 2018

Если вы используете 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);
...