自定义View学习(三)表盘

本文学习资料 《android群英传》

先上图

2.gif

学习内容
（一）canvas.save()这个方法，保存画布；
（二）canvas.restore();合并图层，他的作用是在
sava()之后绘制的所有图片给与save()之前的图像进行合并。
（三）Cavas.rotate();把画布进行旋转，只需要计算好旋转角度，就可以实现许多复杂的绘图

首先绘制圆盘

   Paint paint1=new Paint();
        paint1.setStyle(Paint.Style.STROKE);
        paint1.setTextSize(25);
        canvas.drawCircle(mwidth/2,mheight/2,mwidth/2,paint1);

表盘的重点在绘制刻度 ,这里用到的rotate()方法，用于旋转画布，因为第一次的数字是1，所以先进行旋转360/60=6度，绘制60次，小刻度就出来了。然后进行

    for(int i=1;i<13;i++){
            //十二个刻度
            String s=String.valueOf(i);
            canvas.rotate(30,mwidth/2,mheight/2);
           canvas.drawLine(mwidth/2,mheight/2-mwidth/2,mwidth/2,mheight/2-mwidth/2+100,paint1);
            canvas.drawText(s,mwidth/2-paint.measureText(s)/2,mheight/2-mwidth/2+150,paint1);
        }
for(int i=1;i<61;i++){
            //六十个小刻度
            canvas.rotate(6,mwidth/2,mheight/2);
 canvas.drawLine(mwidth/2,mheight/2-mwidth/2,mwidth/2,mheight/2-mwidth/2+50,paint1)；    } ```

最后绘制时针，分针，秒针（主要在计算每次旋转的角度上）
因为画布旋转的角度在上次的基础上进行的，所以通过:
h=小时*30
m=分钟*6；
s=秒*6；
计算出来的都是初始时画布应该旋转的角度，但是当分针已经旋转了m度，那么秒针旋转的角度必须减去m，否则就会出现分针动，时针和秒针都旋转。

private void drawPointer(Canvas canvas) {
Calendar calendar=Calendar.getInstance();
Date date=calendar.getTime();
int hour= date.getHours();
int minute=date.getMinutes();
int second=date.getSeconds();
int degree=second6;
int hourdegree=hour30;
int minutedegree=minute*6;
int mwidth=getWidth();
int mheight=getHeight();
// System.out.println("小时"+hour+"分钟"+minute+"秒"+second);

    Paint paint1=new Paint();
    paint1.setStrokeWidth(35);
    canvas.rotate(hourdegree,mwidth/2,mheight/2);
    canvas.drawLine(mwidth/2,mheight/2,mwidth/2,mheight/2-mwidth/4,paint1);
    canvas.save();
    canvas.restore();

    Paint paint2=new Paint();
    paint2.setStrokeWidth(20);
    paint2.setStyle(Paint.Style.STROKE);
    canvas.rotate(minutedegree-hourdegree,mwidth/2,mheight/2);
    canvas.drawLine(mwidth/2,mheight/2,mwidth/2,mheight/2-mwidth/3,paint2);
    canvas.save();
    canvas.restore();
    Paint paint=new Paint();
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(20);
    paint.setColor(Color.BLUE);
    canvas.rotate(degree-minutedegree,mwidth/2,mheight/2);

    canvas.drawLine(mwidth/2,mheight/2,mwidth/2,mheight/2-mwidth/2,paint);
    canvas.save();
    canvas.restore();
}

最后在onDraw方法中调用drawPointer，需要通知更新，这里我设置更新的时间为300ms

drawPointer(canvas);
postInvalidateDelayed(300);
invalidate();

本人如有错误，欢迎留言