Canvas范围裁切和几何变换
范围裁切
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变换):
- 创建
Matrix
对象; - 调用
Matrix
的pre/postTranslate/Rotate/Scale/Skew()
方法来设置几何变换; - 使用
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)
。
Canvas.setMatrix(matrix)
:用Matrix
直接替换Canvas
当前的变换矩阵,即抛弃Canvas
当前的变换,改用Matrix
的变换(注:根据下面评论里以及我在微信公众号中收到的反馈,不同的系统中setMatrix(matrix)
的行为可能不一致,所以还是尽量用concat(matrix)
吧);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范围裁切和几何变换的更多相关文章
- html5手势操作与多指操作封装与Canvas图片裁切实战
当前情况,移动端的开发占比越来越高,单指的拖拽触碰等操作是常规需要.特殊的多指操作与手势操作还需另做处理,而且还涉及到兼容性问题. // 屏幕上存在两根或两根以上的手指 时触发 仅IOS存在手势事件, ...
- 【朝花夕拾】Android自定义View篇之(二)Canvas常用功能
前言 转在请申明,转自[https://www.cnblogs.com/andy-songwei/p/10960012.html],谢谢! 上一篇讲View的绘制流程中讲到过,最后一步是draw流程, ...
- Canvas中的剪切clip()方法
Canvas中的剪切 接下来我们要聊的不是图像的合成,而是Canvas中的另一个有用的功能:剪切区域.它是Canvas之中由路径所定义的一块区域,浏览器会将所有的绘图操作都限制在本区域内执行.在默认情 ...
- Android 自定义 View 绘制
在 Android 自定义View 里面,介绍了自定义的View的基本概念.同时在 Android 控件架构及View.ViewGroup的测量 里面介绍了 Android 的坐标系 View.Vie ...
- Android自定义View学习笔记(一)
绘制基础 参考:HenCoder Android 开发进阶: 自定义 View 1-1 绘制基础 Paint详解 参考:HenCoder Android 开发进阶: 自定义 View 1-2 Pain ...
- 安卓进阶之自定义View
目录 安卓进阶之自定义View 自定义View的工作流程和内容 工作流程 测量阶段和布局阶段的工作内容 View 和 ViewGroup 在测量阶段和布局阶段的区别 绘制阶段的工作内容 上手:实现继承 ...
- 【转】Android性能优化-过度绘制解决方案
转载请注明出处:http://blog.csdn.net/a740169405/article/details/53896497 过度绘制: 屏幕上某一像素点在一帧中被重复绘制多次,就是过度绘制. 下 ...
- HTML5 CANVAS 实现图片压缩和裁切
原文地址:http://leonshi.com/2015/10/31/html5-canvas-image-compress-crop/?utm_source=tuicool&utm_medi ...
- canvas图形的组合与裁切
当两个或两个以上的图形存在重叠区域时,默认情况下一个图形画在前一个图像之上.通过指定图像globalCompositeOperation属性的值可以改变图形的绘制顺序或绘制方式,globalAlpha ...
随机推荐
- JSP中的EL表达式详细介绍
一.JSP EL语言定义 EL 提供了在 JSP 脚本编制元素范围外使用运行时表达式的功能.脚本编制元素是指页面中能够用于在 JSP 文件中嵌入 Java 代码的元素.它们通常用于对象操作以及执行那些 ...
- UVA 11796 - Dog Distance 向量的应用
http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...
- 洛谷——P2241 统计方形(数据加强版)
https://www.luogu.org/problem/show?pid=2241 题目背景 1997年普及组第一题 题目描述 有一个n*m方格的棋盘,求其方格包含多少正方形.长方形 输入输出格式 ...
- js进阶 12-14 jquery的事件触发函数是哪两个
js进阶 12-14 jquery的事件触发函数是哪两个 一.总结 一句话总结:trigger和triggerHandler 1.trigger传额外参数时候的注意事项是什么? 注意样例中是三个参数 ...
- WebApi自定义返回类型和命名空间实现
1.自定义ContentNegotiator /// <summary> /// 返回json的ContentNegotiator /// </summary> public ...
- 每日技术总结:setInterval,setTimeout,文本溢出,小程序,wepy
前言: 项目背景:vue,电商,商品详情页 1.倒计时,倒计到0秒时停止 data () { return { n: 10 } }, created () { let int = setInterva ...
- UI组件之AdapterView及其子类关系,Adapter接口及事实上现类关系
AdapterView本身是一个抽象基类,它派生的的子类在使用方法上十分类似.AdapterView直接派生的三个子类:AbsListView.AbsSpinner,AdapterViewAnimat ...
- 算法 Tricks(四)—— 判断序列中的字符/数值是否交替出现
比如:353, 54545,数字都是交替出现的: bool alternate = true; for (int i = 0; i < M.size(); ++i){ if (M[i] != M ...
- 29、从零写USB摄像头驱动之通过urb接受数据后上报数据是函数中fid的作用
原因分析如下: 视频数据是由一帧一帧数据组成,为了防止数据错乱,会给每一帧数据分配一个frameid,从第0帧开始,接着是第1帧,接着又是第0帧这样交错进行的,对usb摄像头来说每一帧数据来源于多个包 ...
- [SCSS] Write Custom Functions with the SCSS @function Directive
Writing SCSS @functions is similar to writing functions in other programming languages; they can acc ...