Fabric.js 画布 defaultCursor 属性介绍

简介

Fabric.js 是一个强大的 JavaScript 库，用于创建交互式图形、动画和其他视觉效果。该库包括一个能够操作画布、对象、组、事件和其他元素的完整 API。其中，defaultCursor 属性可以用来设置画布的默认光标类型。

语法

canvas.defaultCursor = 'auto' | 'default' | 'none' | 'context-menu' | 'help' | 'pointer' | 'progress' | 'wait' | 'cell' | 'crosshair' | 'text' | 'vertical-text' | 'alias' | 'copy' | 'move' | 'no-drop' | 'not-allowed' | 'e-resize' | 'n-resize' | 'ne-resize' | 'nw-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'w-resize' | 'ew-resize' | 'ns-resize' | 'nesw-resize' | 'nwse-resize' | 'col-resize' | 'row-resize' | 'all-scroll' | 'zoom-in' | 'zoom-out' | 'grab' | 'grabbing';

包含 36 种选项，以逗号分隔。

属性值

• auto：自动选择适合当前上下文的光标。
• default：默认的光标。通常是个箭头。
• none：没有光标（通常隐藏）。
• context-menu：呼出上下文菜单的光标。
• help：带问号的光标，用于指示帮助功能。
• pointer：表示链接的光标。
• progress：表示操作正在进行，而且用户需要等待。
• wait：表示正在处理待定事项(打字、形状缩放、etc)的光标。
• cell：表示单元格的光标。
• crosshair：十字光标。
• text：标识光标放在文本上所做动作的光标。
• vertical-text：标识垂直文本上的光标。
• alias：表示被拖动的对象是用作链接的光标。
• copy：表示拖动的对象将被复制的光标。
• move：表示允许拖动的光标。
• no-drop：不允许放下的光标。
• not-allowed：拒绝光标。
• e-resize：水平调整大小的光标（通常在东侧）。
• n-resize：垂直调整大小的光标（通常在北侧）。
• ne-resize：水平及垂直调整大小的光标（通常在东北侧）。
• nw-resize：水平及垂直调整大小的光标（通常在西北侧）。
• s-resize：垂直调整大小的光标（通常在南侧）。
• se-resize：水平及垂直调整大小的光标（通常在东南侧）。
• sw-resize：水平及垂直调整大小的光标（通常在西南侧）。
• w-resize：水平调整大小的光标（通常在西侧）。
• ew-resize：水平调整大小的光标。
• ns-resize：垂直调整大小的光标。
• nesw-resize：调整大小的光标（通常在东北至西南之间）。
• nwse-resize：调整大小的光标（通常位于西北至东南之间）。
• col-resize：水平调整大小的光标。
• row-resize：垂直调整大小的光标。
• all-scroll：移动图标（通常是带箭头的四向箭头）。
• zoom-in：放大图标（通常是加号）。
• zoom-out：缩小图标（通常是减号）。
• grab：表示图片、地图等可拖动物件的光标。
• grabbing：表示当鼠标按住了grab光标并开始拖动时的光标变化。

示例代码

const canvas = new fabric.Canvas('canvas');
canvas.defaultCursor = 'pointer';

结论

defaultCursor 属性为画布提供了更多显示样式和交互功能的光标样式选项。通过设置不同的光标样式，我们可以为用户提供更好的视觉反馈，从而使用户体验更佳。