JavaScript库构建拖放接口并使用行连接元素答案

【问题标题】：Javascript Library to build drag and drop interface and connect elements with lineJavaScript库构建拖放接口并使用行连接元素
【发布时间】：2020-07-27 13:25:43
【问题描述】：

我正在寻找可用于构建科学建模应用程序的方法或 Javascript 库。我想这类似于 Visio 等流程图软件的工作方式。添加元素并通过单击和拖动将它们连接起来。

我需要能够定义某些元素并将它们添加到“画布”中，方法是选择元素并将它们拖到画布上。

当我点击一个元素时，我需要能够为该元素设置某些参数。

我还需要能够通过单击一个元素并将一条线拖动到第二个元素来将一个元素连接到另一个元素。

我正在寻找有关最佳 javascript 库或使用方法的建议。我可能会在 Vue.js 中构建应用程序，因为我有一些使用它的经验。

【问题讨论】：

这很有用：github.com/retejs/rete
@Serg，rete 库是否支持自定义（用户定义）形状和撤消/重做？
@Nikolay 我认为它不受支持。当我查看库时，缺乏自定义是我放弃它的原因。要点是最初必须为所有形状提供坐标，这不适合我的用例。最后我切换到 Vis.js 网络

标签： javascript vue.js fabricjs paperjs

【解决方案1】：

考虑到更复杂的功能集，我选择了mxgraph（draw.io 库）。它很旧，很重，很复杂，它是用 vanilla javascript 编写的，要让它与 Vue 一起工作，你可能需要自己编写集成。但它有效，隧道尽头有光。

对我来说最重要的部分是：自定义复杂形状支持（例如，带有组和“句柄” - 您知道，这些黄点用于“调整”Visio 中的某些形状片段）、撤消/重做、保存/加载，打印。

joint.js（现在是“rappid”）可能是我的第二个赌注，如果 mxgraph 不会削减它（不知道它如何比较，但功能列表包括我需要的项目）

也总是可以选择使用纯 javascript 来完成这一切；你有基本的库，如 svg.js、snap.svg 等，可以做到这一点。即使使用纯 JavaScript，也可以通过拖放移动形状。但在这种情况下，连接器路由和撤消/重做将由您承担，这有点困难。

如果您发现比这些选项更好的东西，请告诉我！

顺便说一句，Visio Online 现在根本不支持自定义形状。

【讨论】：