canvas 绘图库 fabric.js 实战教程七 | 交互操作

2023-11-29 19:13:49

前言

转眼间，fabric.js 的系列教程也已经过半了。一路走来，感谢 B 站小伙伴和掘金小伙伴们的点赞和支持，哈哈 🥳。

在上一篇文章中，我们介绍了 fabric.js 的画布操作，包括如何创建画布、添加对象、移动对象、缩放对象和旋转对象等。在本篇文章中，我们将继续学习 fabric.js 的交互操作，包括如何监听和处理鼠标事件，以及如何使用 fabric.js 提供的各种交互工具。

交互操作

交互操作是 fabric.js 的一个重要功能，它允许用户与画布上的对象进行交互，例如移动、缩放、旋转、删除等。fabric.js 提供了多种方法来监听和处理鼠标事件，以及多种交互工具来帮助用户操作对象。

鼠标事件

fabric.js 提供了多种方法来监听和处理鼠标事件，包括 on()、off()、trigger() 和 hasListeners()。其中，on() 方法用于监听鼠标事件，off() 方法用于取消监听鼠标事件，trigger() 方法用于触发鼠标事件，hasListeners() 方法用于检查是否监听了鼠标事件。

// 监听鼠标按下事件
canvas.on('mouse:down', function(e) {
  console.log('鼠标按下');
});

// 取消监听鼠标按下事件
canvas.off('mouse:down');

// 触发鼠标按下事件
canvas.trigger('mouse:down');

// 检查是否监听了鼠标按下事件
if (canvas.hasListeners('mouse:down')) {
  console.log('已经监听了鼠标按下事件');
}

交互工具

fabric.js 提供了多种交互工具来帮助用户操作对象，包括 Rect、Circle、Line、Polygon、Path、Group 和 ActiveSelection 等。其中，Rect 工具用于创建矩形，Circle 工具用于创建圆形，Line 工具用于创建线段，Polygon 工具用于创建多边形，Path 工具用于创建路径，Group 工具用于将多个对象组合成一个组，ActiveSelection 工具用于选择和操作多个对象。

// 创建一个矩形
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 100,
  height: 100,
  fill: 'red'
});

// 将矩形添加到画布上
canvas.add(rect);

// 选择矩形
rect.setActive(true);

// 移动矩形
rect.set({
  left: 200,
  top: 200
});

// 缩放矩形
rect.scale(2);

// 旋转矩形
rect.rotate(45);