我最近开始在一个项目中使用 Fabric.js，它很棒。它为 Canvas 提供了一个抽象层，并且每个对象都有一个完整的“对象操作层/掩码”。
我想更进一步，利用它来制作实际的图表，在对象之间建立联系，并让每个对象都有更多的“元数据”。有没有人已经这样做了？ Fabric.js 是正确的选择吗？
关于我将如何在两个对象之间创建“连接器”对象以响应来自它们所附加的对象的事件的任何想法？
最佳答案
这在 fabricjs 中是可能的 - 事实上我做了类似的东西，但更简单。
在我的项目中，我需要实现一条可编辑线，但不是 Fabric 内置线，它可以通过边界框编辑，而是允许您拖动其一端的线，就像在每个矢量绘图中一样申请。
只用一个对象似乎是不可能的，所以我最终创建了三个对象 - 一条线和两端的两个小圆圈。然后我设置了从线到圆以及从圆到线的引用 - 这样我就可以找到附加到我当前移动的对象的所有对象。
现在，在每个对象移动期间，我检查对象是否有任何对附加线/圆的引用，如果有 - 我需要运行特殊的线移动代码来更新所有附加对象。
演示:
您可以在这里找到简单的技术演示:www.drawee.kolenda.me/techdemo .
只需单击“线”，在框架中拖动鼠标，单击“编辑”- 您就可以看到线拖动的效果。您可以拖动线本身或其末端之一。
-
在您的特定情况下，您可能希望禁用连接的选择或拖动，您可能还希望更新连接形状，因此它是某种动态曲线，而不是直线，但我认为核心功能将相同。
元数据:
如果你想添加一些额外的数据，那就再简单不过了——每个 JS 对象都是一个字典，存储键值对，所以你只需要向对象添加另一个键值对。请记住，JS 和 Fabric 在内部使用了一些键名，因此请让您的键名与您已有的不同。我在这个演示中的自定义键名称是“line”、“circle1”和“circle2”——您可以在源代码中找到它们。
关于javascript - 如何使用 Fabric.js 做类似 Visio 的带有连接的绘图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17347216/