Custom components-Draw Clocks

1.

2, Canvas object detailed

1.translate (x, y) : Pan, move the coordinate origin of the canvas to the left and right direction X, and move the Y.canvas in the upper and lower directions in the default position (0,0).

Example: If the canvas Origin falls on (translate), then the origin (10,10) is moved 10 on the x-axis and y-axis respectively on the origin (the primary), then the original point becomes (11,11).
2.scale (x, y): enlarged. X is the magnification in the horizontal direction and y is the vertical magnification.
3.rotate (Angel): rotate. Angle refers to the angle of rotation and rotates clockwise.
4.transform ():Shear. The so-called shear, in fact, is to push the top or bottom of the image to one side.5 Save: Used to save the state of the canvas. After save, you can invoke canvas panning, indenting, rotating, trimming, cropping, and so on.
6 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. save and restore are paired (restore can be less than save, but not many), and error will be raised if the restore is called more times than save.
7. Drawtextonpath draws text on the specified path. 3. Code

 PackageCom.example.canvastest.view;ImportJava.util.Calendar;ImportAndroid.content.Context;ImportAndroid.graphics.Canvas;ImportAndroid.graphics.Color;ImportAndroid.graphics.Paint;Importandroid.graphics.Paint.Align;ImportAndroid.graphics.Paint.Style;ImportAndroid.graphics.Path;ImportAndroid.graphics.RectF;ImportAndroid.os.Handler;ImportAndroid.util.AttributeSet;ImportAndroid.util.Log;ImportAndroid.view.View;ImportCom.example.canvastest.DensityUtil;ImportCOM.EXAMPLE.CANVASTEST.R;/*** Draw Clock * *@authorLibin **/ Public classClockviewextendsView {//radius    Private floatRADIUS = 200; PrivatePaint Mdownpaint; //width    Private floatMcirclepaintwidth = 10; //The brush above the circle    PrivatePaint Moutsidepaint; //Drawing Text    PrivatePaint Mtextpaint; //Text Size    Private intTextfontsize = 16; Private intlongline; Private intshortline; Private intWidthline; //radius of the small center    Private intCircle; Private inthourdegrees; Private intmindegrees; Private intsecdegrees;  PublicClockview (Context context) {Super(context);    Init (); }     PublicClockview (Context context, AttributeSet attrs) {Super(context, attrs);    Init (); }     PublicClockview (context context, AttributeSet attrs,intdefstyleattr) {        Super(context, attrs, defstyleattr);    Init (); }    Private voidinit () {Mdownpaint=NewPaint ();        Mdownpaint.setcolor (Color.Black); Mdownpaint.setantialias (true);        Mdownpaint.setstrokewidth (Mcirclepaintwidth); Textfontsize= (int) getresources (). Getdimension (R.dimen.textsize); Shortline= (int) getresources (). Getdimension (R.dimen.shortline); Longline= (int) getresources (). Getdimension (R.dimen.longline); Widthline= (int) getresources (). Getdimension (R.dimen.widthline); Radius= (int) getresources (). Getdimension (R.dimen.circleradius); Circle= (int) getresources (). Getdimension (r.dimen.circle); //the brush aboveMoutsidepaint =NewPaint (); Moutsidepaint.setantialias (true);        Moutsidepaint.setstrokewidth (Mcirclepaintwidth);        Moutsidepaint.setstyle (Style.stroke);        Moutsidepaint.setcolor (Color.Black); //the brush aboveMtextpaint =NewPaint (); Mtextpaint.setantialias (true);        Mtextpaint.setcolor (Color.Black);        Mtextpaint.setstrokewidth (Widthline);                Mtextpaint.settextalign (Align.center);        Mtextpaint.settextsize (textfontsize);                Mdownpaint.settextsize (textfontsize); Mhandler.sendemptymessage (10); } @Overrideprotected voidOnDraw (canvas canvas) {//Pan, move the coordinate origin of the canvas to the left and right direction X, and move the Y.canvas in the upper and lower directions in the default position (0,0). //Example: If the canvas Origin falls on (translate), then the 10,10 is at the origin.//On the basis of the x-axis, the y-axis, respectively, 10, the origin becomes (11,11). Canvas.translate (Canvas.getwidth ()/2, Canvas.getheight ()/2);//to move the position of a paper's coordinate point: 150,150//Draw a circleCanvas.drawcircle (0, 0, Radius, moutsidepaint);        Canvas.save (); //Draw PathPath PATH =NewPath (); Path.addarc (NewRECTF (-radius,-radius, radius, radius),-180, 180);        Mdownpaint.settextalign (Align.center); intPathy = densityutil.dip2px (GetContext (),-5); //let the text appear in the middleCanvas.drawtextonpath ("Canvas drawing Clock", path, 0, Pathy, Mdownpaint);        Canvas.restore (); //Draw a scaleCanvas.save (); Canvas.rotate (210); floaty =radius; intCount = 60;//total number of ticks         for(inti = 0; I < count; i++) {            if(i% 5 = = 0) {canvas.drawline (0f, y-longline+2, 0, Y+MCIRCLEPAINTWIDTH/2, Mtextpaint); Canvas.drawtext (string.valueof (i/5 + 1), 0, y-mcirclepaintwidth/2-longline, Mtextpaint); } Else{canvas.drawline (0f, y-Shortline, 0F,Y-MCIRCLEPAINTWIDTH/2, Mtextpaint); } canvas.rotate (360/count, 0f, 0f);//Rotating Paper} canvas.restore (); //Draw the second handCanvas.save ();        Canvas.rotate (secdegrees); Paint Hourpaint=NewPaint (Mdownpaint);        Hourpaint.setcolor (Color.Black);                 Hourpaint.setstrokewidth (circle); Canvas.drawline (0,-longline, 0, RADIUS*2/3, Hourpaint);                Canvas.restore (); //draw the minute handCanvas.save ();        Canvas.rotate (mindegrees); Canvas.drawline (0,-longline, 0, RADIUS*1/2, Hourpaint);            Canvas.restore (); //Draw the hour handCanvas.save ();        Canvas.rotate (hourdegrees); Canvas.drawline (0,-longline, 0, RADIUS*1/3, Hourpaint);        Canvas.restore (); //Draw Center Black PointPaint Tmppaint =NewPaint (Mdownpaint);        Tmppaint.setcolor (Color.Black); Canvas.drawcircle (0, 0, circle*2, Tmppaint); //Draw Center Red DotTmppaint.setcolor (color.red); Canvas.drawcircle (0, 0, CIRCLE*4/3, Tmppaint); Super. OnDraw (canvas); }     /*** Get Angle*/    Private voidcalculate () {Calendar Calendar=calendar.getinstance (); inthour =Calendar.get (Calendar.hour); if(hour>12) {Hour= hour-12; } hourdegrees= hour*30-180; intMin =Calendar.get (Calendar.minute); Mindegrees= min * 6-180; intSEC =Calendar.get (Calendar.second); Secdegrees= sec * 6-180; LOG.I ("Tag", "" + hour+ "" +min+ "" +sec); }        /*** Timer*/    PrivateHandler Mhandler =NewHandler () { Public voidhandlemessage (android.os.Message msg) {Switch(msg.what) { Case10: Calculate ();                Invalidate ();  This. sendemptymessagedelayed (10, 1000);  Break; default:                 Break;    }        }; };}

4. Constant data

 <dimenname= "TextSize">14sp</dimen>    <dimenname= "Circleradius">100dip</dimen>    <dimenname= "Shortline">9dip</dimen>    <dimenname= "Longline">15dip</dimen>    <dimenname= "Widthline">5dip</dimen>    <dimenname= "Circle">3dip</dimen>

Custom components-Draw Clocks