FabricJS 中如何创建等待光标悬停在对象上的矩形

在使用 FabricJS 进行图形处理和交互设计时，创建一个等待光标悬停在对象上才呈现特定效果的矩形是一项常见需求。这不仅能为用户带来更加直观和交互性强的体验，还能在一定程度上优化界面的视觉效果。

要在 FabricJS 中创建一个基本的矩形。通过 FabricJS 的 API，我们可以使用以下代码简单地生成一个矩形：

var rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 200,
    height: 150,
    fill: 'lightblue',
    stroke: 'black',
    strokeWidth: 2
});
canvas.add(rect);

这段代码创建了一个位于 (100, 100) 坐标，宽度为 200，高度为 150，填充颜色为浅蓝色，边框为黑色且宽度为 2 的矩形，并将其添加到画布 canvas 上。

接下来，为矩形添加悬停效果。FabricJS 提供了方便的事件监听机制来实现这一功能。我们需要监听矩形的 mouse:over 和 mouse:out 事件。当鼠标悬停在矩形上时，触发 mouse:over 事件，我们可以改变矩形的外观，比如改变填充颜色或边框宽度等。而当鼠标移出矩形时，触发 mouse:out 事件，将矩形恢复到初始状态。

rect.on('mouse:over', function () {
    this.set('fill', 'lightcoral');
    this.set('strokeWidth', 4);
    canvas.renderAll();
});

rect.on('mouse:out', function () {
    this.set('fill', 'lightblue');
    this.set('strokeWidth', 2);
    canvas.renderAll();
});

在上述代码中，当鼠标悬停在矩形上时，矩形的填充颜色变为浅珊瑚色，边框宽度增加到 4；当鼠标移出时，矩形恢复为浅蓝色填充和宽度为 2 的边框。每次状态改变后，调用 canvas.renderAll() 方法来更新画布，使更改后的效果能够实时显示。

通过这样的步骤，我们就成功地在 FabricJS 中创建了一个等待光标悬停在对象上并呈现不同效果的矩形。掌握这一技巧，能让我们在基于 FabricJS 的项目开发中，为用户界面添加更多生动有趣且实用的交互元素，提升整个项目的质量和用户体验。无论是简单的图形展示还是复杂的绘图应用，这种悬停效果都能发挥重要作用。