horizontal/vertical 行的 FabricJs targetFindTolerance

Question

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

这是 jsfiddle 的 link：http://jsfiddle.net/droeqgro/

如果您将鼠标移近对角线，您可以 select 它在到达它之前 20 像素，但如果您尝试对其他两条线进行同样的操作，则它不起作用。如果你 select f.e。水平线并将其旋转到对角线位置，您不能 select 在 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 和 select 三行。

非常感谢。 :)

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/

horizontal/vertical 行的 FabricJs targetFindTolerance

FabricJs targetFindTolerance for horizontal/vertical lines

javascript

frontend

fabricjs