FabricJS - 選択するとオブジェクトが前面に表示されます

Question

オブジェクトのグループを選択すると、すべてのオブジェクトが自動的にすべての上にレンダリングされます。これは選択された要素の上にあった他の要素を選択することを困難にする厄介な動作です。

その例は、hereです。

function newRect(index) { 
    return new fabric.Rect({ 
    width: 100, 
    height: 100, 
    top: index * 30, 
    left: index * 30, 
    fill: '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6), 
    }); 
} 

var canvas = new fabric.Canvas('canvas'); 

var rect0 = newRect(0); 
canvas.add(rect0); 

var rect1 = newRect(1); 
canvas.add(rect1); 

var rect2 = newRect(2); 
canvas.add(rect2); 

var group = new fabric.Group([rect0, rect1]); 

canvas.setActiveGroup(group).renderAll(); 

setTimeout(function() { 
    canvas.discardActiveGroup().renderAll(); 
}, 5000); 

別の要素の後ろにある2つの要素が選択されると、3番目の要素の上にレンダリングされます。しかし、それらが選択解除されると（グループが破棄されるまで5秒待つ）、要素の上に正しく表示されます。

この動作を無効にする方法はありますか？私は選択された要素が選択されている間にz順を維持し、すべてのものの上にないことを望みます。

Answer 1

私は解決策を見つけたと思います。

キャンバスを初期化するときに、追加のpreserveObjectStacking: trueオプションを追加する必要があります。

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

https://jsfiddle.net/fbgu7697/3/

私が期待どおりに動作しますが、奇妙なバグを持っているようです。私はgithubでそれを開きます。

UPDATEは

問題は、すでに1.6.1バージョンで修正されました。

https://jsfiddle.net/1vawp9gu/