Android绘制时钟

最近在学View相关的知识，对Canvas和Paint类有了初步了解，看到别人弄了一个会走动的时钟，自己也打算给弄上一个，算是巩固一下相关知识。效果图如下：

首先来分析一下，要绘制出一个时钟，要绘制哪几部分：时钟的大圆、圆上的刻度线、圆外的数字、圆中心处的圆点以及三个时钟指针。既然明白了要绘制的东西，下面只需要想办法来实现即可。

（1）绘制时钟的大圆

这个最简单，只要确定好圆中心坐标点和半径即可

（2）绘制圆上的刻度线

一个时钟总共60个刻度线，通过canvas的rotate()方法，进行不断的旋转，每次旋转的角度为360/60；

（3）绘制圆外的数字

和上面一样，进行旋转绘制即可;

（4）绘制圆中心处的圆点

和（1）一样，只是注意更改一下画笔的设置;

（5）绘制三个时钟指针

根据当前的时分秒，计算出每个指针的旋转角度，在直接绘制线段即可；

注意到，时钟是每秒走一次，也即我们每秒就要刷新一次界面，重复一次上面的绘制工作。所以，一初始化时钟View的时刻，我们通过Handler弄一个定时器，每秒进行刷新操作。

ClockView源码如下：

package com.scu.lly.drawclock.view;

import java.util.Calendar;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.View;

public class ClockView extends View {
	
	private Paint mPaint;
	/**
	 * 描边线的粗细
	 */
	private int strokeWidth = 2;
	/**
	 * 时钟是否在走（即是否第一次onDraw）
	 */
	private boolean isRunning;
	
	private Handler mHandler;
	private Runnable clockRunnable;
	
	/**
	 * 时钟圆的半径
	 */
	private int radius = 150;
	
	private String[] clockNumbers = {"12","1","2","3","4","5","6","7","8","9","10","11"};
	/**
	 * 时钟上需要绘制的数字
	 */
	private String num;
	
	/**
	 * 用于测量文本的宽、高度（这里主要是来获取高度）
	 */
	private Rect textBounds = new Rect();
	
	private Calendar cal;
	
	private int hour,min,second;
	private float hourAngle,minAngle,secAngle;

	public ClockView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	public ClockView(Context context) {
		super(context);
		init();
	}

	private void init() {
		mPaint = new Paint();
		mHandler = new Handler();
//		cal = Calendar.getInstance();
		clockRunnable = new Runnable() {//里面做的事情就是每隔一秒，刷新一次界面
			@Override
			public void run() {
				//线程中刷新界面
				postInvalidate();
				mHandler.postDelayed(this, 1000);
			}
		};
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		if(!isRunning){
			runClock();
		}else{
			initPaint();
			//绘制圆形部分
			drawClockCircle(canvas);
			//绘制刻度线
			drawClockScale(canvas);
			//绘制数字
			drawClockNumber(canvas);
			//绘制中心原点
			drawClockDot(canvas);
			//绘制三个指针
			drawClockPoint(canvas);
		}
	}
	
	/**
	 * 绘制三个指针
	 * @param canvas
	 */
	private void drawClockPoint(Canvas canvas) {
		cal = Calendar.getInstance();
		hour = cal.get(Calendar.HOUR);//Calendar.HOUR获取的是12小时制，Calendar.HOUR_OF_DAY获取的是24小时制
		min = cal.get(Calendar.MINUTE);
		second = cal.get(Calendar.SECOND);
		//计算时分秒指针各自需要偏移的角度
		hourAngle = (float)hour / 12 * 360 + (float)min / 60 * (360 / 12);//360/12是指每个数字之间的角度
		minAngle = (float)min / 60 * 360;
		secAngle = (float)second / 60 * 360;
		//下面将时、分、秒指针按照各自的偏移角度进行旋转，每次旋转前要先保存canvas的原始状态
		canvas.save();
		canvas.rotate(hourAngle,getWidth() / 2, getHeight() / 2);
		canvas.drawLine(getWidth() / 2, getHeight() / 2, getWidth() / 2, getHeight() / 2 - 65, mPaint);//时针长度设置为65
		
		canvas.restore();
		canvas.save();
		canvas.rotate(minAngle,getWidth() / 2, getHeight() / 2);
		canvas.drawLine(getWidth() / 2, getHeight() / 2, getWidth() / 2, getHeight() / 2 - 90 , mPaint);//分针长度设置为90
		
		canvas.restore();
		canvas.save();
		canvas.rotate(secAngle,getWidth() / 2, getHeight() / 2);
		canvas.drawLine(getWidth() / 2, getHeight() / 2, getWidth() / 2, getHeight() / 2 - 110 , mPaint);//秒针长度设置为110
		
		canvas.restore();
	}

