一个自定义控件画图形的例子让你彻底明白画布旋转和save(),restore()的使用。

安卓的控件提供了绘制接口onDraw(Canvas)方法，并提供了画布类Canvas以及丰富的api。本文通过一个示例工程来详细讲解使用Canvas进行图形的绘制、画布的变换、画布状态的存档和恢复等等。
示例代码下载

- 首先我们在MainActivity的界面上展示一个自定义控件，控件上默认画一个向上的箭头和靠近坐标原点的圆，主要绘制代码如下。 // 画一个左上角的圆

private void drawLeftUpCircle(Canvas canvas) {
// 以坐标（100，100）为圆心，80为半径画圆。
canvas.drawCircle(100, 100, 80, mLinePaint);
}

// 画一个向上的箭头
private void drawUpArrow(Canvas canvas) {
canvas.drawLine(mHalfWidth, 0, 0, mHalfHeight, mLinePaint); // 左边的蓝色加粗斜杠
mLinePaint.setColor(Color.RED);
mLinePaint.setStrokeWidth(4);
canvas.drawLine(mHalfWidth, 0, mViewWidth, mHalfHeight, mLinePaint);// 右边的斜杠
canvas.drawLine(mHalfWidth, 0, mHalfWidth, mViewHeight, mLinePaint);// 垂直的竖杠
}

显示效果如下图:

分析总结：以上是调用Canvas的方法绘制三条直线和一个圆。绘制的时候安卓的坐标系如下图所示。

- 点击下面的按钮则是对画布进行重绘，例如点击旋转按钮，是将画布以中点为中心顺时针旋转90度，然后在画箭头和圆。 主要绘制代码如下。

// 以坐标（mHalfWidth, mHalfHeight）为中心顺时针旋转画布90度，mHalfWidth, mHalfHeight分别为控件的一半宽和一半高。
canvas.rotate(90, mHalfWidth, mHalfHeight);
// 画箭头
drawUpArrow(canvas);
// 画圆
drawLeftUpCircle(canvas);

显示效果如下图:

分析总结：当我们旋转90后再画同样坐标的箭头和圆时，箭头方向和圆的位置已经改变了。这是因为旋转后画布的坐标系变成了如下图所示。

- 点击恢复按钮,则是先保存画布状态，再将画布以中点为中心顺时针旋转90度，然后画箭头，接着恢复画布至存档前的状态再画圆。

主要绘制代码如下。
// 保存画布状态
canvas.save();
// 以坐标（mHalfWidth, mHalfHeight）为中心顺时针旋转画布90度。
canvas.rotate(90, mHalfWidth, mHalfHeight);
// 画箭头
drawUpArrow(canvas);
// 恢复画布状态。
canvas.restore();
// 画圆
drawLeftUpCircle(canvas);

显示效果如下图:

分析总结：我们已经知道旋转后坐标系改变，所以箭头向左。但在绘制圆之前我们已经恢复了画布状态，此时的画布坐标系是旋转之前的。所以圆在左上角。

- 点击缩放按钮，是先缩放画布至0.5倍。然后画箭头在画圆。

主要绘制代码如下：
// 以默认原点进行缩放画布，X方向和Y方向均缩放至0.5倍。
canvas.scale(0.5f, 0.5f);
// 画箭头
drawUpArrow(canvas);
// 画圆
drawLeftUpCircle(canvas);

显示效果如下图:

分析总结：可以看到，缩放后再画，箭头和圆都跟着缩放。因为整个画布区域都跟着缩放了。