算法 & 數據結構——任意多邊形填充


需求

.  在計算機中,選區是一個很常見的功能,例如windows按住鼠標左鍵拖動划出矩形選區,Photshop通過鋼筆工具任意形狀選區.選區本身不過是通過線段閉合的一個幾何形狀,但是如何填充這個選區,則是一件相對棘手的問題.

光柵化

.  要在屏幕顯示填充的圖形,必然要將圖形光柵化到屏幕上,而目前所有的底層圖形API僅支持對三角形的填充,因此要實現任意形狀填充需要將這個形狀切割成多個三角形,再通過圖形API進行繪制.

2個閉合路徑.gif

.  上圖是一個簡單又不簡單的選區,通過6個點組合出一個簡單的幾何形狀,但不簡單的是,這個幾何有一處交叉,因此構成了兩個閉合空間.如果把兩個閉合空間分離出來,再逐個切割三角形,則會簡單很多.

算法: 從多邊形的第三個頂點開始,每個頂點與下一個頂點形成一條線段,再依次與之前的頂點線段求交點,一旦出現交點,則必然產生一個閉合路徑,以交點為界,剝離這個閉合路徑即可,循環此步驟,直到沒有交點為止.

結果

2個閉合路徑填充.png)

.  上圖的幾何將閉合空間剝離之后,得到兩個凸多邊形,而凸多邊形很容易切分出多個三角形,上圖顏色區分了每個三角形,其實現思路是從凸多邊形的中心到凸多邊形的每個頂點形成三角形,也可以從凸多邊形的某一個點依次到每個頂點形成三角形.這個方法只適合凸多邊形,當選區是凹多邊形的時候,它就會出問題.

凹多邊形.png

.  上圖是一個簡單的凹多邊形,對於凹多邊形,不能直接切分三角形,要先切分凸多邊形,再切分三角形.

算法: 在多邊形的凹點處,延伸出一條線段,連接到最近的邊,這條線段作為交界,划分出兩個多邊形,再分別將這兩個多邊形重復此步驟,直到沒有凹點,則這個多邊形是凸多邊形.

結果

凹多邊形切割.png

.  從上圖可以看到,凹多邊形多出了幾條邊,這幾條邊將凹多邊形切分成了多個凸多邊形,剩下的事就好辦了,只要按凸多邊形切分三角形就行了.

凹多邊形填充.png

本文到這就結束了,以下是更復雜的形狀填充演示.

效果展示1.gif

效果展示2.gif


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM