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

  • Z时代
  • 2024-02-21
  • 分类：IT

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

回答：

把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();
  }
});

回答：

手动设置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;
  };

以上是 fabric.js 5.3.0版本，多选元素时，如何禁止旋转控件出现？ 的全部内容， 来源链接： utcz.com/p/934164.html

回到顶部