7月安卓手機(jī)性價(jià)比榜：努比亞+紅魔兩款新機(jī)入榜
7月登場的新機(jī)有努比亞Z50S Pro和紅魔8S Pro，除了三星之外目前唯二的兩款搭載超頻版驍龍8Gen2處理器的產(chǎn)品，而且努比亞和紅魔也一貫有著不錯(cuò)的性價(jià)比，所以在本次的性價(jià)比榜單
大家好，我是前端西瓜哥。
開發(fā)圖形編輯器，你會(huì)經(jīng)常要解決一些算法問題。本文盤點(diǎn)一些我開發(fā)圖形編輯器時(shí)常用到的簡單幾何算法。
判斷兩個(gè)矩形是否發(fā)生碰撞（或者說相交），即兩個(gè)矩形有重合的區(qū)域。
常見使用場景：
使用選擇工具框選圖形（框選策略除了相交，還可以用相交或其他方案）。
遍歷圖形，通過判斷視口矩形和圖形包圍盒的矩形碰撞，剔除掉視口外的圖形渲染操作，提高性能。
export function isRectIntersect2(rect1: IBox2, rect2: IBox2) { return ( rect1.minX <= rect2.maxX && rect1.maxX >= rect2.minX && rect1.minY <= rect2.maxY && rect1.maxY >= rect2.minY );}關(guān)于 IBox2 為包圍盒的接口簽名：
interface IBox2 { minX: number; minY: number; maxX: number; maxY: number;}
該算法用于判斷矩形 1 是否包含矩形 2。
常見使用場景：
使用選擇工具框選圖形（這次用的是包含策略）；
function isRectContain2(rect1: IBox2, rect2: IBox2) { return ( rect1.minX <= rect2.minX && rect1.minY <= rect2.minY && rect1.maxX >= rect2.maxX && rect1.maxY >= rect2.maxY );}對圖形旋轉(zhuǎn)，是一個(gè)非常基礎(chǔ)的功能。計(jì)算旋轉(zhuǎn)后的點(diǎn)是很常見的需求。
常見使用場景：
用到三角函數(shù)算法。
const transformRotate = ( x: number, y: number, radian: number, cx: number, cy: number,) => { if (!radian) { return { x, y }; } const cos = Math.cos(radian); const sin = Math.sin(radian); return { x: (x - cx) * cos - (y - cy) * sin + cx, y: (x - cx) * sin + (y - cy) * cos + cy, };}
常見使用場景：
用于實(shí)現(xiàn)圖形拾取，判斷矩形圖形或包圍盒是否在光標(biāo)位置上。
function isPointInRect(point: IPoint, rect: IRect) { return ( point.x >= rect.x && point.y >= rect.y && point.x <= rect.x + rect.width && point.y <= rect.y + rect.height );}選中多個(gè)矩形時(shí)，要計(jì)算它們組成的大矩形，然后繪制出大選中框。
function getRectsBBox(...rects: IRect[]): IBox { if (rects.length === 0) { throw new Error('the count of rect can not be 0'); } const minX = Math.min(...rects.map((rect) => rect.x)); const minY = Math.min(...rects.map((rect) => rect.y)); const maxX = Math.max(...rects.map((rect) => rect.x + rect.width)); const maxY = Math.max(...rects.map((rect) => rect.y + rect.height)); return { x: minX, y: minY, width: maxX - minX, height: maxY - minY, };}這里用的是另一種包圍盒子的表達(dá)，所以多了一層轉(zhuǎn)換。
interface IRect = { x: number; y: number; width: number; height: number;}type IBox = IRect通過旋轉(zhuǎn)控制點(diǎn)旋轉(zhuǎn)圖形時(shí)，需要通過向量的點(diǎn)積公式來計(jì)算移動(dòng)的夾角，去更新圖形的旋轉(zhuǎn)角度。
計(jì)算 [x - cx, y - cy] 和 [0, -1] 兩個(gè)向量夾角的算法實(shí)現(xiàn)：
/** * 求向量到右側(cè)軸(x正半軸)的夾角 * 范圍在 [0, Math.PI * 2) */export function calcVectorRadian(cx: number, cy: number, x: number, y: number) { const a = [x - cx, y - cy]; const b = [0, -1]; const dotProduct = a[0] * b[0] + a[1] * b[1]; const d = Math.sqrt(a[0] * a[0] + a[1] * a[1]) * Math.sqrt(b[0] * b[0] + b[1] * b[1]); let radian = Math.acos(dotProduct / d); if (x < cx) { radian = Math.PI * 2 - radian; } return radian;}做圖形編輯器，經(jīng)常要和幾何算法打交道，各種相交判斷、居中計(jì)算、光標(biāo)縮放、找最近的參照線等等。
這對算法能力有一定要求的，建議多去刷刷 leetcode。此外就是多畫圖分析。
在開發(fā)中，我們還要自己去分析需求，結(jié)合圖形編輯器的具體實(shí)現(xiàn)，抽離出算法問題，并配合合適的數(shù)據(jù)結(jié)構(gòu)，去解題。解法可能一次不是最優(yōu)解， 但我們可以慢慢迭代，慢慢優(yōu)化的。
雖然有點(diǎn)耗腦細(xì)胞，但最后把難題解決，還是非常有成就感。
本文鏈接：http://www.tebozhan.com/showinfo-26-5160-0.html圖形編輯器開發(fā)：一些會(huì)用到的簡單幾何算法
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號