Canvas 绘制辅助

发表于 | 分类于 ， | 阅读次数

参考：https://hencoder.com/ui-1-4/
练习github地址：https://github.com/fandazeng/ViewDemo

Canvas 范围裁切

范围裁切有两个方法： clipRect() 和 clipPath()。裁切方法之后的绘制代码，都会被限制在裁切范围内

clipRect()

剪切一定的矩形区域，绘制的内容只会显示在该区域内。

//保存状态
canvas.save();

canvas.clipRect(550, 450, 800, 1000);
canvas.drawBitmap(mBitmap,500,400,mPaint);

//恢复绘制范围
canvas.restore();

clipPath()

其实和 clipRect() 用法完全一样，只是把参数换成了 Path ，所以能裁切的形状更多一些。

//设置填充的类型
mPath2.setFillType(Path.FillType.INVERSE_WINDING);
mPath2.addCircle(800, 500, 200, Path.Direction.CW);

//保存状态
canvas.save();
canvas.clipPath(mPath2);
canvas.drawBitmap(mBitmap, 800, 200, mPaint);

//恢复绘制范围
canvas.restore();

Canvas 几何变换

几何变换的使用大概分为三类：

  • 使用 Canvas 来做常见的二维变换；
  • 使用 Matrix 来做常见和不常见的二维变换；
  • 使用 Camera 来做三维变换。

Canvas 二维变换

1.Canvas.translate(float dx, float dy) 平移

参数里的 dx 和 dy 表示横向和纵向的位移，位移是基于当前位置移动，而不是每次基于屏幕左上角的(0,0)点移动。

//保存状态
canvas.save();

canvas.translate(450,200);
canvas.drawBitmap(mBitmap,400,300,mPaint);

//恢复绘制范围
canvas.restore();

2.Canvas.rotate(float degrees, float px, float py) 旋转

参数里的 degrees 是旋转角度，单位是度（也就是一周有 360° 的那个单位），方向是顺时针为正向； px 和 py 是轴心的位置。

//保存状态
canvas.save();

//代码顺序要跟绘制顺序相反，实际效果是先平移后旋转的
canvas.rotate(45f, 800 + mBitmap.getWidth() / 2, 300 + mBitmap.getHeight() / 2);
canvas.translate(500, 0);
canvas.drawBitmap(mBitmap, 400, 300, mPaint);

//恢复绘制范围
canvas.restore();

3.Canvas.scale(float sx, float sy, float px, float py) 缩放

参数里的 sx sy 是横向和纵向的放缩倍数； px py 是缩放的轴心。缩放的源码如下：

public final void scale(float sx, float sy, float px, float py) {
    translate(px, py);
    scale(sx, sy);
    translate(-px, -py);
}

实现方式为：先平移到缩放中心点，缩放完成后再平移回去，默认缩放轴心是原点。

//保存状态
canvas.save();

//代码顺序要跟绘制顺序相反，实际效果是先平移后缩放的
//canvas.scale(1.3f,1.3f,900 + mBitmap.getWidth() / 2, 300 + mBitmap.getHeight() / 2);
canvas.scale(1.3f,1.3f,900 , 300);
canvas.translate(500, 0);
canvas.drawBitmap(mBitmap, 400, 300, mPaint);

//恢复绘制范围
canvas.restore();

4.skew(float sx, float sy) 错切

参数里的 sx 和 sy 是 x 方向和 y 方向的错切系数。

//保存状态
canvas.save();
canvas.skew(0.5f,0f);
canvas.drawBitmap(mBitmap, 100, 300, mPaint);

//恢复绘制范围
canvas.restore();

使用 Matrix 来做常见变换

步骤：

  1. 创建 Matrix 对象
  2. 调用 Matrix 的 pre/postTranslate/Rotate/Scale/Skew() 方法来设置几何变换
  3. 使用 Canvas.setMatrix(matrix) 或 Canvas.concat(matrix) 来把几何变换应用到 Canvas

把 Matrix 应用到 Canvas 有两个方法： Canvas.setMatrix(matrix) 和 Canvas.concat(matrix)。

  1. Canvas.setMatrix(matrix)：用 Matrix 直接替换 Canvas 当前的变换矩阵，即抛弃 Canvas 当前的变换，改用 Matrix 的变换。

  2. Canvas.concat(matrix)：用 Canvas 当前的变换矩阵和 Matrix 相乘，即基于 Canvas 当前的变换，叠加上 Matrix 中的变换。

示例代码：

Matrix matrix = new Matrix();
matrix.postTranslate(450, 200);
matrix.postSkew(0.5f, 0f);    
matrix.preTranslate(500, 0);
matrix.postScale(1.2f, 1.2f, 800 + mBitmap.getWidth() / 2, 300 + mBitmap.getHeight() / 2);
matrix.postRotate(45f, 800 + mBitmap.getWidth() / 2, 300 + mBitmap.getHeight() / 2);

//保存状态
canvas.save();
canvas.concat(matrix);
canvas.drawBitmap(mBitmap, 400, 300, mPaint);

//恢复绘制范围
canvas.restore();

pre开头的方法是先调用，post开头的方法是后调用的。

使用 Camera 来做三维变换

Camera 的三维变换有三类：旋转、平移、移动相机。它的模型如下：

Camera.rotate*() 三维旋转

Camera.rotate*() 一共有四个方法： rotateX(deg) rotateY(deg) rotateZ(deg) rotate(x, y, z)

//保存状态
canvas.save();

mCamera.save();
mCamera.rotate(30,0,0);
mCamera.applyToCanvas(canvas);
mCamera.restore();

canvas.drawBitmap(mBitmap,300,100,mPaint);
//恢复绘制范围
canvas.restore();

如果你需要图形左右对称，需要配合上 Canvas.translate()，在三维旋转之前把绘制内容的中心点移动到原点，即旋转的轴心，然后在三维旋转后再把投影移动回来：

//保存状态
canvas.save();

//canvas的变换操作要反着写，理解的时候反序理解就行了

mCamera.save(); //保存 Camera 的状态
mCamera.rotateX(20);    //沿X轴旋转 Camera的三维空间
canvas.translate(300 + mBitmap.getWidth() / 2, 100 + mBitmap.getHeight()/2);  //旋转之后把投影移动回来
mCamera.applyToCanvas(canvas);  //把旋转投影投影到Canvas
canvas.translate(-300 - mBitmap.getWidth() / 2, -100 - mBitmap.getHeight()/2); //旋转之前把绘制内容移动到轴心（原点）
mCamera.restore(); //恢复 Camera 状态
canvas.drawBitmap(mBitmap, 300, 100, mPaint);
//恢复绘制范围
canvas.restore();