Contrôle de z-index Fabric.js

Dans fabricjs, je veux créer une scène dans laquelle l'objet en vertu de la souris monte vers le haut de la scène, z-index, puis une fois que la souris quitte cet objet, il va revenir à la z-index d'où il vient. On ne peut pas l'objet du jeu.zindex (ce qui serait bien). Au lieu de cela, je suis en utilisant un espace réservé à l'objet qui est mis dans la liste d'objets à l'ancienne position, et puis la vieille objet est mis en arrière dans la position où il était dans la liste à l'aide de la toile.insertAt. Cependant, ce n'est pas de travail.

Voir http://jsfiddle.net/rFSEV/ pour l'état de cette.

var canvasS = new fabric.Canvas('canvasS', { renderOnAddition: false, hoverCursor: 'pointer', selection: false });
var bars = {}; //storage for bars (bar number indexed by group object)
var selectedBar = null; //selected bar (group object)
var placeholder = new fabric.Text("XXXXX", { fontSize: 12 });

//pass null or a bar
function selectBar(bar) {
    if (selectedBar) {
        //remove the old topmost bar and put it back in the right zindex
        //PROBLEM: It doesn't go back; it stays at the same zindex
        selectedBar.remove();
        canvasS.insertAt(selectedBar, selectedBar.XZIndex, true);
        selectedBar = null;
        }
    if (bar) {
        //put a placeholder object ("XXX" for now) in the position
        //where the bar was, and put the bar in the top position
        //so it shows topmost
        selectedBar = bar;
        canvasS.insertAt(placeholder, selectedBar.XZIndex, true);
        canvasS.add(bar);
        canvasS.renderAll();
        }
    }

canvasS.on({
     'mouse:move': function(e) {
        //hook up dynamic zorder
        if (!e.target) return;
        if (bars[e.target])
            selectBar(e.target);
        else
            selectBar(null);
        },
    });

var objcount = canvasS.getObjects().length;

//create bars
for (var i = 0; i < 20; ++i) {
    var rect = new fabric.Rect({
      left: 0,
      top: 0,
      rx: 3,
      ry: 3,
      stroke: 'red',
      width: 200,
      height: 25
    });
    rect.setGradientFill({
      x1: 0,
      y1: 0,
      x2: 0,
      y2: rect.height,
      colorStops: {
        0: '#080',
        1: '#fff'
      }
    });    
    var text = new fabric.Text("Bar number " + (i+1), {
        fontSize: 12
    });
    var group = new fabric.Group([ rect, text ], {
      left: i + 101,
      top: i * 4 + 26
    });
    group.hasControls = group.hasBorders = false;

    //our properties (not part of fabric)
    group.XBar = rect;
    group.XZIndex = objcount++;

    canvasS.add(group);
    bars[group] = i;
    }
canvasS.renderAll();
Il y a 4 méthodes de Tissu pour le contrôle de z-index: bringForward (1 niveau), bringToFront (tout en haut), sendBackwards (1 niveau), et sendToBack (tout en bas). Ils peuvent tous être appelée sur l'objet, directement ou sur toile (passage de l'objet désiré).
Que de bonnes informations, mais dites-vous que insertAt n'a aucun effet sur les z-index? (Quel est le but de insertAt alors?). Même si ces 4 méthodes sont la seule option, on aurait pu faire appel sendBackwards N fois: le dire, de le déplacer à partir de z-index 105 à 55, on aurait dû l'appeler 50 fois dans une boucle, ce qui serait apparemment redessiner à chaque fois. C'est follement complexe.
insertAt devrait fonctionner aussi bien. Il signifie exactement pour insérer un objet à l'emplacement correct. Cependant, il est utilisé pour ajouter de nouveaux objets sur la toile. Pour changer de z-index des objets existants, vous pouvez utiliser ces 4 méthodes ou de modifier canvas._objects tableau directement. z-index est tout simplement la même que celle de l'indice des objets array (0 rendus en premier, puis 1, puis 2, et ainsi de suite)

OriginalL'auteur Ian | 2013-01-03