需求
. 在計算機中,選區是一個很常見的功能,例如windows按住鼠標左鍵拖動划出矩形選區,Photshop通過鋼筆工具任意形狀選區.選區本身不過是通過線段閉合的一個幾何形狀,但是如何填充這個選區,則是一件相對棘手的問題.
光柵化
. 要在屏幕顯示填充的圖形,必然要將圖形光柵化到屏幕上,而目前所有的底層圖形API僅支持對三角形的填充,因此要實現任意形狀填充需要將這個形狀切割成多個三角形,再通過圖形API進行繪制.

. 上圖是一個簡單又不簡單的選區,通過6個點組合出一個簡單的幾何形狀,但不簡單的是,這個幾何有一處交叉,因此構成了兩個閉合空間.如果把兩個閉合空間分離出來,再逐個切割三角形,則會簡單很多.
算法: 從多邊形的第三個頂點開始,每個頂點與下一個頂點形成一條線段,再依次與之前的頂點線段求交點,一旦出現交點,則必然產生一個閉合路徑,以交點為界,剝離這個閉合路徑即可,循環此步驟,直到沒有交點為止.
結果

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

. 上圖是一個簡單的凹多邊形,對於凹多邊形,不能直接切分三角形,要先切分凸多邊形,再切分三角形.
算法: 在多邊形的凹點處,延伸出一條線段,連接到最近的邊,這條線段作為交界,划分出兩個多邊形,再分別將這兩個多邊形重復此步驟,直到沒有凹點,則這個多邊形是凸多邊形.
結果

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

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


