fabricjs对角线悬停光标和可选答案

【问题标题】：fabricjs diagonal lines hovercursor and selectablefabricjs对角线悬停光标和可选
【发布时间】：2018-02-02 01:14:59
【问题描述】：

我在 fabricjs 中有可能有角度的线条。我希望用户能够选择它们，但选择轮廓是一个矩形，线的末端有角。用户应该只能在光标位于线条上方时选择线条，或者至少在线条的几个像素内。所以我使用 mousemove 事件来设置光标越过线，当他点击它时会做其他事情。

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

【问题讨论】：

标签： fabricjs

【解决方案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 都必须设置为任一类型的行以遵守规则。目前尚不清楚这是有问题还是故意行为。

【讨论】：

【解决方案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/。

如果您还有其他问题，请告诉我。总是乐于提供帮助！

【讨论】：

谢谢，刚刚看到你的回答。对于行，我添加了 hoverCursor: 'crossHair'。然后十字准线显示光标正好在线上的时间。但是改变 targetFindTolerance 的值似乎并没有做任何事情——光标仍然必须准确地越过这条线。有什么想法吗？
targetFindTolerance 应该是画布的属性，而不是线条。无论如何，如果线条是垂直或水平的，我需要添加填充，因为边界矩形只有一个像素宽，而 targetFindTolerance 没有帮助。但问题是我使用了两个角矩形，然后它们位于离线末端一定距离的地方。我可以在保留填充的同时重置这些吗？
我可以试试这个“line.oCoords.tl.setX(100);”但似乎没有任何效果。

【解决方案3】：

尝试将填充和 targetFindTolerance 添加到 line.

【讨论】：

谢谢。我找不到任何有关添加填充的文档。这是如何工作的？