Android自定义View【实战教程】6⃣️---深入理解 Android 中的 Matrix

#矩阵基础知识
兄弟们，重新拿起手中的线性代数课本，重拾一下矩阵吧。
记住一条原则：小事问老婆，大事问Google！！！
矩阵的基础知识

###基本概念
矩阵（Matrix）是一个按照长方阵列排列的复数或实数集合，最早来自于方程组的系数及常数所构成的方阵。这一概念由19世纪英国数学家凯利首先提出。
矩阵是高等代数学中的常见工具，也常见于统计分析等应用数学学科中。

###基本运算
加

减

乘

转置

#矩阵（Matrix）和图形变换的关系

##什么是平面？
还记得上学时课本中讲到，平面上的元素，就是点，线，面，而线就是由一个个点组成的，而是由一条条线组成的，所以归根结底，平面上所有的图形都是由点组成的。
所以在平面中，***点***是一对x，y值组成的，p = {x, y}。***线段***是由两点之间的直线组成，e = {p1, p2}。***图形***是由众多的点和点之间的的线段组成的。所以，其实平面上的图形变换，就是点坐标位置的变换。

##二维平面常用的基本的图形变化：

1、Translate （平移）
2、Scale （缩放）
3、Rotate（旋转）
4、Skew（错切）

###Translate （平移）

我们现在要平移绿线到蓝线的位置：
假设绿线初始位置：（0，0）—> (100.100)
那么向右200，向下100到达蓝线位置，则蓝线坐标为（200，100）—> (300,200)。

如图：

这样的一个变换translation也可以用一对值来表示，***t = {tx, ty}***，其中tx是在x坐标上的偏移量，而ty是在y坐标上的偏移量。
移动点 p 到 p’，我们只要加上这个偏移就行，如果用矩阵或者向量来表示就是：

###Scale （缩放）
我们现在要缩放绿线到蓝线的位置：
假设绿线初始位置：（0，100）—> (100.0)
那么放大两倍到达蓝线位置，则蓝线坐标为（0，200）—> (200,000)。

如图：

缩放的变换是由下面的矩阵来表示的：

那么缩放后的直线的点就是：

###Rotate（旋转）
如图；这条直线顺时针旋转了45度，也就是往逆时针方向旋转了 - 45 度，

旋转的矩阵表示是：

同样的，旋转后的点就是根据下面的矩阵相乘而得出来的结果：

###Skew（错切）

用矩阵表示：

了解了上面矩阵和图型变换的关系之后，我们来步入正题，看一看安卓中的矩阵和图形变换的关系。

#安卓中矩阵和图形变换的关系
其实在安卓中矩阵和图形变换的关系和上面讲到的是一样的，只不过设计者比较聪明，采用了齐次坐标。
那么你肯定会问：

什么是齐次坐标系？
齐次坐标就是将一个原本是n维的向量用一个n+1维向量来表示。

有什么优点？
n维的向量用一个n+1维向量来表示

为什么要用齐次坐标系呢 ?
许多图形应用涉及到几何变换，主要包括平移、旋转、缩放。以矩阵表达式来计算这些变换时，平移是矩阵相加，旋转和缩放则是矩阵相乘，综合起来可以表示为p’ = m1p+ m2（注：因为习惯的原因，实际使用时一般使用变化矩阵左乘向量）(m1旋转缩放矩阵， m2为平移矩阵， p为原向量，p’为变换后的向量)。引入齐次坐标的目的主要是合并矩阵运算中的乘法和加法，表示为p’ = pM的形式。即它提供了用矩阵运算把二维、三维甚至高维空间中的一个点集从一个坐标系变换到另一个坐标系的有效方法。

所以在安卓中，用Matrix进行过图像处理，是一个3 x 3的矩阵，如图：

接下来看一下四种变换的具体情形：

###Translate （平移）
假定有一个点的坐标是，将其移动到，再假定在x轴和y轴方向移动的大小分别为：

不难知道：

如果用矩阵来表示的话，就可以写成：

###Scale （缩放）
如果图像在x轴和y轴方向分别放大k1和k2倍的话，那么图像中的所有点的x坐标和y坐标均会分别放大k1和k2倍：

用矩阵表示就是：

###Rotate（旋转）
假定有一个点，相对坐标原点顺时针旋转后的情形，同时假定P点离坐标原点的距离为r：

如果用矩阵，就可以表示为：

###Skew（错切）
假定一个点经过错切变换后得到，对于水平错切而言，应该有如下关系：

用矩阵表示就是：

同理，对于垂直错切，可以有：

在数学上严格的错切变换就是上面这样的。在Android中除了有上面说到的情况外，还可以同时进行水平、垂直错切，那么形式上就是：

到这里我们对安卓中Matrix和图形变换关系就应该有了一定的了解了。

