获取fabric js中选定对象的z-index答案

【问题标题】：Get z-index of selected object in fabric js获取fabric js中选定对象的z-index
【发布时间】：2018-05-03 15:14:01
【问题描述】：

我正在尝试获取 fabric js 中选定对象的 z-index。有没有办法得到它？

var z_index = 1;
$('#manage_index').change(function(){
    var cur_value = $(this).val();
    if(cur_value!='')
    {
        var object = canvas.getActiveObject();
        if(cur_value=='up') // Means increase z-index
        {
            canvas.moveTo(object, z_index);
            z_index = z_index + 1;
        }
        else if(cur_value=='back') //Means decrease z-index
        {

            //var temp_index = 0; // If set it to 0, it will goes into backward, 
            //But i am trying to implement something like below
            var temp_index = canvas.get('z-index');// Get the z-index of selected object and then decrease it
            canvas.moveTo(object, temp_index-1);
        }
    }
     $(this).val('');
});

【问题讨论】：

您要更改对象顺序吗？？
@Durga 是的，我正在尝试实现前向/后向功能，类似于 z-index。表示将物体向上或向后移动。假设画布中有 5 个对象，如果我选择其中一个对象，我将尝试获取该选定对象的 z-index。

标签： javascript jquery canvas fabricjs

【解决方案1】：

var canvas = new fabric.Canvas('a');
canvas.add(new fabric.Rect({
 left:50,
 top:50,
 height:50,
 width:50,
 fill:'red'
}));
canvas.add(new fabric.Rect({
 left:70,
 top:70,
 height:50,
 width:50,
 fill:'green'
}));
canvas.add(new fabric.Rect({
 left:90,
 top:90,
 height:50,
 width:50,
 fill:'blue'
}));
canvas.renderAll();
function getIndex(){
 var activeObj = canvas.getActiveObject();
 console.log(activeObj && canvas.getObjects().indexOf(activeObj));
}
function bringToFront(){
 var activeObj = canvas.getActiveObject();
 activeObj && canvas.bringToFront(activeObj).discardActiveObject(activeObj).renderAll();
}

canvas {
  border: 2px solid black;
}

<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
<button onclick='getIndex()'>Index</button>
<button onclick='bringToFront()'>bringToFront</button>
<canvas id="a" width="200" height="200"></canvas>

由于结构对象存储在数组中，您可以使用indexOf 获取索引。要重新排列顺序，您可以使用bringToFront、bringForward、sendBackwards、sendToBack。和moveTo 到指定索引。

【讨论】：

@DS9 编码快乐 ;)

【解决方案2】：

我认为它已经在最新的 Fabric.js 版本中实现了，但您仍然可以扩展 Fabric 对象原型：

fabric.Object.prototype.getZIndex = function() {
    return this.canvas.getObjects().indexOf(this);
}

【讨论】：