	/**
	 * 绘制中心原点
	 */
	private void drawClockDot(Canvas canvas) {
		mPaint.reset();
//		mPaint.setAntiAlias(true);
		mPaint.setColor(Color.RED);
		mPaint.setStyle(Paint.Style.FILL);
		canvas.drawCircle(getWidth() / 2, getHeight() / 2, 6, mPaint);
		initPaint();
	}

	/**
	 * 绘制数字（从正上方12点处开始绘制）
	 * @param canvas
	 */
	private void drawClockNumber(Canvas canvas) {
		//先保存一下当前画布的状态，因为后面画布会进行旋转操作，而在绘制完刻度后，需要恢复画布状态
		canvas.save();
//		mPaint.setStrokeWidth(2);
		mPaint.setTextSize(25);
		//计算12点处 数字 的坐标
		int preX = getWidth() / 2;
		int preY = getHeight() / 2 - radius - strokeWidth - 10;//10为圆与数字文本之间的间距
		//x，y才是文本真正的准确坐标，需要减去文本的自身宽、高因素
		int x,y;
		//计算画布每次需要旋转的角度
		int degree = 360 / clockNumbers.length;
		for(int i = 0; i < clockNumbers.length; i++){
			num = clockNumbers[i];
			mPaint.getTextBounds(num, 0, num.length(), textBounds);
			x = (int) (preX - mPaint.measureText(num) / 2);
			y = preY - textBounds.height();//从文本的中心点处开始绘制
			canvas.drawText(num, x, y, mPaint);
			canvas.rotate(degree, getWidth() / 2, getHeight() / 2);//以圆中心进行旋转
		}
		//绘制完后，记得把画布状态复原
		canvas.restore();
	}

	/**
	 * 绘制刻度线（总共60条）
	 * 从正上方，即12点处开始绘制一条直线，后面的只是旋转一下画布角度即可
	 * @param canvas
	 */
	private void drawClockScale(Canvas canvas) {
		//先保存一下当前画布的状态，因为后面画布会进行旋转操作，而在绘制完刻度后，需要恢复画布状态
		canvas.save();
		//计算12点处刻度的开始坐标
		int startX = getWidth() / 2;
		int startY = getHeight() / 2 - radius;//y坐标即园中心点的y坐标-半径
		//计算12点处的结束坐标
		int stopX = startX;
		int stopY1 = startY + 30;//整点处的线长度为30
		int stopY2 = startY + 15;//非整点处的线长度为15
		//计算画布每次旋转的角度
		float degree = 360 / 60;
		for(int i = 0; i < 60; i++){
			if(i % 5 == 0)
				canvas.drawLine(startX, startY, stopX, stopY1, mPaint);//绘制整点长的刻度
			else
				canvas.drawLine(startX, startY, stopX, stopY2, mPaint);//绘制非整点处短的刻度
			canvas.rotate(degree, getWidth() / 2, getHeight() / 2);//以圆中心进行旋转
		}
		//绘制完后，记得把画布状态复原
		canvas.restore();
	}

	/**
	 * 绘制时钟的圆形部分
	 * @param canvas
	 */
	private void drawClockCircle(Canvas canvas) {
		//获得圆的圆点坐标
		int x = getWidth() / 2;
		int y = getHeight() / 2;
		canvas.drawCircle(x, y, radius, mPaint);
	}
	
	private void initPaint() {
		mPaint.reset();
		mPaint.setColor(Color.RED);
		mPaint.setStyle(Paint.Style.STROKE);//设置描边
		mPaint.setStrokeWidth(strokeWidth);//设置描边线的粗细
		mPaint.setAntiAlias(true);//设置抗锯齿，使圆形更加圆滑
	}

	private void runClock() {
		isRunning = true;
		mHandler.postDelayed(clockRunnable, 1000);
	}
	

}

注：上面一些计算只要把草图画好，计算坐标就好。

缺陷：

从效果图中可以看到一个明显的不足就是，绘制的数字按一个方向旋转后，效果不满意。我尝试了分段绘制，比如将12个数字分成四组{12,,1,2},{3,4,5},{6,7,8},{9,10,11}，还是不尽人意。我最主要的问题就是卡在canvas的rotate()旋转方法的理解上，查了很多资料，基本上认同的是旋转的坐标，看时钟的效果也的确如此，但是目前主要是对rotate方法理解不够深入，不能进行灵活应用。

有优化的方案及其他不足之处，还请各位同学多多提意见。

点此源码下载