Android不規(guī)則封閉區(qū)域填充色彩的實(shí)例代碼
一、概述
在上一篇的敘述中，我們通過(guò)圖層的方式完成了圖片顏色的填充（詳情請(qǐng)戳：Android不規(guī)則圖像填充顏色小游戲），不過(guò)在著色游戲中更多的還是基于邊界的圖像的填充。本篇博客將詳細(xì)描述。
圖像的填充有2種經(jīng)典算法。
一種是種子填充法。
種子填充法理論上能夠填充任意區(qū)域和圖形,但是這種算法存在大量的反復(fù)入棧和大規(guī)模的遞歸,降低了填充效率。
另一種是掃描線填充法。
注意：實(shí)際上圖像填充的算法還是很多的，有興趣可以去Google學(xué)術(shù)上去搜一搜。
ok，下面先看看今天的效果圖：
ok，可以看到這樣的顏色填充比上一篇的基于層的在素材的準(zhǔn)備上要easy 很多~~~
二、原理分析
首先我們簡(jiǎn)述下原理，我們?cè)邳c(diǎn)擊的時(shí)候拿到點(diǎn)擊點(diǎn)的”顏色”，然后按照我們選擇的算法進(jìn)行填色即可。
算法1：種子填充法，四聯(lián)通/八聯(lián)通
算法簡(jiǎn)介：假設(shè)要將某個(gè)區(qū)域填充成紅色。
從用戶(hù)點(diǎn)擊點(diǎn)的像素開(kāi)始，上下左右（八聯(lián)通還有左上，左下，右上，右下）去判斷顏色，如果四個(gè)方向上的顏色與當(dāng)前點(diǎn)擊點(diǎn)的像素一致，則改變顏色至目標(biāo)色。然后繼續(xù)上述這個(gè)過(guò)程。
ok，可以看到這是一個(gè)遞歸的過(guò)程，1個(gè)點(diǎn)到4個(gè)，4個(gè)到16個(gè)不斷的去延伸。如果按照這種算法，你會(huì)寫(xiě)出類(lèi)似這樣的代碼：
/**
* @param pixels 像素?cái)?shù)組
* @param w 寬度
* @param h 高度
* @param pixel 當(dāng)前點(diǎn)的顏色
* @param newColor 填充色
* @param i 橫坐標(biāo)
* @param j 縱坐標(biāo)
*/
private void fillColor01(int[] pixels, int w, int h, int pixel, int newColor, int i, int j)
{
int index = j * w + i;
if (pixels[index] != pixel || i >= w || i < 0 || j < 0 || j >= h)
return;
pixels[index] = newColor;
//上
fillColor01(pixels, w, h, pixel, newColor, i, j - 1);
//右
fillColor01(pixels, w, h, pixel, newColor, i + 1, j);
//下
fillColor01(pixels, w, h, pixel, newColor, i, j + 1);
//左
fillColor01(pixels, w, h, pixel, newColor, i - 1, j);
}
代碼很簡(jiǎn)單，但是如果你去運(yùn)行，會(huì)發(fā)生StackOverflowException異常，這個(gè)異常主要是因?yàn)榇罅康倪f歸造成的。雖然簡(jiǎn)單，但是在移動(dòng)設(shè)備上使用該方法不行。
于是，我就想，這個(gè)方法不是遞歸深度過(guò)多么，那么我可以使用一個(gè)Stack去存像素點(diǎn)，減少遞歸的深度和次數(shù)，于是我把代碼改成如下的方式：
/**
* @param pixels 像素?cái)?shù)組
* @param w 寬度
* @param h 高度
* @param pixel 當(dāng)前點(diǎn)的顏色
* @param newColor 填充色
* @param i 橫坐標(biāo)
* @param j 縱坐標(biāo)
*/
private void fillColor(int[] pixels, int w, int h, int pixel, int newColor, int i, int j)
{
mStacks.push(new Point(i, j));
while (!mStacks.isEmpty())
{
Point seed = mStacks.pop();
Log.e("TAG", "seed = " + seed.x + " , seed = " + seed.y);
int index = seed.y * w + seed.x;
pixels[index] = newColor;
if (seed.y > 0)
{
int top = index - w;
if (pixels[top] == pixel)
{
mStacks.push(new Point(seed.x, seed.y - 1));
}
}
if (seed.y < h - 1)
{
int bottom = index + w;
if (pixels[bottom] == pixel)
{
mStacks.push(new Point(seed.x, seed.y + 1));
}
}
if (seed.x > 0)
{
int left = index - 1;
if (pixels[left] == pixel)
{
mStacks.push(new Point(seed.x - 1, seed.y));
}
}
if (seed.x < w - 1)
{
int right = index + 1;
if (pixels[right] == pixel)
{
mStacks.push(new Point(seed.x + 1, seed.y));
}
}
}
}
方法的思想也比較簡(jiǎn)單，將當(dāng)前像素點(diǎn)入棧，然后出棧著色，接下來(lái)分別判斷四個(gè)方向的，如果符合條件也進(jìn)行入棧（只要棧不為空持續(xù)運(yùn)行）。ok，這個(gè)方法我也嘗試跑了下，恩，這次不會(huì)報(bào)錯(cuò)了，但是速度特別的慢~~~~慢得我是不可接受的。（有興趣可以嘗試，記得如果ANR，點(diǎn)擊等待）。
這樣來(lái)看，第一種算法，我們是不考慮了，沒(méi)有辦法使用，主要原因是假設(shè)對(duì)于矩形同色區(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開(kāi)始向xLeft方向搜索，假設(shè)掃描的區(qū)間為AAABAAC（A為種子點(diǎn)顏色），那么將B和C前面的A作為種子點(diǎn)壓入棧中，然后返回第（2）步；
上述參考自參考文獻(xiàn)[4]，做了些修改，文章[4]中描述算法，測(cè)試有一點(diǎn)問(wèn)題，所以做了修改.
可以看到該算法，基本上是一行一行著色的，這樣的話(huà)在大塊需要著色區(qū)域的效率比算法一要高很多。
ok，關(guān)于算法的步驟大家目前覺(jué)得模糊，一會(huì)可以參照我們的代碼。選定了算法以后，接下來(lái)就開(kāi)始編碼了。
三、編碼實(shí)現(xiàn)
我們代碼中引入了一個(gè)邊界顏色，如果設(shè)置的話(huà)，著色的邊界參考為該邊界顏色，否則會(huì)只要與種子顏色不一致為邊界。
（一）構(gòu)造方法與測(cè)量
public class ColourImageView extends ImageView
{
private Bitmap mBitmap;
/**
* 邊界的顏色
*/
private int mBorderColor = -1;
private boolean hasBorderColor = false;
private Stack<Point> mStacks = new Stack<Point>();
public ColourImageView(Context context, AttributeSet attrs)
{
super(context, attrs);
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ColourImageView);
mBorderColor = ta.getColor(R.styleable.ColourImageView_border_color, -1);
hasBorderColor = (mBorderColor != -1);
L.e("hasBorderColor = " + hasBorderColor + " , mBorderColor = " + mBorderColor);
ta.recycle();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int viewWidth = getMeasuredWidth();
int viewHeight = getMeasuredHeight();
//以寬度為標(biāo)準(zhǔn)，等比例縮放view的高度
setMeasuredDimension(viewWidth,
getDrawable().getIntrinsicHeight() * viewWidth / getDrawable().getIntrinsicWidth());
L.e("view's width = " + getMeasuredWidth() + " , view's height = " + getMeasuredHeight());
//根據(jù)drawable，去得到一個(gè)和view一樣大小的bitmap
BitmapDrawable drawable = (BitmapDrawable) getDrawable();
Bitmap bm = drawable.getBitmap();
mBitmap = Bitmap.createScaledBitmap(bm, getMeasuredWidth(), getMeasuredHeight(), false);
}
可以看到我們選擇的是繼承ImageView，這樣只需要將圖片設(shè)為src即可。
構(gòu)造方法中獲取我們的自定義邊界顏色，當(dāng)然可以不設(shè)置~~
重寫(xiě)測(cè)量的目的是為了獲取一個(gè)和View一樣大小的Bitmap便于我們操作。
接下來(lái)就是點(diǎn)擊啦~
（二）onTouchEvent
@Override
public boolean onTouchEvent(MotionEvent event)
{
final int x = (int) event.getX();
final int y = (int) event.getY();
if (event.getAction() == MotionEvent.ACTION_DOWN)
{
//填色
fillColorToSameArea(x, y);
}
return super.onTouchEvent(event);
}
/**
* 根據(jù)x,y獲得改點(diǎn)顏色，進(jìn)行填充
*
* @param x
* @param y
*/
private void fillColorToSameArea(int x, int y)
{
Bitmap bm = mBitmap;
int pixel = bm.getPixel(x, y);
if (pixel == Color.TRANSPARENT || (hasBorderColor && mBorderColor == pixel))
{
return;
}
int newColor = randomColor();
int w = bm.getWidth();
int h = bm.getHeight();
//拿到該bitmap的顏色數(shù)組
int[] pixels = new int[w * h];
bm.getPixels(pixels, 0, w, 0, 0, w, h);
//填色
fillColor(pixels, w, h, pixel, newColor, x, y);
//重新設(shè)置bitmap
bm.setPixels(pixels, 0, w, 0, 0, w, h);
setImageDrawable(new BitmapDrawable(bm));
}
可以看到，我們?cè)趏nTouchEvent中獲取(x,y)，然后拿到改點(diǎn)坐標(biāo)：
獲得點(diǎn)擊點(diǎn)顏色，獲得整個(gè)bitmap的像素?cái)?shù)組
改變這個(gè)數(shù)組中的顏色
然后重新設(shè)置給bitmap，重新設(shè)置給ImageView
重點(diǎn)就是通過(guò)fillColor去改變數(shù)組中的顏色
/**
* @param pixels 像素?cái)?shù)組
* @param w 寬度
* @param h 高度
* @param pixel 當(dāng)前點(diǎn)的顏色
* @param newColor 填充色
* @param i 橫坐標(biāo)
* @param j 縱坐標(biāo)
*/
private void fillColor(int[] pixels, int w, int h, int pixel, int newColor, int i, int j)
{
//步驟1：將種子點(diǎn)(x, y)入棧；
mStacks.push(new Point(i, j));
//步驟2：判斷棧是否為空，
// 如果棧為空則結(jié)束算法，否則取出棧頂元素作為當(dāng)前掃描線的種子點(diǎn)(x, y)，
// y是當(dāng)前的掃描線；
while (!mStacks.isEmpty())
{
/**
* 步驟3：從種子點(diǎn)(x, y)出發(fā)，沿當(dāng)前掃描線向左、右兩個(gè)方向填充，
* 直到邊界。分別標(biāo)記區(qū)段的左、右端點(diǎn)坐標(biāo)為xLeft和xRight；
*/
Point seed = mStacks.pop();
//L.e("seed = " + seed.x + " , seed = " + seed.y);
int count = fillLineLeft(pixels, pixel, w, h, newColor, seed.x, seed.y);
int left = seed.x - count + 1;
count = fillLineRight(pixels, pixel, w, h, newColor, seed.x + 1, seed.y);
int right = seed.x + count;
/**
* 步驟4：
* 分別檢查與當(dāng)前掃描線相鄰的y - 1和y + 1兩條掃描線在區(qū)間[xLeft, xRight]中的像素，
* 從xRight開(kāi)始向xLeft方向搜索，假設(shè)掃描的區(qū)間為AAABAAC（A為種子點(diǎn)顏色），
* 那么將B和C前面的A作為種子點(diǎn)壓入棧中，然后返回第（2）步；
*/
//從y-1找種子
if (seed.y - 1 >= 0)
findSeedInNewLine(pixels, pixel, w, h, seed.y - 1, left, right);
//從y+1找種子
if (seed.y + 1 < h)
findSeedInNewLine(pixels, pixel, w, h, seed.y + 1, left, right);
}
}
可以看到我已經(jīng)很清楚的將該算法的四個(gè)步驟標(biāo)識(shí)到該方法中。好了，最后就是一些依賴(lài)的細(xì)節(jié)上的方法：
/**
* 在新行找種子節(jié)點(diǎn)
*
* @param pixels
* @param pixel
* @param w
* @param h
* @param i
* @param left
* @param right
*/
private void findSeedInNewLine(int[] pixels, int pixel, int w, int h, int i, int left, int right)
{
/**
* 獲得該行的開(kāi)始索引
*/
int begin = i * w + left;
/**
* 獲得該行的結(jié)束索引
*/
int end = i * w + right;
boolean hasSeed = false;
int rx = -1, ry = -1;
ry = i;
/**
* 從end到begin，找到種子節(jié)點(diǎn)入棧（AAABAAAB，則B前的A為種子節(jié)點(diǎn)）
*/
while (end >= begin)
{
if (pixels[end] == pixel)
{
if (!hasSeed)
{
rx = end % w;
mStacks.push(new Point(rx, ry));
hasSeed = true;
}
} else
{
hasSeed = false;
}
end--;
}
}
/**
* 往右填色，返回填充的個(gè)數(shù)
*
* @return
*/
private int fillLineRight(int[] pixels, int pixel, int w, int h, int newColor, int x, int y)
{
int count = 0;
while (x < w)
{
//拿到索引
int index = y * w + x;
if (needFillPixel(pixels, pixel, index))
{
pixels[index] = newColor;
count++;
x++;
} else
{
break;
}
}
return count;
}
/**
* 往左填色，返回填色的數(shù)量值
*
* @return
*/
private int fillLineLeft(int[] pixels, int pixel, int w, int h, int newColor, int x, int y)
{
int count = 0;
while (x >= 0)
{
//計(jì)算出索引
int index = y * w + x;
if (needFillPixel(pixels, pixel, index))
{
pixels[index] = newColor;
count++;
x--;
} else
{
break;
}
}
return count;
}
private boolean needFillPixel(int[] pixels, int pixel, int index)
{
if (hasBorderColor)
{
return pixels[index] != mBorderColor;
} else
{
return pixels[index] == pixel;
}
}
/**
* 返回一個(gè)隨機(jī)顏色
*
* @return
*/
private int randomColor()
{
Random random = new Random();
int color = Color.argb(255, random.nextInt(256), random.nextInt(256), random.nextInt(256));
return color;
}
ok，到此，代碼就介紹完畢了~~~
最后貼下布局文件~~
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:zhy="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <com.zhy.colour_app_01.ColourImageView zhy:border_color="#FF000000" android:src="@drawable/image_007" android:background="#33ff0000" android:layout_width="match_parent" android:layout_centerInParent="true" android:layout_height="match_parent"/> </RelativeLayout> <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="ColourImageView"> <attr name="border_color" format="color|reference"></attr> </declare-styleable> </resources>
參考鏈接
圖像處理之泛洪填充算法(Flood Fill Algorithm)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
- Android不規(guī)則圖像填充顏色小游戲
- PHP水印類(lèi),支持添加圖片、文字、填充顏色區(qū)域的實(shí)現(xiàn)
- Android Studio使用小技巧：布局預(yù)覽時(shí)填充數(shù)據(jù)
- 基于Android中的 AutoCompleteTextView實(shí)現(xiàn)自動(dòng)填充
- Android矢量圖之VectorDrawable類(lèi)自由填充色彩
- Android ListView填充數(shù)據(jù)的方法
- Android ScrollView無(wú)法填充滿(mǎn)屏幕的解決辦法
- Android多邊形區(qū)域掃描線種子填充算法的示例
- Android多邊形區(qū)域遞歸種子填充算法的示例代碼
- Android圖像處理之泛洪填充算法
- Android不規(guī)則封閉區(qū)域填充色彩的實(shí)例代碼
相關(guān)文章
淺析Kotlin使用infix函數(shù)構(gòu)建可讀語(yǔ)法流程講解
這篇文章主要介紹了淺析Kotlin使用infix函數(shù)構(gòu)建可讀語(yǔ)法，我們?cè)贙otlin中就多次使用A to B這樣的語(yǔ)法結(jié)構(gòu)構(gòu)建鍵值對(duì)，包括Kotlin自帶的mapOf()函數(shù)，這種語(yǔ)法結(jié)構(gòu)的優(yōu)點(diǎn)是可讀性強(qiáng)2023-01-01
Android中利用viewflipper動(dòng)畫(huà)切換屏幕效果
這篇文章主要介紹了Android中利用viewflipper動(dòng)畫(huà)切換屏幕效果的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
Android Http實(shí)現(xiàn)文件的上傳和下載
這篇文章主要為大家詳細(xì)介紹了Android Http實(shí)現(xiàn)文件的上傳和下載，感興趣的小伙伴們可以參考一下2016-08-08
利用matrix可以實(shí)現(xiàn)各種圖片的特效，比如圖片的旋轉(zhuǎn)、縮放、移動(dòng)，甚至是圖片倒影效果，這篇文章為大家介紹了matrix實(shí)現(xiàn)圖片倒影的代碼，感興趣的小伙伴們可以參考一下2016-05-05
Kotlin startActivity跳轉(zhuǎn)Activity實(shí)現(xiàn)流程詳解
在Android當(dāng)中，Activity的跳轉(zhuǎn)有兩種方法，第一個(gè)是利用startActivity（Intent intent）；的方法，第二個(gè)則是利用startActivityForResult(Intent intent,int requestCode);的方法，從字面上來(lái)看，這兩者之間的差別只在于是否有返回值的區(qū)別，實(shí)際上也確實(shí)只有這兩種區(qū)別2022-12-12
Android ContentProvider實(shí)現(xiàn)獲取手機(jī)聯(lián)系人功能
這篇文章主要為大家詳細(xì)介紹了Android ContentProvider實(shí)現(xiàn)獲取手機(jī)聯(lián)系人功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
Android實(shí)現(xiàn) EditText輸入手機(jī)號(hào)空格功能
這篇文章主要介紹了Android實(shí)現(xiàn) EditText輸入手機(jī)號(hào)空格功能,實(shí)現(xiàn)思路是要重寫(xiě)TextWatcher，每次EditText內(nèi)容變化，都判斷內(nèi)容是否符合要求，具體實(shí)例代碼大家參考下本文2018-02-02
Android進(jìn)階從字節(jié)碼插樁技術(shù)了解美團(tuán)熱修復(fù)實(shí)例詳解
這篇文章主要為大家介紹了Android進(jìn)階從字節(jié)碼插樁技術(shù)了解美團(tuán)熱修復(fù)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了Android中Handler的使用方法，對(duì)Android中Handler的作用于如何使用進(jìn)行了初步介紹,需要的朋友可以參考下2015-12-12
Android App界面的ListView布局實(shí)戰(zhàn)演練
這篇文章主要介紹了Android App界面的ListView布局方法,文中分了三種情況通過(guò)實(shí)例來(lái)講解,ListView適用于功能最簡(jiǎn)單的應(yīng)用程序UI布局,需要的朋友可以參考下2016-04-04