Javascript 库构建拖放界面并用线连接元素

Question

已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足 Stack Overflow guidelines 。目前不接受答案。

---

我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便用事实和引文来回答。

已关闭 8 个月前。

Improve this question

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

我需要能够定义某些元素，并通过选择元素并将它们拖动到 Canvas 上来将它们添加到“ Canvas ”中。

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

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

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

Answer 1

考虑到更复杂的功能集，我选择了 mxgraph (draw.io 库)。它很旧，很重，很复杂，它是用普通的 javascript 编写的，为了使其与 Vue 一起工作，你可能需要自己编写集成。但它确实有效，隧道尽头就有光明。

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

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

总有一个选项可以使用纯 JavaScript 来完成这一切；你有 svg.js、snap.svg 等基本库可以实现这一点。即使使用普通的 JavaScript，通过拖放移动形状也没有问题。但在这种情况下，连接器路由和撤消/重做将由您负责，这有点困难。

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

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