原生JavaScript与Canvas：构建交互式可拖拽、可缩放矩形

本文介绍如何使用原生JavaScript和Canvas构建交互式矩形，支持拖拽和缩放操作。我们将探讨两种方法：

方法一：借助Fabric.js库（推荐）

Fabric.js是一个强大的Canvas库，提供类似jQuery的DOM操作体验。它简化了创建交互式形状（包括矩形）的过程。

创建Fabric.js矩形：

var canvas = new fabric.Canvas('my-canvas');
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 100,
  height: 100,
  fill: 'red' // 添加填充颜色
});
canvas.add(rect);

启用拖拽：

rect.set({ draggable: true });
canvas.renderAll(); // 重新渲染canvas

启用缩放：

rect.set({ scaleX: true, scaleY: true });
canvas.renderAll(); // 重新渲染canvas

方法二：手动实现

如果您希望自行处理鼠标事件并更新Canvas，则需要编写JavaScript代码来实现拖拽和缩放功能。

拖拽实现：

1. 为矩形添加mousedown事件监听器。
2. 在事件处理函数中记录鼠标当前位置。
3. 为文档添加mousemove事件监听器。
4. 在mousemove事件处理函数中，根据鼠标相对初始位置的位移更新矩形位置。
5. 为文档添加mouseup事件监听器。
6. 在mouseup事件处理函数中移除mousemove事件监听器。

缩放实现：

1. 为矩形添加mousedown事件监听器。
2. 在事件处理函数中检测鼠标是否位于矩形角点附近。
3. 如果位于角点附近，则为相应边缘添加mousemove事件监听器。
4. 在mousemove事件处理函数中，根据鼠标相对初始位置的位移更新矩形的宽或高。
5. 为文档添加mouseup事件监听器。
6. 在mouseup事件处理函数中移除mousemove事件监听器。

两种方法各有优劣，Fabric.js提供更简洁高效的实现，而手动实现则能更深入地理解底层机制。选择哪种方法取决于您的项目需求和技术水平。