fabricjs对角线hovercursor和可选择

时间:2017-04-10 11:17:31

标签: fabricjs

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

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

3 个答案:

答案 0 :(得分:0)

首先,将perPixelTargetFindtargetFindTolerance添加到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数值仅受水平线的影响。必须为任一类型的行设置targetFindTolerancepadding才能遵守规则。目前还不清楚这是否是有缺陷或有意的行为。

答案 1 :(得分:-1)

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

fabricjs no handles

以下是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)

尝试将padding和targetFindTolerance添加到行。padding