使用fabric.js在画布上更改绘图光标

Question

我正在使用fabric.js制作绘图工具画布。我想在我画画的时候改变光标，所以我正在使用它：

canvas.freeDrawingCursor = 'url('icn_pencil.svg), auto';

这是有效的，我可以看到图像光标。

我的问题是我需要更改图像位置，否则看起来像这样：

Answer 1

您可以使用网址后面的坐标来确定命中点的位置：

canvas.freeDrawingCursor = 'url('icn_pencil.svg) x y, auto';

将上面的x和y替换为与图片匹配的偏移值。

＆＃13;

＆＃13;

var ctx = c.getContext("2d");
c.onmousemove = function(e) {ctx.fillRect(e.clientX - 2, e.clientY - 2, 4, 4)};

＆＃13;

html, body {margin:0}
#c {
  cursor: url(https://i.stack.imgur.com/fp7eL.png) 4 64, auto;
  background:#ddd;
  }

＆＃13;

<canvas id=c width=600 height=600></canvas>

＆＃13;

＆＃13;

＆＃13;