Fabric："mouse:down" 未在 event.target 中返回对象

Question

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

问题所在：selecting/unselecting 折线不稳定。有时，"mouse:down" returns e.target = undefined 即使我点击了一条线，相反，当我点击线外时它 returns 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();

};

更新

我认为其中一个问题发生在移动线路时；如果您单击线之前所在的区域（现在为空 canvas），则折线为 selected.

更新 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);

您可以在此处找到更新后的 fiddle：http://jsfiddle.net/w86vcyez/5/ and documentation here: http://fabricjs.com/docs/fabric.Object.html#perPixelTargetFind

Fabric："mouse:down" 未在 event.target 中返回对象

Fabric: "mouse:down" not returning object in event.target

javascript

fabricjs