[Book Note: Android game programming starts from scratch] 12. Game Development BASICS (Canvas), Learning android from scratch

[Book Note: Android game programming starts from scratch] 12. Game Development BASICS (Canvas), Learning android from scratch

1. Canvas

Canvas of the Canvas class encapsulates graphics and image painting. Common functions of this class are described as follows:

 

DrawColor (int color)

Purpose: Draw a color-covered canvas, which is often used for screen swiping.

Parameter: color value, which can also be expressed in hexadecimal format (ARGB)

 

DrawText (String text, float x, float y, Paint paint)

Purpose: Draw text characters

First parameter: Text Content

Parameters 2 and 3: X and Y coordinates of the text

Fourth parameter: paint instance

 

DrawPoint (float x, float y, Paint paint)

Purpose: Draw pixels.

Parameters 1 and 2: X and Y coordinates of pixels

Third parameter: paint instance

 

DrawPoints (float [] pts, Paint paint)

Purpose: Draw multiple pixels

The first parameter is the Float array, which contains the X and Y coordinates of multiple pixels.

The second parameter is the paint brush instance.

 

DrawLine (float startX, float startY, float stopX, float stopY, Paint paint)

Purpose: draw a straight line.

First two parameters: X and Y coordinates of the start point

The last two parameters: X and Y coordinates of the end point

Last parameter: paint instance

 

DrawLines (float [] pts, Paint paint)

Purpose: Draw multiple lines

First parameter: Float array, which contains the starting and ending points X and Y coordinates of multiple straight lines.

The second parameter is the paint brush instance.

 

DrawRect (Rect rect, Paint paint)

Purpose: Draw a rectangle.

First parameter: rectangular instance

The second parameter is the paint brush instance.

 

DrawRoundRect (Rect rect, float x, float y, Paint paint)

Purpose: Draw a rounded rectangle.

First parameter: rectangular instance

Second parameter: radius of the X axis of the rounded corner

Third parameter: radius of the Y axis of the rounded corner

Fourth parameter: paint instance

 

DrawCircle (float xc, float yc, float radius, Paint paint)

Purpose: Draw a circle

Parameters 1 and 2: center X and Y coordinates of the circle

Third parameter: circle radius

Fourth parameter: paint instance

 

DrawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint)

Purpose: draw an arc shape (slice)

First parameter: rectangular instance

The second parameter is the starting angle of the arc (45 ° is the starting angle of the image 0 ° by default)

Third parameter: arc termination Angle

Fourth parameter: whether to draw the center point. If it is true, the start point and the end point are connected to the center point respectively to form a closed image. If it is false, the start point is connected to the end point directly to form a closed image.

Fifth parameter: paint instance

 

DrawOval (RectF oval, Paint paint)

Purpose: draw an ellipse.

First parameter: rectangular instance

The second parameter is the paint brush instance.

 

DrawPath (Path path, Paint paint)

Purpose: Draw a specified path image.

First parameter: path instance

The second parameter is the paint brush instance.

 

DrawTextOnPath (String text, Path path, float hOffset, float vOffset, Paint paint)

Purpose: Draw text along a specified path

First parameter: This article

Second parameter: path instance

Third parameter: the distance between the text and the drawing start point

Fourth parameter: the distance between the text and the path

Fifth parameter: paint instance

 

Rect: rectangle class. The size of the rectangle is determined by the coordinates of two points;

The common constructor is:

Rect (float left, float top, float right, float bottom)

The first and second parameters represent the coordinates in the upper left corner of the rectangle;

The third and fourth parameters represent the coordinates at the bottom right corner of the rectangle;

Android also provides a RectF class. The major difference between the RectF class and the Rect class is that the length unit accuracy is different. RectF uses a single-precision floating point number, while the Rect uses the int type. When using a Canvas to draw a rectangle, you can directly input four parameters of a rectangle, or you can choose to input a rectangle instance.

 

Path: Specify the Path to be drawn, and draw the Path in sequence to combine any desired image.

The common functions are as follows:

MoveTo (float x, float y)

Purpose: set the starting point of the path.

Two parameters: coordinates of the start point

LineTo (float x, float y)

Purpose: Use the above ending point as the starting point, and use a straight line to connect the two points.

Two parameters: the end point of the dot line

Close ()

Purpose: Identify the end of a path. If the point before the path is closed is not the start point, the link is automatically closed.

The above three functions are used in combination with moveTo, lineTo, and close. You only need to set the path start point and end point once, and you can set multiple routes lineTo.

 

Android. graphics. Path. quadTo (float x1, float y1, float x2, float y2)

Purpose: Draw the besell curve.

First parameter: x coordinate of the Operation Point

Second parameter: y coordinate of the Operation Point

Third parameter: x coordinate of the end point

Fourth parameter: y coordinate of the end point

 

2. Canvas instance

As follows:

Step: Create a project named "CanvasProject". The game framework is the MySurfaceView game framework. For detailed steps, refer to "11. Game Development BASICS (what is the difference between SurfaceView and SurfaceView )".

The main Plotting Method myDraw () is modified as follows:

public void myDraw ()
    {
        try {
            canvas = sfh.lockCanvas ();
            if (canvas! = null)
            {
                // --- use fill canvas, swipe screen
                canvas.drawColor (Color.BLACK);
                // --- draw text
                canvas.drawText ("DrawText", 10,15, paint);
                // --- draw pixels
                canvas.drawPoint (10,20, paint);
                // --- draw multiple pixels
                canvas.drawPoints (new float [] {10,30,30,30}, paint);
                // --- draw a straight line
                canvas.drawLine (10,40,50,40, paint);
                // --- Draw multiple straight lines
                canvas.drawLines (new float [] {10,50,50,50,70,50,110,50}, paint);
                // --- draw a rectangle
                canvas.drawRect (10,60,40,100, paint);
                // --- Draw rectangle 2
                Rect rect = new Rect (10,110,60,130);
                canvas.drawRect (rect, paint);
                // --- Draw a rounded rectangle
                RectF rectF = new RectF (10,140,60,170);
                canvas.drawRoundRect (rectF, 20,20, paint);
                // --- Draw a circle
                canvas.drawCircle (20,200,20, paint);
                // --- Draw arc
                canvas.drawArc (new RectF (150,20,200,70), 0,230, true, paint);
                // --- Draw the ellipse
                canvas.drawOval (new RectF (150,80,180,100), paint);
                // --- Draw the specified path
                Path path = new Path ();
                // Set the starting point of the path
                path.moveTo (160,150);
                // Route 1
                path.lineTo (200,150);
                // Route 2
                path.lineTo (180,200);
                // End of path
                path.close ();
                canvas.drawPath (path, paint);
                // --- Draw the specified path graphics
                Path pathCircle = new Path ();
                // Add a circular path
                pathCircle.addCircle (130,260,20, Path.Direction.CCW);
                // --- Draw text with circular path
                canvas.drawTextOnPath ("PathText", pathCircle, 10,20, paint);
            }
        }
        catch (Exception ex) {

        } finally {
            if (canvas! = null)
            {
                sfh.unlockCanvasAndPost (canvas);
            }
        }
    }