我在fabricjs中有一些线,可能是一个角度。我希望用户能够选择它们,但选择轮廓是一个矩形,在行的末端有角。用户应该只能在光标在线上时选择线,或者至少在几个像素内选择线。所以我使用mousemove事件来设置光标,当它点击它时会做其他事情。
但是fabricjs只允许我在selectable为true时设置光标,然后用户在该行周围获得这个蓝色矩形,这没有用。如何摆脱这个矩形,或者当selectable为false时光标会改变?
答案 0 :(得分:0)
首先,将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
才能遵守规则。目前还不清楚这是否是有缺陷或有意的行为。
答案 1 :(得分:-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/。
如果您还有其他问题,请与我们联系。总是很乐意提供帮助!
答案 2 :(得分:-1)