你好,关于选中问题,下面是我的代码。为啥这个项目中,这样写代码之后,第一次会选不中,点击第二才选中。也就是第一次框选不中,第二次才可以框选中 #286
huangwenboha563 posted onGitHub
const canvas = canvasEditor.canvas; const circle1 = new fabric.Circle({ radius: 50, fill: 'red', left: 200, top: 200, }); const circle2 = new fabric.Circle({ radius: 50, fill: 'green', left: 100, top: 0, });
const url = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201702%2F21%2F20170221230517_J8jAW.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1699510542&t=dbbe6f9cc97643c88214a138c147fbee'; fabric.Image.fromURL(url, function (oImg) { // 在添加到画布之前,缩小图像, 并使其翻转。 oImg.scale(0.08).set('flipX', false); oImg.set({ stroke: 'blue', strokeWidth: 10, strokeDashArray: [5, 5], // 设置虚线样式 });
const group = new fabric.Group([circle1, circle2, oImg], {
left: 200,
top: 100,
selectable: false,
});
canvas.add(group);
group.on('mousedown', function () {
console.log('Group has been clicked');
});
// 鼠标按下事件
canvas.on('mouse:down', function (options) {
console.log('mouse:down', options.e.clientX, options.e.clientY);
});
// 鼠标移动事件
canvas.on('mouse:move', function (options) {
// console.log(options.e.clientX, options.e.clientY);
});
// 鼠标抬起事件
canvas.on('mouse:up', function (options) {
console.log('Mouse Up');
});
// Listen for the selection event
canvas.on('selection:created', function (e) {
console.log('selection created');
});
canvas.on('selection:updated', function (e) {
console.log('selection updated');
});
});