Fabric.js 组件的 hasControls 属性介绍

在使用 Fabric.js 创建组件时，有时我们需要在组件周围添加控制器，以便用户可以拖拽和调整组件的大小，这时我们就需要用到 Fabric.js 组件的 hasControls 属性。

hasControls 属性的作用是控制布尔型值，用于控制组件是否具有控制器。如果设置为 false，则组件周围不会出现控制器。

以下是一些常见用法和示例：

基本用法

const rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 200,
  height: 200,
  fill: 'red',
  hasControls: true // 显示组件控制器 
});

隐藏控制器

const circle = new fabric.Circle({
  left: 300,
  top: 100,
  radius: 100,
  fill: 'green',
  hasControls: false // 隐藏控制器 
});

非均匀缩放

const triangle = new fabric.Triangle({
  left: 50,
  top: 300,
  width: 200,
  height: 200,
  fill: 'blue',
  hasControls: 'tl tr' // 只显示左上和右上控制器，实现非均匀缩放 
});

总结

hasControls 属性非常有用，可以根据实际需要来决定是否显示组件控制器，以及显示哪些控制器。同时还可以使用 hasBorders 属性来设置组件是否具有边框。在使用过程中，我们需要根据实际需求来选择是否使用这些属性，以达到更好的用户体验。