如何从选择中删除一个特定的 object

Question

I'm trying to make a restriction: when a group of objects is selected, some specific object must not be included in the selection.

Fe we create 3 rectangles. If we select the group and the red one is inside of it, it must be removed from selection:

function addRect(){
    var redRect = new fabric.Rect({
        left: 50,
        top: 50,
        fill: 'red',
        width: 50,
        height: 50
    });

    var greenRect = new fabric.Rect({
        left: 100,
        top: 100,
        fill: 'green',
        width: 50,
        height: 50
    });

    var blueRect = new fabric.Rect({
        left: 150,
        top: 150,
        fill: 'blue',
        width: 50,
        height: 50
    });

    canvas.add(redRect);
    canvas.add(greenRect);
    canvas.add(blueRect);
}


function createCanvas(id){
    canvas = new fabric.Canvas(id);
    addRect();

    canvas.on('selection:created', function(e) {
        for (var i = 0; i < canvas.getActiveObjects().length; i++) {
            if(canvas.getActiveObjects()[i].fill == "red"){
                //somehow remove the red one from selection
            };
        }
    });

    return canvas;
}

discardActiveObject() will remove the whole selection.

"selected = false" also doesn't work.

Any ideas?

Answer 1

There are two ways to achieve this using selectable property

http://fabricjs.com/docs/fabric.Rect.html#selectable

• By setting selectable: false within the call back function

• By setting selectable: false during object creation.

 function addRect() { var redRect = new fabric.Rect({ left: 50, top: 50, fill: "red", width: 50, height: 50, selectable: false }); var greenRect = new fabric.Rect({ left: 100, top: 100, fill: "green", width: 50, height: 50 }); var blueRect = new fabric.Rect({ left: 150, top: 150, fill: "blue", width: 50, height: 50 }); canvas.add(redRect); canvas.add(greenRect); canvas.add(blueRect); } function createCanvas(id) { canvas = new fabric.Canvas(id, { height: 500, width: 800, backgroundColor: "rgb(100,100,200)", selectionColor: "blue" }); addRect(); canvas.on("selection:created", function(e) { for (var i = 0; i < canvas.getActiveObjects().length; i++) { if (canvas.getActiveObjects()[i].fill == "red") { canvas.getActiveObjects()[i].selectable = false; canvas.renderAll(); } } }); return canvas; } createCanvas("c");

 <script src="https://cdn.jsdelivr.net/npm/fabric@5.2.4-browser/dist/fabric.min.js"></script> <canvas id="c"> </canvas>

 function addRect() { var redRect = new fabric.Rect({ left: 50, top: 50, fill: "red", width: 50, height: 50, selectable: false }); var greenRect = new fabric.Rect({ left: 100, top: 100, fill: "green", width: 50, height: 50 }); var blueRect = new fabric.Rect({ left: 150, top: 150, fill: "blue", width: 50, height: 50 }); canvas.add(redRect); canvas.add(greenRect); canvas.add(blueRect); } function createCanvas(id) { canvas = new fabric.Canvas(id, { height: 500, width: 800, backgroundColor: "rgb(100,100,200)", selectionColor: "blue" }); addRect(); canvas.on("selection:created", function (e) { for (var i = 0; i < canvas.getActiveObjects().length; i++) { if (canvas.getActiveObjects()[i].fill == "red") { //somehow remove the red one from selection } } }); return canvas; } createCanvas("c");

 <script src="https://cdn.jsdelivr.net/npm/fabric@5.2.4-browser/dist/fabric.min.js"></script> <canvas id="c"> </canvas>