Android happy Snake Game Development tutorial-03 virtual direction key (2) Draw a triangle, android-03

Android happy Snake Game Development tutorial-03 virtual direction key (2) Draw a triangle, android-03

Overview and directory of this series of tutorials: http://www.cnblogs.com/chengyujia/p/5787111.html

I. Draw triangles

In the previous article, we have created a custom ctionkeys class for the virtual arrow key. Next we will continue.

In this project, the background of the virtual arrow key is a rectangle composed of four triangles, which are actually buttons of four triangles.

The buttons provided by the system are rectangular. How can we create a triangle button?

First of all, I need to know that the appearance of all controls is drawn. Of course, we do not draw them manually, but use programs to draw them.

How can I draw a program?

Many technical platforms have drawing functions, which are similar in use. Since they are all object-oriented ideas, we can draw an analogy with reality.

First, we need a canvas, and then a paint and color. In reality, we can draw a canvas. But now we want to draw a program. We must tell the program what you want to draw. Different people may draw different things and tell the program in different ways. We will draw a triangle and use the path object to tell the program. The following is a detailed description. Then the program will plot it for you.

 

After learning about the Basic Drawing Process, we can use the code below.

In android. view. View, there is a method called onDraw. We only need to Override (Override) This parent class method and draw what we want in this method.

When onDraw is input in Android Studio, the following code is generated based on the Smart prompt:

/*** Override the onDraw method of the parent class to draw the image we need ** @ param canvas the canvas here is a rectangular canvas provided by the system, what we need to do is to draw what we want on this canvas. * // @ Override protected void onDraw (Canvas canvas) {super. onDraw (canvas );}

From the code above, we can see that the onDraw method has sent us an object called canvas. canvas is a canvas that we can draw on. The automatically generated "super. onDraw (canvas);" calls the onDraw method in the parent class. We can click it to see it.

    /**     * Implement this to do your drawing.     *     * @param canvas the canvas on which the background will be drawn     */    protected void onDraw(Canvas canvas) {    }

It is found that the onDraw method in the parent class is empty and can not be called.

Now that we have a canvas, we need a paint brush. This is easy to do, just a new one.

// Prepare the Paint brush paint = new Paint ();

What colors should a paint brush be dipped in? For example, Red.

// Set paint. setColor (Color. RED );

The color here is an integer of the int type and an ARGB value. The system provides several common colors as constants, such as Color. RED = 0xFFFF0000. You can also set a Color as you like.

The following uses the triangle on the left as an example.

Each pixel on the canvas has its coordinates. The coordinate system origin is the upper left corner of the canvas. To draw a triangle, you need to know the coordinates of the three vertices.

Set the canvas width to width and the height to height;

The coordinates of the four vertices and the center of the canvas are:

Top left point 0, 0
0 at the lower left, and height
Top right point width, 0
Width, height
Center width/2, height/2

Then the coordinates of the three vertices in the Left triangle are (0, 0) (width/2, height/2) (0, height)

The path object appears below. Path indicates the path, which tells the program to draw a picture along the designed path. We know that a triangle is composed of three straight lines, which is also designed in the program:

// The width of the canvas, int width = canvas. getWidth (); // The High int height of the canvas = canvas. getHeight (); // draw the Path pathLeft = new Path () of the background triangle of the left direction key; // start pathLeft from the top left of the canvas. moveTo (0, 0); // draw a straight line to the canvas center pathLeft. lineTo (width/2, height/2); // draw a straight line to the bottom left of the canvas. lineTo (0, height); // automatically closes the image. Draw a straight line from the last vertex (lower left vertex) to the first vertex (upper left vertex ). PathLeft. close ();

So far, all the code of the DirectionKeys class is as follows:

Package net. chengyujia. happysnake; import android. content. context; import android. graphics. canvas; import android. graphics. color; import android. graphics. paint; import android. graphics. path; import android. util. attributeSet; import android. view. view;/*** Created by ChengYuJia on 2016/8/19. * The virtual arrow key on the screen */public class DirectionKeys extends View {// the construction method of only one parameter is called when an instance is created using the "new" keyword in the program. Public DirectionKeys (Context context) {super (context) ;}// the constructor with two parameters is called when the system creates an instance in the XML layout file. Public DirectionKeys (Context context, AttributeSet attrs) {super (context, attrs );} /*** override the onDraw method of the parent class to draw the image we need ** @ param canvas the canvas here is a rectangular canvas provided by the system, what we need to do is to draw what we want on this canvas. * // @ Override protected void onDraw (Canvas canvas) {// The width of the canvas, int width = Canvas. getWidth (); // The High int height of the canvas = canvas. getHeight ();/* (TIPS: Generally, the upper left corner is used as the coordinate origin in the computer) the coordinates of the four vertices and the center points on the canvas are as follows: Top left vertex 0, bottom left vertex 0, height top right point width, 0 bottom right point width, height center point width/2, height/2 * // draw the Path pathLeft = new Path () of the background triangle of the left direction key (); // start pathLeft from the top left of the canvas. moveTo (0, 0); // draw a straight line to the canvas center pathLeft. lineTo (width/2, height/2); // draw a straight line to the bottom left of the canvas. Eft. lineTo (0, height); // automatically closes the image. Draw a straight line from the last vertex (lower left vertex) to the first vertex (upper left vertex ). PathLeft. close (); // prepare Paint paint = new Paint (); // set the paint color. setColor (Color. RED); // set the paint brush to solid (solid by default. setStyle (Paint. style. FILL); // draws a solid red triangle canvas according to the path design. drawPath (pathLeft, paint );}}

Ii. Test

Now we can use our custom controls. They are the same as the built-in controls in the system, except that the full name of the class must be used as a tag in the XML layout file. Otherwise, an error will be reported.

Modify the layout file of MainActivity as follows:

<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout 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" tools: context = "net. chengyujia. happysnake. mainActivity "> <! -- The custom control must use the full name of the class. Otherwise, an error is returned. --> <Net. chengyujia. happysnake. DirectionKeys android: layout_width = "match_parent" android: layout_height = "match_parent"/> </LinearLayout>

Run the following command:

Now, this article is over, and the next article continues.

If you have any questions, you can share them in the following comments. Pai_^