vue项目中，修改fabric默认操作

场景：fabricjs绘制的元素，默认点击鼠标左键即可自由移动元素。需要把操作改为，点击鼠标左键先选中元素，只有选中的元素，按住鼠标左键后才能移动

javascript 复制代码

// 初始化canvas
var canvas = new fabric.Canvas('c');

// 添加一个矩形元素
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 60,
  height: 70,
  selectable: false // 初始时不可选中
});

canvas.add(rect);

// 监听对象的选中事件
canvas.on('mouse:down', function(options) {
  if (options.target) {
    var object = options.target;
    object.set({
      selectable: true, // 设置对象为可选中
      evented: false // 设置对象为不可触发事件，防止直接移动
    });
    canvas.setActiveObject(object); // 手动设置为选中状态
    canvas.renderAll();
  }
});

// 监听鼠标按下事件，用于启用移动
canvas.on('mouse:move', function(options) {
  if (canvas.getActiveObject()) {
    var object = canvas.getActiveObject();
    object.set({
      evented: true // 当对象被选中时，设置为可触发事件，允许移动
    });
  }
});

// 监听鼠标释放事件，用于禁用直接的移动
canvas.on('mouse:up', function(options) {
  if (canvas.getActiveObject()) {
    var object = canvas.getActiveObject();
    object.set({
      selectable: false, // 移动后设置对象为不可选中
      evented: true // 保持对象可触发事件状态
    });
    canvas.discardActiveObject(); // 取消对象的选中状态
    canvas.renderAll();
  }
});

原理，通过修改参数，实现。

selectable: true, // 设置对象为可选中

evented: false // 设置对象为不可触发事件，防止直接移动