. 在計算機中,選區是一個很常見的功能,例如windows按住鼠標左鍵拖動劃出矩形選區,Photshop經過鋼筆工具任意形狀選區.選區自己不過是經過線段閉合的一個幾何形狀,可是如何填充這個選區,則是一件相對棘手的問題.算法
. 要在屏幕顯示填充的圖形,必然要將圖形光柵化到屏幕上,而目前全部的底層圖形API僅支持對三角形的填充,所以要實現任意形狀填充須要將這個形狀切割成多個三角形,再經過圖形API進行繪製.windows
. 上圖是一個簡單又不簡單的選區,經過6個點組合出一個簡單的幾何形狀,但不簡單的是,這個幾何有一處交叉,所以構成了兩個閉合空間.若是把兩個閉合空間分離出來,再逐個切割三角形,則會簡單不少.工具
算法: 從多邊形的第三個頂點開始,每一個頂點與下一個頂點造成一條線段,再依次與以前的頂點線段求交點,一旦出現交點,則必然產生一個閉合路徑,以交點爲界,剝離這個閉合路徑便可,循環此步驟,直到沒有交點爲止..net
結果3d
. 上圖的幾何將閉合空間剝離以後,獲得兩個凸多邊形,而凸多邊形很容易切分出多個三角形,上圖顏色區分了每一個三角形,其實現思路是從凸多邊形的中心到凸多邊形的每一個頂點造成三角形,也能夠從凸多邊形的某一個點依次到每一個頂點造成三角形.這個方法只適合凸多邊形,當選區是凹多邊形的時候,它就會出問題.blog
. 上圖是一個簡單的凹多邊形,對於凹多邊形,不能直接切分三角形,要先切分凸多邊形,再切分三角形.bfc
算法: 在多邊形的凹點處,延伸出一條線段,鏈接到最近的邊,這條線段做爲交界,劃分出兩個多邊形,再分別將這兩個多邊形重複此步驟,直到沒有凹點,則這個多邊形是凸多邊形.循環
結果方法
. 從上圖能夠看到,凹多邊形多出了幾條邊,這幾條邊將凹多邊形切分紅了多個凸多邊形,剩下的事就好辦了,只要按凸多邊形切分三角形就好了.im
本文到這就結束了,如下是更復雜的形狀填充演示.