Fabric.jsのZ-インデックスを制御する

Question

fabricjsでは、マウスの下のオブジェクトがz-インデックスのシーンの上に上がってから、マウスがそのオブジェクトを離れると戻ってくるシーンを作成したいそれがどこから来たのかを知ることができます。 1つはobject.zindexを設定できません（これはうまくいくでしょう）。代わりに、私は古い位置でオブジェクトリストに入れられたプレースホルダーオブジェクトを使用しています。そして、古いオブジェクトはcanvas.insertAtを使用してリスト内の位置に戻されます。しかし、これは動作していません。

ステータスは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

fabric.jsバージョン1.1.4のZIndex操作のための新しい方法が提供されていますので：

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

私は、これはあなたのユースケースのために有用であると考えています。私はあなたのjsfiddleを更新しました - 私は、これはあなたが望むものであると思います：
jsfiddle

Answer 2

はまた、あなたがキャンバスにオブジェクトを追加した後のzインデックスを変更してください。もし、セットアップのzインデックスについて

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

そうでない場合fabricjs `tのケア：

だからコードの意志は次のように見えます。