nihaojob/vue-fabric-editor

你好,关于选中问题,下面是我的代码。为啥这个项目中,这样写代码之后,第一次会选不中,点击第二才选中。也就是第一次框选不中,第二次才可以框选中 #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');
});

});


Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests