fabricjs斜线hovercursor和可选

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

但是fabricjs只允许我在可选择的情况下设置光标，然后用户在该行周围获得这个蓝色的矩形，这没有帮助。我该如何摆脱这个矩形，或者在可选择的时候改变光标为假？

来源

2017-04-10 Robert U

-1

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

这里的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/。

让我知道你是否还有其他问题。总是乐于帮助！

来源

2017-04-10 18:11:28

谢谢，只是看到了你的答案。对于我添加hoverCursor：'crossHair'。然后当光标正好在线上时，十字线显示出来。但改变targetFindTolerance的价值似乎没有任何作用 - 光标仍然必须完全在线上。有什么想法吗？ –

targetFindTolerance应该是画布的属性，而不是行。无论如何，如果线是垂直或水平的，我需要添加填充，因为边界矩形否则只有一个像素宽，targetFindTolerance不起作用。但问题在于我使用了两个角矩形，然后这些矩形位于距线末端一段距离处。我可以在保持填充的情况下重置这些吗？ –

我可以试试这个“line.oCoords.tl.setX（100）;”但它似乎没有任何影响。 –

-1

尝试添加填充和targetFindTolerance行。

来源

2017-04-11 11:48:16

谢谢。我无法找到添加填充的任何文档。这个怎么用？ –

docs - http://fabricjs.com/docs/fabric.js.html#line12077 –

首先，将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设置为符合规则的任一类型的行。目前还不清楚这是错误的还是故意的行为。

来源

2018-02-01 16:48:54 maxhud

fabricjs斜线hovercursor和可选

回答

相关问题