Android不規(guī)則封閉區(qū)域填充色彩的實(shí)例代碼

一、概述

創(chuàng)新互聯(lián)聯(lián)系熱線:18982081108,為您提供成都網(wǎng)站建設(shè)網(wǎng)頁設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù),創(chuàng)新互聯(lián)網(wǎng)頁制作領(lǐng)域十年,包括圍欄護(hù)欄等多個(gè)方面擁有多年設(shè)計(jì)經(jīng)驗(yàn),選擇創(chuàng)新互聯(lián),為企業(yè)錦上添花。

在上一篇的敘述中,我們通過圖層的方式完成了圖片顏色的填充(詳情請(qǐng)戳:Android不規(guī)則圖像填充顏色小游戲),不過在著色游戲中更多的還是基于邊界的圖像的填充。本篇博客將詳細(xì)描述。

圖像的填充有2種經(jīng)典算法。

一種是種子填充法。

種子填充法理論上能夠填充任意區(qū)域和圖形,但是這種算法存在大量的反復(fù)入棧和大規(guī)模的遞歸,降低了填充效率。

另一種是掃描線填充法。

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

ok,下面先看看今天的效果圖:

Android不規(guī)則封閉區(qū)域填充色彩的實(shí)例代碼

ok,可以看到這樣的顏色填充比上一篇的基于層的在素材的準(zhǔn)備上要easy 很多~~~

二、原理分析

首先我們簡述下原理,我們?cè)邳c(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ì)寫出類似這樣的代碼:

/**
 * @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);
 }

代碼很簡單,但是如果你去運(yùn)行,會(huì)發(fā)生StackOverflowException異常,這個(gè)異常主要是因?yàn)榇罅康倪f歸造成的。雖然簡單,但是在移動(dòng)設(shè)備上使用該方法不行。

于是,我就想,這個(gè)方法不是遞歸深度過多么,那么我可以使用一個(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));
 }
 }

 }
 }

方法的思想也比較簡單,將當(dāng)前像素點(diǎn)入棧,然后出棧著色,接下來分別判斷四個(gè)方向的,如果符合條件也進(jìn)行入棧(只要棧不為空持續(xù)運(yùn)行)。ok,這個(gè)方法我也嘗試跑了下,恩,這次不會(huì)報(bào)錯(cuò)了,但是速度特別的慢~~~~慢得我是不可接受的。(有興趣可以嘗試,記得如果ANR,點(diǎn)擊等待)。

這樣來看,第一種算法,我們是不考慮了,沒有辦法使用,主要原因是假設(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開始向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)造方法與測量

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è)置~~
重寫測量的目的是為了獲取一個(gè)和View一樣大小的Bitmap便于我們操作。

接下來就是點(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)就是通過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開始向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í)到該方法中。好了,最后就是一些依賴的細(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)
 {
 /**
 * 獲得該行的開始索引
 */
 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)

遞歸種子填充算法

掃描線種子填充算法

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。

本文標(biāo)題:Android不規(guī)則封閉區(qū)域填充色彩的實(shí)例代碼
標(biāo)題路徑:http://bm7419.com/article40/igicho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站改版、小程序開發(fā)、定制開發(fā)、網(wǎng)站設(shè)計(jì)公司、響應(yīng)式網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司