Study on android_2d drawing Paint,canvas (iii)

Objective

In the previous section, after learning the advanced usage of paint, we will use canvas in this section. It mainly involves drawing coordinate transformation translate,rotate of canvas. Have not seen the previous section click here: android_2d drawing of Learning Paint,canvas (ii).

One, translate

Translate exists in many language image processing, meaning panning, in the canvas, where he represents the origin of the translation coordinates. For example, you want to draw a radius of R circle in the center of a view. You can do this directly: you canvas.drawCircle(getWidth()/2,getHeight()/2,r,paint); can also use translate, first move the canvas's coordinate origin as the center of the view: canvas.trandlate(getWidth()/2,getHeight()/2); then draw a circle according to the new coordinates: canvas.drawCircle(0,0,r,paint); here the starting point (0,0) is the center of the view.

Two, rotate

Rotate is the meaning of rotation, in the canvas, everyone is said to rotate the canvas, in fact, it should be better to understand the rotation of coordinates. For example, if you draw a graph first and then call the Rotate method, you will see that our image is not rotated.
Here I do a test, first draw a blue rectangle, then the canvas rotate 30°, and then draw a red rectangle, according to the principle above, should be red is rotated, and the blue is not rotated. So the truth is, see:

Code:

Move coordinate origin to view center canvas. Translate(GetWidth ()/2, GetHeight ()/2);Mpaint. SetColor(Color. BLUE);Mpaint. SetStyle(Style. STROKE);Draw the blue rectangle canvas First. DrawRect( -,0, Max, -, Mpaint);Rotate Canvas Canvases. Rotate( -);Then draw the red rectangle Mpaint. SetColor(Color. RED);Canvas. DrawRect( -,0, Max, -, Mpaint);

We see, as we say, that rotate just rotates the coordinates of the canvas.

Three, Save,restroe

Save: Used to save the state of the canvas. After save, you can invoke canvas panning, indenting, rotating, trimming, cropping, and so on.
Restore: The state used to restore the canvas before it is saved. Preventing the actions that are performed on the canvas after save has an impact on subsequent drawing.
Here to draw two rectangles to explain the use of the method, we first draw a rectangle, and then save the current canvas coordinate values, and then rotate 45 degrees, draw a same rectangle, in order to distinguish, the color is different, and then restore the canvas coordinate values, plot x, y coordinates.
Effect:

Code:

//Rectangle width        intLenght = dp2px ( -);Canvas. Translate (GetWidth ()/2, GetHeight ()/2);//First black rectangle        Canvas. DrawRect (-lenght,-lenght, lenght, lenght, mpaint);//save coordinates with x-axis direction 3 o'clock        Canvas. Save ();//Rotate Axis        Canvas.Rotate( $); Mpaint.setcolor (Color.Blue);//second Blue rectangle        Canvas. DrawRect (-lenght,-lenght, lenght, lenght, mpaint);//Restore axes        Canvas. Restore (); Mpaint.setcolor (color.red);//Draw axes        Canvas. DrawLine (0,0, -,0, Mpaint);Canvas. DrawText ("x", the,0, Textpaint);Canvas. DrawLine (0,0,0, -, Mpaint);Canvas. DrawText ("Y",0, the, Textpaint);

Of course, save and restore are in pairs, otherwise there is no meaning, of course, restore calls less than the number of save calls.

Four, a simple dial

After learning the Translate,rotate,save,restore, we practice and draw a dial like this:

I've seen this simple dial, which is drawn by lines, triangles, circles, and text, all of which are already spoken in front of you, in the code, directly on the code:

    @Overrideprotected void OnDraw (CanvasCanvas) {//Radius        intRadius = dp2px ( -);//Modify Axis Origin        Canvas. Translate (GetWidth ()/2, GetHeight ()/2);//Save the state of the Axis        Canvas. Save ();//Draw a circle        Canvas. Drawcircle (0,0, radius, mpaint);//Rotate 60 degrees counterclockwise so that the 1 scale will be in the correct position        Canvas.Rotate(- -);//Draw the scale: a total of 60 ticks, starting from the first scale, each 5 scale is a long scale         for(inti =0; I < -; i++) {ifI5==0) {//Draw long scale                Canvas. DrawLine (RADIUS,0, Radius + dp2px ( -),0, Mpaint);/ * Draw a number because of the direction of the problem, so here also need to rotate the translation axis * /                //Save-60 axes                Canvas. Save ();//Move the axis to the position of the drawing number                Canvas. translate (radius + dp2px ( -),0);//Rotate the coordinates so that the numbers are facing the center                Canvas.Rotate( -); Stringtext= String.valueof (I/5+1);//measure the width of the font so that it is centered                intwidth = (int) Textpaint.measuretext (text);Canvas. DrawText (text,-width/2,0, Textpaint);//After restore: Coordinate origin or center of view, x-axis direction 1 o'clock                Canvas. Restore (); }Else{//Draw short scale                Canvas. DrawLine (RADIUS,0, Radius + dp2px (Ten),0, Mpaint); }Canvas.Rotate( the/ -f); }//After restore: Coordinate origin or center of view, x-axis direction 3 o'clock        Canvas. Restore ();//Draw a pointer        Canvas. DrawLine (0,0,0,-dp2px ( -), Mpaint);        Path PATH = new Path (); Path.moveto (3,-dp2px ( -)); Path.lineto (-3,-dp2px ( -)); Path.lineto (0,-dp2px ( the)); Path.close ();Canvas. DrawPath (path, mpaint);//Draw textStringtext="Canvas Clock";intwidth = (int) Textpaint.measuretext (text);Canvas. DrawText (text,-width/2, dp2px ( -), Textpaint); }

Mainly consider the digital direction of the drawing, many online have not considered this problem.

Study on android_2d drawing Paint,canvas (iii)