Implementation method of drawing board for Android custom view

Look at the effect: the small control above the middle drawing board is used to display the graphics drawn in real time, and the small control below is used to control some drawings. Both small controls can move

There is also a scratch card effect. Only one parameter needs to be changed:

To customize a view, you must first customize the properties:

Create attrs.xml under values:

The following three lines of code specifying the company can be released so that multiple custom views can be used.

Next, create a new custom view class, inherit the view, and override the first three constructor methods

Red line annotation is a new feature of Android studio 3.0.0 for parameter prompts

Next, get the custom attribute from attrs.xml through typedarray:

You need to set the default value of the default value to avoid an error caused by the absence of custom attributes in the layout.

Override the custom view key method onmeasure(), ondraw(). Onmeasure () is used to specify the size of the custom view, and OnDraw () is used for real-time drawing

The three most important things: canvas, brush, paint, path

The code is a little long, but the comments are very complete. Put forward what needs attention

In the newpaint() method, paint has a setxfermode() method, which represents 18 graphics blending modes ~ (add and overlay are more than the following figure) ~. Show me a picture. Here we use two kinds of SRC_ In and DST_ OUT。

SRC_ In: take the intersection of two layers and display the upper DST_ Out: take the non intersecting part of the two layers and display the lower layer. It's hard to tell the truth. You'd better try it yourself, but here you only need to know: use Src_ In will have a drawing board effect, using DST_ Out will have a scratch card effect

This is a pile of complex code for this view, but the function is very simple. We have done two things:

1. Calculate the width and height of the whole control through measurespec.getmode (measurement mode). 2. Draw bitmap on the canvas through canvas.drawbitmap, and set color, thickness and other attributes to it with new brush paint

be careful:

1. The OnDraw () method will go back every time it calls invalidate () or the view changes, so you can't create new things in it. 2. There is an array bmpixels of type int [] here. What does it mean? The specific explanation is described in the detailed explanation of bitmap class getpixels and createbitmap methods.

Bmpixels: by multiplying the width of the bitmap by the height, we can get an array of int [] type. This array is all the pixels that make up the bitmap. When a pixel is 0, it means that it has no color,! 0 means it has color.

Since you are drawing, you must monitor the movement of your fingers. Ontouchevent() method:

This is very simple. When the finger is pressed, record the position. Path. Moveto sets the starting point position for path. When moving, record the path through the path. Lineto() method, draw it directly with canvas. Drawpath (path, paint), and invalidate() notifies the view to update.

Here, you can draw a picture by using this view in the XML layout

Our brush paint class can specify color, thickness, mode, etc., so that we can write some public methods to dynamically set these properties, so as to make the brush more diverse.

The above code sets the brush color, brush type and canvas reset. Why do you need new path? Because if you don't open a new path for the brush, when you set a new color and use the previous path, the brush will reset the previous path to a new color instead of maintaining the original color.

In the upper right corner of the effect, a float type number is displayed, which is the proportion of the erased part in the bitmap in the scraping card mode. There is an array bmpixels of type int [] in the onmeasure () method. At this time, we will use this array to obtain this example.

In the case motionevent.action of the ontouchevent() method_ Up plus some codes:

There is a sentence newbitmap. Getpixels (bmpixels, height); It is explained in the detailed explanation of getpixels method. Its function is to take out all pixels in newbitmap and put them into the first parameter bmpixels in the method. At this time, we iterate through the bmpixels array through the for loop. If it is equal to 0, it means that no color has been erased. We can calculate the erased proportion by counting their number and calculating their proportion. Similarly, we can also change the judgment condition equal to 0 to make it equal to other colors, so that we can calculate the proportion of other colors. Write a callback interface and take it out of the code.

There are two interfaces, a real-time display bitmap and a display erasure ratio.