如何使用 FabricJS 创建一个等待光标悬停在对象上的矩形？

01 FabricJS是什么？

FabricJS是一个用于在HTML5 canvas上绘制图像的Javascript库。它提供了丰富的绘图API以及一些高级特性，例如交互和动画效果等。

如果你需要在网页上呈现复杂的图形或者动态效果，那么FabricJS是一个非常有用的工具。

下面我们将介绍如何创建一个等待光标悬停在对象上的矩形。

02 创建一个矩形

要在Canvas上创建一个矩形，我们需要使用FabricJS中的Rect对象。

假设你已经在页面中引入了FabricJS库，下面是一个简单的矩形示例：

// create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 200,
  height: 200
});
// add it to the canvas
canvas.add(rect);

上面的代码中，我们首先创建了一个Rect对象，并设置它的位置、填充色以及宽度和高度。

接着，我们将这个矩形对象添加到了Canvas中，这样就可以在页面上看到这个矩形了。

03 悬停事件

我们需要在矩形对象上绑定一个鼠标悬停事件，这样当鼠标移动到矩形上时，我们就可以显示一个等待光标。

在FabricJS中，可以使用事件监听器来实现这个功能。具体实现如下：

// bind the hover event to the object
rect.on('mouse:over', function() {
  // change the cursor style to 'wait'
  canvas.defaultCursor = 'wait';
});
// bind the mouse out event to the object
rect.on('mouse:out', function() {
  // change the cursor style back to default
  canvas.defaultCursor = 'default';
});

代码中使用了on方法来绑定事件监听器，mouse:over代表鼠标悬停事件，mouse:out代表鼠标移出事件。

在mouse:over事件中，我们将Canvas的默认光标类型设置为等待光标（wair），这样当鼠标移动到矩形上时，就会显示等待光标。

在mouse:out事件中，我们将Canvas的默认光标类型设置为默认类型（default），这样当鼠标从矩形上移开时，就会显示默认类型的光标。

04 代码优化

我们可以将上面的代码优化一下，将事件监听器封装成一个函数，代码如下：

function addHoverCursor(obj) {
  obj.on('mouse:over', function() {
    canvas.defaultCursor = 'wait';
  });
  obj.on('mouse:out', function() {
    canvas.defaultCursor = 'default';
  });
}
// create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 200,
  height: 200
});
// add it to the canvas
canvas.add(rect);
// bind hover event to the rect object
addHoverCursor(rect);

我们将事件监听器封装成了一个函数addHoverCursor，以便在代码中可以复用。

最后，我们将这个函数应用到矩形对象上，从而实现了光标悬停功能。

05 总结

通过本文，我们了解了如何使用FabricJS库创建一个等待光标悬停在对象上的矩形。其中，关键点在于事件监听器的使用，以及将代码封装成函数以便复用。

下面附上完整代码：

function addHoverCursor(obj) {
  obj.on('mouse:over', function() {
    canvas.defaultCursor = 'wait';
  });
  obj.on('mouse:out', function() {
    canvas.defaultCursor = 'default';
  });
}
// create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 200,
  height: 200
});
// add it to the canvas
canvas.add(rect);
// bind hover event to the rect object
addHoverCursor(rect);