自定义页面的设计¶
统计信息：字数 3764 阅读8分钟
类似 PS 的布局，设计一个页面编辑工具
1 数据结构¶
1.1 App 应用¶
顶层是一个 app，包括下面的属性
| 属性名 | 含义 | 默认值 |
|---|---|---|
| id | 唯一标示 | 'asdf' |
| layers | 图层数组 | [layer1, layer2] |
1.2 Layers 图层¶
类似 PS 不同图层的功能，然后每一个图层可以设置不同的组件和效果（例如透明度），需要设置图层个数上限。
自身属性
| 属性名 | 含义 | 默认值 |
|---|---|---|
| id | 唯一标示 | 'asdf' |
| opacity | 透明度 | 0——1 可选小数 |
| background-color | 背景色 | '#fff' |
| angle | 旋转的角度 | 0-360 |
| z-idnex | 层级 | -999~+999 |
| width | 宽度 | 500px |
| height | 高度 | 500px |
| left | 距离左侧距离 | 0px |
| top | 距离顶部距离 | 0px |
| isLock | 是否锁定 | false |
内置属性
| 属性名 | 含义 | 默认值 |
|---|---|---|
| id | 图层唯一标示 | 'asdf' |
| elements | 图层元素 | [element1, element2] |
| Groups | 元素分组 | [group1, group2] |
1.3 element 对象¶
element 是一个原子节点，表示界面中某一个节点
| 属性名 | 含义 | 默认值 |
|---|---|---|
| id | 元素唯一标示 | '65gfjtsbxsmk' |
| type | 元素类型 | block line text chart image |
| width | 宽度 | 500px |
| height | 高度 | 500px |
| left | 距离左侧距离 | 0px |
| top | 距离顶部距离 | 0px |
| opacity | 透明度 | 0——1 可选小数 |
| background-color | 背景色 | '#fff' |
| data | 元素值 | text: string, line: line-width; image: url |
| isLock | 是否锁定 | false |
element 元素支持锁定和分组（把若干的元素节点组合成一个部分，主要用来处理拖动和旋转）
1.4 group 对象¶
element 是一个原子节点，表示界面中某一个节点
| 属性名 | 含义 | 默认值 |
|---|---|---|
| id | 元素唯一标示 | 'gju7g' |
| isLock | 是否锁定 | false |
| elementIds | 内部元素数组 | ['65gfjtsbxsmk', '65gfjtsbxsmk'] |
2 界面显示¶
类似 PS 界面
左侧是工具栏：有单选工具，区域选择工具（方形选择），智能选择工具（点击坐标，后端实现算法抠图）
右侧是状态栏：默认渲染全部 app 树结构；选中某个后，显示当前选中节点的状态，并支持更改。
中间是画布：下面说明
3 画布基本交互¶
初始化静态渲染：渲染每一个节点的位置，以及编辑过程
动态的操作如下
3.1 整体操作¶
界面缩放（鼠标滚动事件，键盘快捷键事件）
3.2 图层操作¶
设置层级等各种属性
3.3 元素操作¶
缩放；拖拽；旋转；选中（设置颜色，样式，用户自定义CSS）
3.4 组合操作¶
拖拽；旋转；锁定
4 存储逻辑¶
用户可以设置自动存储（30s），可以用户手动存储（command + S）
存储不同节点可以存在不同的数据库表中（频繁操作会发送很多数据，且考虑网络的延迟），也可以整体作为 JS 压缩包，存储在一个文件中
如果考虑多人协同，那么就使用每次更改都发请求。如果不考虑多人协同编辑（通常是设计师一个人完成设计工作，那么直接本地编辑，最后保存即可）
是否支持撤销回撤？如果支持撤销，那么就需要变成每一个 operation，然后写一个撤销的处理函数
5 主要技术栈¶
React
React-redux
Reactstrap
React-color
Raect-dnd
Last update:
November 9, 2024