Question

我正在创建行并设置＆＃34; perPixelTargetFind＆＃34;值为true。如果一条线是对角线，这是完美的，它可以在我的targetFindTolerance的边界找到，它目前是20像素。但是如果一条线是水平的或垂直的，看起来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并选择三行。

非常感谢。：）

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));

请在此处查看更新的小提琴：http://jsfiddle.net/droeqgro/3/

FabricJs对于水平/垂直线的targetFindTolerance

1 个答案: