Fabric如何禁用拖拽框选分组同时保留shift+click分组选择功能

完全可以实现该需求，两种适配不同场景的实现方式如下：

方案1：基础配置实现（适配大部分Fabric 4.x+版本） #

Fabric中拖拽框选和shift+click多选为两个独立控制逻辑，官方已提供单独配置：

// 仅禁用拖拽产生的矩形框选功能
canvas.selection = false;
// 确保全局多选能力保持开启（默认值为true，若之前手动修改过需恢复为true）
canvas.allowSelection = true;

注：部分老旧Fabric版本存在canvas.selection属性同时影响两种选择逻辑的问题，若使用该方案不符合预期请切换方案2。

方案2：事件拦截实现（全版本兼容，自定义程度最高） #

通过拦截拖拽框选触发的选区创建事件实现需求，完全不影响shift+click的多选逻辑：

canvas.on('before:selection:created', function(e) {
  // 判断当前选区是否为拖拽产生的矩形框选，是则直接阻止
  if (e.trigger === 'drag') {
    e.preventDefault();
    return false;
  }
});

如果上述判断条件在你的Fabric版本中不生效，可以使用更通用的坐标判断逻辑：

let isDragSelect = false;
canvas.on('mouse:down', function() {
  isDragSelect = false;
});
canvas.on('mouse:move', function() {
  isDragSelect = true;
});
canvas.on('before:selection:created', function(e) {
  if (isDragSelect) {
    e.preventDefault();
    isDragSelect = false;
  }
});

注意事项 #

• 若需要允许单个对象选中、多选，确保对应画布对象的selectable属性设置为true
• 若需要限制多选的最大数量，可在selection:created事件中判断canvas.getActiveObjects().length做额外逻辑控制

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