fabricjs对角线hovercursor和可选择

Question

我在fabricjs中有一些线，可能是一个角度。我希望用户能够选择它们，但选择轮廓是一个矩形，在行的末端有角。用户应该只能在光标在线上时选择线，或者至少在几个像素内选择线。所以我使用mousemove事件将光标设置在线上，并在点击它时执行其他操作。

但是fabricjs只允许我在selectable为true时设置光标，然后用户在该行周围获得这个蓝色矩形，这没有用。如何摆脱这个矩形，或者当selectable为false时让光标改变？

Answer 1

首先，将perPixelTargetFind和targetFindTolerance添加到fabric.Canvas实例中。

var canvas = new fabric.Canvas('canvas', {
    perPixelTargetFind: true,
    targetFindTolerance: 5
});

然后，将padding添加到fabric.Line实例。

var line = new fabric.Line([50, 50, 250, 250], {
    padding: 5
});

canvas.add(line);

就我所知，targetFindTolerance数值仅受对角线的尊重。就我所知，padding数值仅受水平线的尊重。必须为任何类型的线设置targetFindTolerance和padding以遵守规则。目前还不清楚这是有缺陷还是故意行为。

Answer 2

如果我理解正确的话，这应该让你相当接近：

这是JavaScript代码：

var canvas = new fabric.Canvas('canvas', {
  width: 300,
  height: 300,
  perPixelTargetFind: true,
  selection: false,
  hoverCursor: 'default'
});
line = new fabric.Line([50, 50, 250, 250], {
  strokeWidth: 5,
  stroke: 'black',
  originX: 'center',
  originY: 'center',
  hasControls: false,
  hasBorders: false,
  targetFindTolerance: 8
});
canvas.add(line);

最后是所有重要的JSFiddle，https://jsfiddle.net/rekrah/tvcufesq/。

如果您还有其他问题，请与我们联系。随时乐意为您服务！

Answer 3

尝试将padding和targetFindTolerance添加到line.