webentwicklung-frage-antwort-db.com.de

Benutzer kann ein ausgewähltes Fabric-js-Objekt löschen

Ich habe eine einfache Fabric-js-basierte Anwendung, in der Benutzer Shapes hinzufügen, verbinden und animieren können.

Folgendes ist meine 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);
}

Dies ist mein Fiddle . Sie können auf eine neue Animation klicken und dann Objekte hinzufügen.

Ich möchte, dass der Benutzer ein Objekt auswählt und es dann auch löschen kann. Ich bin mir nicht sicher, wie. Ich fand dieses Mehrere Objekte auf einmal löschen auf einer fabric.js-Leinwand in html5 Aber ich konnte es nicht erfolgreich implementieren. Grundsätzlich möchte ich, dass Benutzer ein Objekt auswählen und löschen können.

22
user5049061

Sie können die remove () -Methode verwenden, z.

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

jsfiddle

29
Ian

Da eine neue Version von fabric.js veröffentlicht wurde, sollten Sie Folgendes verwenden:

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

Alle ausgewählten Objekte löschen:

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

Ich verwende Fabric JS 2.3.6.

Ich wollte, dass der Benutzer ein oder mehrere Objekte auf der Leinwand auswählen und diese durch Klicken auf die Schaltfläche "Löschen" löschen kann.

Methoden aus alten Versionen entfernt

Die folgenden Methoden stehen seit der Einführung von ActiveSelection nicht mehr zur Verfügung:

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

Hier ist mein Code, der für mich und hoffentlich auch gut funktioniert.

$('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

sie können ein aktives Objekt mit der Rücktaste löschen

$(document).keydown(function(event){
    if (event.which == 8) {
        if (canvas.getActiveObject()) {
            canvas.getActiveObject().remove();
        }
    }
});
0
Soubhagya Kumar