reactjs - 如何在 ReactJs 中使用 Konva 节点

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