如何将Konva节点与ReactJs一起使用

我想在react应用程序中使用konva.js节点嵌套。我需要关于如何使用它的帮助。

---

提前谢谢。

我可以建议您使用

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'));

import React，{Component}来自'React'；
从“Konva”进口Konva；
从'react dom'导入{render}；
从“react konva”导入{Stage，Layer，Circle，Text}；
类应用程序扩展组件{
handleDragStart=e=>{
e、 target.setAttrs({
scaleX:1.3，
斯卡利：1.3
});
};
handleDragEnd=e=>{
e、 target.to({
持续时间：0.5，
scaleX:1，
斯卡利：1
});
};
render（）{
返回(
{[…数组（10）].map（i=>(
))}
);
}
}
render（，document.getElementById（'root'））；

---

您需要添加

react

，

konva

，

react dom

和

react konva

依赖项

您尝试了什么？这个问题不适合StackOverflow，因为它是“要求我们推荐或查找书籍、工具、软件库、教程或其他非现场资源的问题对于堆栈溢出来说是离题的，因为它们往往会吸引自以为是的答案和垃圾邮件。“所以你最好”相反，描述问题以及迄今为止为解决问题所做的工作