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

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

// 初始化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 // 设置对象为不可触发事件,防止直接移动

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值