图形编辑器：对齐功能的实现

大家好，我是前端西瓜哥。这次来简单说说实现图形编辑器对齐功能的思路。

对齐功能

实现图形编辑器的对齐功能。

编辑器 github 地址：

github.com/F-star/suik…

线上体验：

blog.fstars.wang/app/suika/

原理不复杂。

首先要指定多个图形，不能只有一个。因为一个的话是没有参照物的，只能自己参照自己，位移距离为 0。

先求出每个图形的 AABB 包围盒。

AABB（axis-aligned bounding box）指的是 轴对齐包围盒。指的是包围图形的矩形，但 4 条边平行于坐标轴。

如下图，最外层的就是 AABB 包围盒。

里面带有旋转角度的是 OBB 包围盒子，oriented bounding box (OBB)。优点是能更紧密的包裹图形，但带了旋转，在判断碰撞时要额外进行处理。

AABB 我用下面结构表示：

interface IBox2 {
  minX: number;
  minY: number;
  maxX: number;
  maxY: number;
}

计算好全部 AABB 包围盒后，再计算这些包围盒共同组成的大包围盒，我暂且称其为 mixedBBox。这个大包围盒会作为对齐的参照。

左对齐

首先是 左对齐。

其实就是让所有图形的 AABB 包围盒的左边和 mixedBBox 的左侧对齐。

for (let i = 0; i < elements.length; i++) {
  const el = elements[i];
  const dx = mixedBBox.minX - bBoxes[i].minX;
  el.x += dx;
}

水平对齐（左右对齐）

水平对齐，指的是将多个图形的 x 坐标往中间靠拢。

让所有图形的包围盒的中心的垂直中线和 mixedBBox 的中心垂直中线对齐。

const centerX = mixedBBox.minX / 2 + mixedBBox.maxX / 2;
for (let i = 0; i < elements.length; i++) {
  const el = elements[i];
  const dx = centerX - (bBoxes[i].minX / 2 + bBoxes[i].maxX / 2);
  el.x += dx;
}

右对齐

所有图形的包围盒和 mixedBBox 右侧对齐：

for (let i = 0; i < elements.length; i++) {
  const el = elements[i];
  const dx = mixedBBox.maxX - bBoxes[i].maxX;
  el.x += dx;
}

顶对齐

for (let i = 0; i < elements.length; i++) {
  const el = elements[i];
  const dy = mixedBBox.minY - bBoxes[i].minY;
  el.y += dy;
}

垂直对齐（上下对齐）

for (let i = 0; i < elements.length; i++) {
  const el = elements[i];
  dy = centerY - (bBoxes[i].minY / 2 + bBoxes[i].maxY / 2);
  el.y += dy;
}

底对齐

for (let i = 0; i < elements.length; i++) {
  const el = elements[i];
  const dy = mixedBBox.maxY - bBoxes[i].maxY;
  el.y += dy;
}

结尾

另外，如果图形编辑器还有一个舞台，也可以选中单个图形，让这个图形让舞台的盒作为 mixedBBox 进行对齐。

开发一款图形工具，会遇到很多有趣的简单几何算法小知识，解决后挺有成就感的。

我是前端西瓜哥，欢迎关注我，学习更多前端图形知识。