javascript - Fabric.js - 将光标设置为自由绘图画笔大小和颜色

Question

假设我有一个大小为 10 的圆形实心画笔，我如何更改光标以向用户指示将在 Canvas 上绘制的内容？

我看到这些是 freeDrawingCursor 的一个选项，但那是针对常规游标的，例如十字准线或指针。

有什么想法吗？

Answer 1

检查这个:

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

看起来您可以使用 png 文件定义光标。

您可以创建一个光标大小的临时小 Canvas ，用画笔在其上绘画，导出为 png dataurl 并用作光标。

当用户在您的网络应用程序上选择光标宽度时:- 创建画笔大小的宽度和高度的屏幕外 Canvas - 画一个选定宽度和颜色的圆- 将 Canvas 导出到 dataurl- 创建画笔大小的宽度和高度的图像，使用dataurl作为图像源- 在加载图像时将其设置为鼠标光标。