android canvas bitmap matrix,Canvas API详解(Part 3)Matrix和drawBitmapMash
本节引言:在Canvas的API文档中,我们看到这样一个方法:drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)
这个Matrix可是有大文章的,前面我们在学Paint的API中的ColorFilter中曾讲过ColorMatrix
颜色矩阵,一个4 * 5 的矩阵,我们可以通过修改矩阵值来修改色调,饱和度等!
而今天讲的这个Matrix可以结合其他API来控制图形,组件的变换。比如Canvas就提供了上面的
这个drawBitmap来实现矩阵变换的效果!下面我们来慢慢研究这个东东~
官方API文档:Matrix
1.Matrix中的几个常用的变换方法setTranslate(float dx, float dy):控制Matrix进行平移
setRotate(float degrees, float px, float py):旋转,参数依次是:旋转角度,轴心(x,y)
setScale(float sx, float sy, float px, float py):缩放,
参数依次是:X,Y轴上的缩放比例;缩放的轴心
setSkew(float kx, float ky):倾斜(扭曲),参数依次是:X,Y轴上的缩放比例
其实和Canvas变换的方法基本一致,在为Matrix设置了上面的变换后,调用Canvas的
drawBitmap()方法调用矩阵就好~
2.Matrix使用示例:
运行效果图:
代码实现:
MyView.java:/**
* Created by Jay on 2015/11/11 0011.
*/
public class MyView extends View {
private Bitmap mBitmap;
private Matrix matrix = new Matrix();
private float sx = 0.0f; //设置倾斜度
private int width,height; //位图宽高
private float scale = 1.0f; //缩放比例
private int method = 0;
public MyView(Context context) {
this(context, null);
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
private void init() {
mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.img_meizi);
width = mBitmap.getWidth();
height = mBitmap.getHeight();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
switch (method){
case 0:
matrix.reset();
break;
case 1:
sx += 0.1;
matrix.setSkew(sx,0);
break;
case 2:
sx -= 0.1;
matrix.setSkew(sx,0);
break;
case 3:
if(scale 0.5){
scale -= 0.1;
}
matrix.setScale(scale,scale);
break;
}
//根据原始位图与Matrix创建新图片
Bitmap bitmap = Bitmap.createBitmap(mBitmap,0,0,width,height,matrix,true);
canvas.drawBitmap(bitmap,matrix,null); //绘制新位图
}
public void setMethod(int i){
method = i;
postInvalidate();
}
}
布局代码:activity_main.xml:
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/ly_bar"
android:layout_width="match_parent"
android:layout_height="64dp"
android:layout_alignParentBottom="true">
android:id="@+id/btn_reset"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="重置" />
android:id="@+id/btn_left"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="左倾" />
android:id="@+id/btn_right"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="右倾" />
android:id="@+id/btn_zoomin"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="放大" />
android:id="@+id/btn_zoomout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="缩小" />
android:id="@+id/myView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/ly_bar" />
MainActivity.java:public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private Button btn_reset;
private Button btn_left;
private Button btn_right;
private Button btn_zoomin;
private Button btn_zoomout;
private MyView myView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bindViews();
}
private void bindViews() {
btn_reset = (Button) findViewById(R.id.btn_reset);
btn_left = (Button) findViewById(R.id.btn_left);
btn_right = (Button) findViewById(R.id.btn_right);
btn_zoomin = (Button) findViewById(R.id.btn_zoomin);
btn_zoomout = (Button) findViewById(R.id.btn_zoomout);
myView = (MyView) findViewById(R.id.myView);
btn_reset.setOnClickListener(this);
btn_left.setOnClickListener(this);
btn_right.setOnClickListener(this);
btn_zoomin.setOnClickListener(this);
btn_zoomout.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.btn_reset:
myView.setMethod(0);
break;
case R.id.btn_left:
myView.setMethod(1);
break;
case R.id.btn_right:
myView.setMethod(2);
break;
case R.id.btn_zoomin:
myView.setMethod(3);
break;
case R.id.btn_zoomout:
myView.setMethod(4);
break;
}
}
}
用法非常简单,就不解释了~
3.drawBitmapMash扭曲图像在API文档中还有这样一个方法:drawBitmapMesh(Bitmap bitmap, int meshWidth, int meshHeight, float[] verts,
int vertOffset, int[] colors, int colorOffset, Paint paint)
参数依次是:
bitmap:需要扭曲的原位图
meshWidth/meshHeight:在横/纵向上把原位图划分为多少格
verts:长度为(meshWidth+1)*(meshHeight+2)的数组,他记录了扭曲后的位图各顶点(网格线交点)
位置,虽然他是一个一维数组,但是实际上它记录的数据是形如(x0,y0),(x1,y1)..(xN,Yn)格式的数据,
这些数组元素控制对bitmap位图的扭曲效果
vertOffset:控制verts数组从第几个数组元素开始对bitmap进行扭曲(忽略verOffset之前数据
的扭曲效果)
代码示例:
运行效果图:
代码实现:/**
* Created by Jay on 2015/11/11 0011.
*/
public class MyView extends View {
//将水平和竖直方向上都划分为20格
private final int WIDTH = 20;
private final int HEIGHT = 20;
private final int COUNT = (WIDTH + 1) * (HEIGHT + 1); //记录该图片包含21*21个点
private final float[] verts = new float[COUNT * 2]; //扭曲前21*21个点的坐标
private final float[] orig = new float[COUNT * 2]; //扭曲后21*21个点的坐标
private Bitmap mBitmap;
private float bH,bW;
public MyView(Context context) {
this(context, null);
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
private void init() {
mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.img_wuliao);
bH = mBitmap.getWidth();
bW = mBitmap.getHeight();
int index = 0;
//初始化orig和verts数组。
for (int y = 0; y <= HEIGHT; y++)
{
float fy = bH * y / HEIGHT;
for (int x = 0; x <= WIDTH; x++)
{
float fx = bW * x / WIDTH;
orig[index * 2 + 0] = verts[index * 2 + 0] = fx;
orig[index * 2 + 1] = verts[index * 2 + 1] = fy;
index += 1;
}
}
//设置背景色
setBackgroundColor(Color.WHITE);
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawBitmapMesh(mBitmap, WIDTH, HEIGHT, verts
, 0, null, 0, null);
}
//工具方法,用于根据触摸事件的位置计算verts数组里各元素的值
private void warp(float cx, float cy)
{
for (int i = 0; i = 1)
{
verts[i + 0] = cx;
verts[i + 1] = cy;
}
else
{
//控制各顶点向触摸事件发生点偏移
verts[i + 0] = orig[i + 0] + dx * pull;
verts[i + 1] = orig[i + 1] + dy * pull;
}
}
//通知View组件重绘
invalidate();
}
@Override
public boolean onTouchEvent(MotionEvent event)
{
//调用warp方法根据触摸屏事件的座标点来扭曲verts数组
warp(event.getX(), event.getY());
return true;
}
}
实现流程分析:首先你要弄清楚,这个verts数组存储的是什么?比如
verts[0]和verts1,这两个相邻的元素其实表示的就是我们第一个点的x坐标和y坐标!
知道这一点,你就知道为什么有21 * 21个点,以及为什么数组长度等于这个值 * 2!
初始化部分也就懂了!
接着我们再来看看根据触摸事件计算verts数组元素的值的实现:
获得触摸点的x,y坐标,拿这个值去减对应点的x,y只,计算出触摸点和每个坐标点的距离
然后计算所谓的扭曲度:80000 / ((float) (dd * d));扭曲度 >= 1的,直接让该坐标
点指向这个触摸点,< 1的,则让各个顶点向触摸点发生偏移,然后再调用invalidate()重绘~
大概就这样~多思考思考,如果还是不理解就算了~知道有这东西就好!
4.本节示例下载:
本节小结:本节内容大部分摘自——李刚《Android》疯狂讲义,可能稍微容易理解一点吧~
Matrix应该大部分的童鞋都能看懂,而drawBitmapMash扭曲图像则可能需要一点
时间消化消化,看不懂也没什么哈~嗯,本节就到这里,谢谢
android canvas bitmap matrix,Canvas API详解(Part 3)Matrix和drawBitmapMash相关推荐
- Android基础入门教程——8.3.18 Canvas API详解(Part 3)Matrix和drawBitmapMash
Android基础入门教程--8.3.18 Canvas API详解(Part 3)Matrix和drawBitmapMash 标签(空格分隔): Android基础入门教程 本节引言: 在Canva ...
- Android复习14【高级编程:推荐网址、抠图片上的某一角下来、Bitmap引起的OOM问题、三个绘图工具类详解、画线条、Canvas API详解(平移、旋转、缩放、倾斜)、矩阵详解】
目 录 推荐网址 抠图片上的某一角下来 8.2.2 Bitmap引起的OOM问题 8.3.1 三个绘图工具类详解 画线条 8.3.16 Canvas API详解(Part 1) 1.transla ...
- Canvas 实用API详解
说明 本篇内容可以看做是一篇关于canvas的API文档,由于全文的篇幅较长,通常用于作为API文档查看,可通过目录查找.本篇也可做为想详细了解canvas所有操作的学习文章.Canvas 对象表示一 ...
- html5 canvas基础与动画开发详解-吴华-专题视频课程
html5 canvas基础与动画开发详解-533人已学习 课程介绍 一.本课程几乎包括所有canvas常用的api用法讲解 二.包括以下案例应用: 1.坐标系绘制 2.图片裁剪与填充 ...
- android常用api大全,Android API详解大全.pdf
Android API详解大全 Android -- TextView 一.TextView的API 1.1 结构 java.lang.Object ↳ android.view.View ↳ and ...
- Android使用Bitmap、Canvas制作图片
转载请注明来源:http://blog.csdn.net/kjunchen/article/details/51794037 Android使用Bitmap.Canvas制作图片 先看下效果图: 在开 ...
- Android 4.1-Jelly Bean新特性详解
Android 4.1Jelly Bean新特性详解 发布会已经结束,Android新一代的4.1版本,代号Jelly Bean(果冻豆)的新系统已经正式问世,除了新架构.全新通知栏和搜索功能之外,实 ...
- android标尺自定义view,android尺子的自定义view——RulerView详解
项目中用到自定义尺子的样式: 原效果为 因为跟自己要使用的view稍有不同 所以做了一些修改,修改的注释都放在代码中了,特此记录一下. 首先是一个自定义View: public class RuleV ...
- H5的新特性及API详解(很惊人)
H5的新特性及API详解(很惊人) 2017-01-20 17:00 4057人阅读 评论(0) 收藏 举报 分类: h5(11) js函数(64) js技巧(15) 版权声明:本文为博主原创 ...
最新文章
- 计算机组成原理第3版谢树煜,计算机组成原理(第3版)
- lower_bound和 upper_bound 用法(STL)
- android adapter 按钮隐藏 第一个无效_Android开发规范
- mysql 运行模式_MySQL的运行模式及一些特性,引擎、事务、并发控制、优化总结...
- 妹子每天加班1分钟,半年崩溃!向公司索赔55万!
- Intel超线程技术 Hyper-Threading Technology (7) - 最早的一篇超线程论文介绍
- jQuery-元素节点操作
- 决胜圣诞,女神心情不用猜!
- [C语言数据存储深度解析]-内存数据搞不懂?三千字长文带你走进数据类型及其存储
- Android 编程下 ListView 和 CheckBox 混合使用时的常见问题
- conda恢复默认源_误删文件?试试微软免费数据恢复软件「Windows File Recovery」
- android 文件管理 免root,真正免root的RE文件管理器(Root Explorer)详细使用教程
- git clone提示鉴权失败
- Tomcat解惑 之 CATALINA_HOME与CATALINA_BASE
- 二元二次不定方程(佩尔方程)
- python使用ffmpeg批量将flv转mp4
- 【更新中】SmartGit 注册码 算法注册机
- 月入万元的SEO优化师:分享我几年接私单的经历
- h5 修改title 微信_iH5中级教程:微信必备,为H5设定标题
- 英方股份挂牌“新三板” :布局产业生态 深拓多种业务
热门文章
- Win64 驱动内核编程-1.环境搭建
- C语言经典例18-求累加和
- 【Java 虚拟机原理】垃圾回收算法 ( 可达性分析算法 | GC Root 示例 | GC 回收前的两次标记 | finalize 方法示例 )
- 【Android 安装包优化】Android 中使用 7zr 可执行程序 解压缩文件
- 【Netty】IO 模型简介 ( Netty 特点 | Netty 应用场景 | Java 三种 IO 模型 | BIO 模型 )
- 【Android 应用开发】 自定义组件 宽高适配方法, 手势监听器操作组件, 回调接口维护策略, 绘制方法分析 -- 基于 WheelView 组件分析自定义组件
- Windows 7 部署 Android 开发环境傻瓜式教程(Eclipse+ADT)
- 深入理解SQL Server 2005 中的 COLUMNS_UPDATED函数
- OpenStack配置虚拟机vcpu绑定步骤 转至元数据结尾
- ubuntu权限管理