我最近开始将Fabric.js用于项目，这很棒。它为画布提供了一个抽象层，并且每个对象都有一个完整的“对象操作层/掩码”。
我想更进一步，利用它来制作实际的图表，以及对象之间的连接，以及每个对象附带的更多“元数据”。有人已经这样做了吗？ Fabric.js是正确的选择吗？
关于如何在两个对象之间创建“连接器”对象的任何想法，这两个对象响应来自它们所附着的对象的事件？
答案 0 :(得分：8)
有可能在fabricjs中 - 实际上我做了类似的东西，但更简单。
在我的项目中，我需要实现一个可编辑的行，但不是Fabric内置行，它可以通过边界框进行编辑，但是可以拖动其一端的行，就像在每个矢量绘图中一样应用
只用一个物体似乎是不可能的，所以我最终创造了三个物体 - 两端有一条线和两条小圆圈。然后我设置从线到圆以及从圆到线的参考 - 这样我就可以找到附加到我正在移动的对象上的所有对象。
现在，在每个对象移动过程中，我检查对象是否有对附加行/圆的引用，如果有 - 我需要运行特殊的行移动代码来更新所有附加对象。
<强>演示：
您可以在此处找到简单的技术演示：www.drawee.kolenda.me/techdemo。
只需点击“直线”，在框架中拖动鼠标，点击“编辑” - 您就可以在工作中看到线条拖动。您可以拖动线条本身或其中一条线。
在您的特定情况下，您可能希望禁用选择或拖动连接，您可能还想更新连接形状，因此它是某种动态曲线，而不是直线，但我认为核心功能将是相同的。
<强>元数据：
如果你想添加一些额外的数据，它就不会更简单 - 每个JS对象都是一个存储键值对的字典，所以你只需要为对象添加另一个键值对。请记住，JS和Fabric会在内部使用一些键名，因此请保持您的键名与您已有的键名不同。我在此演示中的自定义键名是“line”，“circle1”和“circle2” - 您可以在源代码中找到它们。
答案 1 :(得分：2)
是的，在织物js中是可能的。我刚尝试了一个带有连接器连接盒子的样品。请在这里查看。 http://kpomservices.com/HTML5CanvasCampaign/visual.html
使用连接器创建形状的简单演示。可以使用形状位置轻松创建连接器，并且在移动形状时，在事件处理程序中我们还需要更新连接器的位置。
完整的演示在这里。 http://kpomservices.com/HTML5CanvasCampaign/campaign.html 此处连接器也可以与其他盒子一起移动（拖放）。