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);
}

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