当前位置: > > > Fabric.js - 改变鼠标指针样式(鼠标手型、光标样式)

Fabric.js - 改变鼠标指针样式(鼠标手型、光标样式)

默认情况下,当我们鼠标在画布上时显示的是普通的箭头形状:

而当我们将鼠标移动到某个对象上时,光标则变成十字箭头样式(表示可拖动):
下面演示如何修改这个默认的光标样式。

一、统一设置光标样式

1,基本介绍

通过 canvas 对象的光标相关属性可以对所有的指针样式进行统一设置:
  • defaultCursor:默认光标,即鼠标在画布上的样式(默认值:default
  • hoverCursor:鼠标移动到对象上的样式(默认值:move
  • moveCursor:对象拖动时的鼠标样式(默认值:move
  • freeDrawingCursor:自由绘制时的鼠标样式(默认值:crosshair
  • rotationCursor:旋转时的鼠标样式(默认值:crosshair

2,使用样例

(1)效果图
  • 我们将默认光标改成十字。

  • 而当鼠标移动到对象上时变成手型。

(2)样例代码
var canvas = new fabric.Canvas('canvas');
canvas.defaultCursor = 'crosshair'; //默认光标改成十字
canvas.hoverCursor = 'pointer'; //悬浮光标改成手型

二、为对象单独设置

1,基本介绍

我们也可以通过对象的光标相关属性给不同对象分别设置不同的光标。对象的光标属性和 canvas 是一样的:
  • defaultCursor:默认光标(默认值:default
  • hoverCursor:鼠标移动到对象上的样式(默认值:move
  • moveCursor:对象拖动时的鼠标样式(默认值:move
  • freeDrawingCursor:自由绘制时的鼠标样式(默认值:crosshair
  • rotationCursor:旋转时的鼠标样式(默认值:crosshair

2,使用样例

(1)效果图
  • 鼠标移动到第一个方块上时显示十字样式。

  • 鼠标移动到第二个方块上时显示手型。

(2)样例代码
var canvas = new fabric.Canvas('canvas');

//添加两个方块
var rect1 = new fabric.Rect({top: 50, left: 50, width: 70, height: 70, fill: 'red'});
canvas.add(rect1);
var rect2 = new fabric.Rect({top: 50, left: 150, width: 70, height: 70, fill: 'red'});
canvas.add(rect2);

//为两个方块分别设置不同的鼠标样式
rect1.hoverCursor = 'crosshair'; //默认光标改成十字
rect2.hoverCursor = 'pointer'; //默认光标改成手型

附:所有可用的光标样式

除了上面样例中演示的几种光标样式外,更多可用样式可以参考我之前写的这篇文章: 
评论0