原生JS与Canvas：构建可拖拽、可缩放矩形
本文介绍如何利用原生JavaScript和Canvas元素构建一个可拖动和可调整大小的矩形。虽然直接使用原生Canvas实现较为复杂，但借助Fabric.js库，这一过程将变得异常简便。Fabric.js是一个强大的Canvas库，其API设计类似于jQuery，简化了Canvas元素的操作。
以下步骤将指导您使用Fabric.js实现可拖拽、可缩放矩形：
-
引入Fabric.js: 在HTML文件中引入Fabric.js库文件。
-
创建Canvas实例: 使用
fabric.Canvas()方法创建一个Canvas实例，并指定Canvas元素的ID。
<code class="javascript">var canvas = new fabric.Canvas('canvas');</code>
-
创建矩形对象: 使用
fabric.Rect()方法创建一个矩形对象，设置其位置、大小和填充颜色等属性。
<code class="javascript">var rect = new fabric.Rect({
left: 100,
top: 100,
width: 100,
height: 100,
fill: 'red'
});</code>
-
添加到Canvas: 使用
canvas.add()方法将矩形对象添加到Canvas中。
<code class="javascript">canvas.add(rect);</code>
-
启用拖拽功能: 设置矩形的
draggable属性为true，启用拖拽功能。
<code class="javascript">rect.set({ draggable: true });
canvas.requestRenderAll(); // 刷新Canvas</code>
-
启用缩放功能: 设置矩形的
scaleX和scaleY属性为true，启用缩放功能。
<code class="javascript">rect.set({ scaleX: true, scaleY: true });
canvas.requestRenderAll(); // 刷新Canvas</code>
通过Fabric.js，您可以轻松扩展此功能，例如更改矩形的填充颜色、添加文本或创建更复杂的形状，实现更丰富的交互效果。 Fabric.js 提供了丰富的API，让Canvas操作更加便捷高效。
