2016-08-25 15 views
3

私は2つのレイヤー(0,1)を持っています。 0はキャンバス上の一番下のイメージであり、1は上のイメージです。レイヤー0は人体テンプレート、レイヤー1はいくつかの目です。私は、最上層を動かすことなく、または最上層を覆うことなく、最下層(本体層)を動かすことができるようにしたい。基本的に、目は体に座って見えますが、体の画像を動かすことができます。私は、周り(人体層)レイヤ0をドラッグを開始したときしかし、それは場合にもかかわらず、一番上にその層をもたらし、目をカバーfabric.jsオブジェクトを別のオブジェクトの下に移動する

canvas.item(0).selectable = true; 
canvas.item(0).evented = true; 
canvas.item(1).selectable = false; 
canvas.item(1).evented = false; 

:アイブ氏とこれのほとんどを達成することができました私はオブジェクトの配列を印刷します、それはまだ身体層がインデックス0であると言います。私は何が欠けていますか?これも可能ですか?より高い目に見える層の下の下の層を動かすか?

fabric.Image.fromURL(imgString, function(oImg) { 

     oImg.scale(0.4); 
     canvas.centerObject(oImg); 
     canvas.add(oImg); 

     canvas.renderAll(); 


    }); 

答えて

2

は、単にこれを固定キャンバス初期化子に

preserveObjectStacking: true 

を追加:

これは私が最初にレイヤを追加している方法です。

var canvas = new fabric.Canvas('mainCanvas',{ 
     preserveObjectStacking: true 
    }); 
+0

私はこれを行いましたが、今は別の要素を選択する際に問題があります。例:https://fiddle.jshell.net/filiperoberto/zLz6cy2L/4/より大きな矩形を選択し、その後にテキストを選択してみてください –

関連する問題