原生JS与Canvas：构建可拖拽、可缩放矩形

本文介绍如何利用原生JavaScript和Canvas元素构建一个可拖动和可调整大小的矩形。虽然直接使用原生Canvas实现较为复杂，但借助Fabric.js库，这一过程将变得异常简便。Fabric.js是一个强大的Canvas库，其API设计类似于jQuery，简化了Canvas元素的操作。

以下步骤将指导您使用Fabric.js实现可拖拽、可缩放矩形：

1. 引入Fabric.js: 在HTML文件中引入Fabric.js库文件。

2. 创建Canvas实例: 使用fabric.Canvas()方法创建一个Canvas实例，并指定Canvas元素的ID。

var canvas = new fabric.Canvas('canvas');

3. 创建矩形对象: 使用fabric.Rect()方法创建一个矩形对象，设置其位置、大小和填充颜色等属性。

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 100,
  height: 100,
  fill: 'red'
});

4. 添加到Canvas: 使用canvas.add()方法将矩形对象添加到Canvas中。

canvas.add(rect);

5. 启用拖拽功能: 设置矩形的draggable属性为true，启用拖拽功能。

rect.set({ draggable: true });
canvas.requestRenderAll(); // 刷新Canvas

6. 启用缩放功能: 设置矩形的scaleX和scaleY属性为true，启用缩放功能。

rect.set({ scaleX: true, scaleY: true });
canvas.requestRenderAll(); // 刷新Canvas

通过Fabric.js，您可以轻松扩展此功能，例如更改矩形的填充颜色、添加文本或创建更复杂的形状，实现更丰富的交互效果。 Fabric.js 提供了丰富的API，让Canvas操作更加便捷高效。