本文计划根据HenCoder系列文章进行学习，所以代码风格及博文素材可能会摘自其中。

1 范围裁切

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

1.1 clipRect()

使用很简单，直接应用：

canvas.clipRect(100,100,400,400);

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.snoopy);

canvas.drawBitmap(bitmap,100,100,paint);

原图 对比 裁切

记得要加上 Canvas.save() 和 Canvas.restore() 来及时恢复绘制范围。

1.2 clipPath()

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

canvas.save();

path.addCircle(500,500,400, Path.Direction.CCW);

canvas.clipPath(path);

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.snoopy);

canvas.drawBitmap(bitmap,100,100,paint);

canvas.restore();

image.png

2. 几何变换

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

使用 Canvas 来做常见的二维变换；

使用 Matrix 来做常见和不常见的二维变换；

使用 Camera 来做三维变换。

2.1 使用 Canvas 来做常见的二维变换：

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

参数里的 dx 和 dy 表示横向和纵向的位移。

canvas.save();

canvas.translate(300,100);

canvas.drawBitmap(bitmap,100,100,paint);

canvas.restore();

image.png

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

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

canvas.save();

canvas.rotate(200);

canvas.drawBitmap(bitmap,100,100,paint);

canvas.restore();

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

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

canvas.save();

canvas.scale(1.5f,0.8f,100,100);

canvas.drawBitmap(bitmap,100,100,paint);

canvas.restore();

2.1.4 skew(float sx, float sy) 错切

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

canvas.save();

canvas.skew(0.3f,0.3f);

canvas.drawBitmap(bitmap,100,100,paint);

canvas.restore();

2.2 使用 Matrix 来做变换

2.2.1 使用 Matrix 来做常见变换

Matrix 做常见变换的方式：

创建 Matrix 对象；

调用 Matrix 的 pre/postTranslate/Rotate/Scale/Skew() 方法来设置几何变换；

使用 Canvas.setMatrix(matrix) 或 Canvas.concat(matrix) 来把几何变换应用到 Canvas。

平移

matrix.reset();

matrix.postTranslate(300,300);

canvas.save();

canvas.concat(matrix);

canvas.drawBitmap(bitmap,100,100,paint);

canvas.restore();

.png

其他效果就不一一展示，和Canvas方法一样。

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

Canvas.setMatrix(matrix)：用 Matrix 直接替换 Canvas 当前的变换矩阵，即抛弃 Canvas 当前的变换，改用 Matrix 的变换(注：根据下面评论里以及我在微信公众号中收到的反馈，不同的系统中 setMatrix(matrix) 的行为可能不一致，所以还是尽量用 concat(matrix) 吧)；

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

2.2.2 使用 Matrix 来做自定义变换

Matrix 的自定义变换使用的是 setPolyToPoly() 方法。

2.2.2.1 Matrix.setPolyToPoly(float[] src, int srcIndex, float[] dst, int dstIndex, int pointCount) 用点对点映射的方式设置变换

private float[] pointSrc = {20,50,200,400, 80,90,300,50};

private float[] pointsDst = {10, 70, 320, 310, 200, 100, 310, 200};

matrix.reset();

matrix.setPolyToPoly(pointSrc , 0,pointsDst,0,3);

canvas.save();

canvas.concat(matrix);

canvas.drawBitmap(bitmap,100,100,paint);

canvas.restore();

image.png

参数里，src 和 dst 是源点集合目标点集；srcIndex 和 dstIndex 是第一个点的偏移；pointCount 是采集的点的个数(个数不能大于 4，因为大于 4 个点就无法计算变换了)。

2.3 使用 Camera 来做三维变换

Camera 的三维变换有三类：旋转、平移、移动相机。

2.3.1 Camera.rotate*() 三维旋转

Camera.rotate*() 一共有四个方法： rotateX(deg) rotateY(deg) rotateZ(deg) rotate(x, y, z)。这四个方法的区别不用我说了吧？

canvas.save();

camera.save();

camera.rotate(0,0,20);

camera.applyToCanvas(canvas);

camera.restore();

canvas.drawBitmap(bitmap,100,100,paint);

canvas.restore();

image.png

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

canvas.save();

canvas.translate(100,100);

camera.save();

camera.rotate(-20,0,20);

camera.applyToCanvas(canvas);

camera.restore();

canvas.translate(-100,-100);

canvas.drawBitmap(bitmap,100,100,paint);

canvas.restore();

Canvas 的几何变换顺序是反的，所以要把移动到中心的代码写在下面，把从中心移动回来的代码写在上面。

2.3.2 Camera.translate(float x, float y, float z) 移动

它的使用方式和 Camera.rotate*() 相同，而且我在项目中没有用过它，所以就不贴代码和效果图了。

2.3.3 Camera.setLocation(x, y, z) 设置虚拟相机的位置

注意！这个方法有点奇葩，它的参数的单位不是像素，而是 inch，英寸。

image

我 TM 的真没逗你，我也没有胡说八道，它的单位就。是。英。寸。

这种设计源自 Android 底层的图像引擎 Skia 。在 Skia 中，Camera 的位置单位是英寸，英寸和像素的换算单位在 Skia 中被写死为了 72 像素，而 Android 中把这个换算单位照搬了过来。是的，它。写。死。了。

image

吐槽到此为止，俗话说看透不说透，还是好朋友。

在 Camera 中，相机的默认位置是 (0, 0, -8)(英寸)。8 x 72 = 576，所以它的默认位置是 (0, 0, -576)(像素)。

如果绘制的内容过大，当它翻转起来的时候，就有可能出现图像投影过大的「糊脸」效果。而且由于换算单位被写死成了 72 像素，而不是和设备 dpi 相关的，所以在像素越大的手机上，这种「糊脸」效果会越明显。

image

而使用 setLocation() 方法来把相机往后移动，就可以修复这种问题。

camera.setLocation(0, 0, newZ);

image

Camera.setLocation(x, y, z) 的 x 和 y 参数一般不会改变，直接填 0 就好。

好了，上面这些就是本期的内容：范围裁切和几何变换。