原生JavaScript与Canvas：构建交互式可拖拽、可缩放矩形
本文介绍如何使用原生JavaScript和Canvas构建交互式矩形，支持拖拽和缩放操作。我们将探讨两种方法：
方法一：借助Fabric.js库（推荐）
Fabric.js是一个强大的Canvas库，提供类似jQuery的DOM操作体验。它简化了创建交互式形状（包括矩形）的过程。
立即学习“Java免费学习笔记（深入）”；
创建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代码来实现拖拽和缩放功能。
拖拽实现：
- 为矩形添加
mousedown事件监听器。 - 在事件处理函数中记录鼠标当前位置。
- 为文档添加
mousemove事件监听器。 - 在
mousemove事件处理函数中，根据鼠标相对初始位置的位移更新矩形位置。 - 为文档添加
mouseup事件监听器。 - 在
mouseup事件处理函数中移除mousemove事件监听器。
缩放实现：
- 为矩形添加
mousedown事件监听器。 - 在事件处理函数中检测鼠标是否位于矩形角点附近。
- 如果位于角点附近，则为相应边缘添加
mousemove事件监听器。 - 在
mousemove事件处理函数中，根据鼠标相对初始位置的位移更新矩形的宽或高。 - 为文档添加
mouseup事件监听器。 - 在
mouseup事件处理函数中移除mousemove事件监听器。
两种方法各有优劣，Fabric.js提供更简洁高效的实现，而手动实现则能更深入地理解底层机制。选择哪种方法取决于您的项目需求和技术水平。
