FabricJs targetFindTolerance für horizontale/vertikale Linien

Question

Ich erstelle Zeilen und setze den Wert "perPixelTargetFind" auf "true". Wenn eine Linie diagonal ist, funktioniert das perfekt, sie wird in der Grenze meiner targetFindTolerance gefunden, die momentan 20 Pixel ist. Aber wenn eine Linie horizontal oder vertikal ist, scheint die targetFindTolerance nicht zu funktionieren.

Hier ein Link zu einem jsfiddle ist: http://jsfiddle.net/droeqgro/

, wenn Sie Ihre Maus in der Nähe der diagonalen Linie bewegen, können Sie es 20 Pixel auswählen, bevor es zu erreichen, aber wenn man das gleiche mit den anderen beiden Linien versuchen, Es wird nicht funktionieren. Wenn Sie z. B. die horizontale Linie und drehen Sie es in eine diagonale Position, Sie können es auch nicht in der 20 Pixel Grenze auswählen.

Hier ist mein Code:

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

Ein Beispiel der Jsfiddle sehen und wählen Sie die drei Linien.

Vielen Dank. :)

Answer 1

Es scheint ein Fehler in FabricJS zu sein. Eine hacky Lösung wäre containsPoint Funktion wie die außer Kraft setzen:

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

aktualisiert Geige Siehe hier: http://jsfiddle.net/droeqgro/3/