Impossible de dissocier avec Fabric JS

Question

Un peu nouveau sur FabricJS mais on dirait que je suis en train de tout chambouler ou qu'il n'est pas possible de dégrouper comme j'en ai besoin.

créé un Fiddle ici:

// Init canvas 
 
var canvas = new fabric.Canvas('c'); 
 

 
// Create array of circles 
 

 
var circlesCollection = []; 
 

 
for (i = 0; i < 10; i++) { 
 
    var circle = new fabric.Circle({ 
 
    radius: 10, 
 
    fill: 'red', 
 
    left: 25 * i, 
 
    originX: "left" 
 
    }); 
 
    circlesCollection.push(circle); 
 
} 
 

 
// Create group and add the group to the canvas 
 
var circleGroup = new fabric.Group(circlesCollection, { 
 
    left: 100, 
 
    top: 100 
 
}); 
 

 
canvas.add(circleGroup); 
 

 
function unGroup() { 
 
    //Ungroup and add back to canvas 
 
    var items = circleGroup.getObjects(); 
 
    canvas.remove(circleGroup); 
 

 
    var width = circleGroup.getWidth(); 
 
    var height = circleGroup.getHeight(); 
 

 
    for (var i = 0; i < items.length; i++) { 
 
    var left = circleGroup.getLeft() + items[i].getLeft() + (width/2); 
 
    var top = circleGroup.getTop() + items[i].getTop() + (height/2); 
 
    items[i].setLeft(left); 
 
    items[i].setTop(top); 
 
    items[i].hasControls = true; 
 
    canvas.add(items[i]); 
 
    } 
 

 
    canvas.renderAll(); 
 
}

canvas { 
 
    border: 1px solid #999; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script> 
 
<button onclick="unGroup()">Ungroup now</button> 
 
<canvas id="c" width="600" height="600"></canvas>

Lien externe: https://jsfiddle.net/WillemStaels/w9j3qwg0/3/

Ce que le Fiddle fait:

• Crée nouvelle toile + initialisation FabricJS
• Ajoute un groupe avec 10 cercle objets
• gets objets du groupe (les 10 cercles) et les ajoute à la toile
• Supprimer le groupe

= en fait une fonction dégroupement de base

Maintenant ce Il se produit que les objets après avoir ajouté de nouveau au canevas sans groupe ne montrent pas les contrôles lorsqu'ils sont sélectionnés ET après désélection ils deviennent invisibles sur le canevas. Après le redimensionnement (les poignées sont là mais pas visibles) il semble y avoir un problème.

Je me suis cassé la tête au cours des dernières heures, donc tout commentaire ou aide serait la bienvenue!

Answer 1

Il vous manque juste group.destroy Détruire va réinitialiser l'objet aux coordonnées naturelles de toile lorsque vous êtes sur le point de supprimer un groupe.

Cet extrait a également fait la preuve d'un petit bug, un objet retiré d'un groupe a besoin d'une réinitialisation manuelle de la propriété sale, alors que cela ne devrait pas arriver. Cela nécessite un correctif.

// Init canvas 
 
var canvas = new fabric.Canvas('c'); 
 

 
// Create array of circles 
 

 
var circlesCollection = []; 
 

 
for (i = 0; i < 10; i++) { 
 
    var circle = new fabric.Circle({ 
 
    radius: 10, 
 
    fill: 'red', 
 
    left: 25 * i, 
 
    originX: "left" 
 
    }); 
 
    circlesCollection.push(circle); 
 
} 
 

 
// Create group and add the group to the canvas 
 
var circleGroup = new fabric.Group(circlesCollection, { 
 
    left: 100, 
 
    top: 100 
 
}); 
 

 
canvas.add(circleGroup); 
 

 
function unGroup() { 
 
    //Ungroup and add back to canvas 
 
    var items = circleGroup.getObjects(); 
 
    circleGroup.destroy(); 
 
    canvas.remove(circleGroup); 
 
    items.forEach(function(item) { 
 
    item.set('dirty', true); 
 
    }) 
 
    canvas.add.apply(canvas, items); 
 
    canvas.renderAll(); 
 
}

canvas { 
 
    border: 1px solid #999; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script> 
 
<button onclick="unGroup()">Ungroup now</button> 
 
<canvas id="c" width="600" height="600"></canvas>