【移動(dòng)應(yīng)用開發(fā)技術(shù)】Android不規(guī)則封閉區(qū)域填充色彩的實(shí)例代碼

【移動(dòng)應(yīng)用開發(fā)技術(shù)】Android不規(guī)則封閉區(qū)域填充色彩的實(shí)例代碼

一、概述在上一篇的敘述中，我們通過圖層的方式完成了圖片顏色的填充（詳情請戳：Android不規(guī)則圖像填充顏色小游戲），不過在著色游戲中更多的還是基于邊界的圖像的填充。本篇博客將詳細(xì)描述。圖像的填充有2種經(jīng)典算法。一種是種子填充法。種子填充法理論上能夠填充任意區(qū)域和圖形,但是這種算法存在大量的反復(fù)入棧和大規(guī)模的遞歸,降低了填充效率。

另一種是掃描線填充法。

注意：實(shí)際上圖像填充的算法還是很多的，有興趣可以去Google學(xué)術(shù)上去搜一搜。

ok，下面先看看今天的效果圖：ok，可以看到這樣的顏色填充比上一篇的基于層的在素材的準(zhǔn)備上要easy很多~~~二、原理分析首先我們簡述下原理，我們在點(diǎn)擊的時(shí)候拿到點(diǎn)擊點(diǎn)的”顏色”，然后按照我們選擇的算法進(jìn)行填色即可。算法1：種子填充法，四聯(lián)通/八聯(lián)通

算法簡介：假設(shè)要將某個(gè)區(qū)域填充成紅色。從用戶點(diǎn)擊點(diǎn)的像素開始，上下左右（八聯(lián)通還有左上，左下，右上，右下）去判斷顏色，如果四個(gè)方向上的顏色與當(dāng)前點(diǎn)擊點(diǎn)的像素一致，則改變顏色至目標(biāo)色。然后繼續(xù)上述這個(gè)過程。ok，可以看到這是一個(gè)遞歸的過程，1個(gè)點(diǎn)到4個(gè)，4個(gè)到16個(gè)不斷的去延伸。如果按照這種算法，你會(huì)寫出類似這樣的代碼：代碼很簡單，但是如果你去運(yùn)行，會(huì)發(fā)生StackOverflowException異常，這個(gè)異常主要是因?yàn)榇罅康倪f歸造成的。雖然簡單，但是在移動(dòng)設(shè)備上使用該方法不行。于是，我就想，這個(gè)方法不是遞歸深度過多么，那么我可以使用一個(gè)Stack去存像素點(diǎn)，減少遞歸的深度和次數(shù)，于是我把代碼改成如下的方式：方法的思想也比較簡單，將當(dāng)前像素點(diǎn)入棧，然后出棧著色，接下來分別判斷四個(gè)方向的，如果符合條件也進(jìn)行入棧（只要棧不為空持續(xù)運(yùn)行）。ok，這個(gè)方法我也嘗試跑了下，恩，這次不會(huì)報(bào)錯(cuò)了，但是速度特別的慢~~~~慢得我是不可接受的。（有興趣可以嘗試，記得如果ANR，點(diǎn)擊等待）。這樣來看，第一種算法，我們是不考慮了，沒有辦法使用，主要原因是假設(shè)對于矩形同色區(qū)域，都是需要填充的，而算法一依然是各種入棧。于是考慮第二種算法掃描線填充法

算法思想[4]：

初始化一個(gè)空的棧用于存放種子點(diǎn)，將種子點(diǎn)(x,y)入棧；

判斷棧是否為空，如果棧為空則結(jié)束算法，否則取出棧頂元素作為當(dāng)前掃描線的種子點(diǎn)(x,y)，y是當(dāng)前的掃描線；

從種子點(diǎn)(x,y)出發(fā)，沿當(dāng)前掃描線向左、右兩個(gè)方向填充，直到邊界。分別標(biāo)記區(qū)段的左、右端點(diǎn)坐標(biāo)為xLeft和xRight；

分別檢查與當(dāng)前掃描線相鄰的y-1和y+1兩條掃描線在區(qū)間[xLeft,xRight]中的像素，從xRight開始向xLeft方向搜索，假設(shè)掃描的區(qū)間為AAABAAC（A為種子點(diǎn)顏色），那么將B和C前面的A作為種子點(diǎn)壓入棧中，然后返回第（2）步；

初始化一個(gè)空的棧用于存放種子點(diǎn)，將種子點(diǎn)(x,y)入棧；

判斷棧是否為空，如果棧為空則結(jié)束算法，否則取出棧頂元素作為當(dāng)前掃描線的種子點(diǎn)(x,y)，y是當(dāng)前的掃描線；

從種子點(diǎn)(x,y)出發(fā)，沿當(dāng)前掃描線向左、右兩個(gè)方向填充，直到邊界。分別標(biāo)記區(qū)段的左、右端點(diǎn)坐標(biāo)為xLeft和xRight；

分別檢查與當(dāng)前掃描線相鄰的y-1和y+1兩條掃描線在區(qū)間[xLeft,xRight]中的像素，從xRight開始向xLeft方向搜索，假設(shè)掃描的區(qū)間為AAABAAC（A為種子點(diǎn)顏色），那么將B和C前面的A作為種子點(diǎn)壓入棧中，然后返回第（2）步；

上述參考自參考文獻(xiàn)[4]，做了些修改，文章[4]中描述算法，測試有一點(diǎn)問題，所以做了修改.可以看到該算法，基本上是一行一行著色的，這樣的話在大塊需要著色區(qū)域的效率比算法一要高很多。ok，關(guān)于算法的步驟大家目前覺得模糊，一會(huì)可以參照我們的代碼。選定了算法以后，接下來就開始編碼了。三、編碼實(shí)現(xiàn)我們代碼中引入了一個(gè)邊界顏色，如果設(shè)置的話，著色的邊界參考為該邊界顏色，否則會(huì)只要與種子顏色不一致為邊界。（一）構(gòu)造方法與測量可以看到我們選擇的是繼承ImageView，這樣只需要將圖片設(shè)為src即可。

構(gòu)造方法中獲取我們的自定義邊界顏色，當(dāng)然可以不設(shè)置~~

重寫測量的目的是為了獲取一個(gè)和View一樣大小的Bitmap便于我們操作。接下來就是點(diǎn)擊啦~（二）onTouchEvent可以看到，我們在onTouchEvent中獲取(x,y)，然后拿到改點(diǎn)坐標(biāo)：

獲得點(diǎn)擊點(diǎn)顏色，獲得整個(gè)bitmap的像素?cái)?shù)組

改變這個(gè)數(shù)組中的顏色

然后重新設(shè)置給bitmap，重新設(shè)置給ImageView

獲得點(diǎn)擊點(diǎn)顏色，獲得整個(gè)bitmap的像素?cái)?shù)組

改變這個(gè)數(shù)組中的顏色

然后重新設(shè)置給bitmap，重新設(shè)置給ImageView

重點(diǎn)就是通過fillColor去改變數(shù)組中的顏色可以看到我已經(jīng)很清楚的將該算法的四個(gè)步驟標(biāo)識(shí)到該方法中。好了，最后就是一些