[英]Fabric.js - Set cursor to free drawing brush size and colour
Say I have a round solid brush with a size of 10, how can I change the cursor to indicate to the user that's what will be drawn on the canvas? 假设我有一个大小为10的圆形实心画笔,如何更改光标以指示用户将在画布上绘制的内容?
I see these is an option for a freeDrawingCursor
, but that's for regular cursors, eg Crosshair or pointer. 我看到这些是
freeDrawingCursor
的选项,但这适用于常规游标,例如十字准线或指针。
Any ideas? 有任何想法吗?
checking this: 检查这个:
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
It looks like you can define a cursor with a png file. 看起来您可以使用png文件定义游标。
You could create a small temporary canvas of the size of cursor, paint over it with the brush, export as a png dataurl and use as a cursor. 您可以创建一个光标大小的小临时画布,使用画笔在其上绘画,导出为png dataurl并用作光标。
When the user on your web app select a cursor width: - create an offscreen canvas of width and height of brush size - draw a circle of selected width and color - export canvas to dataurl - create an image of width and height of brush size, use dataurl as image source - on image loaded set that as your mouse cursor. 当您的Web应用程序上的用户选择光标宽度时: - 创建宽度和高度为画笔大小的屏幕外画布 - 绘制选定宽度和颜色的圆圈 - 将画布导出到dataurl - 创建画笔大小的宽度和高度的图像,使用dataurl作为图像源 - 在图像加载集上作为鼠标光标。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.