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

Konvajs/Vue-Konva connect the shapes using the connector dynamically(Konvajs/Vue-Konva使用连接器动态连接形状)

本文介绍了Konvajs/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库。

这篇关于Konvajs/Vue-Konva使用连接器动态连接形状的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:Konvajs/Vue-Konva使用连接器动态连接形状

基础教程推荐