自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

圖形編輯器:對齊功能的實現(xiàn)

開發(fā) 前端
AABB(axis-aligned bounding box)指的是 軸對齊包圍盒。指的是包圍圖形的矩形,但 4 條邊平行于坐標軸。

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

對齊功能

實現(xiàn)圖形編輯器的對齊功能。

編輯器 github 地址:

https://github.com/F-star/suika

線上體驗:

https://blog.fstars.wang/app/suika/

原理不復雜。

首先要指定多個圖形,不能只有一個。因為一個的話是沒有參照物的,只能自己參照自己,位移距離為 0。

先求出每個圖形的 AABB 包圍盒。

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

如下圖,最外層的就是 AABB 包圍盒。

里面帶有旋轉(zhuǎn)角度的是 OBB 包圍盒子,oriented bounding box (OBB)。優(yōu)點是能更緊密的包裹圖形,但帶了旋轉(zhuǎn),在判斷碰撞時要額外進行處理。

AABB 我用下面結(jié)構(gòu)表示:

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

計算好全部 AABB 包圍盒后,再計算這些包圍盒共同組成的大包圍盒,我暫且稱其為 mixedBBox。這個大包圍盒會作為對齊的參照。

左對齊

首先是 左對齊。

其實就是讓所有圖形的 AABB 包圍盒的左邊和 mixedBBox 的左側(cè)對齊。

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 右側(cè)對齊:

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;
}

結(jié)尾

另外,如果圖形編輯器還有一個舞臺,也可以選中單個圖形,讓這個圖形讓舞臺的盒作為 mixedBBox 進行對齊。

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

責任編輯:姜華 來源: 前端西瓜哥
相關(guān)推薦

2023-02-01 09:21:59

圖形編輯器標尺

2023-04-10 08:45:44

圖形編輯器排列移動功能

2023-07-31 08:46:07

圖形編輯器圖形自動對齊

2023-10-19 10:12:34

圖形編輯器開發(fā)縮放圖形

2023-09-26 07:39:21

2023-01-18 08:30:40

圖形編輯器元素

2023-09-07 08:24:35

圖形編輯器開發(fā)繪制圖形工具

2023-08-31 11:32:57

圖形編輯器contain

2023-02-06 16:59:57

Canvas編輯器

2023-10-08 08:11:40

圖形編輯器快捷鍵操作

2023-02-02 14:07:00

圖形編輯器Canvas

2024-01-08 08:30:05

光標圖形編輯器開發(fā)游標

2023-09-11 09:02:31

圖形編輯器模塊間的通信

2023-05-09 08:15:32

圖形編輯器撤銷重做功能

2023-02-09 07:02:30

圖形編輯器修改圖形

2023-03-03 10:24:51

2023-08-28 08:10:50

Hex圖形編輯器

2023-10-10 16:04:30

圖形編輯器格式轉(zhuǎn)換

2022-03-20 18:12:03

Shotcut開源視頻編輯器

2023-10-20 08:02:25

圖形編輯器前端
點贊
收藏

51CTO技術(shù)棧公眾號