web-dev-qa-db-fra.com

Permettre à l'utilisateur de supprimer un objet js de la matrice sélectionné

J'ai une application simple, basée sur le js, permettant aux utilisateurs d'ajouter des formes, de les connecter et de les animer.

Voici mon JS 

var canvas; 
window.newAnimation = function(){
   canvas = new fabric.Canvas('canvas');
}

window.addRect = function(){
    var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20,
});
    canvas.add(rect);

}

window.addCircle = function(){
    var circle = new fabric.Circle({
  radius: 20, fill: 'green', left: 100, top: 100
});
    canvas.add(circle);
}

Ceci est mon Fiddle . Vous pouvez cliquer sur une nouvelle animation, puis ajouter des objets dès maintenant.

Je veux que l'utilisateur sélectionne un objet et puisse ensuite le supprimer, je ne sais pas comment. J'ai trouvé ceci Supprimer plusieurs objets à la fois sur une toile fabric.js en html5 Mais je n'ai pas pu l'implémenter avec succès. En gros, je veux que les utilisateurs puissent sélectionner un objet et le supprimer.

javascripthtml5canvasfabricjs
22
user5049061

Vous pouvez utiliser la méthode remove (), par exemple.

window.deleteObject = function() {
        canvas.getActiveObject().remove();
}

jsfiddle

29
Ian

Depuis la sortie de la nouvelle version de fabric.js, vous devez utiliser:

canvas.remove(canvas.getActiveObject());
37
Alex Andre

Supprimer tous les objets sélectionnés:

canvas.getActiveObjects().forEach((obj) => {
  canvas.remove(obj)
});
canvas.discardActiveObject().renderAll()
2
cby016

J'utilise Fabric JS 2.3.6.

Je voulais permettre à l'utilisateur de sélectionner un ou plusieurs objets sur la toile et de les supprimer en cliquant sur le bouton Supprimer.

Méthodes supprimées d'anciennes versions

Les méthodes suivantes ne sont plus disponibles depuis l'introduction de ActiveSelection:

setActiveGroup(group);
getActiveGroup();
deactivateAll();
discardActiveGroup();
deactivateAllWithDispatch();

Voici mon code qui fonctionne très bien pour moi et j'espère que vous aussi. 

$('html').keyup(function(e){
        if(e.keyCode == 46) {
            deleteSelectedObjectsFromCanvas();
        }
});    

function deleteSelectedObjectsFromCanvas(){
    var selection = canvas.getActiveObject();
    if (selection.type === 'activeSelection') {
        selection.forEachObject(function(element) {
            console.log(element);
            canvas.remove(element);
        });
    }
    else{
        canvas.remove(selection);
    }
    canvas.discardActiveObject();
    canvas.requestRenderAll();
}
1
Larry Robertson