fabric.js 箭头和箭头旋转

Question

我想在 fabric.js 中创建将两个对象连接在一起的箭头。

我在这里有一个 jsFiddle 链接：http : //jsfiddle.net/xvcyzh9p/45/（感谢@gco）。

上面允许您创建两个对象（两个矩形）并用一条线将它们连接在一起。

function addChildLine(options) {
canvas.off('object:selected', addChildLine);

// add the line
var fromObject = canvas.addChild.start;
var toObject = options.target;
var from = fromObject.getCenterPoint();
var to = toObject.getCenterPoint();
var line = new fabric.Line([from.x, from.y, to.x, to.y], {
    fill: 'red',
    stroke: 'red',
    strokeWidth: 5,
    selectable: false
});
canvas.add(line);
// so that the line is behind the connected shapes
line.sendToBack();

// add a reference to the line to each object
fromObject.addChild = {
    // this retains the existing arrays (if there were any)
    from: (fromObject.addChild && fromObject.addChild.from) || [],
    to: (fromObject.addChild && fromObject.addChild.to)
}
fromObject.addChild.from.push(line);
toObject.addChild = {
    from: (toObject.addChild && toObject.addChild.from),
    to: (toObject.addChild && toObject.addChild.to) || []
}
toObject.addChild.to.push(line);

// to remove line references when the line gets removed
line.addChildRemove = function () {
    fromObject.addChild.from.forEach(function (e, i, arr) {
        if (e === line)
            arr.splice(i, 1);
    });
    toObject.addChild.to.forEach(function (e, i, arr) {
        if (e === line)
            arr.splice(i, 1);
    });
}
canvas.addChild = undefined;
}

function addChildMoveLine(event) {
    canvas.on(event, function (options) {
        var object = options.target;
        var objectCenter = object.getCenterPoint();
        // udpate lines (if any)
        if (object.addChild) {
            if (object.addChild.from)
                object.addChild.from.forEach(function (line) {
                    line.set({ 'x1': objectCenter.x, 'y1': objectCenter.y });
                })
                if (object.addChild.to)
                    object.addChild.to.forEach(function (line) {
                        line.set({ 'x2': objectCenter.x, 'y2': objectCenter.y });
                    })
                    }

        canvas.renderAll();
    });
}

我曾尝试查看其他示例以在 fabric.js 中创建箭头，但在 gco 的小提琴中实现一直很痛苦。

我在这方面的最佳尝试可以在这里找到：http : //example.legalobjects.com/

它看起来像这样：

我遇到的一些问题是：

• 箭头没有在正确的方向上移动
• 当多个箭头添加到画布时，箭头（或多个箭头）会断裂 - 由于某种原因，它们会“卡住”。
• 箭头/线不在对象周围移动

添加多个箭头时会发生这种情况：

如果有人有任何想法或可以提供帮助，我将不胜感激！

谢谢。

Answer 1

让我们来看看你的问题。

当多个箭头添加到画布时，箭头（或多个箭头）会断裂 - 由于某种原因，它们会“卡住”。

这是由您使用单个triangle全局变量引起的，这意味着实际上只能有一个三角形。这虽然很容易解决 - 只需替换triangle为line.triangle，以便它成为它所属行的属性。

例如代替

triangle = new fabric.Triangle({

简单地使用

line.triangle = new fabric.Triangle({

并因此替换

line.addChildRemove();
line.remove();
line.triangle.remove();

和

line.triangle.remove();
line.addChildRemove();
line.remove();

箭头没有在正确的方向上移动

这是您的方向逻辑的一个简单缺点。没有任何部分是真正错误的，只是它没有按照您的意愿行事。我将其改写为以下代码段：

object.addChild.to.forEach(function(line) {
    var x = objectCenter.x;
    var y = objectCenter.y;
    var xdis = REC_WIDTH/2 + TRI_WIDTH/2;
    var ydis = REC_HEIGHT/2 + TRI_HEIGHT/2;
    var horizontal = Math.abs(x - line.x2) > Math.abs(y - line.y2);
    line.set({
        'x2': x + xdis * (horizontal ? (x < line.x2 ? 1 : -1) :                      0),
        'y2': y + ydis * (horizontal ?                      0 : (y < line.y2 ? 1 : -1))
    });
    line.triangle.set({
        'left': line.x2, 'top': line.y2,
        'angle': calcArrowAngle(line.x1, line.y1, line.x2, line.y2)
    });
});

其基本思路是，以抵消任何的X或Y坐标，基于X或两个对象Y的距离是否也大。

箭头/线不在对象周围移动。

上面发布的代码段中的另一个逻辑缺陷。使用x2和y2计算三角形是正确的，因为您将其定位为目标矩形的位置。但是，对于线条，您希望根据源矩形的位置进行计算，因此您需要分别使用x1和y1。所以我们可以再次将上面的代码改成：

object.addChild.to.forEach(function(line) {
    var x = objectCenter.x;
    var y = objectCenter.y;
    var xdis = REC_WIDTH/2 + TRI_WIDTH/2;
    var ydis = REC_HEIGHT/2 + TRI_HEIGHT/2;
    var horizontal = Math.abs(x - line.x1) > Math.abs(y - line.y1);
    line.set({
        'x2': x + xdis * (horizontal ? (x < line.x1 ? 1 : -1) :                      0),
        'y2': y + ydis * (horizontal ?                      0 : (y < line.y1 ? 1 : -1))
    });
    line.triangle.set({
        'left': line.x2, 'top': line.y2,
        'angle': calcArrowAngle(line.x1, line.y1, line.x2, line.y2)
    });
});

为了获得更无缝的体验，您还需要更改调用重新计算的方式。目前，您只更新连接到您实际移动的矩形的那部分线，而不是连接的另一半。
我通过用一个简单的单个数组替换toandfrom数组来实现这一点，并向每个行元素lines添加属性fromObject和toObject- 在每次更新时，行的两端都会更新，如下所示：

if (object.addChild && object.addChild.lines) {
    object.addChild.lines.forEach(function(line) {
        var fcenter = line.fromObject.getCenterPoint(),
            fx = fcenter.x,
            fy = fcenter.y,
            tcenter = line.toObject.getCenterPoint(),
            tx = tcenter.x,
            ty = tcenter.y,
            xdis = REC_WIDTH/2 + TRI_WIDTH/2,
            ydis = REC_HEIGHT/2 + TRI_HEIGHT/2,
            horizontal = Math.abs(tx - line.x1) > Math.abs(ty - line.y1)
        line.set({
            'x1': fx,
            'y1': fy,
            'x2': tx + xdis * (horizontal ? (tx < line.x1 ? 1 : -1) :                       0),
            'y2': ty + ydis * (horizontal ?                       0 : (ty < line.y1 ? 1 : -1)),
        });
        line.triangle.set({
            'left': line.x2, 'top': line.y2,
            'angle': calcArrowAngle(line.x1, line.y1, line.x2, line.y2)
        });
    });
}

除此之外，您还有一个未处理的用例：如果您选择一个框，将其删除，然后单击“添加子项”，则会出现错误。您可以通过简单地null在addChild函数顶部进行测试来防止这种情况，如下所示：

if(canvas.getActiveObject() == null)
{
    return;
}

有了以上所有内容，我创建了一个更新的 fiddle。