如何使用 Fabric.js 做 Visio 之类的带有连接的绘图? [英] How to use Fabric.js to do Visio like drawings with connections?

问题描述

我最近开始在一个项目中使用 Fabric.js，它很棒.它为画布提供了一个抽象层，并有一个完整的对象操作层/蒙版"伴随每个对象.

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.

我想更进一步，利用它来制作实际图表，在对象之间建立连接，以及每个对象附带更多元数据".有没有人已经这样做了?Fabric.js 是正确的选择吗?

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?

推荐答案

在fabricjs 中是可能的 - 事实上我已经做了类似的事情，但更简单.

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

在我的项目中，我需要实现一条可编辑的线，但不是 Fabric 内置线，它可以通过边界框进行编辑，但允许您拖动其一端的线，就像在每个矢量图中一样申请.

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.

演示:

您可以在此处找到简单的技术演示:www.drawee.kolenda.me/techdemo.

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.

元数据:

如果你想添加一些额外的数据，再简单不过了——每个 JS 对象都是一个字典，存储键值对，所以你只需要向对象添加另一个键值对.请记住，JS 和 Fabric 在内部使用了一些键名，因此请保持您的键名与已有的不同.我在这个演示中的自定义键名是line"、circle1"和circle2"——你可以在源代码中找到它们.

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屋！