使用Fabric JS连接两个对象 [英] Connect two objects using fabric js

问题描述

我目前有一个画布应用程序，可以在其中添加对象（形状）。这是我的 FIDDLE 。您基本上单击新的模拟将初始化画布，然后可以添加圆形或矩形。

I currently have a canvas application where I can add objects(shapes). Here is my FIDDLE. You basically click on new simulation which will initialize the canvas, then you can add a circle or rectangle.

我正在尝试添加一个名为添加子项的功能，您可以在其中单击某个对象（形状），然后单击添加子项并添加另一个对象（形状），然后都用一条线链接。类似于 DEMO 。

I am trying to add a feature called "Add child" where you can click on some object (shape) then click add child and add another object(shape) and they are both linked with a line. Something similar to this DEMO.

我认为此功能的伪代码如下所示：

I figured the pesudo code for this feature would go something like as following:

function addChild(){

    get getActiveObject
    draw a line/arrow connect it with getActiveObject
    draw object connected with line
    should be able to move it / strecth it around


}

我想知道这是否可行以及如何开始。

I was wondering if this is possible and how to start. Please advice.

推荐答案

您需要收听 object：selected 添加连接线的事件和 object：moving 事件以更新线的坐标。

You need to listen for the object:selected event to add the connecting line and the object:moving event to update the line coordinates.

// function for drawing a line
function makeLine(coords) {
    return new fabric.Line(coords, {
        fill: 'red',
        stroke: 'red',
        strokeWidth: 5,
        selectable: false
    });
}

var canvas; 
window.newAnimation = function(){
   canvas = new fabric.Canvas('canvas');

   var selectedElement = null;
   canvas.on('object:selected', function(options) {
       // we are doing t oadd a connection
       if (canvas.connect) {
           canvas.connect = false;
           var from = selectedElement.getCenterPoint();
           var to = options.target.getCenterPoint();
           var line = makeLine([from.x, from.y, to.x, to.y]);
           canvas.add(line);

           // these take care of moving the line ends when the object moves
           selectedElement.moveLine = function() {
               var from = selectedElement.getCenterPoint();
               line.set({ 'x1': from.x, 'y1': from.y });
           };
           options.target.moveLine = function() {
               var to = options.target.getCenterPoint();
               line.set({ 'x2': to.x, 'y2': to.y });
           };
       }
       selectedElement = options.target;
   });

   canvas.on('object:moving', function(e) {
        e.target.moveLine();
        canvas.renderAll();
  });
}

window.addChild = function() {
   canvas.connect = true;
}

window.addChild会跟踪是否单击了Add Child（并且应该单击将其添加到按钮的onclick上），以便下一个 selected对象可以画线（否则将仅跟踪当前选定的元素）

The window.addChild keeps track of the whether Add Child was clicked (and should be added to the onclick for the button) so that the next object:selected can draw the line (otherwise it simply keeps track of the currently selected element)

<button onClick="addChild()">Add Child</button>

请注意，要获得完整的解决方案，您需要能够取消添加子项，您可能想要处理对象调整大小（当前，该行在您移动对象时更新，但在调整对象大小时不更新）

Note that for a full solution you need to be able to cancel out of an Add Child and you probably want to handle object resizing (currently the line updates when you move the object but does not when you resize the object)

小提琴- http://jsfiddle.net/ctcdaxop/

这篇关于使用Fabric JS连接两个对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！