Android Study Notes 09: simple application of Paint and Canvas

In Android, you need to use the graphics class to display 2D images.

Graphics includes Canvas, Paint, Color, Bitmap, and other common classes. Graphics supports drawing points, lines, colors, 2D ry, and image processing.

1. Color

There are three commonly used Color Representation Methods in Android:

(1) int color = Color. BLUE;

(2) int color = Color. argb (150,200, 0,100 );

(3) define the color in the xml file;

In practical application, we usually use the following colors: their color constants and their colors are as follows:

Color. BLACK Color. GREEN

Color. BLUE Color. LTGRAY light gray

Color. CYAN green Color. MAGENTA red and purple

Color. DKGRAY gray black Color. RED

Color. YELLOW Color. TRANSPARENT

Color. GRAY Color. WHITE

2. Paint (Paint brush) Class

To draw a graph, you must first adjust the paint brush and set the attributes of the paint brush according to your development needs. You can set Pain attributes as follows:

SetAntiAlias (); // you can call this operation to set the watermark effect.

SetColor (); // set the paint brush color

SetARGB (); // set the, R, G, and B values of the paint brush.

SetAlpha (); // set the Alpha value of the paint brush.

SetTextSize (); // set the font size

SetStyle (); // set the paint brush style (hollow or solid)

SetStrokeWidth (); // set the width of the hollow border

GetColor (); // obtain the paint brush color.

3. Canvas class

After setting the paint brush property, you also need to draw the image to the canvas. The Canvas class can be used to draw various images, such as straight lines, rectangles, and circles. You can use Canvas to draw common images as follows:

Draw a straight line: canvas. drawLine (float startX, float startY, float stopX, float stopY, painting );

Draw a rectangle: canvas. drawRect (float left, float top, float right, float bottom, Paint paint );

Draw a circle: canvas. drawCircle (float cx, float cy, float radius, Paint paint );

Draw characters: canvas. drawText (String text, float x, float y, Paint paint );

Drawing: canvas. drawBirmap (Bitmap bitmap, float left, float top, Paint paint );

4. Basic Implementation of custom View

First, we need to customize a class, such as MyView, which inherits from the View class. Then, rewrite the onDraw () function of the View class. Finally, use the Paint and Canvas objects in the onDraw () function to draw the image we need.

5. hands-on practice

Here, I have used some of the methods mentioned above to draw a simple Beijing Olympic publicity picture, including the Olympic rings, the "Beijing Welcomes You" publicity slogans, and Fuwa. The result 1 is shown.

 

Figure 1 android_olympus logo

The custom MyView class is used. In the MyView class, the onDraw () function is rewritten and several different brushes are defined, it is used to draw the Olympic rings of various colors and draw the string "Beijing Welcomes You. The specific MyView. java source code is as follows.

MyView. java source code of android_olympus logo
1 package com. example. android_olympus mpiclogo;
2
3 import android. view. View;
4 import android. content. Context;
5 import android. graphics. BitmapFactory;
6 import android. graphics. Canvas;
7 import android. graphics. Color;
8 import android. graphics. Paint;
9 import android. graphics. Paint. Style;
10
11 public class MyView extends View {
12
13 public MyView (Context context ){
14 super (context );
15}
16
17 public void onDraw (Canvas canvas ){
18
19 Paint paint_blue = new Paint (); // draw a blue ring
20 paint_blue.setColor (Color. BLUE );
21 paint_blue.setStyle (Style. STROKE );
22 paint_blue.setStrokeWidth (10 );
23 canvas. drawCircle (110,150, 60, paint_blue );
24
25 Paint paint_yellow = new Paint (); // draw a yellow ring
26 paint_yellow.setColor (Color. YELLOW );
27 paint_yellow.setStyle (Style. STROKE );
28 paint_yellow.setStrokeWidth (10 );
29 canvas. drawCircle (float) 175.5, 210, 60, paint_yellow );
30
31 Paint paint_black = new Paint (); // draw a black ring
32 paint_black.setColor (Color. BLACK );
33 paint_black.setStyle (Style. STROKE );
34 paint_black.setStrokeWidth (10 );
35 canvas. drawCircle (245,150, 60, paint_black );
36
37 Paint paint_green = new Paint (); // draw a green Ring
38 paint_green.setColor (Color. GREEN );
39 paint_green.setStyle (Style. STROKE );
40 paint_green.setStrokeWidth (10 );
41 canvas. drawCircle (311,210, 60, paint_green );
42
43 Paint paint_red = new Paint (); // draw a red ring
44 paint_red.setColor (Color. RED );
45 paint_red.setStyle (Style. STROKE );
46 paint_red.setStrokeWidth (10 );
47 canvas. drawCircle (380,150, 60, paint_red );
48
49 Paint paint_string = new Paint (); // draw a string
50 paint_string.setColor (Color. BLUE );
51 paint_string.setTextSize (20 );
52 canvas. drawText ("Welcome to Beijing", 245,310, paint_string );
53
54 Paint paint_line = new Paint (); // draw a straight line
55 paint_line.setColor (Color. BLUE );
56 canvas. drawLine (240,310,425,310, paint_line );
57
58 Paint paint_text = new Paint (); // draw a string
59 paint_text.setColor (Color. BLUE );
60 paint_text.setTextSize (20 );
61 canvas. drawText ("Welcome to Beijing", 275,330, paint_text );
62
63 // draw a Fuwa Image
64 canvas. drawBitmap (BitmapFactory. decodeResource (getResources (), R. drawable. fuwa), 35,340, paint_line );
65}
66}
In addition, you need to display the custom MyView to the mobile phone screen. you can use the setContentView () method to load the MyView view in java. the java source code is as follows.

MainActivity. java source code of android_olympus logo
1 package com. example. android_olympus mpiclogo;
2
3 import android. OS. Bundle;
4 import android. app. Activity;
5 import android. view. Menu;
6 import android. view. MenuItem;
7 import android. support. v4.app. NavUtils;
8
9 public class MainActivity extends Activity {
10
11 @ Override
12 public void onCreate (Bundle savedInstanceState ){
13 super. onCreate (savedInstanceState );
14 // setContentView (R. layout. activity_main );
15 setContentView (new MyView (this); // load MyView
16}
17
18 @ Override
19 public boolean onCreateOptionsMenu (Menu menu ){
20 getMenuInflater (). inflate (R. menu. activity_main, menu );
21 return true;
22}
23
24}
Of course, you also need to put the pictures of Fuwa in the drawable-hdpi directory under res. In this way, you can use BitmapFactory. decodeResource (getResources (), R. drawable. fuwa) to load the image.