Android irregular image filling, playing coloring game, android coloring

Android irregular image filling, playing coloring game, android coloring

Reprinted please indicate the source:
Http://blog.csdn.net/lmj623565791/article/details/45788433;
This article is from: [Zhang Hongyang's blog]

I. Overview

Recently, the group accidentally saw a buddy chatting in the group about what the irregular images were filled with. 4. Unicom, 8. Unicom, and so on. He checked the relevant materials with a studious and pragmatic attitude. For this type of coloring materials, the best thing is to search for related apps. According to my observations, irregular image filling is mostly used in coloring games, but it can be roughly divided into two types:

• Layer-based filling
• Border-based filling

For the above two types, we will explain through two blog posts. This article describes the layer-based filling method. So what layer-based filling method? In fact, a graph is actually composed of multiple layers. Each layer displays some images (the image is transparent), and a complete pattern is formed after multiple layers are superimposed, layers are overlapping relationships, similar.

I believe that if you have learned PS, you will not be able to understand the above. For example, if you want to draw a sky, you can draw the blue sky at the bottom layer, draw white clouds at the upper layer, and then execute birds at the upper layer. After the three layers are superimposed, a bird is flying in the sky.

Ii. Results and Analysis

Now let's take a look at today's results.

OK, you can see a simple coloring effect. In fact, the principle is very simple. First of all, the figure is actually composed of seven layers:

For example.

If we need to color a certain position of the image, we will actually color the non-transparent area of a certain layer. Actually, it is converted:

The user clicks (x, y)-> determines the non-transparent area on which the layer falls-> and then colors the non-transparent area on the layer.

OK. The principle is clearly described. It is actually very simple. Based on this principle, we can customize a View and draw a layer one by one, finally, write the code according to the above steps. However, we still have something to be lazy about. In fact, we don't need to draw a layer by ourselves. We can use Drawable to complete layer superposition. We have a type of Drawable called LayerDrawable, the corresponding xml is layer-list. We can useLayerDrawableThis greatly simplifies our work.

Iii. coding and implementation

The above descriptions are clear. I will give you further details:

(1) 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, so that our drawable will be OK ~~ No, but layer-list can do a lot of things.

(2) View code

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, the code is relatively simple. First, we use drawable as the view background, and then obtain drawable (LayerDrawable) in the construction ). Next, repeat onTouchEvent to capture the (x, y) clicked by the user. Based on (x, y), find the layer (which must be clicked in the non-transparent area) and setsetColorFilterChange the color.~ Very easyFinally, paste the layout file:

(3) Layout files

<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 ~ The layer-based filling is complete. The next section describes the border-based filling ~~

Group number: 264950424. Welcome to the group.

Download source code

Public Account: hongyangAndroid
(Please pay attention to it and push blog information as soon as possible)