结构：“ mouse：down”未在event.target中返回对象

Question

在这个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();

};

UPDATE

我相信，当生产线移动时就会出现问题之一。 如果单击线条之前的区域（现在是空白画布），则将选择多段线。

更新2

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

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

更新了jsfiddle

仍然存在的问题是，当我靠近线路（不在线路上）时，单击被解释为好像单击在线路本身上。 任何想法将不胜感激。

Answer 1

您面临的问题是因为线条的边界框大于线条。 要实际查看正在发生的情况， selectable lines的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