web-dev-qa-db-fra.com

Supprimer plusieurs objets à la fois sur une toile fabric.js au format html5

Je travaille actuellement sur un projet de toile html5 qui utilise le framework fabric.js pour les interactions avec la toile. Maintenant, je me bats avec la suppression de plusieurs objets. Le code suivant ne semble pas suivre les objets sélectionnés, mais suit tous les objets du canevas.

var deleteSelectedObject = document.getElementById('delete-item');
deleteSelectedObject.onclick = function(){
    var curSelectedObjects = new Array();
    curSelectedObjects = canvas.getObjects(canvas.getActiveGroup);
    canvas.discardActiveGroup();
    for (var i = 0; i < curSelectedObjects.length; i++){
        canvas.setActiveObject(curSelectedObjects[i]);
        canvas.remove(canvas.getActiveObject());
    }
};

Ne comprends pas mon échec. 

javascripthtml5canvasfabricjs
21
John Mayer

En raison du commentaire de @Kangax qui a résolu la majeure partie du problème, j'ai trouvé la solution suivante pour supprimer les objets actuellement sélectionnés du canevas.

var deleteSelectedObject = document.getElementById('delete-item');
deleteSelectedObject.onclick = function()
{
if(canvas.getActiveGroup()){
      canvas.getActiveGroup().forEachObject(function(o){ canvas.remove(o) });
      canvas.discardActiveGroup().renderAll();
    } else {
      canvas.remove(canvas.getActiveObject());
    }
};

La fonction vérifie si un groupe est sélectionné. Si un groupe est sélectionné, chaque objet du groupe est supprimé . Si aucun groupe n'est sélectionné, la fonction essaie de supprimer un objet sélectionné. Si rien n'est sélectionné, le canevas n'est pas modifié.

37
John Mayer

Votre code semble indiquer qu'il sélectionne puis désélectionne les objets.

Cela peut fonctionner mieux:

var deleteSelectedObject = document.getElementById('delete-item');
deleteSelectedObject.onclick = function()
{
    var curSelectedObjects = canvas.getObjects(canvas.getActiveGroup);

    canvas.discardActiveGroup();
    for (var i = 0; i < curSelectedObjects.length; i++)
    {
        canvas.remove(curSelectedObjects[i]);
    }
};

Bon lien d'information:

https://github.com/kangax/fabric.js/wiki/Tutorial-2#wiki-modifying-objects

5
Alex W

Vous pouvez vérifier n’importe quelle propriété d’objet et supprimer

var objects = canvas.getObjects();

for (var i = 0; i < objects.length; ) {
  if (objects[i].name == 'cropArea' || objects[i].name == 'bleedLine') {
    canvas.remove(objects[i]);
    i = 0;
  } else {
    i++;
  }
}
3
Amit Gaur

Aucune des solutions ci-dessus (ou n'importe où elese sur stackoverflow) ne fonctionnait pour moi, à l'exception de celle que j'ai trouvée sur jsfiddle:

function deleteObjects(){
var activeObject = canvas.getActiveObject(),
activeGroup = canvas.getActiveGroup();
if (activeObject) {
    if (confirm('Are you sure?')) {
        canvas.remove(activeObject);
    }
}
else if (activeGroup) {
    if (confirm('Are you sure?')) {
        var objectsInGroup = activeGroup.getObjects();
        canvas.discardActiveGroup();
        objectsInGroup.forEach(function(object) {
        canvas.remove(object);
        });
    }
}
}

http://jsfiddle.net/beewayne/z0qn35Lo/

0
Hooman Askari

J'ai fait ça:

  var selectedObj = canvas.getObjects(canvas.getActiveGroup())

me retourne le tableau des objets sélectionnés. :) la dernière parenthèse de fonction est manquante dans votre extrait de code

0
Ajit kohir