fabric.js图层换位，多对多

例如有如下画布层级，四张图片 添加顺序分别为 0、1、2、3，越后面的层级越高，呈现出依次盖住的效果。

这里想实现0、1为一组然后换位置到2、3的上面，但是保持0、1的层级关系，如果直接用fabric提供的group对象进行层级上下移动会造成不能拆分的情况，而且就算拆分了group变为了原来的对象层级还是跟原来的一样

由此我想到了使用集合这个属性，fabric.Collection，这是一个静态属性，不需要new出来

---

下面copy出来我的代码

function up(index)为当前集合上移，function down(index)为当前集合下移

        function up(index) {
            let arr = fabric.Collection
            arr.add([canvas.getObjects()[0], canvas.getObjects()[1]])
            arr.add([canvas.getObjects()[2], canvas.getObjects()[3]])

            canvas.clear()
            let a = arr.item(index)
            arr.remove(arr.item(index))
            arr.insertAt(a, index + 1)

            arr.forEachObject(e => {
                canvas.add(...e)
            })

            // for (let i = 0; i < arr.size(); i++) {
            //     console.table(arr.item(i), ['id']);
            // }

            let length = arr.size()
            for (let i = 0; i < length; i++) {
                arr.remove(arr.item(0))
            }
            // console.table(canvas.getObjects(), ['id']);
        }

        function down(index) {
            let arr = fabric.Collection
            for (let i = 0; i < arr.size(); i++) {
                arr.remove(arr.item(i))
            }
            arr.add([canvas.getObjects()[0], canvas.getObjects()[1]])
            arr.add([canvas.getObjects()[2], canvas.getObjects()[3]])

            canvas.clear()
            let a = arr.item(index)
            arr.remove(arr.item(index))
            arr.insertAt(a, index - 1)

            arr.forEachObject(e => {
                canvas.add(...e)
            })

            // for (let i = 0; i < arr.size(); i++) {
            //     console.table(arr.item(i), ['id']);
            // }

            let length = arr.size()
            for (let i = 0; i < length; i++) {
                arr.remove(arr.item(0))
            }
            // console.table(canvas.getObjects(), ['id']);
        }

代码的思路的是：先把画布上的内容存放到集合中，再获取你点击到的组的索引，这时的结构应该是一个数组底下有两个数组对象：

假如点击的是group1，传入的值index为0，就是第一个表格的内容 id为 1和2的对象

这时对于集合也就是打印的数组来说，把第0个位置的数组对象先缓存然后在集合移除，只剩下了 id 3和4的对象，接着把之前缓存的数组对象给插入到集合 index+1 或者 index-1 的位置 【对应上移或者下移】，最后把整个集合里面的对象 依次添加到画布上就好啦。

在整个移除插入的过程之前先把画布内容存入集合再把整个画布之前的内容全部清空，再进行换位添加操作

最后实现如下效果：

层级上 1、2对象跑到了3、4对象的上面 也就是在后面了，并且单图也是能进行操作的