将 canvas 上的绘图光标更改为 fabric.js

Question

我正在使用 fabric.js 制作绘图工具 canvas。我想在绘图时更改光标，所以我正在使用它：

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

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

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

Answer 1

您可以通过 url 之后的坐标判断命中点的位置：

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

将上面的 x 和 y 替换为与图像匹配的以像素为单位的偏移值。

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

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

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

change drawing cursor on canvas with fabric.js