购物平台网站建设框架,免费咨询电脑维修,50强网站建设公司,网络公司怎么做网站场景#xff1a;fabricjs绘制的元素#xff0c;默认点击鼠标左键即可自由移动元素。需要把操作改为#xff0c;点击鼠标左键先选中元素#xff0c;只有选中的元素#xff0c;按住鼠标左键后才能移动
// 初始化canvas
var canvas new fabric.Canvas(c);// 添加一个矩形元…场景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 // 设置对象为不可触发事件防止直接移动
