圖形編輯器：對齊功能的實現

作者：前端西瓜哥 2023-04-07 08:02:30

開發前端

AABB（axis-aligned bounding box）指的是軸對齊包圍盒。指的是包圍圖形的矩形，但 4 條邊平行于坐標軸。

大家好，我是前端西瓜哥。這次來簡單說說實現圖形編輯器對齊功能的思路。

對齊功能

實現圖形編輯器的對齊功能。

編輯器 github 地址：
https://github.com/F-star/suika
線上體驗：
https://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 進行對齊。

開發一款圖形工具，會遇到很多有趣的簡單幾何算法小知識，解決后挺有成就感的。

責任編輯：姜華來源：前端西瓜哥

圖形編輯器對齊功能

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

圖形編輯器：對齊功能的實現

對齊功能

左對齊

水平對齊（左右對齊）

右對齊

頂對齊

垂直對齊（上下對齊）

結尾