fabric.js图层换位，多对多_fabric 图层_akko_的博客

例如有如下画布层级，四张图片添加顺序分别为 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对象的上面 也就是在后面了，并且单图也是能进行操作的

元素是 Fabric.js 的重要组成部分，如果画布上没有元素，那其实没啥意义。
元素数量多了，难免会产生重叠。又或者某些效果需要几个元素重叠起来。这些情况大概率需要控制元素的层级。
本文将讲解 Fabric.js 中的5种控制元素层级的方法。
                                    Fabric.js
 Fabric.js是一个易于使用HTML5 canvas元素的框架。 它是画布元素顶部的交互式对象模型。 它也是SVG画布解析器。
 使用Fabric.js，您可以在画布上创建和填充对象。 对象，例如简单的几何形状-矩形，圆形，椭圆形，多边形，或更复杂的形状，包含数百或数千个简单路径。 然后，您可以使用鼠标缩放，移动和旋转这些对象。 修改它们的属性-颜色，透明度，z-index等。您还可以一起操纵这些对象-通过简单的鼠标选择将它们分组。
面料非技术介绍
Fabric.js允许您使用JavaScript在网页上HTML <canvas>元素上轻松创建简单的形状，例如矩形，圆形，三角形和其他多边形，或者由许多路径组成的更复杂的形状。 然后，Fabric.js将允许您使用鼠标来操纵这些对象的大小，位置和旋转。 也可以使用Fabric.js库更改这些对象的某些属性，例如它们的
                                    目录1. 结构介绍2. 核心代码3. 核心模块3.1 peer 系统模块3.2 order 系统模块3.3 cryptogen 工具模块3.4 configtxgen 工具模块3.5 configtxlator 工具模块
1. 结构介绍
                                    一、分组（Groups）
    Groups是Fabric最强大的功能之一，它可以将任意数量的Fabric对象组合在一起，形成一个小组，分组后，所有对象都可以一起移动、修改、缩放、旋转甚至更改其外观等
                                    fabric.js 学习（一）
一、概念（什么是fabric.js?
fabric.js是一个canvas（画布）的库，可以在canvas上绘制图形（包括文字）以及对画布大小的修改，文字样式的修改，图案（图形）颜色填充以及样式大小的修改，生成json、svg数据，生成的canvas功能自带拖拽功能。用来实现类似在线图片编辑等类型的项目选用fabric.js是一个不错的选择。
二、基础使用
首先引入...