#理论与实践相结合
###Translate （平移）
如图：将图片从原点水平移动100，垂直移动100.

//原始图片        canvas.drawBitmap(bitmap,matrix,mPaint);//一、 Translate （平移）
matrix.postTranslate(100,100);

按照前面讲过的公式进行计算：
我们计算右下角图标，其它点坐标同理：

###Scale （缩放）
图像在x轴和y轴方向分别放大0.5倍，如图：

//原始图片        canvas.drawBitmap(bitmap,matrix,mPaint);//二、 Scale （缩放）
matrix.postScale(0.5f,0.5f);

按照前面讲过的公式进行计算：
我们计算右下角图标，其它点坐标同理：

###Rotate（旋转）
假定顺着原点顺时针旋转75度，如图：

//原始图片        canvas.drawBitmap(bitmap,matrix,mPaint);//三、 Rotate（旋转）
matrix.postRotate(75);

按照上面讲的公式计算：
我们计算右下角图标，其它点坐标同理：

###Skew（错切）

水平错切-1 ，效果如图：

//原始图片        canvas.drawBitmap(bitmap,matrix,mPaint);//四、 Skew（错切）
matrix.setSkew(-1,0);

按照上面讲的公式计算：
我们计算右下角图标，其它点坐标同理：

扫码关注公众号“伟大程序猿的诞生“，更多干货新鲜文章等着你～

公众号回复“资料获取”，获取更多干货哦～

有问题添加本人微信号“fenghuokeji996” 或扫描博客导航栏本人二维码

Android自定义View【实战教程】6⃣️---深入理解 Android 中的 Matrix相关推荐

Android 系统（201）---Android 自定义View实战系列：时间轴
Android 自定义View实战系列 :时间轴 Android开发中,时间轴的 UI需求非常常见,如下图: 本文将结合自定义View & RecyclerView的知识,手把手教你实现该常 ...
[自定义控件]android自定义view实战之太极图
android自定义view实战之太极图尊重原创,转载请注明出处: http://blog.csdn.net/qq137722697 自定义view是Android工程师进阶不可避免要接触的,我的学 ...
【Android自定义View实战】之自定义评价打分控件RatingBar，可以自定义星星大小和间距...
[Android自定义View实战]之自定义评价打分控件RatingBar,可以自定义星星大小和间距
【朝花夕拾】Android自定义View篇之（六）Android事件分发机制（中）从源码分析事件分发机制...
前言转载请注明,转自[https://www.cnblogs.com/andy-songwei/p/11039252.html]谢谢! 在上一篇文章[[朝花夕拾]Android自定义View篇之(五 ...
【朝花夕拾】Android自定义View篇之（六）Android事件分发机制（中）从源码分析事件分发逻辑及经常遇到的一些“诡异”现象
前言转载请注明,转自[https://www.cnblogs.com/andy-songwei/p/11039252.html]谢谢! 在上一篇文章[[朝花夕拾]Android自定义View篇之(五 ...
android 画圆弧动画,『Android自定义View实战』自定义带入场动画的弧形百分比进度条...
写在前面这是在简书发表的处女座,这个想法也停留在脑海中很久了,一直拖到现在(懒癌发作2333),先自我介绍一番,一枚刚毕业不久的Android程序猿,初出茅庐的Android小生,之前一直在CSDN ...
Android自定义View实战：简约风歌词控件
作者:jsyjst 前言最近重构了之前的音乐播放器,添加了许多功能,比如歌词,下载功能等.这篇文章就让我们聊聊歌词控件的实现,先上效果图,如果感觉海星,就继续瞧下去! 看到这里,估计你对这个控件还有 ...
android 弹出菜单环形,『Android自定义View实战』实现一个小清新的弹出式圆环菜单...
前言 Android表现快捷菜单的形式有很多种,比如使用PopupWindow弹出来的小弹窗,类似QQ的侧拉功能菜单,以及之前讲过的弧形菜单( Android 自定义弧形旋转菜单栏--卫星菜单),这次 ...
Android自定义View实战：简约风歌词控件，Android开发者值得深入思考的几个问题
57[02:41.62]从不知她的痛苦 58[02:52.02] 59[02:54.11]喜欢你那双眼动人 60[03:00.13]笑声更迷人 61[03:02.38] 62[03:03.14]愿 ...
android 图片处理过程中添加进度条,『Android自定义View实战』给我一个图标，还你一个水波纹进度球...
前言我们都知道,平时表现进度的方式有千千万万种(没有UI想不到的,只有你做不到的= =.),其中有一种就是水波纹进度球的形式,网上很多种实现都是直接采用纯色填充的方式,即水波纹都是纯颜色填充,效果看 ...

Android自定义View【实战教程】6⃣️---深入理解 Android 中的 Matrix

Android自定义View【实战教程】6⃣️---深入理解 Android 中的 Matrix相关推荐

最新文章

热门文章