fabric.js 5.3.0版本，多选元素时，如何禁止旋转控件出现？

Question

fabric.js 5.3.0版本，多选元素时禁止旋转

Answer 1

把hasRotatingPoint设置成false

import { fabric } from 'fabric';

const canvas = new fabric.Canvas('c');

canvas.add(new fabric.Rect({ left: 10, top: 10, width: 50, height: 50, fill: 'red' }));
canvas.add(new fabric.Circle({ left: 70, top: 70, radius: 25, fill: 'green' }));

canvas.on('selection:created', (e) => {

  if (e.selected.length > 1) {
    e.target.set({
      hasRotatingPoint: false,
    });
    
    e.target.setCoords();
    canvas.renderAll();
  }
});


canvas.on('selection:cleared selection:updated', (e) => {
  if (e.target) {
  
    e.target.set({
      hasRotatingPoint: true,
    });
   
    e.target.setCoords();
    canvas.renderAll();
  }
});

Answer 2

手动设置hasControls为false;

fabricCanvas.on('selection:created', function (options) {
        console.log(options)
        if (options.selected?.length < 2) {
            // 被选中的对象数据
            selectedObject.value = options.selected[0];
            console.log('选中对象created：', selectedObject.value);
        }
        forbidStretch(options.selected?.length > 1);
    })
    fabricCanvas.on('selection:updated', function (options) {
        console.log(options)
        if (options.selected?.length < 2) {
            // 被选中的对象数据
            selectedObject.value = options.selected[0];
            console.log('选中对象updated：', selectedObject.value);
        }
        forbidStretch(options.selected?.length > 1);
    })

const forbidStretch = (isGroup = false) => {
    fabric.Object.prototype.hasControls = !isGroup;
  };