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

让我们解决您的问题。

当多个箭头添加到画布时，箭头（或多个箭头）会断裂 - 它们会被卡住＆＃34;出于某种原因。

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

E.g。而不是

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) }); });

为了获得更加无缝的体验，您还需要更改重新计算的调用方式。目前，您只更新连接到您实际移动的矩形线的部分，而不是更新连接的另一半。我通过将to和from数组替换为简单的单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) }); }); }

除此之外，您还有一个未处理的用例：如果您选择一个框，删除它然后单击＆＃34;添加子＆＃34;，则会出现错误。您可以通过简单地在null函数顶部测试addChild来阻止这种情况：

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

综上所述，我创建了an updated fiddle。

fabric.js箭头和箭头旋转

1 个答案: