垂直/水平線的FabricJs targetFindTolerance

Question

我正在創建行並將“ perPixelTargetFind”值設置為true。 如果一條線是對角線，則可以完美工作，可以在我的targetFindTolerance的邊界（當前為20像素）中找到它。 但是，如果Line是水平或垂直的，則似乎targetFindTolerance不起作用。

這是jsfiddle的鏈接： http : //jsfiddle.net/droeqgro/

如果將鼠標移到對角線附近，則可以在到達對角線之前選擇它20像素，但是如果您對其他兩條線嘗試相同的操作，則它將不起作用。 如果選擇水平線並將其旋轉到對角線位置，則不能在20像素邊界中選擇它。

這是我的代碼：

var canvas  = new fabric.Canvas('c', {
    targetFindTolerance: 15
});

/*_____________Adding shapes_______________*/
canvas.add(new fabric.Line([50, 100, 200, 200], {
  left: 50,
  top: 50,
    stroke: 'black',
    perPixelTargetFind: true,
  strokeWidth: 5
}));

canvas.add(new fabric.Line([50, 100, 200, 100], {
  left: 50,
  top: 250,
    stroke: 'green',
    perPixelTargetFind: true,
  strokeWidth: 5
}));


canvas.add(new fabric.Line([50, 100, 50, 200], {
  left: 140,
  top: 350,
    stroke: 'green',
    perPixelTargetFind: true,
  strokeWidth: 5
}));

有關示例，請參見Jsfiddle並選擇三行。

非常感謝。 :)

Answer 1

這似乎是FabricJS中的錯誤。 一個駭人聽聞的解決方案是重寫此類的containsPoint函數：

function fakeContainsPointFunction(point) { 
  var isTransparent = canvas.isTargetTransparent(this, point.x, point.y);
  return !isTransparent; 
}

canvas.item(1).containsPoint = fakeContainsPointFunction.bind(canvas.item(1));
canvas.item(2).containsPoint = fakeContainsPointFunction.bind(canvas.item(2));

在此處查看更新的小提琴： http : //jsfiddle.net/droeqgro/3/