自定义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 就好。

你可能感兴趣的:(自定义View基础(二))