整理Android绘图时图形变换方法

Android提供了很丰富的绘图方法，包括图形变换控制，颜色变换控制，图形合成等好多内容，这里只简单整理下图形变换的控制方法。

首先要知道我们在用画布Canvas进行绘图，Canvas中包含了一个图形变换矩阵Matrix，图形变换都是通过控制Matrix的变换来实现的，包括平移、旋转、缩放和错切等变换。网上关于Matrix矩阵变换的原理很多，搜一下就有了，有高数底子理解起来更容易。再进行变换前先设置几种属性：

// X轴缩放比例
private float scaleX = 1;
// Y轴缩放比例
private float scaleY = 1;
// 顺时针旋转角度
private int rotate;
// X轴旋转角度
private int rotateX;
// Y轴旋转角度
private int rotateY;
// Z轴旋转角度
private int rotateZ;
// X轴平移
private int translateX;
// Y轴平移
private int translateY;
// Z轴平移
private int translateZ;
// X轴错切
private float skewX = 0;
// Y轴错切
private float skewY = 0;

来看下屏幕3D坐标图，参考别人画的：



需要注意的就是Z轴方向是垂直面向屏幕往下，X、Y轴都很熟悉了。

Canvas变换

@Override
protected void onDraw(Canvas canvas) {
canvas.translate(translateX, translateY);
// 设置以中点为基准点，默认图形左上角为原点坐标
canvas.rotate(rotate, getWidth() / 2, getHeight() / 2);
canvas.scale(scaleX, scaleY, getWidth() / 2, getHeight() / 2);
// canvas的错切方法不提供设置某个点为基准点
canvas.skew(skewX, skewY);
super.onDraw(canvas);
}

Matrix变换

@Override
protected void onDraw(Canvas canvas) {
canvas.getMatrix(mMatrix);
mMatrix.preRotate(rotate, getWidth() / 2, getHeight() / 2);
mMatrix.preScale(scaleX, scaleY, getWidth() / 2, getHeight() / 2);
mMatrix.preSkew(skewX, skewY, getWidth() / 2, getHeight() / 2);
mMatrix.postTranslate(translateX, translateY);
// concat()方法合并当前canvas中的Matrix和所设置的Matrix
canvas.concat(mMatrix);
super.onDraw(canvas);
}

Camera变换

@Override
protected void onDraw(Canvas canvas) {
mCamera.save();
mCamera.translate(translateX, translateY, translateZ);
mCamera.rotate(rotateX, rotateY, rotateZ);
mCamera.getMatrix(mMatrix);
// 先将旋转的基准点平移到中点，旋转完后再还原
mMatrix.preTranslate(-getWidth() / 2, -getHeight() / 2);
mMatrix.postTranslate(getWidth() / 2, getHeight() / 2);
mCamera.restore();
// concat()方法合并当前canvas中的Matrix和所设置的Matrix
canvas.concat(mMatrix);
super.onDraw(canvas);
}

一般用法

比较常见的用法是，用Camera控制3D变换，其它变换直接用Canvas变换，错切见的比较少，比如：

@Override
protected void onDraw(Canvas canvas) {
canvas.translate(translateX, translateY);
// 设置以中点为基准点，默认图形左上角为原点坐标
canvas.rotate(rotate, getWidth() / 2, getHeight() / 2);
canvas.scale(scaleX, scaleY, getWidth() / 2, getHeight() / 2);
if (rotateX != 0 || rotateY != 0) {
mCamera.save();
mCamera.rotateX(rotateX);
mCamera.rotateY(rotateY);
mCamera.getMatrix(mMatrix);
// 先将旋转的基准点平移到中点，旋转完后再还原
mMatrix.preTranslate(-getWidth() / 2, -getHeight() / 2);
mMatrix.postTranslate(getWidth() / 2, getHeight() / 2);
mCamera.restore();
// concat()方法合并当前canvas中的Matrix和所设置的Matrix
canvas.concat(mMatrix);
}
super.onDraw(canvas);
}