Android 2D plotting: android2d plotting

Android 2D plotting: android2d plotting

Android uses the graphics class to display 2D images. Graphics includes Canvas, Paint, Color, Bitmap, and other classes. Graphics supports drawing points, lines, colors, 2D ry, and image processing. Among them, Color and Bitmap are very common classes. I want to talk about Canvas and Paint. Canvas and paint brush. Next, I will learn about the Android plotting mechanism by drawing a scheme diagram.

Paint class 
As with everyday drawing, you must first select the appropriate paint brush to draw a graph. Similarly, in android, you must first adjust the paint brush and set the attributes of the paint brush as needed. The common APIs provided by the system are as follows:
SetColor (); // set the paint brush color
SetAntiAlias (); // you can call this operation to set the watermark effect.
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.

　　Canvas 
Canvas is the Canvas. What we need to do is to use the previously set Paint to draw the image. First, let's look at the methods provided by the system:
Canvas. drawLine (float startX, float startY, float stopX, float stopY, Paint); // draw a straight line
Canvas. drawRect (float left, float top, float right, float bottom, Paint paint); // draw a rectangle
Canvas. drawCircle (float cx, float cy, float radius, Paint paint); // draw a circle
Canvas. drawArc (float cx, float cy, float radius, Paint paint); // draw an arc, and slice
Canvas. drawText (String text, float x, float y, Paint paint); // draw characters
Canvas. drawBitmap (Bitmap bitmap, float left, float top, Paint paint); // draw Bitmap

After introducing these functions, we will draw a plot to see how to use them:
Let's take a look at the pie chart:

Now we need to draw the layers step by step. We can learn from the concept of layers. First, draw the bottom layer. For convenience, set the left and right sides to white and black respectively:

(X, y) is the coordinates of the center. Here I set x = getWidth ()/2; y = getHeight ()/2; radius r = getHeight ()/2;
Now let's take a look at the code in the OnDraw (Canvas canvas) method that defines the View:

 

// Draw the outermost circle mPaint. setColor (Color. BLACK); // set the paint brush color to BLACK mPaint. setStyle (Paint. style. FILL_AND_STROKE); // set paint style solid RectF rect = new RectF (getWidth ()/2-getHeight ()/2, 0, getWidth ()/2 + getHeight () /2, getHeight (); // The external rectangle canvas of the arc. drawArc (rect, 270,180, false, mPaint); mPaint. setColor (Color. WHITE); // set the paint brush color to WHITE canvas. drawArc (rect, 90,180, false, mPaint );

In the code, rect is the external Quadrilateral of the circle. The four parameters of its constructor RectF (float left, float top, float right, float bottom) correspond to the x coordinate values on the leftmost side of the Quadrilateral; y coordinate value of the top left side, x coordinate value of the rightmost side, and y coordinate value of the bottom side. We can see in the Code:
Left = getWidth ()/2-getHeight ()/2;
Top = 0;
Right = getWidth ()/2 + getHeight ()/2;
Bottom = getHeight ();
The four values determine the external Quadrilateral of the circle.
Canvas. drawArc (rect, 90,180, false, mPaint); the first parameter is the area we have determined above, and the second parameter is the angle (90 degrees, clockwise rotation on the X axis) of the Start plot ), the third parameter scans the degree, and the fourth parameter sets the Paint brush.
Next, we need to draw the middle layer. The middle layer can be seen as two semi-circles that are left and right White and Black:

Similarly, we should first determine the area of the external quadrilateral, and then we will not detail it here when drawing an arc.

// Draw the mPaint circle on the top of the intermediate layer. setColor (Color. BLACK); rect = new RectF (getWidth ()/2-getHeight ()/4,0, getWidth ()/2 + getHeight ()/4, getHeight ()/2); canvas. drawArc (rect, 90,180, false, mPaint); // draw the circle mPaint under the middle layer. setColor (Color. WHITE); rect = new RectF (getWidth ()/2-getHeight ()/4, getHeight ()/2, getWidth ()/2 + getHeight ()/4, getHeight (); canvas. drawArc (rect, 270,180, false, mPaint );

Finally, the top layer has two incircle

// Draw the smallest white circle mPaint. setColor (Color. WHITE); canvas. drawCircle (getWidth ()/2, getHeight ()/4, getHeight ()/10, mPaint); // draw the upper black circle mPaint. setColor (Color. BLACK); mPaint. setStyle (Paint. style. FILL); canvas. drawCircle (getWidth ()/2, getHeight () * 3/4, getHeight ()/10, mPaint );

Canvas. drawCircle is used to draw circles. The first parameter is the center x coordinate value, the second parameter is the y coordinate value, the third coordinate is the circle radius, and the fourth is the set brush.
At this point, a plot is drawn.

The code for customizing the View is attached:

Package com. chuck. mobile. changecountview. widget; import android. content. context; import android. graphics. canvas; import android. graphics. color; import android. graphics. paint; import android. graphics. path; import android. graphics. rectF; import android. util. attributeSet; import android. view. view;/*** Project name: changecountview * class description: * Creator: Administrator * Creation Time: * modifier: Administrator * modification time: * remarks: */public class CustomeView extends View {private Paint mPaint = new Paint (); private Path path = new Path (); private float degress = 90; public CustomeView (Context context) {super (context);} public CustomeView (Context context, AttributeSet attrs) {super (context, attrs);} public CustomeView (Context context, AttributeSet attrs, int defStyleAttr) {super (context, attrs, defStyleAttr) ;}@ Override protected void onDraw (Canvas canvas Canvas) {// draw the outermost circle mPaint. setColor (Color. BLACK); // set the paint brush color to BLACK mPaint. setStyle (Paint. style. FILL_AND_STROKE); // set paint style solid RectF rect = new RectF (getWidth ()/2-getHeight ()/2, 0, getWidth ()/2 + getHeight () /2, getHeight (); // The external rectangle canvas of the arc. drawArc (rect, 270,180, false, mPaint); mPaint. setColor (Color. WHITE); // set the paint brush color to WHITE canvas. drawArc (rect, 90,180, false, mPaint); // draw the mPaint circle above the middle layer. setColor (Color. BLACK); rect = new RectF (getWidth ()/2-getHeight ()/4,0, getWidth ()/2 + getHeight ()/4, getHeight ()/2); canvas. drawArc (rect, 90,180, false, mPaint); // draw the circle mPaint under the middle layer. setColor (Color. WHITE); rect = new RectF (getWidth ()/2-getHeight ()/4, getHeight ()/2, getWidth ()/2 + getHeight ()/4, getHeight (); canvas. drawArc (rect, 270,180, false, mPaint); // draw the smallest white circle mPaint. setColor (Color. WHITE); canvas. drawCircle (getWidth ()/2, getHeight ()/4, getHeight ()/10, mPaint); // draw the upper black circle mPaint. setColor (Color. BLACK); mPaint. setStyle (Paint. style. FILL); canvas. drawCircle (getWidth ()/2, getHeight () * 3/4, getHeight ()/10, mPaint );}}

Then use the custom View in the layout File

<com.chuck.mobile.changecountview.widget.CustomeView        android:layout_width="match_parent"        android:layout_height="250dp"        android:background="@color/gray"/>

There are many ways to convert the canvas to an animated image. You can use an animation or rotate the canvas. I used the method of rotating the canvas through a thread. After learning about Android 2D plotting, you can draw patterns that you are interested in.