fabric js: le regroupement d'objets ne fonctionne pas correctement

Question

Je rencontre des problèmes avec le regroupement de plusieurs objets sur le canevas. Lorsque je sélectionne des objets en maintenant la touche Maj enfoncée et que je crée un groupe de ces objets, le groupe nouvellement ajouté possède un index z incorrect de ses éléments. Les arguments s'exécutent sur l'extrait de code ci-dessous pour comprendre le problème. Veuillez d'abord sélectionner la case verte, puis sélectionner bleu puis rouge pendant que vous appuyez sur la touche Maj. Cliquez ensuite sur le bouton Group pour voir le problème.

canvas = new fabric.Canvas('canvas', { 
 
    isDrawingMode: false, 
 
    preserveObjectStacking: true 
 
}); 
 

 
    
 

 
fabric.Object.prototype.objectCaching = true; 
 
canvas.setWidth(380); 
 
canvas.setHeight(310); 
 
canvas.setBackgroundColor('#F2F2F2'); 
 
canvas.renderAll(); 
 

 

 
var topMost = new fabric.Rect({ 
 
    left: 90, 
 
    top: 90, 
 
    width: 50, 
 
    height: 50, 
 
    fill: 'green', 
 
}); 
 

 
var middle = new fabric.Rect({ 
 
    left: 70, 
 
    top: 70, 
 
    width: 50, 
 
    height: 50, 
 
    fill: 'blue', 
 
}); 
 

 
var bottom = new fabric.Rect({ 
 
    left: 50, 
 
    top: 50, 
 
    width: 50, 
 
    height: 50, 
 
    fill: 'red', 
 
}); 
 

 
canvas.add(bottom); 
 
canvas.add(middle); 
 
canvas.add(topMost); 
 

 

 
$(".group").on('click', function() { 
 
    var activegroup = canvas.getActiveGroup(); 
 
    var objectsInGroup = activegroup.getObjects(); 
 

 
    activegroup.clone(function (newgroup) { 
 
     canvas.discardActiveGroup(); 
 
     objectsInGroup.forEach(function (object) { 
 
     canvas.remove(object); 
 
     }); 
 
     canvas.add(newgroup); 
 
    }); 
 
});

h3{color: blue;}h5{color: red;}canvas{border: 2px solid black;} 
 
button{padding: 8px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script> 
 

 
<h3>Please select green box first, then select blue and then red while the shift key is pressed. Then clik on Group button to see the problem</h3> 
 
<h5>Problem: Grouping multiple objects, selected using shift key down, changes their z-index after grouped</h5> 
 
<button class="group">Group</button> 
 
<canvas id="canvas"></canvas>

Answer 1

Tissu n'a jamais pour objet conservé automatiquement dans des groupes. Je vois que vous utilisiez preserveObjectStacking = true, et je pense que cela pourrait avoir causé votre confusion. Cette propriété n'affecte pas l'ordre réel des objets à "préserver" comme ils sont sur le canevas. Au lieu de cela, il modifie l'ordre dans lequel les objets apparaissent lors de leur sélection, ainsi que la recherche de la cible du clic lorsque vous cliquez sur ces objets.

Les objets de la sélection active sont ajoutés dans l'ordre des clics et, en les ajoutant à preserveObjectStacking, ils sont rendus dans l'ordre des canevas. Les 2 premiers objets sont classés dans l'ordre de la pile de toute façon.

Dans votre cas, vous cliquez sur

1. vert -> ActiveObject
2. bleu -> bleu est sous le drapeau vert si vous obtenez ActiveGroup bleu, vert.
3. red -> rouge est poussé dans le groupe actif à la fin du tableau d'objets.

L'ordre que vous obtenez lorsque vous clonez est exactement bleu, vert, rouge.

Pour préserver l'ordre des objets sur le canevas, vous pouvez facilement écrire une fonction de tri et l'exécuter sur les objets de votre groupe avant de le cloner.

var sorter = function (a, b) { 
    var idxA = canvas._objects.indexOf(a), 
     idxB = canvas._objects.indexOf(b); 
    return idxA > idxB ? 1 : 0; 
}; 

var activegroup = canvas.getActiveGroup(); 
activegroup._objects.sort(sorter); 
var objectsInGroup = activegroup.getObjects(); //these are now in the canvas's order 
//.....continue with your original code