使用 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图像匹配的像素中的偏移值替换和上面。

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

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;
  }