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

最新推荐文章于 2021-11-28 13:43:07 发布

原创最新推荐文章于 2021-11-28 13:43:07 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #绘图 #Camera #Matrix #图形变换

Android 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了Android中的图形变换方法，包括平移、旋转、缩放和错切等操作，并展示了如何使用Canvas、Matrix和Camera三种方式进行图形变换。还提供了一些实际应用的例子。

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