Javascript 将路径添加到fabric.js组是反转位置还是z索引？

我试图通过id在一个组中添加路径。但它似乎要么颠倒路径的位置，要么像z索引一样[red，blue，green]变为[green，blue，red]。如何以正确的方式执行此操作

var id_no;
var objList=[];
if (!id_no) { id_no=1; }

canvas.on('path:created',function(e) {
    e.path.id=id_no;
    objList.push(id_no);
    id_no++;
});

$( "#path-group" ).on( "click", function() {
    var group = new fabric.Group();
    canvas.forEachObject(function(o) {
        if (o.id > 0) {
            group.addWithUpdate(o);
            canvas.remove(o);
        }
    });
    canvas.setActiveObject(group);
    canvas.add(group);
  });

---

我认为您只是遇到了在数组上循环，同时从该数组中删除内容的问题。当你这样做的时候，当你在数组上循环时，索引开始改变，结果是一些奇怪的行为

因此，下面解决方案的主要部分是获取一个对象列表，该列表不仅仅是对内部结构对象列表的引用，如果从中删除内容，该列表将发生更改

window.canvas；
$（函数（）{
canvas=window.\u canvas=newfabric.canvas（'canvas'）；
canvas.backgroundColor='#efefef'；
canvas.isDrawingMode=true；
canvas.freedrawingprush.color=“紫色”；
canvas.freeDrawingBrush.width=10；
canvas.renderAll（）；
document.getElementById（'colorpicker'）。addEventListener（'click'，函数（e）{
canvas.freedrawingprush.color=e.target.value；
});
变量id_no；
var objList=[]；
如果（！id_no）{id_no=0；}
canvas.on（'path:created'，函数（e）{
id_no++；
e、 path.id=id\u no；
对象列表推送（标识号）；
$（“#log”）.append（id#u no+”）；
});
document.getElementById（'path-group'）。addEventListener（'click'，函数（e）{
$（“#log”）.append（'->'）；
var allObjects=canvas.getObjects（）.slice（）；
var someObjects=allObjects.filter（o=>{
返回o.id>=id\U no-1
})
someObjects.forEach（o=>{
画布。移除（o）；
});
var group=newfabric.group（someObjects）；
canvas.add（组）；
canvas.setActiveObject（组）；
canvas.renderAll（）；
canvas.isDrawingMode=false；
});
});
.canvas包装器{
边际波托姆：30像素；
}

黄色的
黑色
团体
事件日志：

您能否将其转化为一段代码片段，以运行并演示问题？谢谢我做了一把小提琴，但它给了我另一个我在项目中没有遇到的问题：canvas.remove（o）；正在制造麻烦-控制台：“TypeError:o未定义”。好的，这绝对是正确分组的诀窍。所以我复制了一个我不想分组的对象，但我不确定如何通过“id”过滤复制？我想我需要为此做一个循环，并将项目推送到一个数组中？javascript中有一个过滤函数bult，它也返回一个新数组，而不是一个函数：
allObjects.filter（函数（对象）{return 5==object.id；}）
我试过了，但还是把画布上的所有内容都分组了：我更新了答案，只对添加到画布上的最后2条路径进行了分组。请记住，过滤器不会影响您正在操作的数组，而是返回一个新数组。Genieus！这真是太棒了！谢谢斯蒂凡海登：-）