用於水平/垂直線的FabricJs targetFindTolerance

我正在創建線條並將「perPixelTargetFind」值設置爲true。如果一條線是對角線的，這是完美的，它會在我的targetFindTolerance邊界找到，它目前是20像素。但是，如果一條線是水平或垂直的，則似乎targetFindTolerance不起作用。用於水平/垂直線的FabricJs targetFindTolerance

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

如果您移動鼠標靠近對角線，你能在到達前選擇它20像素，但如果你嘗試同樣與其他兩條線，它不會工作。如果你選擇f.e.水平線並將其旋轉到對角位置，則無法在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並選擇三行。

非常感謝。 :)

來源

2016-11-22 Sophie D

它似乎是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/

來源

2016-11-23 13:51:43 janusz

謝謝您的回答！我正在測試你的解決方法，但是當我在畫布上單擊但沒有選擇任何對象時，最後一行總是被選中，所以你不能點擊畫布而不選擇一個對象，這很可能不起作用在我這樣的項目中。您認爲我應該將問題作爲fabricJS的bug報告嗎？ –

對，我沒有注意到它。我發現了一個解決方法，它在containsPoint中使用內部'isTargetTransparent'函數。查看更新後的答案。它似乎工作正常，但它可能會影響整體性能，因爲FabricJS在'perPixelTargetFind === true'時使用'isTargetTransparent'，所以在這種情況下'isTargetTransparent'函數將爲每個對象調用兩次。無論如何，看到它適合你，是的，請將問題報告給FabricJS團隊。 – janusz

再次感謝您的幫助。你的解決方法幫助了我很多！ :)我已經向FabricJS團隊報告了Bug。 –

用於水平/垂直線的FabricJs targetFindTolerance

回答

相關問題