自定义组件-绘制时钟

1、效果图

2、Canvas对象详解

1.translate(x,y):平移，将画布的坐标原点向左右方向移动x，向上下方向移动y.canvas的默认位置是在（0,0）.

例子：画布原点假如落在（1，1），那么translate（10，10）就是在原点（1，1）基础上分别在x轴、y轴移动10，则原点变为（11,11）。
2.scale（x,y）：扩大。x为水平方向的放大倍数，y为竖直方向的放大倍数。
3.rotate(angel):旋转.angle指旋转的角度，顺时针旋转。
4.transform():切变。所谓切变，其实就是把图像的顶部或底部推到一边。

5 save：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。
6 restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。save和restore要配对使用（restore可以比save少，但不能多），如果restore调用次数比save多，会引发Error。
7、drawTextOnPath 在指定的path上面绘制文字。

3、代码

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;
import android.view.View;

import com.example.canvastest.DensityUtil;
import com.example.canvastest.R;

/**
 * 绘制时钟
 *
 * @author libin
 *
 */
public class ClockView extends View {
    // 半径
    private float radius = 200;
    private Paint mDownPaint;
    // 宽度
    private float mCirclePaintWidth = 10;

    // 上面圆圈的画笔
    private Paint mOutSidePaint;
    // 画文字
    private Paint mTextPaint;

    // 文字大小
    private int textFontSize = 16;

    private int longLine ;
    private int shortLine;
    private int widthLine ;
    //小圆心的半径
    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();
    }

    private void init() {
        mDownPaint = new Paint();
        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);
        // 上面的画笔
        mOutSidePaint = new Paint();
        mOutSidePaint.setAntiAlias(true);
        mOutSidePaint.setStrokeWidth(mCirclePaintWidth);
        mOutSidePaint.setStyle(Style.STROKE);
        mOutSidePaint.setColor(Color.BLACK);
        // 上面的画笔
        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setColor(Color.BLACK);
        mTextPaint.setStrokeWidth(widthLine);
        mTextPaint.setTextAlign(Align.CENTER);

        mTextPaint.setTextSize(textFontSize);
        mDownPaint.setTextSize(textFontSize);

        mHandler.sendEmptyMessage(10);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        // 平移，将画布的坐标原点向左右方向移动x，向上下方向移动y.canvas的默认位置是在（0,0）.
        // 例子：画布原点假如落在（1，1），那么translate（10，10）就是在原点
        // （1，1）基础上分别在x轴、y轴移动10，则原点变为（11,11）。
        canvas.translate(canvas.getWidth() / 2, canvas.getHeight() / 2); // 将位置移动画纸的坐标点:150,150
        // 画圆
        canvas.drawCircle(0, 0, radius, mOutSidePaint);
        canvas.save();

        // 绘制路径
        Path path = new Path();
        path.addArc(new RectF(-radius, -radius, radius, radius), -180, 180);
        mDownPaint.setTextAlign(Align.CENTER);

        int pathy = DensityUtil.dip2px(getContext(), -5);
        // 让文字显示到中间
        canvas.drawTextOnPath("canvas绘制钟表", path, 0, pathy, mDownPaint);
        canvas.restore();

        //绘制刻度
        canvas.save();
        canvas.rotate(210);
        float y = radius;
        int count = 60; // 总刻度数
        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  - shortLine , 0f,y-mCirclePaintWidth/2, mTextPaint);
            }
            canvas.rotate(360 / count, 0f, 0f); // 旋转画纸
        }
        canvas.restore();

        //绘制秒针
        canvas.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();

        //绘制分针
        canvas.save();
        canvas.rotate(minDegrees);
        canvas.drawLine(0, -longLine, 0, radius*1/2, hourPaint);
        canvas.restore();

        //绘制时针
        canvas.save();
        canvas.rotate(hourDegrees);
        canvas.drawLine(0, -longLine, 0, radius*1/3, hourPaint);
        canvas.restore();

        //绘制中心黑点
        Paint tmpPaint = new Paint(mDownPaint);
        tmpPaint.setColor(Color.BLACK);
        canvas.drawCircle(0, 0, circle*2, tmpPaint);

        //绘制中心红点
        tmpPaint.setColor(Color.RED);
        canvas.drawCircle(0, 0, circle*4/3, tmpPaint);
        super.onDraw(canvas);
    }

    /**
     * 获取角度
     */
    private void calculate(){
        Calendar calendar = Calendar.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);
    }

    /**
     * 定时器
     */
    private Handler mHandler = new Handler(){
        public void handleMessage(android.os.Message msg) {
            switch (msg.what) {
            case 10:
                calculate();
                invalidate();
                this.sendEmptyMessageDelayed(10, 1000);
                break;
            default:
                break;
            }
        };
    };
}

4、常量数据

 <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>