范围裁切

clipRect()

canvas.save();
canvas.clipRect(left, top, right, bottom);
canvas.drawBitmap(bitmap, x, y, paint);
canvas.restore();

clipPath()

和clipRect一样,不过是把坐标换成了path,可以实现更多形状裁切

canvas.save();
canvas.clipPath(path1);
canvas.drawBitmap(bitmap, point1.x, point1.y, paint);
canvas.restore();

几何变换

几何变换大概包括三类

1.使用 Canvas 来做常见的二维变换;

2.使用 Matrix 来做常见和不常见的二维变换;

3.使用 Camera 来做三维变换

Canvas变换

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

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

canvas.save();
canvas.translate(200, 0);
canvas.drawBitmap(bitmap, x, y, paint);
canvas.restore();

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

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

canvas.save();
canvas.rotate(45, centerX, centerY);
canvas.drawBitmap(bitmap, x, y, paint);
canvas.restore();

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

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

canvas.save();
canvas.scale(1.3f, 1.3f, x + bitmapWidth / 2, y + bitmapHeight / 2);
canvas.drawBitmap(bitmap, x, y, paint);
canvas.restore();

skew(float sx, float sy) 错切

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

canvas.save();
canvas.skew(0, 0.5f);
canvas.drawBitmap(bitmap, x, y, paint);
canvas.restore();

Matrix 变换

 Matrix 做常见变换(效果等同于Canvas变换):

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

...

matrix.reset();
matrix.postTranslate();
matrix.postRotate(); canvas.save();
canvas.concat(matrix);
canvas.drawBitmap(bitmap, x, y, paint);
canvas.restore();

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

  1. Canvas.setMatrix(matrix):用 Matrix 直接替换 Canvas 当前的变换矩阵,即抛弃 Canvas 当前的变换,改用 Matrix 的变换(注:根据下面评论里以及我在微信公众号中收到的反馈,不同的系统中 setMatrix(matrix) 的行为可能不一致,所以还是尽量用 concat(matrix) 吧);
  2. Canvas.concat(matrix):用 Canvas 当前的变换矩阵和 Matrix 相乘,即基于 Canvas 当前的变换,叠加上 Matrix 中的变换。

 

 Matrix 做自定义变换

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

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

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

Camera三维变换

Camera.rotate*() 三维旋转

canvas.save();

camera.save(); // 保存 Camera 的状态
camera.rotateX(30); // 旋转 Camera 的三维空间
camera.applyToCanvas(canvas); // 把旋转投影到 Canvas
camera.restore(); // 恢复 Camera 的状态 canvas.drawBitmap(bitmap, point1.x, point1.y, paint);
canvas.restore();

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

使用方法以及效果和rotate一样

Canvas范围裁切和几何变换的更多相关文章

  1. html5手势操作与多指操作封装与Canvas图片裁切实战

    当前情况,移动端的开发占比越来越高,单指的拖拽触碰等操作是常规需要.特殊的多指操作与手势操作还需另做处理,而且还涉及到兼容性问题. // 屏幕上存在两根或两根以上的手指 时触发 仅IOS存在手势事件, ...

  2. 【朝花夕拾】Android自定义View篇之(二)Canvas常用功能

    前言 转在请申明,转自[https://www.cnblogs.com/andy-songwei/p/10960012.html],谢谢! 上一篇讲View的绘制流程中讲到过,最后一步是draw流程, ...

  3. Canvas中的剪切clip()方法

    Canvas中的剪切 接下来我们要聊的不是图像的合成,而是Canvas中的另一个有用的功能:剪切区域.它是Canvas之中由路径所定义的一块区域,浏览器会将所有的绘图操作都限制在本区域内执行.在默认情 ...

  4. Android 自定义 View 绘制

    在 Android 自定义View 里面,介绍了自定义的View的基本概念.同时在 Android 控件架构及View.ViewGroup的测量 里面介绍了 Android 的坐标系 View.Vie ...

  5. Android自定义View学习笔记(一)

    绘制基础 参考:HenCoder Android 开发进阶: 自定义 View 1-1 绘制基础 Paint详解 参考:HenCoder Android 开发进阶: 自定义 View 1-2 Pain ...

  6. 安卓进阶之自定义View

    目录 安卓进阶之自定义View 自定义View的工作流程和内容 工作流程 测量阶段和布局阶段的工作内容 View 和 ViewGroup 在测量阶段和布局阶段的区别 绘制阶段的工作内容 上手:实现继承 ...

  7. 【转】Android性能优化-过度绘制解决方案

    转载请注明出处:http://blog.csdn.net/a740169405/article/details/53896497 过度绘制: 屏幕上某一像素点在一帧中被重复绘制多次,就是过度绘制. 下 ...

  8. HTML5 CANVAS 实现图片压缩和裁切

    原文地址:http://leonshi.com/2015/10/31/html5-canvas-image-compress-crop/?utm_source=tuicool&utm_medi ...

  9. canvas图形的组合与裁切

    当两个或两个以上的图形存在重叠区域时,默认情况下一个图形画在前一个图像之上.通过指定图像globalCompositeOperation属性的值可以改变图形的绘制顺序或绘制方式,globalAlpha ...

随机推荐

  1. 洛谷 P1178 到天宫做客

    P1178 到天宫做客 题目描述 有一天,我做了个梦,梦见我很荣幸的接到了猪八戒的邀请,到天宫陪他吃酒.我犹豫了.天上一日,人间一年啊!当然,我是个闲人,一年之中也没有多少时日是必须在人间的,因此,我 ...

  2. Project Euler 363 Bézier Curves(几何+二分)

    题目链接: https://projecteuler.net/problem=363 题目: A cubic Bézier curve is defined by four points: \(P_0 ...

  3. Android 网络图片Url 转 Bitmap

    注意:该方法必须要在子线程中调用,因为涉及网络请求 public Bitmap getBitmap(String url) { Bitmap bm = null; try { URL iconUrl ...

  4. asp.net mvc 中的自定义验证(Custom Validation Attribute)

    前言

  5. 逻辑与和逻辑或:&& 、||

    逻辑或:首先看左边是真还是假(除了那5个都是真),如果为真,返回左边值,如果为假,返回右边的值 逻辑与:和逻辑或相同,先看左边的值是真是假,如果左边为真返回右边的值,左边为假返回左边的值 在两者同时出 ...

  6. 学习笔记:mpvue开发小程序——入门

    接下来可能要开发一个小程序,同事推荐使用mpvue,那么我提前熟悉下. 官网地址:http://mpvue.com/ 1.快速上手 http://mpvue.com/mpvue/quickstart/ ...

  7. 【Codeforces Round #431 (Div. 1) B】

    [链接]h在这里写链接 [题意] 场上有 n 个点,它们分别向上与向右在不同时刻开始运动,相遇则改变移动方向,求最终这些点到达的坐标. [题解] 先把每个点的坐标都往它本该移动的方向相反的方向退ti个 ...

  8. MongoDbHelper 帮助类(下)

    对MongoDbHelper帮助类进行了一下整合,但是代码中一个方法需要将string类型转化为BsonValue类型一直出错.所以欢迎留言指正 using System; using System. ...

  9. jQuery笔记---选择器(二)

    1.选择器练习: 1)查找UL中的元素的内容 格式:$(“ul li:XX”).text() XX:代表方法 比如:获取到第一元素,然后获取当中的值 $(“ul li:first”).text() 获 ...

  10. 关于Altium Designer重新修改某一原件pcb封装的问题

    在重新导入的时候可能会影响到类class,所以可能是原理图中没有类吧 上图中的comment的修改是表示下面图片中的 comment栏的改变: