用于水平/垂直线的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

回答

相关问题