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

Question

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

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>