【Android Canvas系列】使用canvas绘制简单的clock

最新推荐文章于 2024-07-25 16:05:51 发布

Sogoe_谁用了我的昵称

最新推荐文章于 2024-07-25 16:05:51 发布

阅读量881

点赞数 1

分类专栏： Android开发之路文章标签： android canvas

本文链接：https://blog.csdn.net/sogoe12345/article/details/44300975

版权

Android开发之路专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近在看HTML5 canvas绘制方面的书籍，感觉和Anroid Canvas方面的知识有比较相通的地方。忽然萌生一个用Android Canvas实现书中例子程序的想法，一来巩固自己Android Canvas方面的知识，二来帮助一些想了解Android Canvas方面知识的新手们。

1. 目标

html5实现的clock截图
上图是使用HTML5 Canvas绘制的时钟，本次的目标就是使用Android Canvas实现一个一模一样的时钟。

2.API 列表

drawCircle //用于绘制钟表外框和中心的小圆点
drawText //用于绘制钟表外框上的文字
drawLine //用于绘制钟表的表针

3.代码分析

/**
 * Created by sogoe on 2015/3/14.
 */
public class ClockView extends View {
···
    @override
    protected void onDraw(Canvas canvas) {
        if(!isInited)
            initClock();

        drawCircle(canvas);
        drawCenter(canvas);
        drawNumeral(canvas);
        drawHands(canvas);

        this.postInvalidateDelayed(1000);
    }
}

layout在计算完布局内每个view的长宽后，会调用view的draw函数。ondraw函数则会在draw函数中被调用，用于绘制内容。那么，关于钟表所有的绘制工作将会在ondraw函数内实现。initClock会执行相关参数的初始化工作，drawCircle是绘制钟表外圈园的函数，drawCenter是绘制钟表中心点的函数，drawNumeral是绘制钟表数字的函数，drawHands是绘制钟表表针的函数。注意，最后的postInvalidateDelayed函数，其内部实现也是使用handler.sendMessageDelayed，然后再handleMessage里执行invalidate函数。invalidate函数会请求重置整个view。

void initClock() {
    height = this.getHeight();
    width = this.getWidth();
    padding = 35;
    fontSize = 10;
    int min = Math.min(this.getHeight(), this.getWidth());
    radius = min/2 - padding;
    handTruncation = min/25;
    hourHandTruncation = min/10;
    numeralRadius = radius + numeralSpacing;

    paint = new Paint();
    isInited = true;
}

initClock函数就是对钟表的参数进行初始化。或许你会想，初始化为什么不放到构造函数里。仔细看，在代码第一二行里使用了getHeight和getWidth函数，如果放到构造函数里，获取到的长宽为0。因为，在view初始化的时候，系统也并不知道这个view的具体长宽，其父layout会不断调用view的onMeasure函数来计算这个view具体的长宽，所以，执行在ondraw之前，view的长宽才最终被确定下来。因此，在ondraw里执行长宽的初始化最保险。

void drawCircle(Canvas canvas) {
    paint.reset();                                                                        
    paint.setColor(getResources().getColor(android.R.color.black));
    paint.setStrokeWidth(1);
    paint.setStyle(Paint.Style.STROKE);
    paint.setAntiAlias(true);
    canvas.drawCircle(width/2, height/2, radius, paint);
}

drawCircle就是绘制一个圆圈，这里使用的paint设置style为stroke，表示仅绘制轮廓，不对其内部进行填充。下面的drawCenter函数则要将其设置为fill，因为要绘制一个实心的圆，所以要对其内部填充。

void drawCenter(Canvas canvas) {
    paint.setStyle(Paint.Style.FILL);
    canvas.drawCircle(width/2, height/2, 5, paint);
}

将paint的style设置为fill，绘制实心圆。其他的设置沿用上面函数设置。

void drawNumeral(Canvas canvas) {
     paint.setTextSize(fontSize);
     float fontWidth;
     double angle;
     int x, y;
     for (int number : numbers) {
        fontWidth = paint.measureText(String.valueOf(number));
        angle = Math.PI / 6 * (number - 3);
        x = (int) (width / 2 + Math.cos(angle) * numeralRadius - fontWidth / 2);
        y = (int) (height / 2 + Math.sin(angle) * numeralRadius + fontSize / 3);
        canvas.drawText(String.valueOf(number), x, y, paint);
     }
}

首先设置字体的大小。留意paint.measureText函数，它返回按照paint当前的配置计算文本在屏幕上所占的长度，在canvas的文本绘制中相当有用。然后就是依次绘制钟表上的数字。x，y坐标点的计算可以在草稿纸上画一下，比较容易理解。

void drawHand(Canvas canvas, double loc, boolean isHour) {
     double angle = Math.PI * loc / 30 - Math.PI / 2;
     int handRadius = isHour ? radius - handTruncation - hourHandTruncation : radius - handTruncation;

     canvas.drawLine(width / 2, height / 2,
                (float) (width / 2 + Math.cos(angle) * handRadius),
                (float) (height / 2 + Math.sin(angle) * handRadius),
                paint);
 }

 void drawHands(Canvas canvas) {
      Calendar calendar = Calendar.getInstance();
      float hour = calendar.get(Calendar.HOUR_OF_DAY);
      hour = hour > 12 ? hour - 12 : hour;

      drawHand(canvas, (hour + calendar.get(Calendar.MINUTE) / 60.f) * 5.f, true);
      drawHand(canvas, calendar.get(Calendar.MINUTE), false);
      drawHand(canvas, calendar.get(Calendar.SECOND), false);
}