安卓-绘制时钟

绘制时钟需要的步骤：

1、确认时钟的中心和半径

2、画圆

3、画时钟刻度

4、画时钟的小时和分钟的刻度

一、确认时钟的中心和半径

在onDraw函数中获取宽和高，并以屏幕的中心为原点

        int height = getMeasuredHeight();
        int width = getMeasuredWidth();
        int centerX = width / 2;
        int centerY = height / 2;
        int radius = Math.min(height / 2, width / 2);

二、画圆

        Paint circle = new Paint();
        circle.setAntiAlias(true);
        circle.setStyle(Paint.Style.STROKE);
        circle.setStrokeWidth(20);
        canvas.drawCircle(centerX, centerY, radius, circle);

这里style不能设置为fill，否则填满整个圆

三、画时钟刻度

这里画时钟刻度有两种方式

1、时钟的中心到每个刻度的角度，因为知道半径、角度、刻度的长度则可以通过三角函数计算每个刻度的起始点和终点的位置绘制线段（刻度）

        Paint clockScalePaint = new Paint();
        clockScalePaint.setAntiAlias(true);
        for (int i = 0; i < 60; ++i) {
            int lineWidth = 10;
            int lineLength = 50;
            if (i % 5 == 0) {
                lineWidth = 15;
                lineLength = 80;
            }
            clockScalePaint.setStrokeWidth(lineWidth);

            int degree = i * 6 - 90;
            float angle = (float) (Math.PI / 180 * degree);
            float startX = (float) Math.cos(angle) * (radius - lineLength) + centerX;
            float startY = (float) Math.sin(angle) * (radius - lineLength) + centerY;
            float endX = (float) Math.cos(angle) * radius + centerX;
            float endY = (float) Math.sin(angle) * radius + centerY;
            canvas.drawLine(startX, startY, endX, endY, clockScalePaint);
        }

如上所示，通过复杂的三角函数来计算出每条要画的线段

这里Math.cos和Math.sin接受的是弧度，所以角度要转为弧度即：弧度=2 * PI / 360 * 角度

2、通过旋转画布的方式进行绘制；因为是旋转画布，那么我们只需要在我们认为最简单绘制的地方进行绘制线段即可，可以水平或者竖直

        Paint clockScalePaint = new Paint();
        clockScalePaint.setAntiAlias(true);
        for (int i = 0; i < 60; ++i) {
            int lineWidth = 10;
            int lineLength = 50;
            if (i % 5 == 0) {
                lineWidth = 15;
                lineLength = 80;
            }
            clockScalePaint.setStrokeWidth(lineWidth);
            canvas.drawLine(centerX, centerY - radius + lineLength, centerX, centerY - radius, clockScalePaint); // 每次只在竖直的位置进行绘制，简化了计算
            canvas.rotate(6, centerX, centerY); // 这里通过以 centerX, centerY为轴进行旋转每个刻度的度数
        }

如上所示跟第一种方法对比，不用进行复杂的计算每次都在同一个位置画一条竖线

其实这里可以先把画布移到时钟的中心就不用再对center做加减了，只需要将center X和Y改为0即可

（注：这里不用对画布进行save和restore是因为刚好旋转了360回到了原来的位置）

四、画时钟的小时和分钟的刻度

因为绘制小时和分钟都是需要以时钟的中心为原点，同样的道理我们将画布移到时钟的中心点那么我们就可以不用管CenterX和Y的位置了

        Paint hourPaint = new Paint();
        hourPaint.setAntiAlias(true);
        hourPaint.setStrokeWidth(16);

        Paint minPaint = new Paint();
        minPaint.setAntiAlias(true);
        minPaint.setStrokeWidth(8);

        canvas.save(); // 因为接下去要对画布做移动操作所以这里先保存当前的画布状态
        canvas.translate(centerX, centerY); // 将画布一到centerX和Y
        canvas.drawLine(0, 0, 0, -radius/3, hourPaint);
        canvas.drawLine(0, 0, radius * 2 / 3, 0, minPaint);
        canvas.restore(); // 还原到最近一次画布保存时候的状态

有时候我们改变了画布的状态，对画布做了很复杂的状态处理那么当处理完之后要还原到上一次的状态则可以通过save和restore操作