Kontroll-Z-Index in Fabric.js

Question

In fabricjs möchte ich eine Szene erstellen, in der das Objekt unter der Maus im Z-Index an den Anfang der Szene steigt. Sobald die Maus das Objekt verlässt, geht es zurück zum Z-Index, woher es kam. Man kann object.zindex nicht einstellen (was nett wäre). Stattdessen verwende ich ein Platzhalterobjekt, das an der alten Position in die Objektliste eingefügt wird, und dann wird das alte Objekt mit canvas.insertAt an die Position zurückgesetzt, an der es sich in der Liste befand. Dies funktioniert jedoch nicht.

Siehe http://jsfiddle.net/rFSEV/ für den Status dieser.

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(); 

Answer 1

Seit fabric.js Version 1.1.4 eine neue Methode zur zIndex Manipulation steht zur Verfügung:

canvas.moveTo(object, index); 
object.moveTo(index); 

Ich denke, das für Ihren Anwendungsfall hilfreich. Ich habe Ihre jsfiddle aktualisiert - ich hoffe, das ist, was Sie wollen:
jsfiddle

Answer 2

Auch stellen Sie sicher, dass z-Index nach dem Hinzufügen Objekt Leinwand ändern.

So Code wie folgt aussieht:

canvas.add(object); 
canvas.moveTo(object, index); 

Ansonsten fabricjs don`t Sorge um z-Indizes Sie Setup.