我的自定义View学习笔记(四)—— 绘制Canvas 对绘制的辅助——范围裁切和几何变换

  • 这个一个系列,本系列讲的都是本人自定义 View 的学习笔记。目的是加深影响,便于在以后工作中遇到相关问题的时候,能够有个印象知道到哪里去寻找答案。
  • 这是我学习扔物线大神的自定义 View 教程,自己记录的笔记。链接在这里HenCoder,强烈推荐大家去原地址学习,毕竟我写的笔记只是针对我个人的口味而言的,用词和对概念的理解不一定有扔物线大神准确。
  • 我再发一次地址:https://hencoder.com

1、裁剪范围

1.1 clipRect(left, top, right, bottom)

  • 对画布进行剪裁,只有被参数圈定范围的画布才能显示出来
  • 需要配合 save()、restore() 使用,恢复之前的 Canvas 范围
canvas.save();  
canvas.clipRect(left, top, right, bottom);  
canvas.drawBitmap(bitmap, x, y, paint);  
canvas.restore();  

1.2 clipPath(path);

  • 对画布进行裁剪,裁剪出的是 Path 指定的路径
  • 同 clipRect()
canvas.save();  
canvas.clipPath(path1);  
canvas.drawBitmap(bitmap, point1.x, point1.y, paint);  
canvas.restore();

2、几何变换

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

2.1.1 Canvas.translate(float dx, float dy) 平移
  • dx、dy 表示画布在水平和竖直方向上的位移
canvas.save();  
canvas.translate(200, 0);  
canvas.drawBitmap(bitmap, x, y, paint);  
canvas.restore();  
2.1.2 Canvas.rotate(float degrees, float px, float py) 旋转
  • 对画布进行旋转操作
  • degrees 为旋转的角度,px、py 则是旋转的轴心位置
canvas.save();  
canvas.rotate(45, centerX, centerY);  
canvas.drawBitmap(bitmap, x, y, paint);  
canvas.restore();  
2.1.3 Canvas.scale(float sx, float sy, float px, float py) 放缩
  • 对画布进行缩放
  • sx、sy X 轴 Y 轴方向上缩放的倍数。
  • px、py 缩放的轴心
canvas.save();  
canvas.scale(1.3f, 1.3f, x + bitmapWidth / 2, y + bitmapHeight / 2);  
canvas.drawBitmap(bitmap, x, y, paint);  
canvas.restore();  
2.1.4 skew(float sx, float sy) 斜率
  • sx 和 sy 是 x 方向和 y 方向的斜率系数。
canvas.save();  
canvas.skew(0, 0.5f);  
canvas.drawBitmap(bitmap, x, y, paint);  
canvas.restore();  

2.2 使用 Matrix 来做变换

2.2.1 使用 Matrix 来做常见变换
  • 创建 Matrix 对象
  • 调用 Matrix 的 pre/postTranslate/Rotate/Scale/Skew() 方法来设置几何变换
  • 使用 Canvas.setMatrix(matrix) 或 Canvas.concat(matrix) 来把几何变换应用到 Canvas
    • 用 Matrix 直接替换 Canvas 当前的变换矩阵,即抛弃 Canvas 当前的变换,改用 Matrix 的变换
    • 用 Canvas 当前的变换矩阵和 Matrix 相乘,即基于 Canvas 当前的变换,叠加上 Matrix 中的变换。
2.2.2 使用 Matrix 来做自定义变换
  • Matrix.setPolyToPoly(float[] src, int srcIndex, float[] dst, int dstIndex, int pointCount) 用点对点映射的方式设置变换
    • 就是对指定的四个顶点(无论什么图形都是有最左、右、上、下四个极限位置的组成的点限制的)进行转换。单点映射可以实现平移。而多点的映射,就可以让绘制内容任意地扭曲。
Matrix matrix = new Matrix();  
float pointsSrc = {left, top, right, top, left, bottom, right, bottom};  
float pointsDst = {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, x, y, paint);  
canvas.restore();  
  • src 和 dst 是源点集合目标点集
  • srcIndex 和 dstIndex 是第一个点的偏移
  • pointCount 是采集的点的个数(个数不能大于 4,因为大于 4 个点就无法计算变换了)

2.3 使用 Camera 来做三维变换

  • 写例子的时候遇到问题了,不想搞了!!等用到的时候再说吧

你可能感兴趣的:(自定义,View)