
在本教程中,我们将使用 FabricJS 创建一个带有帮助光标悬停在对象上的矩形。 “help”是可用的本机光标样式之一,也可以在 FabricJS 画布中使用。 FabricJS 提供了各种类型的光标,例如默认、全滚动、十字准线、列调整大小、行调整大小等,它们实际上在幕后重用了本机光标。 hoverCursor 属性设置光标悬停在画布对象上时的样式。
语法
new fabric.Rect({ hoverCursor: String }: Object)参数
选项(可选) - 此参数是一个提供额外自定义的对象到我们的矩形。使用此参数,可以更改与 hoverCursor 属性相关的对象的属性,例如颜色、光标、描边宽度和许多其他属性。
hoverCursor - 此属性接受一个字符串,它确定悬停在画布对象上时使用的光标的名称。使用它,我们可以设置将鼠标悬停在画布上的此矩形对象上时的默认光标值。
选项键
示例 1
传递hoverCursor类的关键
默认情况下,当我们将鼠标悬停在画布中的矩形对象上时,光标类型为“移动”。让我们看一个使用 创建画布的代码示例>help 将光标悬停在 FabricJS 中的矩形对象上。
Passing the hoverCursor Key to the class
Hover over the rectangle to see the help cursor
示例 2
证明这仅影响实例
在此示例中,我们传递 hoverCursor 键到矩形类,这意味着画布中的每个对象的 hoverCursor 属性都不会更改。仅针对该单个对象发生更改。下面的代码示例对此进行了说明 -
Demonstrating that it affects the instance only
Hover over the rectangle objects and observe that the help cursor applies to the left object only. We have not used the hoverCursor property on the right object.









