Fabric JS 如何实现对象仅在完成完整点击后才可被移动

完全可以实现该需求，核心思路是默认锁定所有对象的移动权限，仅在监听到同一对象先后完成鼠标按下、鼠标抬起的完整点击操作后，才临时解锁对应对象的移动权限。

实现步骤 #

1. 对象初始化默认配置 #

所有新增画布对象默认锁定X/Y轴移动权限，仅保留可选中属性，同时新增自定义标识位记录移动权限状态：

const rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 60,
  height: 70,
  // 基础交互配置
  selectable: true,
  lockMovementX: true,
  lockMovementY: true,
  // 自定义移动权限标识位
  allowMove: false
});
canvas.add(rect);

2. 监听画布鼠标事件 #

通过全局鼠标事件校验完整点击行为，动态切换对象的移动权限：

// 记录鼠标按下时的目标对象
let currentDownTarget = null;

// 监听鼠标按下事件
canvas.on('mouse:down', (opt) => {
  if (opt.target) {
    currentDownTarget = opt.target;
  } else {
    // 点击空白区域时，重置所有对象的移动锁定状态
    canvas.getObjects().forEach(obj => {
      obj.lockMovementX = true;
      obj.lockMovementY = true;
      obj.allowMove = false;
    });
    currentDownTarget = null;
  }
});

// 监听鼠标抬起事件
canvas.on('mouse:up', (opt) => {
  // 仅当按下和抬起的为同一对象时，判定为有效完整点击
  if (opt.target && currentDownTarget === opt.target) {
    opt.target.allowMove = true;
    opt.target.lockMovementX = false;
    opt.target.lockMovementY = false;
    // 刷新对象状态避免渲染异常
    opt.target.setCoords();
    canvas.renderAll();
  }
  currentDownTarget = null;
});

可选优化项 #

• 可通过修改对象的borderColor、cornerColor属性，在解锁/锁定移动权限时切换边框、控制角的颜色，给用户明确的状态反馈
• 如果需要支持多对象批量操作，可在框选完成后统一解锁选中对象的移动权限，逻辑和单对象处理一致
• 若需要限制仅单次移动有效，可在对象移动完成（object:modified事件触发）后自动重新锁定移动权限

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