自定义View基础（二）

Canvas 对绘制的辅助

Canvas 对绘制的辅助——范围裁切和几何变换

1 范围裁切

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

1.1 clipRect()

canvas.save()
canvas.translate(mDefaultWidth / 2f, mDefaultHeight / 2f)
val rectF = RectF(-100f, -100f, 200f, 100f)
canvas.clipRect(rectF)
canvas.drawBitmap(bitmap, -mDefaultWidth / 2f, -mDefaultHeight / 2f, mPaint)
canvas.restore()

1.2 clipPath()

canvas.save()
canvas.translate(mDefaultWidth / 2f, mDefaultHeight / 2f)
val path = Path()
path.addCircle(0f, 0f, 100f, Path.Direction.CW)
canvas.clipPath(path)
canvas.drawBitmap(bitmap, -mDefaultWidth / 2f, -mDefaultHeight / 2f, mPaint)

canvas.restore()

2 几何变换

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

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

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

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

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

canvas.save()
canvas.translate(200, 0)
canvas.restore()`

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

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

canvas.save()
canvas.rotate(100, centerX, centerY)
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, 1.5f, dx + mWidth / 2, dy + mHeight / 2)
canvas.restore()

2.1.4 skew(float sx, float sy) 错切:

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

canvas.save()
canvas.skew(0.5, 0.6f)
canvas.restore()

2.2 使用 Matrix 来做变换

Matrix 做常见变换的方式：

创建 Matrix 对象:

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

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

  val matrix = Matrix()
  matrix.reset()
  matrix.postTranslate(dx,dy)
  matrix.postRotate(degress)
  canvas.save()
  canvas.concat(matrix)
  canvas.drawBitmap(bitmap, x, y, paint)
  canvas.restore()
  

把 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)

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

用点对点映射的方式设置变换.

setPolyToPoly() 的作用是通过多点的映射的方式来直接设置变换。多点映射就是把指定的点移动到给出的位置，从而发生形变。例如：(0, 0) -> (500, 500) 表示把 (0, 0) 位置的像素移动到 (500, 500) 的位置，这个是单点的映射，单点映射可以实现平移。而多点的映射，就可以让绘制内容任意地扭曲。

val matrix = Matrix()
val pointsSrc = arrayOf(left, top, right, top, left, bottom, right, bottom)//对应四个点
val pointsDst = arrayOf(left - 10, top + 50, right + 120, top - 90, left + 20, bottom + 30, right + 20, bottom + 60)
matrix.reset()
matrix.setPolyToPoly(pointsSrc, 0, pointsDst, 0, 4);
canvas.save()
canvas.concat(matrix)
canvas.drawBitmap(bitmap, dx, dy, paint)
canvas.restore()

2.3 使用 Camera 来做三维变换

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

2.3.1 Camera.rotate*() 三维旋转:

Camera.rotate*() 一共有四个方法： rotateX(deg) rotateY(deg) rotateZ(deg) rotate(x, y, z),注：Camera 和 Canvas 一样也需要保存和恢复状态才能正常绘制，不然在界面刷新之后绘制就会出现问题.

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

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

setLocation() 方法来把相机往后移动，就可以修复这种问题。
camera.setLocation(0, 0, newZ);Camera.setLocation(x, y, z) 的 x 和 y 参数一般不会改变，直接填 0 就好。