Update
This commit is contained in:
@@ -5,15 +5,15 @@
|
||||
|
||||
前面讲了四篇 Path 相关的内容,经过长时间的拖更,终于要到了大家期盼已久的 Matrix, 一个与黑客帝国同名的东东,看名字就知道很不凡,接下来我们就看看这个 Matrix 到底是何方神圣。
|
||||
|
||||
<center>
|
||||

|
||||
</center>
|
||||
|
||||
******
|
||||
|
||||
## 一、Matrix简介
|
||||
|
||||
如题,本篇的主角是 Matrix,其实和黑客帝国并没有太大关系,它看起来大概是下面这样:
|
||||
**如题,本篇的主角是 Matrix,其实和黑客帝国并没有太大关系, Matrix是一个矩阵,也一个控制视图状态的模型,主要功能是坐标映射,数值转换。**
|
||||
|
||||
它看起来大概是下面这样:
|
||||
|
||||

|
||||
|
||||
### Matrix概念: Matrix的翻译过来是矩阵,模型。和其释义相同,Matrix是一个矩阵,也一个控制视图状态的模型,主要功能是坐标映射,数值转换。
|
||||
**为了帮助大家理解Matrix的作用,在这里简单的举一个例子:**
|
||||
|
||||
我的的手机屏幕作为物理设备,其坐标系是从左上角开始的,但我们在开发的时候通常不会使用这一坐标系,而是使用内容区的坐标系。
|
||||
|
||||
@@ -42,37 +42,7 @@ $$)
|
||||
|
||||
以上是仅以2D空间作为例子,然而我们在实际的软件开发过程中,为了有较好的空间层次感,可能都要求有一些3D效果,将3D效果的3维影像投影到2维的屏幕,也是依靠Matrix的转换。
|
||||
|
||||
## 二、Matrix基本原理
|
||||
|
||||
Matrix 本质是一个 3x3 的矩阵,里面有9个数值,分别用于控制视图的不同属性,大致如下:
|
||||
|
||||

|
||||
|
||||
|
||||
序号 | 名称 | 对应单词 | 摘要
|
||||
-----|----------|-------------|--------------
|
||||
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)都是由哪些参数控制的。
|
||||
|
||||

|
||||

|
||||
@@ -95,28 +65,11 @@ $$)
|
||||
|
||||
## 三、Matrix详解
|
||||
|
||||
Matrix 是一个矩阵,肯定会涉及到一些比较麻烦的理论知识,我会尽量用通俗易懂的方式来帮助大家理解它。
|
||||
Matrix 是一个矩阵,最根本的作用就是坐标转换,下面我们就看看几种常见的变换原理:
|
||||
|
||||
我们先简单的理解几个概念和其作用。
|
||||
|
||||
### 1.齐次坐标系
|
||||
|
||||
* 作用: 方便区分坐标和向量,方便进行仿射变换。
|
||||
* 摘要: 在数学中我们的点和向量都是这样表示的(x, y),两者看起来一样,我们人可以根据上下文信息区分这是点还是向量,而计算机则无法区分,为此我们增加了一个标志位来让计算机也可以区分它们,增加之后看起来是这样: <br/>
|
||||
**点(x : y : 1) - 向量(x : y : 0)**<br/>
|
||||
你可能注意到了,我将分隔符换成了冒号,这是因为齐次坐标具有等比的性质,(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 | 摘要
|
||||
-----------|---------------------------------------------------------|------------------------
|
||||
|
||||
Reference in New Issue
Block a user