canvas绘制时钟刻度表

canvas绘制时钟刻度表

1.首先看一下效果图

2.基本知识点

canvas.drawText：绘制文字，注意基线的位置为文字的左下角y轴所在的线

canvas.drawLine:绘制线段，指定起始位置就好

canvas.save:保存canvas的状态，比如translate平移之前或者rotate(单位为°，正为顺时针)旋转之前的状态

canvas.restore:恢复到保存时候的canvas状态，这么理解：translate平移了坐标，从初始位置屏幕左上角（0,0）到屏幕中间(mWidth/2,mHeight/2)，这时候如果我们在平移之前保存了canvas的状态，要想恢复到平移之前的状态就可以使用canvas.restore，rotate旋转类似

3.分析

1.首先绘制一个屏幕正中心得描边的空心圆

2.绘制刻度线和几点，首先绘制0点的刻度线和0，然后canvas绕着中心点顺时针旋转15°，然后绘制1点，2点。。。

3.绘制两根指针，起始点为（0,0），那么我们可以把坐标通过translate平移到中心点位置，然后绘制两根指针就很容易了

4.实战

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.view.WindowManager;


/**
 * Created by m1312 on 2018/5/5.
 * 绘制时钟
 */

public class ClockView extends View {
    private Paint mCirclePaint;
    private Paint mDegreePaint;
    private Paint mHourPaint;
    private Paint mMinutePaint;

    private int mWidth;
    private int mHeight;
    public ClockView(Context context) {
        super(context);
        init();
    }

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

    public ClockView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mCirclePaint = new Paint();
        mCirclePaint.setStyle(Paint.Style.STROKE);
        mCirclePaint.setAntiAlias(true);
        mCirclePaint.setStrokeWidth(5);

        mDegreePaint = new Paint();
        mDegreePaint.setStrokeWidth(3);
        mDegreePaint.setColor(Color.BLACK);

        mHourPaint = new Paint();
        mHourPaint.setStrokeWidth(20);

        mMinutePaint = new Paint();
        mMinutePaint.setStrokeWidth(10);



        WindowManager windowManager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
        mWidth = windowManager.getDefaultDisplay().getWidth();
        mHeight = windowManager.getDefaultDisplay().getHeight();
    }

    @Override
    protected void onDraw(Canvas canvas) {

        canvas.drawCircle(mWidth/2,mHeight/2,mWidth/2,mCirclePaint);
        for(int i = 0;i<24;i++){
            if(i == 0 || i == 6 || i == 12 || i == 18){
                mDegreePaint.setStrokeWidth(5);
                mDegreePaint.setTextSize(30);
                canvas.drawLine(mWidth/2,mHeight/2-mWidth/2,mWidth/2,mHeight/2-mWidth/2+60,mDegreePaint);
                String degree = String.valueOf(i);
                canvas.drawText(degree,mWidth/2-mDegreePaint.measureText(degree)/2,mHeight/2-mWidth/2+90,mDegreePaint);
            }else{
                mDegreePaint.setStrokeWidth(3);
                mDegreePaint.setTextSize(15);
                canvas.drawLine(mWidth/2,mHeight/2-mWidth/2,mWidth/2,mHeight/2-mWidth/2+30,mDegreePaint);
                String degree = String.valueOf(i);
                canvas.drawText(degree,mWidth/2-mDegreePaint.measureText(degree)/2,mHeight/2-mWidth/2+60,mDegreePaint);
            }
            canvas.rotate(15,mWidth/2,mHeight/2);
        }
        canvas.save();
        canvas.translate(mWidth/2,mHeight/2);
        canvas.drawLine(0,0,100,100,mHourPaint);
        canvas.drawLine(0,0,100,200,mMinutePaint);
        canvas.restore();

        //测试save和restore的作用
        mDegreePaint.setTextSize(50);
        canvas.drawText("hahah",100,100,mDegreePaint);
    }

}