Custom components-draw the clock and the component draw the clock

Custom components-draw the clock and the component draw the clock

1,

2. Canvas object details

1. translate (x, y): translate, move the coordinate origin of the canvas to the left and right directions, and move y. the default position of the canvas is (0, 0 ).

  Example: If the canvas origin falls on (), then the translate () is to move 10 on the X axis and Y axis respectively on the basis of the origin (), then the origin is changed ).
2. scale (x, y): expand. X is the magnification of the horizontal direction, and y is the magnification of the vertical direction.
3. rotate (angel): rotation. angle indicates the Rotation angle and clockwise rotation.
4. transform (): shear. The so-called shear is actually pushing the top or bottom of the image to one side. 5 save: used to save the Canvas status. After saving, you can call operations such as pan, zoom, rotate, miscut, and crop of the Canvas.
6. restore: used to restore the State saved before the Canvas. This prevents operations performed on the Canvas after the save operation from affecting subsequent painting. Save and restore must be used together (restore can be less than save, but not more). If the restore calls more than save, an Error is thrown.
7. Draw text on the specified path using drawTextOnPath. 3. Code

Package com. example. canvastest. view; import java. util. calendar; import android. content. context; import android. graphics. canvas; import android. graphics. color; import android. graphics. paint; import android. graphics. paint. align; import android. graphics. paint. style; import android. graphics. path; import android. graphics. rectF; import android. OS. handler; import android. util. attributeSet; import android. util. log; imp Ort android. view. view; import com. example. canvastest. densityUtil; import com. example. canvastest. r;/*** draw the clock ** @ author libin **/public class ClockView extends View {// radius private float radius = 200; private Paint mDownPaint; // width private float mCirclePaintWidth = 10; // Paint brush private Paint mOutSidePaint in the circle above; // draw text private Paint mTextPaint; // text size private int textFontSize = 16; private int longLine; privat E int cycle line; private int widthLine; // the radius of the small center of the private int circle; private int hourDegrees; private int minDegrees; private int secDegrees; public ClockView (Context context) {super (context); init ();} public ClockView (Context context, AttributeSet attrs) {super (context, attrs); init ();} public ClockView (Context context, attributeSet attrs, int defStyleAttr) {super (context, attrs, defStyleAttr); init ();} pri Vate void init () {mDownPaint = new Paint (); mDownPaint. setColor (Color. BLACK); mDownPaint. setAntiAlias (true); mDownPaint. setStrokeWidth (mCirclePaintWidth); textFontSize = (int) getResources (). getDimension (R. dimen. textSize); vertex line = (int) getResources (). getDimension (R. dimen. required line); 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 Paint brush above mOutSidePaint = new Paint (); mOutSidePaint. setAntiAlias (true); mOutSidePaint. setStrokeWidth (mCirclePaintWidth); mOutSidePaint. setStyle (Style. STROKE); mOutSidePaint. setColor (Color. BLACK); // the Paint brush above mTextPaint = new Paint (); mTextPaint. setAntiAlias (true); mTextPaint. s EtColor (Color. BLACK); mTextPaint. setStrokeWidth (widthLine); mTextPaint. setTextAlign (Align. CENTER); mTextPaint. setTextSize (textFontSize); mDownPaint. setTextSize (textFontSize); mHandler. sendEmptyMessage (10) ;}@ Overrideprotected void onDraw (Canvas canvas) {// pan, move the coordinate origin of the Canvas to the left and right Directions x, and move y up and down. the default position of the canvas is (0, 0 ). // example: if the origin of the canvas falls on (), then the translate () is to move 10 on the X axis and Y axis respectively on the Origin, the origin is changed ). Canvas. translate (canvas. getWidth ()/2, canvas. getHeight ()/2); // move the position to the coordinate point of the painted paper: 150,150 // draw a circle canvas. drawCircle (0, 0, radius, mOutSidePaint); canvas. save (); // draw Path path Path = new path (); Path. addArc (new RectF (-radius,-radius, radius, radius),-180,180); mDownPaint. setTextAlign (Align. CENTER); int pathy = DensityUtil. dip2px (getContext (),-5); // display the text in the middle canvas. drawTextOnPath ("canvas Clock", path, 0, pathy, mDownPaint); canvas. restore (); // draw the scale canvas. save (); canvas. rotate (210); float y = radius; int count = 60; // The total number of scales for (int I = 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-plain line, 0f, y-mCirclePaintWidth/2, mTextPaint);} canvas. rotate (360/count, 0f, 0f); // rotating paper} canvas. restore (); // draw a canvas with seconds. save (); canvas. rotate (secDegrees); Paint hourPaint = new Paint (mDownPaint); hourPaint. setColor (Color. BLACK); hourPaint. setStrokeWidth (circle); canvas. drawLine (0,-longLine, 0, radius * 2/3, hourPaint); canvas. restore (); // draw the canvas of the sub-needle. save (); canvas. rotate (minDegrees); canvas. drawLine (0,-longLine, 0, radius * 1/2, hourPaint); canvas. restore (); // draw the canvas for the hour. save (); canvas. rotate (hourDegrees); canvas. drawLine (0,-longLine, 0, radius * 1/3, hourPaint); canvas. restore (); // Paint center black spot Paint tmpPaint = new Paint (mDownPaint); tmpPaint. setColor (Color. BLACK); canvas. drawCircle (0, 0, circle * 2, tmpPaint); // draw center reddot tmpPaint. setColor (Color. RED); canvas. drawCircle (0, 0, circle * 4/3, tmpPaint); super. onDraw (canvas);}/*** obtain angle */private void calculate () {Calendar ar calendar AR = Calendar ar. getInstance (); int hour = calendar. get (Calendar. HOUR); if (hour> 12) {hour = hour-12;} hourDegrees = hour * 30-180; int min = calendar. get (Calendar. MINUTE); minDegrees = min * 6-180; int sec = calendar. get (Calendar. SECOND); secDegrees = sec * 6-180; Log. I ("tag", "" + hour + "" + min + "" + sec);}/*** timer */private Handler mHandler = new Handler () {public void handleMessage (android. OS. message msg) {switch (msg. what) {case 10: calculate (); invalidate (); this. sendEmptyMessageDelayed (10,100 0); break; default: break ;}};};}

4. Constant data

    <dimen name="textSize">14sp</dimen>    <dimen name="circleRadius">100dip</dimen>    <dimen name="shortLine">9dip</dimen>    <dimen name="longLine">15dip</dimen>    <dimen name="widthLine">5dip</dimen>    <dimen name="circle">3dip</dimen>