Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

如果要基于现有源码添加图层(类似z-index)有什么思路上的建议? #4

Open
happiren opened this issue Sep 14, 2023 · 5 comments
Labels
Todo Need to finish

Comments

@happiren
Copy link

看了下源码,源码封装的很好,使用中遇到个问题,假设有多张图片或者其他的组件时,鼠标点中哪个组件对应组件就被默认拉到最顶层了,这个不是最优的解决方案,特别是不小心点中了背景图就尴尬了,应该把选择权留个使用者,如果想要对每个组件都可以自由的设置层级顺序,这个思路该从和下手去修改?

@artisanbox
Copy link
Contributor

目前组件是通过一个数组中的元素顺序来渲染的,最好的做法应该是需要有个面板来显示图层。
目前是点击后,组件自动调度到 top,渲染的时候自然就是最上层了。

@artisanbox
Copy link
Contributor

shape_controls.js 的逻辑应该在这

// 遍历 shapes 把 selected shape 的移到末尾, 其他顺序不变
let selectedShape = null
for (let i = self.shapes.length - 1; i >= 0; i--) {
    let shape = self.shapes[i]
    if (shape.isSelected()) {
        selectedShape = shape
        self.shapes.splice(i, 1)
        break
    }
}

@happiren
Copy link
Author

组件添加shapeIndex属性,修改shape_controls.js遍历排序可以实现图层自定义排序

shapeSortIndex(){ let shapes = this.shapes; for(let i = 0; i < shapes.length - 1; i += 1) { for(let j = 0; j < shapes.length - 1; j += 1) { if(shapes[j].shapeIndex < shapes[j+1].shapeIndex) { let tmp = shapes[j+1]; shapes[j+1] = shapes[j]; shapes[j] = tmp; } } } this.shapes = shapes; }

shape_controls.js 的逻辑应该在这

// 遍历 shapes 把 selected shape 的移到末尾, 其他顺序不变
let selectedShape = null
for (let i = self.shapes.length - 1; i >= 0; i--) {
    let shape = self.shapes[i]
    if (shape.isSelected()) {
        selectedShape = shape
        self.shapes.splice(i, 1)
        break
    }
}

@hellojuantu hellojuantu added the Todo Need to finish label Jan 29, 2024
@hellojuantu
Copy link
Owner

是的,这个近期会实现一下。

@jandy0414
Copy link

是的,这个近期会实现一下。

太棒了
请问:这个图层管理功能,何时能上了??

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Todo Need to finish
Projects
None yet
Development

No branches or pull requests

4 participants