javascript - Fabric.js でキャンバス オブジェクトを階層化する

Question

公式 API を介して Fabric.js キャンバスにオブジェクトを重ねる方法はありますか? 現在、私が見つけた唯一の方法は、canvas._objects を手動で反復処理し、それらを並べ替えて、特定の順序で描画されるようにすることです。オブジェクトを (潜在的に) 壊さない、これを行うためのより良い方法はありますか?

Answer 1

[編集] 以下の情報を修正しました (悪いことに、当初は KineticJs API を考えていました)。

FabricJS には、オブジェクトの z-index を変更する次の API メソッドがあります。

canvas.sendBackwards(myObject)
canvas.sendToBack(myObject)
canvas.bringForward(myObject)
canvas.bringToFront(myObject)

内部では、FabricJs は getObjects() 配列からオブジェクトを削除し、目的の位置に戻すことで z-index を変更します。交差するオブジェクトをチェックする優れた最適化があります。

bringForward: function (object) {
       var objects = this.getObjects(),
           idx = objects.indexOf(object),
           nextIntersectingIdx = idx;


       // if object is not on top of stack (last item in an array)
       if (idx !== objects.length-1) {

         // traverse up the stack looking for the nearest intersecting object
         for (var i = idx + 1, l = this._objects.length; i < l; ++i) {

           var isIntersecting = object.intersectsWithObject(objects[i]) ||
                                object.isContainedWithinObject(this._objects[i]) ||
                                this._objects[i].isContainedWithinObject(object);

           if (isIntersecting) {
             nextIntersectingIdx = i;
             break;
           }
         }
         removeFromArray(objects, object);
         objects.splice(nextIntersectingIdx, 0, object);
       }
       this.renderAll();
     },