Fabric.jsにキャンバスオブジェクトを重ねる

Question

公式のAPIを介してFabric.jsキャンバスにオブジェクトをレイヤーする方法はありますか？今私が見つけた唯一の方法は、canvas._objectsを手動で繰り返し、特定の順序で描画されるように並べ替えることです。オブジェクトを（潜在的に）破壊しない、これを行うためのより良い方法はありますか？

Answer 1

[編集] 私は以下の情報を修正しました（私の悪い、元々はKineticJs APIを考えていました）。

FabricJSオブジェクトのz屈折率を変更するこれらのAPIのメソッドがあります。カバーの下

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

、FabricJsは（getObjectsからオブジェクトを除去することにより、z屈折率が変化する）配列およびスプライシングその後ろに希望の位置。それは交差するオブジェクトをチェックする素晴らしい最適化を持っています。

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

Answer 2

ステップ1：あなたは特定を設定したい場合は、その後、sendtoback

以下

Answered over here

Answer 3

ようsendtofront .... fabricjsのオプションを使用します。あなたはpreserveObjectStacking: true

ステップ2を使用することができます1つのオブジェクトを前後に動かすのではなく、すべてのオブジェクトの順序付けを行うために、前面/背面への呼び出し/送信の反復呼び出しが遅くなります。

あなたはこのユースケースをスピードアップするためのインスピレーションとして bringToFrontのコードを使用することができます

：https://github.com/kangax/fabric.js/blob/586e61dd282b22c1d50e15c0361875707e526fd8/src/static_canvas.class.js#L1468

そして、次の操作を行います。

比較は次のように、ソートを定義する

fabric.Canvas.prototype.orderObjects = function(compare) { 
    this._objects.sort(compare); 
    this.renderAll(); 
} 

：

function compare(x,y) { 
    return x.getWidth() * x.getHeight() < y.getWidth() * y.getHeight(); 
} 

some_canvas.orderObjects(compare) 

小さなオブジェクトを前面に持ってきたい場合。