选择的多项点击 javascript

Question

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

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

但我想单击 select 第一个圆圈，然后单击第二个圆圈。当我点击第二个圈子时，圈子应该被删除吗？

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

Selected multiple items clicked with javascript

javascript

jquery

fabricjs