如何使用Fabric.js在canvas上绘制可拖拽且可调整大小的矩形？

<code class="javascript">let rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 100,
  height: 100,
});
canvas.add(rect);</code>

<code class="javascript">rect.set({
  selectable: true,
  hasControls: true,
  lockUniScaling: true, // 保持长宽比例缩放
});
canvas.renderAll();</code>

<code class="javascript">canvas.on('mouse:down', function(e) {
  if (e.target === rect) {
    rect.initialWidth = rect.width;
    rect.initialHeight = rect.height;
  }
});

canvas.on('mouse:move', function(e) {
  if (e.target === rect) {
    if (e.e.ctrlKey || e.e.metaKey) { // 按住Ctrl或Cmd键进行比例缩放
      rect.set({
        scaleX: (e.pointer.x - rect.left) / rect.initialWidth,
        scaleY: (e.pointer.y - rect.top) / rect.initialHeight,
      });
    } else { // 不按住Ctrl或Cmd键，调整单个边
      rect.set({
        width: Math.abs(e.pointer.x - rect.left),
        height: Math.abs(e.pointer.y - rect.top),
      });
    }
    canvas.renderAll();
  }
});</code>