FabricJS v5中如何获取用户多选时的Active Selection对象？

在FabricJS v5中，事件参数里的target属性已移除，获取多选选区（Active Selection）的方式改为直接访问画布的activeSelection属性：

• 获取Active Selection：当用户完成多选操作后，直接通过canvas.activeSelection拿到当前的选区对象。该属性仅在存在多选选区时有效，单个对象选中时为null。
• 动态修改控件可见性：拿到选区对象后，仍可使用熟悉的setControlsVisibility()方法配置控件的显示/隐藏，最后调用canvas.renderAll()更新视图。

示例代码 #

// 监听选区创建事件
canvas.on('selection:created', () => {
  const activeSelection = canvas.activeSelection;
  if (activeSelection) {
    // 配置控件可见性：仅保留四个角的缩放控件，隐藏其余
    activeSelection.setControlsVisibility({
      tl: true,
      tr: true,
      bl: true,
      br: true,
      mt: false,
      mb: false,
      ml: false,
      mr: false,
      m: false
    });
    canvas.renderAll();
  }
});

// 监听选区更新事件（比如调整选区范围时）
canvas.on('selection:updated', () => {
  const activeSelection = canvas.activeSelection;
  if (activeSelection) {
    activeSelection.setControlsVisibility({
      // 根据需求调整控件配置
      tl: false,
      tr: false,
      bl: true,
      br: true
    });
    canvas.renderAll();
  }
});

注意事项 #

• 若在object:selected事件中处理，需先判断canvas.activeSelection是否存在，避免单个对象选中时的逻辑错误。
• 修改控件可见性后必须调用renderAll()，否则画布不会刷新显示修改后的状态。

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