fabric.js图层换位，多对多

最新推荐文章于 2024-09-02 22:26:11 发布

akko_

最新推荐文章于 2024-09-02 22:26:11 发布

阅读量1.8w

点赞数

分类专栏： vue 文章标签： vue.js fabric

本文链接：https://blog.csdn.net/qq_29523089/article/details/121615012

版权

vue 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

这篇博客探讨了如何在fabric.js环境中，针对四张图片的层级关系进行动态调整，使得0、1号图片可以作为一个组，分别替换到2、3号图片之上，同时保持它们原有的内部层级顺序。作者提出了利用fabric.Collection静态属性来实现这一目标，通过创建集合、移动对象、更新画布等步骤，成功实现了所需效果，避免了group对象带来的问题。

摘要由CSDN通过智能技术生成

例如有如下画布层级，四张图片添加顺序分别为 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']);
        }