选择了多个用javascript单击的项目

Selected multiple items clicked with javascript

本文关键字：单击 项目 javascript 选择      更新时间：2023-09-26

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

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

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

JSfiddle

如果我理解正确，你只需要对象（圆），并且你想在点击这两个对象时删除它们？

为此，您可以创建一个空数组，每当单击一个圆时，您可以检查该数组是否仍然为空（并将单击的对象添加到其中）。如果数组不为空，则可以删除正在单击的对象和当前数组中的对象。像这样的东西应该可以做到：

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);
    }
});

首先，为每个对象添加一个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

相关文章：