可视化编辑器 之 多元素组合功能解析

963 阅读3分钟

本文主要针对可视化编辑器中常见的组合功能进行讲解,即将多个元素组合成一个整体元素

42d9f0cf5dca92587393c3950625c962.jpg

何为组合,我的理解为使多个独立的个体形成一个统一的整体,就好像 ‘草帽海贼团’ 就是由路飞和多名船员一起组成的。

为何需要组合

通常在可视化编辑器中,编辑区域会存在许多元素。当我们想对多个元素进行统一的管理,比如拖拽位置、调整大小时,组合功能就显得必不可少。

如下图:

有两个元素,假如我们想保持元素的相对位置关系,然后向右移动。

情况1:两个元素独立,你需要分别将两个元素移动相同的距离,才能保持之前的位置关系。(此时你需要一双像素眼、一只没有帕金森的黄金右手)

情况2:两个元素组合,只需要拖动组合,就可保持元素的相对位置关系。

以上情况只是2个元素,如果更多元素,那独立操作的可行性为0,所以说组合对于一个编辑器而言是必不可少的。

iShot_2023-04-25_09.58.57.png

组合的数据构造

// 通常编辑器会有很多组件类型 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

组合两种形式

iShot_2023-04-25_10.42.49.png

如图所示:组合我这边列了两种模式

模式1: 组合后将组合作为容器,子元素插入到容器内部。需要注意几点:

  • 组合后需要重塑子元素的偏移数据,假如组合容器的left=100,那么每个子元素在插入容器之前,需要将自身left - 100(top同理),以保持自身在整个画布中视觉的统一
  • 组合取消后需要将上一步进行反向操作

模式2: 组合容器作为遮罩盖在子元素上方,无需处理子元素的偏移信息。

优缺点分析:

模式1模式2
增加了组合和解组时子元素的计算操作,但是在拖动时无需关注子元素的位置信息省去了组合和解组时子元素的计算,但是在拖动组合时,需要动态计算子元素的位置进行赋值

以上就是组合的基本实现原理

此致 敬礼😀