Question

我有一个画布并添加了形状（圆形，方形，矩形等）。我可以删除按照代码点击的项目。

canvas.on('object:selected',function(ev){
    canvas.remove(ev.target);
});

但我想点击并选择第一个圆圈，然后点击第二个圆圈。当我点击第二个圆圈时，应该删除圆圈？

JSfiddle

Answer 1

如果我理解正确，您只需要对象（圆圈），并且想要在单击它们时删除它们？

为此，您可以创建一个空数组，只要单击一个圆，就可以检查数组是否仍为空（并将单击的对象添加到其中）。如果数组不为空，则可以删除单击的对象和当前在数组中的对象。这样的事情可以解决问题：

var objectsToDelete = [];

canvas.on('object:selected',function(ev){
    if(objectsToDelete.length == 0){
        objectsToDelete.push(ev.target);
    }
    else{
        canvas.remove(objectsToDelete[0]);
        canvas.remove(ev.target);
    }
});

Answer 2

首先，为每个对象添加id以供日后参考。

var rect1 = new fabric.Rect({
    id: 'rect1',
    width: 100,
    height: 100,
    left: 50,
    top: 50,
    fill: 'rgba(255,0,0,0.5)'
});

然后实例化一个变量以跟踪最后选择的对象。选择后，检查当前选择的内容，然后检查last_selected以查看最后一次选择配对对象，如果是，则remove两者。最后，将对象分配给last_selected。

var canvas = new fabric.Canvas(document.getElementById('c'))
var last_selected
canvas.on('object:selected',function(ev){
    if ( ( 'rect1' === ev.target.id && rect2 === last_selected )
      || ( 'rect2' === ev.target.id && rect1 === last_selected ) ) {
        canvas.remove(rect1)
        canvas.remove(rect2)
    }
    if ( ( 'circ1' === ev.target.id && circ2 === last_selected ) 
      || ( 'circ2' === ev.target.id && circ1 === last_selected ) ) {
        canvas.remove(circ1)
        canvas.remove(circ2)
    }
    last_selected = ev.target
});

JSFiddle

用javascript点击选中的多个项目

2 个答案: