设置Fabric.js绘制对象的控件可见性的实现方法

嘿，我刚好折腾过类似的需求，给你一步步拆解怎么实现，应该能解决你的困惑～

1. 隐藏不需要的控件，只保留旋转功能 #

Fabric.js默认给对象提供了缩放、旋转、移动等多种控件，我们需要把除了旋转之外的全部隐藏。你可以选择全局配置（所有对象都生效），或者只针对绘制的线条/路径生效。

全局配置（所有对象仅保留旋转） #

如果希望画布上所有对象都只能旋转，直接覆盖fabric.Object.prototype的控件配置：

// 保留旋转控件，隐藏其他所有控件
fabric.Object.prototype.controls = {
  mt: null, // 顶部中间缩放控件
  mb: null, // 底部中间缩放控件
  ml: null, // 左侧中间缩放控件
  mr: null, // 右侧中间缩放控件
  mtr: fabric.Object.prototype.controls.mtr // 旋转控件（保留默认配置）
};

// 可选：调整旋转控件的样式，让它更显眼
fabric.Object.prototype.rotatingPointOffset = 40; // 旋转点距离对象的偏移量
fabric.Object.prototype.cornerColor = '#2196F3'; // 旋转控件的颜色
fabric.Object.prototype.cornerSize = 12; // 旋转控件的大小

仅针对绘制的线条/路径生效 #

如果只想让手绘的对象（比如线条、自由路径）有这个限制，其他对象保持默认，就用对象添加事件来处理：

canvas.on('object:added', function(e) {
  const targetObj = e.target;
  // 只处理线条和自由路径类型的对象，可根据需求调整类型
  if (['line', 'path'].includes(targetObj.type)) {
    // 隐藏不需要的控件，只保留旋转
    targetObj.setControlsVisibility({
      mt: false,
      mb: false,
      ml: false,
      mr: false,
      mtr: true
    });
    // 可选：去掉对象边框，让界面更简洁
    targetObj.hasBorders = false;
    // 重新渲染画布，确保控件生效
    canvas.renderAll();
  }
});

2. 配合绘图开关按钮的注意事项 #

如果你的绘图按钮是切换isDrawingMode（自由绘制模式），不需要额外做特殊处理——只要上面的事件监听生效，绘制完成后添加到画布的对象会自动应用控件配置。

不过如果你是用自定义的绘图工具（比如点击画布创建线条），记得在创建对象的代码里直接设置控件属性：

// 示例：手动创建线条并设置控件
const line = new fabric.Line([50, 50, 200, 200], {
  stroke: '#000',
  strokeWidth: 2,
  controls: {
    mt: null,
    mb: null,
    ml: null,
    mr: null,
    mtr: fabric.Object.prototype.controls.mtr
  },
  hasBorders: false
});
canvas.add(line);

3. 额外小贴士 #

• 如果你想禁止对象被移动，可以设置lockMovementX: true和lockMovementY: true，这样对象只能旋转，不能拖拽。
• 不同Fabric.js版本的控件API可能略有差异，如果上面的代码不生效，可以检查下版本，比如旧版本可能用hasControls配合控件显隐，而新版本用setControlsVisibility更直观。

内容的提问来源于stack exchange，提问作者anonymoose