javascript - FabricJs targetFindTolerance用于水平/垂直线

我正在创建行并将“ perPixelTargetFind”值设置为true。如果一条线是对角线，则可以完美工作，可以在我的targetFindTolerance的边界（当前为20像素）中找到它。但是，如果Line是水平或垂直的，则似乎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并选择三行。

非常感谢。 :)

最佳答案

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

关于javascript - FabricJs targetFindTolerance用于水平/垂直线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40744899/