Control z-index w Fabric.js

Question

W fabricjs, chcę utworzyć scenę, w której obiekt pod myszą wznosi się na szczyt sceny w indeksie z, a następnie gdy mysz opuści ten obiekt, cofa się do indeksu z, z którego pochodzi. Nie można ustawić object.zindex (co byłoby miłe). Zamiast tego używam obiektu zastępczego, który jest umieszczany na liście obiektów w starej pozycji, a następnie stary obiekt jest zwracany w miejscu, w którym znajdował się na liście przy użyciu canvas.insertAt. Jednak to nie działa.

Aby uzyskać więcej informacji, patrz http://jsfiddle.net/rFSEV/.

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

Od wersji 1.1.4 fabric.js nowa metoda manipulacji zindex jest dostępny:

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

myślę, że to jest pomocne dla przypadku użycia. Mam zaktualizowany jsfiddle - Mam nadzieję, że to, co chcesz:
jsfiddle

Answer 2

Również upewnić się zmienić z-index Po dodaniu obiektu do płótna.

Więc kod wygląda następująco:

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

Inaczej fabricjs Don`t dbają o indeksach Z-ty konfiguracji.