問題

fabricjsでは、マウスの下のオブジェクトがz-indexのシーンの上部に上がるシーンを作成し、マウスがそのオブジェクトを離れると、それが由来するz-indexに戻ります。 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();
 

  ベストアンサー

fabric.jsバージョン1.1.4以降、zIndex操作の新しいメソッドが使用可能です。

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

私はこれがあなたのユースケースに役立つと思います。私はあなたのjsfiddleを更新しました - 私はこれがあなたが望むものであることを願っています:
または jsfiddle

  同じタグがついた質問を見る

z-indexfabricjs