Konvajs/Vue-Konva使用连接器动态连接形状

2022-02-25 00:00:00 vue.js nuxt.js konvajs konva vue-konva
我在Vuejs/Nuxt应用程序中使用Konvajs/Vue-Konva。我使用Konva在运行时动态创建Rect形状。现在我想用某种Connectors把不同的Rect Shapes连接起来,这样我就可以有source RectTarget Rect的逻辑,来建立Parent-Child的关系。

我正在使用与shapes相同的方法创建connectors,但由于某些原因,它未按预期工作。

我已在CodeSandBox中添加了我的代码示例。

我希望构建类似这样的东西,在那里我可以绘制Nodes/Shapes,并使用带有标签的某种Connectors将它们连接起来。有人能告诉我如何添加Connectors并构建逻辑以理解使用Vue-Konva创建的Rect/Shape吗?


解决方案

发布,因为它可能对其他人有用:

我尝试了很多库,如KonvajsPlumb Community EditionFlowchart-vueVue-konvaBPMN,但由于某些原因,没有一个库能按我希望的方式运行。

最后,我找到了可用于绘制NodesConnections的Drawflow库。

相关文章