标签导航：

如何用Fabric.js在Canvas上实现可拖动和可调整大小的矩形？

fabric.js简化canvas矩形交互

在原生JavaScript中实现Canvas上矩形的拖拽和缩放功能较为复杂。Fabric.js库则提供了一种高效便捷的解决方案。以下是如何使用Fabric.js轻松实现可拖拽和可缩放矩形：

创建可拖拽矩形：

// 创建矩形
let rect = new fabric.Rect({
  width: 100,
  height: 50,
  fill: 'red'
});

// 设置可拖拽属性
rect.set({
  draggable: true
});

// 添加到画布
canvas.add(rect);

实现矩形缩放：

// 设置可缩放属性
rect.set({
  hasControls: true, // 显示控制点
  hasRotatingPoint: false // 禁用旋转
});

// 自定义控制点大小
rect.cornerSize = 10;

通过以上简单的代码，即可利用Fabric.js在Canvas上创建具备拖拽和缩放功能的矩形。Fabric.js的易用性和强大的功能使其成为Canvas开发的理想选择。