FabricJS - オブジェクトが選択されたときにレイヤーインデックスが変更されないようにする

Question

FabricJSアプリケーションに問題があります。デフォルトでは、fabricjs内のオブジェクトレイヤーは、選択すると上に移動します。

このオプションを無効にして、アクティブな要素のインデックスが変更されないようにします。それが可能だ ？

Answer 1

キャンバスを設定するときは、次のコードに示すように、preserveObjectStackingオプションを設定するだけです。

var fabricCanvas = new fabric.Canvas("t", { preserveObjectStacking: true }); 
 

 
fabricCanvas 
 
    .add(new fabric.Rect({ 
 
    top: 0, 
 
    left: 0, 
 
    width: 100, 
 
    height: 100, 
 
    fill: "green" 
 
    })) 
 
    .add(new fabric.Rect({ 
 
    top: 50, 
 
    left: 50, 
 
    width: 100, 
 
    height: 100, 
 
    fill: "red" 
 
    })) 
 
    .add(new fabric.Rect({ 
 
    top: 100, 
 
    left: 100, 
 
    width: 100, 
 
    height: 100, 
 
    fill: "blue" 
 
    })) 
 
    .renderAll();

canvas { 
 
    border: 1px solid black; 
 
}

<canvas id="t" width="400" height="300"></canvas> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script>