前言

上一节，学习了Paint的高级用法后，这一节我们将canvas的用法。主要涉及到canvas的绘制坐标变换translate，rotate。还没看过上一节的请点击这里：Android_2D绘图的学习Paint,Canvas(二)。

一，translate

translate在很多语言的图像处理中都存在，意思是平移，在canvas中，他表示平移坐标原点。比如说，你要在一个View的中心点画一个半径为r圆。你可以这样直接画：canvas.drawCircle(getWidth()/2,getHeight()/2,r,paint);也可以使用translate，先移动画布的坐标原点为view的中心：canvas.trandlate(getWidth()/2,getHeight()/2);然后再根据新的坐标画出圆即可：canvas.drawCircle(0,0,r,paint);这里起始点（0,0）就是view的中心。

二，rotate

rotate是旋转的意思,在canvas中，大家都说是旋转画布，其实更好理解的应该是旋转坐标。比如说，你先画一个图形，然后调用rotate方法，将会看到我们的图像没有被旋转。

这里我做了一个测试，先画一个蓝色的矩形，然后将画布rotate 30°，再画一个红色的矩形，根据上面的原理，应该是红色的被旋转了，而蓝色的则没有被旋转。那么事实呢，请看下图：

代码：

        //移动坐标原点为View中心
        canvas.translate(getWidth()/2, getHeight()/2);
        mPaint.setColor(Color.BLUE);
        mPaint.setStyle(Style.STROKE);
        //先画蓝色矩形
        canvas.drawRect(20, 0, 150, 100, mPaint);
        //旋转画布
        canvas.rotate(30);
        //再画红色矩形
        mPaint.setColor(Color.RED);
        canvas.drawRect(20, 0, 150, 100, mPaint);

我们看到正如我们说的一样，rotate只是旋转了画布的坐标。

三，save,restroe

save：用来保存Canvas的状态。save之后，可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。

restore：用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。

这里画两个矩形来讲解使用方法，我们先绘制一个矩形，然后保存当前canvas坐标值，再旋转45度，画出一个同样的矩形，为了区分，颜色不一样，然后恢复canvas的坐标值，绘出x,y坐标。

效果：

代码：

// 矩形宽度
        int lenght = dp2px(120);
        canvas.translate(getWidth() / 2, getHeight() / 2);
        // 第一个黑色矩形
        canvas.drawRect(-lenght, -lenght, lenght, lenght, mPaint);
        // 保存x轴方向为3点钟方向的坐标
        canvas.save();
        // 旋转坐标轴
        canvas.rotate(45);
        mPaint.setColor(Color.BLUE);
        // 第二个蓝色矩形
        canvas.drawRect(-lenght, -lenght, lenght, lenght, mPaint);
        // 恢复坐标轴
        canvas.restore();
        mPaint.setColor(Color.RED);
        // 绘制坐标轴
        canvas.drawLine(0, 0, 300, 0, mPaint);
        canvas.drawText("x", 330, 0, textPaint);
        canvas.drawLine(0, 0, 0, 300, mPaint);
        canvas.drawText("y", 0, 330, textPaint);

这里当然save和restore是成对出现的，不然缺少意义，当然restore调用次数要少于save的调用次数。

四，简单的表盘

学会了translate，rotate，save，restore后，我们实践一下，绘制一个像这样的表盘：

看过这个简单表盘，都是由线，三角形，圆，文字绘出的，这些在前面都已经讲过，思路都在代码里，直接上代码：

    @Override
    protected void onDraw(Canvas canvas) {

        // 半径
        int radius = dp2px(100);
        // 修改坐标轴原点
        canvas.translate(getWidth() / 2, getHeight() / 2);
        // 保存坐标轴的状态
        canvas.save();
        // 画一个圆
        canvas.drawCircle(0, 0, radius, mPaint);
        // 逆时针旋转60度，这样 1 刻度就能在正确的位置
        canvas.rotate(-60);
        // 画出刻度：一共有60个刻度，从第一个刻度开始，每5个刻度为长刻度
        for (int i = 0; i < 60; i++) {
            if (i % 5 == 0) {
                // 绘制长刻度
                canvas.drawLine(radius, 0, radius + dp2px(20), 0, mPaint);
                /* 绘制数字，因为方向的问题，所以这里还需要旋转平移坐标轴 */
                // 保存-60的坐标轴
                canvas.save();
                // 将坐标轴移动到该画数字的位置
                canvas.translate(radius + dp2px(25), 0);
                // 旋转坐标，可以让数字朝向圆心
                canvas.rotate(90);
                String text = String.valueOf(i / 5 + 1);
                // 测量字体的宽度，使其居中
                int width = (int) textPaint.measureText(text);
                canvas.drawText(text, -width / 2, 0, textPaint);
                // 恢复后：坐标原点还是在View的中心，x轴方向为1点钟方向
                canvas.restore();
            } else {
                // 绘制短刻度
                canvas.drawLine(radius, 0, radius + dp2px(10), 0, mPaint);
            }
            canvas.rotate(360 / 60f);
        }
        // 恢复后：坐标原点还是在View的中心，x轴方向为3点钟方向
        canvas.restore();
        // 画出指针
        canvas.drawLine(0, 0, 0, -dp2px(60), mPaint);
        Path path = new Path();
        path.moveTo(3, -dp2px(60));
        path.lineTo(-3, -dp2px(60));
        path.lineTo(0, -dp2px(63));
        path.close();
        canvas.drawPath(path, mPaint);
        // 绘制文字
        String text = "canvas clock";
        int width = (int) textPaint.measureText(text);
        canvas.drawText(text, -width / 2, dp2px(50), textPaint);
    }

主要考虑一下数字方向的绘制，网上很多都没有考虑到这个问题。