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 ...
随机推荐
- 在线java反编译服务
大家是否遇到过有java class文件,却没有java源码的苦恼.近期findmaven.net提供了在线java反编译服务http://www.findmaven.net/decompile_cn ...
- jquery的滚动事件
$(selector).scroll(function);当滚动到合适的条件下,就触发某个函数. 现在基本就是前端利用AJAX对数据进行拼接操作,渲染进html的DOM结构中.
- 【Educational Codeforces Round 31 A】Book Reading
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 水模拟 [代码] #include <bits/stdc++.h> using namespace std; const ...
- Virtualizing memory type
A processor, capable of operation in a host machine, including memory management logic to support a ...
- [Angular] FadeIn and FadeOut animation in Angular
To define an Angular Animation, we using DSL type of language. Means we are going to define few anim ...
- 9.7 Binder系统_c++实现_编写程序
参考文件:frameworks\av\include\media\IMediaPlayerService.h (IMediaPlayerService,BnMediaPlayerService)fra ...
- [Angular] Learn How To Use ng-template Inputs
For example, we have a modal component, it can config that using ng-template as a configurable templ ...
- 【u237】分数化小数
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 写一个程序,输入一个形如N/D的分数(N是分子,D是分母),输出它的小数形式.如果小数有循环节的话,把 ...
- 《SPA设计与架构》之MV*框架
原文 简书原文:https://www.jianshu.com/p/39f8f0aefdc2 大纲 1.认识MV*框架 2.传统UI设计模式 3.对框架的本质认识——框架有效性和框架分类 4.MV*基 ...
- jquery-9 京东和酒仙网左侧导航如何实现
jquery-9 京东和酒仙网左侧导航如何实现 一.总结 一句话总结:布局的话多用定位,由底往上一层层的来布. 1.如何实现导航向div的平滑滑动? 右侧div和左侧的li一定要放在一起 127 &l ...