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