Laisser l'utilisateur supprimer un objet choisi de fabric js
j'ai une application simple basée sur le tissu js où je vais laisser les utilisateurs ajouter des formes les connecter et 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);
}
C'est mon Tripoter. Vous pouvez cliquer sur nouvelle animation puis ajouter des objets dès maintenant.
je veux que l'utilisateur sélectionne un objet et puis aussi pouvoir le supprimer Je ne sais pas comment. J'ai trouvé ce Supprimer plusieurs Objets à la fois sur un tissu.js canvas en html5 Mais je n'étais pas capable de le mettre en œuvre avec succès. Je veux que les utilisateurs puissent sélectionner un objet et le supprimer.
4 réponses
Depuis la nouvelle version de tissu.js a été libéré - vous devez utiliser:
canvas.remove(canvas.getActiveObject());
J'utilise le tissu js 2.3.6.
je voulais permettre à l'utilisateur de sélectionner un ou plusieurs objets sur la toile et les supprimer en cliquant sur le bouton supprimer.
méthodes retirées des anciennes versions
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();
}
Supprimer tous les objets sélectionnés:
canvas.getActiveObjects().forEach((obj) => {
canvas.remove(obj)
});
canvas.discardActiveObject().renderAll()