Question

In this jsfiddle我使用Javascript / Fabric编码了一条折线，该折线的线条可以通过移动交叉点来调整大小（即不作为整个对象按比例拉伸）。在画布上单击几次，您将构建折线，按Esc结束。然后，您可以通过单击任何线条来选择折线，并通过单击画布或其他对象取消选择。

这是问题：选择/取消选择折线是不稳定的。有时，"mouse:down"会返回e.target = undefined，即使我点击一行，相反，当我点击该行外（但不知何故接近该行）时，它会返回e.target = the line object。

这段代码有什么问题？如果代码太长，我会道歉，但是找不到让它更短的方法（如果有人有兴趣实现相同的结果，可以激发一些想法）

相关的javascript：

canvas.observe("mouse:down", function (e) {

    if (drawing)
        drawPoly(e);
    else
        seePolyline(e);
});


var seePolyline = function(e) {

    deselectAll();

    var obj = e.target;  // e.target contains undefined when it should 
                         // contain the clicked object, and the opposite
    if (typeof obj !== 'undefined') {
        var type = obj.get('type');
        if (type === 'rect' && (obj.line1 || obj.line2) || 
            type === 'line' && obj.rect2 ) { 
                var rect = searchFirstRect(obj);
                selectPolyline(rect);
        }
    }

    canvas.renderAll();

};

更新

我相信线路移动时会出现其中一个问题;如果单击该行所在的区域（现在为空画布），则会选择折线。

更新2

我越来越近了;当您更改坐标时，需要调用setCoords()，例如：

if (rect.line1) {
   rect.line1.set({ 'x2': rect.left, 'y2': rect.top });
   rect.line1.setCoords();
}

Updated jsfiddle

持续存在的问题是当我接近线（不在线上）时，点击被解释为点击就在线上。任何想法将不胜感激。

Answer 1

您遇到的问题是因为线条的边界框大于线条。要实际查看正在发生的情况，请将行的selectable属性更改为true。

line = new fabric.Line(coords, {
    fill: 'black',
    stroke: 'black',
    strokeWidth: 3,
    selectable: true
});

现在，当您将鼠标悬停在线条上时，无论您将光标变为手形，都会点击您的折线将被选中的位置。

一个简单的解决方案是Fabric.js提供的名为perPixelTargetFind的属性。只需在创建线条时将其设置为true，只有在单击线条而不是边界框时才会选中它们。

line = new fabric.Line(coords, {
    fill: 'black',
    stroke: 'black',
    strokeWidth: 3,
    selectable: false
});
line.hasControls = line.hasBorders = false;
line.perPixelTargetFind = true;
canvas.add(line);

您可以在此处找到更新的小提琴：http://jsfiddle.net/w86vcyez/5/和此处的文档：http://fabricjs.com/docs/fabric.Object.html#perPixelTargetFind

Fabric：“mouse：down”不返回event.target中的对象

1 个答案: