Как использовать Konva Node с ReactJs

Question

Я хочу использовать вложенность узла konva.js в приложении реакции. Мне нужна помощь о том, как его использовать. Заранее спасибо.

Answer 1

Я могу посоветовать вам использовать react-konva библиотека https://github.com/konvajs/react-konva

Примеры с перетаскиваемыми кругами:

import React, { Component } from 'react';
import Konva from 'konva';
import { render } from 'react-dom';
import { Stage, Layer, Circle, Text } from 'react-konva';

class App extends Component {
  handleDragStart = e => {
    e.target.setAttrs({
      scaleX: 1.3,
      scaleY: 1.3
    });
  };
  handleDragEnd = e => {
    e.target.to({
      duration: 0.5,
      scaleX: 1,
      scaleY: 1
    });
  };
  render() {
    return (
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Text text="You can drag a circle" />
          {[...Array(10)].map(i => (
            <Circle 
              key={i}
              x={Math.random() * window.innerWidth}
              y={Math.random() * window.innerHeight}
              radius={20}
              fill="green"
              opacity={0.8}
              draggable
              onDragStart={this.handleDragStart}
              onDragEnd={this.handleDragEnd}
            />
          ))}
        </Layer>
      </Stage>
    );
  }
}

render(<App />, document.getElementById('root'));

Вам нужно добавить react, konva, react-dom а также react-konva зависимости