Android_2D绘图的学习Paint,Canvas(三)

前言

上一节，学习了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);    }

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