From be4016f74658886db551ba8ad20320456cbcd7f2 Mon Sep 17 00:00:00 2001 From: sloop Date: Tue, 26 Jul 2016 06:02:36 +0800 Subject: [PATCH] Update --- CustomView/Advance/[9]Matrix_Basic.md | 72 ++++----------------------- 1 file changed, 9 insertions(+), 63 deletions(-) diff --git a/CustomView/Advance/[9]Matrix_Basic.md b/CustomView/Advance/[9]Matrix_Basic.md index 202936f..5b38568 100644 --- a/CustomView/Advance/[9]Matrix_Basic.md +++ b/CustomView/Advance/[9]Matrix_Basic.md @@ -5,15 +5,15 @@ 前面讲了四篇 Path 相关的内容，经过长时间的拖更，终于要到了大家期盼已久的 Matrix， 一个与黑客帝国同名的东东，看名字就知道很不凡，接下来我们就看看这个 Matrix 到底是何方神圣。 -
![](http://ww1.sinaimg.cn/large/005Xtdi2jw1f4oyx5i8wbj308c0bj3zz.jpg) -
****** ## 一、Matrix简介 -如题，本篇的主角是 Matrix，其实和黑客帝国并没有太大关系，它看起来大概是下面这样: +**如题，本篇的主角是 Matrix，其实和黑客帝国并没有太大关系, Matrix是一个矩阵，也一个控制视图状态的模型，主要功能是坐标映射，数值转换。** + +它看起来大概是下面这样: ![](http://latex.codecogs.com/png.latex? $$ @@ -28,7 +28,7 @@ MPERSP\\_0 & MPERSP\\_1 & MPERSP\\_2 \\right ] $$) -### Matrix概念： Matrix的翻译过来是矩阵，模型。和其释义相同，Matrix是一个矩阵，也一个控制视图状态的模型，主要功能是坐标映射，数值转换。 +**为了帮助大家理解Matrix的作用，在这里简单的举一个例子:** 我的的手机屏幕作为物理设备，其坐标系是从左上角开始的，但我们在开发的时候通常不会使用这一坐标系，而是使用内容区的坐标系。 @@ -42,37 +42,7 @@ $$) 以上是仅以2D空间作为例子，然而我们在实际的软件开发过程中，为了有较好的空间层次感，可能都要求有一些3D效果，将3D效果的3维影像投影到2维的屏幕，也是依靠Matrix的转换。 -## 二、Matrix基本原理 - -Matrix 本质是一个 3x3 的矩阵，里面有9个数值，分别用于控制视图的不同属性，大致如下: - -![](http://latex.codecogs.com/png.latex? -$$ -\\left [ -\\begin{matrix} -MSCALE\\_X & MSKEW\\_X & MTRANS\\_X \\\\ -\\\\ -MSKEW\\_Y & MSCALE\\_Y & MTRANS\\_Y \\\\ -\\\\ -MPERSP\\_0 & MPERSP\\_1 & MPERSP\\_2 -\\end{1} -\\right ] -$$) - - -序号 | 名称 | 对应单词 | 摘要 ------|----------|-------------|-------------- - 0 | MSCALE_X | scale | 控制X坐标 缩放，旋转 - 1 | MSKEW_X | skew | 控制X坐标 错切，旋转 - 2 | MTRANS_X | transfer | 控制X坐标 位移 - 3 | MSKEW_Y | skew | 控制Y坐标 错切，旋转 - 4 | MSCALE_Y | scale | 控制Y坐标 缩放，旋转 - 5 | MTRANS_Y | transfer | 控制Y坐标 位移 - 6 | MPERSP_0 | perspective | 控制透视 (绕Y轴旋转) - 7 | MPERSP_1 | perspective | 控制透视 (绕X轴旋转) - 8 | MPERSP_2 | perspective | 控制透视 (齐次坐标标志位，通常为1) - -从上表中可以看出一些内容，下面我们看一下2D画布中常用的四种操作(translate, scale, rotate, skew)都是由哪些参数控制的。 +下面我们看一下2D画布中常用的四种操作(translate, scale, rotate, skew)都是由哪些参数控制的。 ![](http://ww2.sinaimg.cn/large/005Xtdi2jw1f60gwrhlnyj30c008zdgy.jpg) ![](http://ww2.sinaimg.cn/large/005Xtdi2jw1f633hvklfnj30c008zdge.jpg) @@ -95,28 +65,11 @@ $$) ## 三、Matrix详解 -Matrix 是一个矩阵，肯定会涉及到一些比较麻烦的理论知识，我会尽量用通俗易懂的方式来帮助大家理解它。 +Matrix 是一个矩阵，最根本的作用就是坐标转换，下面我们就看看几种常见的变换原理: -我们先简单的理解几个概念和其作用。 - -### 1.齐次坐标系 - -* 作用: 方便区分坐标和向量，方便进行仿射变换。 -* 摘要: 在数学中我们的点和向量都是这样表示的(x, y)，两者看起来一样，我们人可以根据上下文信息区分这是点还是向量，而计算机则无法区分，为此我们增加了一个标志位来让计算机也可以区分它们，增加之后看起来是这样:
-**点(x : y : 1) － 向量(x : y : 0)**
-你可能注意到了，我将分隔符换成了冒号，这是因为齐次坐标具有等比的性质，(2:3:1)、(4:6:2)...(2N,3N,N)表示的均是(2,3)这一个点。(**这也是为什么会产生将MPERSP_2解释为scale这一误解了**) - -### 2.仿射变换 - -* 作用: **仿射变换其实是线性变换和平移变换的叠加。**我们之前了解过的 缩放、旋转、错切 本质上都属于线性变换。对于我们而言，仿射变换对应的就是常见的四种画布操作(缩放、旋转、错切、平移)。 -* 摘要: 我们之前说过，Matrix主要作用就是坐标的映射，仿射变换主要就是做这个工作的，详情请继续往下看。 - -### 3.线性变换 - -线性变换主要有3种: 缩放(scale)、旋转(rotate) 和 错切(skew)。 - -线性变换均可用矩阵乘法完成(不了解矩阵乘法规则的参考下面维基百科)，下面我们就来讲讲这几种操作。 +常见的基本变换有4种: 平移(translate)、缩放(scale)、旋转(rotate) 和 错切(skew)。 +由于我们以下大部分的计算都是基于矩阵乘法规则，如果你已经把线性代数还给了老师，请参考一下这里: **[维基百科-矩阵乘法](https://zh.wikipedia.org/wiki/%E7%9F%A9%E9%99%A3%E4%B9%98%E6%B3%95)** #### a.缩放 @@ -176,11 +129,6 @@ y \\right ] $$) -``` -X = x + Skew_X * y -Y = Skew_Y * x + y -``` - #### b.旋转 逆时针旋转 a 度。 @@ -228,9 +176,7 @@ $$) -## Matrix方法表 - -Matrix 有很多常用和不常用的方法， +**Matrix方法表** 方法类别 | 相关API | 摘要 -----------|---------------------------------------------------------|------------------------