自由手記

轉載請標明出處： 
http://go.rritw.com/blog.csdn.net/lmj623565791/article/details/45788433； 
本文出自:【張鴻洋的博客】

一、概述

近期群裏偶然看到一哥們在群裏聊不規則圖像填充什麼四聯通、八聯通什麼的，就本身好學務實的態度去查閱了相關資料。對於這類着色的資料，最好的就是去搜索些相關app，根據我的觀察呢，不規則圖像填充在着色遊戲裏面應用居多，不過大致可以分为兩種：

• 基於層的的填充
• 基於邊界的填充

那麼針對上述兩種，我們會通過兩篇博文來講解，本篇就是敘述基於層的填充方式，那麼什麼基於層的填充方式呢？其實就是一張圖實際上是由多個層組成的，每個層顯示部分圖像（無圖像部分为透明），多層叠加後形成一張完整的圖案，圖層間是叠加的關系，類似下圖。

相信大家如果學過PS，對上述肯定再了解不過了。比如你要繪制一個天空，你可以最底層去繪制藍天，在上層繪制白雲，再上層會執行小鳥。然後三層叠加以後就是一副小鳥在天空翱翔的圖了。

二、效果與分析

好了，接下來看下今天的效果。

ok，可以看到一個簡單的着色效果，其實原理很簡單，首先呢，該圖實際上是由7層組成：

例如下圖。

那麼如果我們需要给這幅圖的某個位置着色，實際上是给某一層的非透明區域着色。實際上就轉化为：

用戶點擊的（x,y）-> 判斷落在哪一層的非透明區域 -> 然後给該層非透明區域着色。

ok，這样原理就敘述清楚了，實際上也是非常的簡單，基於該原理，我們可以自定義一個View，然後一幅一幅去繪制圖層，最後按照上述步驟去編寫代碼。不過，我們還有可以偷懶的地方，其實沒必要我們自己去一個圖層一個圖層的繪制，我們可以利用Drawable去完成圖層叠加的工作，我們有一類Drawable叫做LayerDrawable，對應的xml为layer-list，我們可以通過使用LayerDrawable極大的簡化我們的工作。

三、編碼與實現

上述已經描述很清楚了，我再给大家細化一下：

1. layer-list中去定義我們的drawable
2. 然後把該drawable作为我們View的背景
3. 复寫onTouchEvent方法
4. 判斷用戶點擊的坐標落在哪一層的非透明位置，改變該層非透明區域顏色

（一）layer-list

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/eel_mask1"/>
    <item
        android:drawable="@drawable/eel_mask2"/>
    <item
        android:drawable="@drawable/eel_mask3"/>
    <item
        android:drawable="@drawable/eel_mask4"/>
    <item
        android:drawable="@drawable/eel_mask5"/>
    <item
        android:drawable="@drawable/eel_mask6"/>
    <item
        android:drawable="@drawable/eel_mask7"/>
</layer-list>

ok，這样我們的drawable就ok了~~沒撒說的，不過layer-list可以做很多事情，大家可以關注下。

（二）View代碼

package com.zhy.colour_app_01;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.graphics.PorterDuff;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

import java.util.Random;

/**
 * Created by zhy on 15/5/14.
 */
public class ColourImageBaseLayerView extends View
{

    private LayerDrawable mDrawables;

    public ColourImageBaseLayerView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        mDrawables = (LayerDrawable) getBackground();

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        setMeasuredDimension(mDrawables.getIntrinsicWidth(), mDrawables.getIntrinsicHeight());
    }

    @Override
    public boolean onTouchEvent(MotionEvent event)
    {
        final float x = event.getX();
        final float y = event.getY();
        if (event.getAction() == MotionEvent.ACTION_DOWN)
        {
            Drawable drawable = findDrawable(x, y);
            if (drawable != null)
                drawable.setColorFilter(randomColor(), PorterDuff.Mode.SRC_IN);
        }

        return super.onTouchEvent(event);
    }

    private int randomColor()
    {
        Random random = new Random();
        int color = Color.argb(255, random.nextInt(256), random.nextInt(256), random.nextInt(256));
        return color;
    }

    private Drawable findDrawable(float x, float y)
    {
        final int numberOfLayers = mDrawables.getNumberOfLayers();
        Drawable drawable = null;
        Bitmap bitmap = null;
        for (int i = numberOfLayers - 1; i >= 0; i--)
        {
            drawable = mDrawables.getDrawable(i);
            bitmap = ((BitmapDrawable) drawable).getBitmap();
            try
            {
                int pixel = bitmap.getPixel((int) x, (int) y);
                if (pixel == Color.TRANSPARENT)
                {
                    continue;
                }
            } catch (Exception e)
            {
                continue;
            }
            return drawable;
        }
        return null;
    }

}

ok，代碼也比較簡單，首先我們把drawable作为view的背景，然後在構造中獲取drawable（LayerDrawable）。接下來复寫onTouchEvent，捕獲用戶點擊的（x,y），根據（x,y）去找出當前點擊的是哪一層（必須點擊在非透明區域），最後通過設置setColorFilter去改變顏色即可~很easy吧最後貼下布局文件：

（三）布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                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.ColourImageBaseLayerView
        android:background="@drawable/eel"
        android:layout_width="match_parent"
        android:layout_centerInParent="true"
        android:layout_height="match_parent"/>

</RelativeLayout>

ok~基於層的的填充就介紹完了，下一篇基於邊界的填充，敬請期待~~

群號：264950424，歡迎入群

源碼點擊下載

微信公眾號：hongyangAndroid 
（歡迎關注，第一時間推送博文信息）