javascript - 水平/垂直线的 FabricJs targetFindTolerance

Question

我正在创建线条并将“perPixelTargetFind”值设置为 true。如果一条线是对 Angular 线，这很完美，它会在我的 targetFindTolerance 的边界中找到，该边界当前为 20 像素。但是，如果一条线是水平或垂直的，则 targetFindTolerance 似乎不起作用。

这是 jsfiddle 的链接:http://jsfiddle.net/droeqgro/

如果您将鼠标移近对 Angular 线，您可以在到达它之前将其选中 20 像素，但如果您尝试对其他两条线进行同样的操作，它将不起作用。如果您选择 f.e.水平线并将其旋转到对 Angular 线位置，您不能在 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 中的一个错误。一个 hacky 的解决方案是像这样覆盖 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));

请在此处查看更新的 fiddle :http://jsfiddle.net/droeqgro/3/