Fabric.js | 矩形 hasControls 属性

在 Fabric.js 中，我们可以创建和操作矩形（Rectangle）对象。其中包含一个 boolean 类型的 hasControls 属性，代表着是否显示控制点。

属性说明

矩形的 hasControls 属性是控制是否显示控制点的属性，默认值为 true。当该属性为 true 时，我们可以在选中矩形后看到八个可拖拽的控制点，即 resize 控制点和rotate 控制点。当该属性为 false 时，这些控制点将不可见，即使选中矩形。

代码示例

创建一个具有 hasControls 属性的矩形并将其添加到 canvas 上：

// Create a new fabric.Canvas object
const canvas = new fabric.Canvas('canvas');

// Create a new rectangle object
const rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 100,
  height: 100,
  hasControls: true // or false
});

// Add the rectangle to the canvas
canvas.add(rect);

总结

hasControls 属性可以根据需要控制矩形的控制点是否可见。如果您想在矩形上进行大小调整和旋转，则需要将属性值设置为 true。如果您不需要这些功能，则将属性值设置为 false 会更好，因为它会减少用户的困惑和麻烦。