Android irregular image fill color games

1、 Overview

Recently, I happened to see a friend in the group talking about irregular images, filling in four Unicom and eight Unicom. I looked up relevant materials with a studious and pragmatic attitude. For such coloring materials, the best thing is to search for relevant apps. According to my observation, irregular image filling is mostly used in coloring games, but it can be roughly divided into two types:

Layer based fill

Boundary based fill

Then, we will explain the above two through two blog posts. This article describes the layer based filling method. What layer based filling method? In fact, a picture is actually composed of multiple layers. Each layer displays part of the image (the part without image is transparent). After multi-layer superposition, a complete pattern is formed. The relationship between layers is superposition, similar to the following figure.

I believe that if you have studied PS, you will never know more about the above. For example, if you want to draw a sky, you can draw the blue sky at the bottom, white clouds at the top, and birds at the top. Then after the three layers are superimposed, it is a picture of birds flying in the sky.

2、 Effect and analysis

Well, let's look at today's effect.

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

For example, the following figure.

So if we need to color a certain position in this picture, we are actually coloring the non transparent area of a certain layer. It actually translates into:

The user clicks (x, y) - > to determine the non transparent area of which layer it falls - > and then color the non transparent area of this layer.

OK, so the principle is described clearly. In fact, it is very simple. Based on this principle, we can customize a view, draw layers one by one, and finally write code according to the above steps. However, we can still be lazy. In fact, it is not necessary for us to draw layers one by one. We can use drawable to complete layer superposition. We have a kind of drawable called layerdrawable, and the corresponding XML is layer list. We can greatly simplify our work by using layerdrawable.

3、 Coding and Implementation

The above description is very clear. Let me give you more details:

1. Define our drawable in layer list;

2. Then take the drawable as the background of our view;

3. Copy ontouchevent method;

4. Judge the non transparent position of which layer the coordinates clicked by the user fall, and change the color of the non transparent area of the layer.

（1） Layer list

OK, so our drawable is OK ~ ~ I didn't say anything, but layer list can do a lot of things. You can pay attention to it.

（2） View code

OK, the code is also relatively simple. First, we take drawable as the background of view, and then obtain drawable (layer drawable) in the construction. Next, copy the ontouchevent, capture the (x, y) clicked by the user, find out which layer is currently clicked according to (x, y) (it must be clicked in the non transparent area), and finally change the color by setting setcolorfilter ~ it's easy. Finally, paste the layout file:

（3） Layout file

The above is the whole content of this article. I hope the content of this article has a certain reference value for your study or work. If you have any questions, you can leave a message. Thank you for your support for programming tips.