建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是前端西瓜哥。這次來簡(jiǎn)單說說實(shí)現(xiàn)圖形編輯器對(duì)齊功能的思路。
十余年的沙縣網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整沙縣建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“沙縣網(wǎng)站設(shè)計(jì)”,“沙縣網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
對(duì)齊功能
實(shí)現(xiàn)圖形編輯器的對(duì)齊功能。
編輯器 github 地址：
https://github.com/F-star/suika
線上體驗(yàn)：
https://blog.fstars.wang/app/suika/
原理不復(fù)雜。
首先要指定多個(gè)圖形，不能只有一個(gè)。因?yàn)橐粋€(gè)的話是沒有參照物的，只能自己參照自己，位移距離為 0。
先求出每個(gè)圖形的 AABB 包圍盒。
AABB（axis-aligned bounding box）指的是 軸對(duì)齊包圍盒。指的是包圍圖形的矩形，但 4 條邊平行于坐標(biāo)軸。
如下圖，最外層的就是 AABB 包圍盒。
里面帶有旋轉(zhuǎn)角度的是 OBB 包圍盒子，oriented bounding box (OBB)。優(yōu)點(diǎn)是能更緊密的包裹圖形，但帶了旋轉(zhuǎn)，在判斷碰撞時(shí)要額外進(jìn)行處理。
AABB 我用下面結(jié)構(gòu)表示：
interface IBox2 {
minX: number;
minY: number;
maxX: number;
maxY: number;
}計(jì)算好全部 AABB 包圍盒后，再計(jì)算這些包圍盒共同組成的大包圍盒，我暫且稱其為 mixedBBox。這個(gè)大包圍盒會(huì)作為對(duì)齊的參照。
左對(duì)齊
首先是 左對(duì)齊。
其實(shí)就是讓所有圖形的 AABB 包圍盒的左邊和 mixedBBox 的左側(cè)對(duì)齊。
for (let i = 0; i < elements.length; i++) {
const el = elements[i];
const dx = mixedBBox.minX - bBoxes[i].minX;
el.x += dx;
}水平對(duì)齊（左右對(duì)齊）
水平對(duì)齊，指的是將多個(gè)圖形的 x 坐標(biāo)往中間靠攏。
讓所有圖形的包圍盒的中心的垂直中線和 mixedBBox 的中心垂直中線對(duì)齊。
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;
}
右對(duì)齊
所有圖形的包圍盒和 mixedBBox 右側(cè)對(duì)齊：
for (let i = 0; i < elements.length; i++) {
const el = elements[i];
const dx = mixedBBox.maxX - bBoxes[i].maxX;
el.x += dx;
}頂對(duì)齊
for (let i = 0; i < elements.length; i++) {
const el = elements[i];
const dy = mixedBBox.minY - bBoxes[i].minY;
el.y += dy;
}垂直對(duì)齊（上下對(duì)齊）
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;
}底對(duì)齊：
for (let i = 0; i < elements.length; i++) {
const el = elements[i];
const dy = mixedBBox.maxY - bBoxes[i].maxY;
el.y += dy;
}結(jié)尾
另外，如果圖形編輯器還有一個(gè)舞臺(tái)，也可以選中單個(gè)圖形，讓這個(gè)圖形讓舞臺(tái)的盒作為 mixedBBox 進(jìn)行對(duì)齊。
開發(fā)一款圖形工具，會(huì)遇到很多有趣的簡(jiǎn)單幾何算法小知識(shí)，解決后挺有成就感的。
本文題目：圖形編輯器：對(duì)齊功能的實(shí)現(xiàn)
新聞來源：http://m.5511xx.com/article/cdejsje.html
