本文主要针对可视化编辑器中常见的组合功能进行讲解,即将多个元素组合成一个整体元素
何为组合,我的理解为使多个独立的个体形成一个统一的整体,就好像 ‘草帽海贼团’ 就是由路飞和多名船员一起组成的。
为何需要组合
通常在可视化编辑器中,编辑区域会存在许多元素。当我们想对多个元素进行统一的管理,比如拖拽位置、调整大小时,组合功能就显得必不可少。
如下图:
有两个元素,假如我们想保持元素的相对位置关系,然后向右移动。
情况1:两个元素独立,你需要分别将两个元素移动相同的距离,才能保持之前的位置关系。(此时你需要一双像素眼、一只没有帕金森的黄金右手)
情况2:两个元素组合,只需要拖动组合,就可保持元素的相对位置关系。
以上情况只是2个元素,如果更多元素,那独立操作的可行性为0,所以说组合对于一个编辑器而言是必不可少的。
组合的数据构造
// 通常编辑器会有很多组件类型 eg:图片、文字、svg等,大体结构如下
{
id:111,
type:'image',
css:{...},
...
},
{
id:222,
type:'text',
css:{...},
...
}
// 假如将以上两个元素进行组合,那会创建一条组合数据,数据内应记录子元素的id
{
type:'group',
children:[111,222],
...
}
组合尺寸计算
元素组合时,需要遍历所有子元素,然后计算组合的尺寸及偏移信息
公式如下:
left = Math.min(...[所有子元素的left])
top = Math.min(...[所有子元素的top])
width = Math.max(...[所有子元素的left + 子元素自身width]) - 上面的left
height = Math.max(...[所有子元素的top + 子元素自身height]) - 上面的top
组合两种形式
如图所示:组合我这边列了两种模式
模式1: 组合后将组合作为容器,子元素插入到容器内部。需要注意几点:
- 组合后需要重塑子元素的偏移数据,假如组合容器的
left=100
,那么每个子元素在插入容器之前,需要将自身left - 100(top同理)
,以保持自身在整个画布中视觉的统一 - 组合取消后需要将上一步进行反向操作
模式2: 组合容器作为遮罩盖在子元素上方,无需处理子元素的偏移信息。
优缺点分析:
模式1 | 模式2 |
---|---|
增加了组合和解组时子元素的计算操作,但是在拖动时无需关注子元素的位置信息 | 省去了组合和解组时子元素的计算,但是在拖动组合时,需要动态计算子元素的位置进行赋值 |
以上就是组合的基本实现原理
此致 敬礼😀