如何使用Fabric.js来做Visio如同连接的图纸？ [英] How to use Fabric.js to do Visio like drawings with connections?

问题描述

我最近开始使用Fabric.js作为一个项目，它是伟大的。它为画布提供了一个抽象层，并且每个对象都有一个完整的对象操作层/掩码。

我想进一步并利用它来创建实际的图，对象之间的连接，以及更多的元数据伴随每个对象。有没有人已经这样做了？ Fabric.js是否是正确的选择？

关于我如何在两个对象之间创建连接器对象以响应它们附加的对象的事件的任何想法？

解决方案

这可能是在fabricjs - 事实上我做了类似的东西，但更简单。

在我的项目中，我需要实现一个可编辑的行，但不是一个可以通过边界框编辑的Fabric内置行，而是允许您拖动其中一个末端的行，如在每个矢量绘图应用程序中。

这似乎是不可能只有一个对象，所以我最终创建三个对象 - 一行和两个小圆圈在末端。然后我设置了从线到圆和从圆到线的引用 - 这种方式我可以找到所有对象附加到我正在移动的对象。

现在，在每个对象移动期间我检查对象是否有任何引用连接的线/圆，如果它有 - 我需要运行特殊的线移动代码，将更新所有附加对象。

演示：

您可以在这里找到简单的技术演示： www.drawee.kolenda.me/techdemo 。

只需点击线，将鼠标拖动一个框架，点击编辑 - 你可以看到工作中的线拖动。

-

在您的特定情况下，可能想要禁用选择或拖动你的连接，你可能还想更新连接形状，所以它是一种动态曲线，而不是一条直线，但我认为核心功能将是一样的。 p>

元数据：

如果您想添加一些附加数据，更简单 - 每个JS对象都是一个存储键值对的字典，因此您只需要向对象添加另一个键值对。只要记住，JS和Fabric在内部使用一些键名，所以保持你的键名不同于你已经有。我在此演示中的自定义键名称是line，circle1和circle2 - 您可以在源代码中找到它们。

I've recently started to use Fabric.js for a project and it's great. It provides an abstraction layer for the canvas, and has an entire 'object manipulation layer/mask' that accompanies each object.

I'd like to take it a step further and leverage it to make actual diagrams, with connections between objects, as well as have more 'metadata' that accompanies each object. Has anyone already done this already? Is Fabric.js the right choice for this?

Any thoughts on how I would approach creating 'connector' objects between two objects that respond to events from the objects they're attached to?

解决方案

It's possible in fabricjs - in fact I've made something similar, but much simpler.

In my project I needed to implement an editable line, but not a Fabric built-in line, which is editable by a bounding box, but the line that will allow you to drag one of its ends, like in every vector drawing application.

It seems to be impossible with just one object, so I ended up creating three objects - one line and two small circles at the ends. Then I set up the references from line to circles and from circles to line - this way I can find all objects attached to the object I'm currently moving.

Now, during every object move I check if the object have any references to attached line/circle and if it has - I need to run special line-moving code that will update all attached objects.

Demo:

You can find simple tech-demo here: www.drawee.kolenda.me/techdemo.

Just click "Line", drag your mouse in a frame, click "Edit" - and you can see line dragging at work. You can drag the line itself, or one of its ends.

-

In your specific situation you'll probably want to disable selection or dragging of your connections, you may also want to update connection shape, so it's some kind of a dynamic curve, instead of a straight line, but I think that the core functionality will be the same.

Metadata:

If you want to add some additional data it can't be simpler - every JS object is a dictionary, that stores key-value pairs, so you just need to add another key-value pair to the object. Just keep in mind that JS and Fabric uses some key names internally, so keep your key names different than what you already have. My custom key names in this demo were "line", "circle1" and "circle2" - you may find them in the source code.

这篇关于如何使用Fabric.js来做Visio如同连接的图纸？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！