2016-07-23 01:18:44 +08:00
|
|
|
|
# Matrix基础篇
|
2016-06-06 17:39:12 +08:00
|
|
|
|
|
2016-07-20 06:10:39 +08:00
|
|
|
|
|
2016-07-26 06:08:56 +08:00
|
|
|
|
## 目录
|
2016-07-23 01:31:39 +08:00
|
|
|
|
|
2016-07-26 06:13:17 +08:00
|
|
|
|
- [Matrix简介](#jianjie)
|
2016-07-26 06:39:13 +08:00
|
|
|
|
- [概述](#gaishu)
|
2016-07-26 06:14:29 +08:00
|
|
|
|
- [常见误解](#wujie)
|
2016-08-01 06:47:35 +08:00
|
|
|
|
- [Matrix基本原理](#jiben)
|
|
|
|
|
|
- [Matrix复合原理](#fuhe)
|
2016-08-01 06:50:21 +08:00
|
|
|
|
- [Matrix方法表](#fangfa)
|
2016-08-01 06:47:35 +08:00
|
|
|
|
|
2016-07-20 17:05:00 +08:00
|
|
|
|
|
2016-07-23 01:15:22 +08:00
|
|
|
|
******
|
|
|
|
|
|
|
2016-07-26 06:13:17 +08:00
|
|
|
|
<p id="jianjie" />
|
2016-07-26 06:08:56 +08:00
|
|
|
|
## Matrix简介
|
2016-07-23 01:15:22 +08:00
|
|
|
|
|
2016-07-26 06:39:13 +08:00
|
|
|
|
<p id="gaishu" />
|
2016-07-26 06:08:13 +08:00
|
|
|
|
**Matrix是一个矩阵,主要功能是坐标映射,数值转换。**
|
2016-07-26 06:02:36 +08:00
|
|
|
|
|
|
|
|
|
|
它看起来大概是下面这样:
|
2016-07-22 04:01:04 +08:00
|
|
|
|
|
|
|
|
|
|

|
2016-06-10 02:41:55 +08:00
|
|
|
|
|
2016-07-26 06:02:36 +08:00
|
|
|
|
下面我们看一下2D画布中常用的四种操作(translate, scale, rotate, skew)都是由哪些参数控制的。
|
2016-07-20 04:04:36 +08:00
|
|
|
|
|
2016-07-20 16:48:25 +08:00
|
|
|
|

|
2016-07-22 23:21:08 +08:00
|
|
|
|

|
2016-07-20 04:04:36 +08:00
|
|
|
|
|
2016-07-26 06:18:07 +08:00
|
|
|
|
**从上图可以看到最后三个参数是控制透视的,这三个参数主要在3D效果中运用,通常为(0, 0, 1),不在本篇讨论范围内,暂不过多叙述,会在之后对文章中详述其作用。**
|
2016-07-20 04:04:36 +08:00
|
|
|
|
|
2016-07-26 06:14:29 +08:00
|
|
|
|
<p id="wujie" />
|
2016-07-22 04:01:04 +08:00
|
|
|
|
### 常见误解
|
2016-07-21 04:09:29 +08:00
|
|
|
|
|
2016-07-21 04:14:15 +08:00
|
|
|
|
**1.认为Matrix最下面的一行的三个参数(MPERSP_0、MPERSP_1、MPERSP_2)没有什么太大的作用,在这里只是为了凑数。**
|
2016-07-21 04:09:29 +08:00
|
|
|
|
|
2016-07-26 06:18:07 +08:00
|
|
|
|
实际上最后一行参数在3D变换中有着至关重要的作用,这一点会在后面中Camera一文中详细介绍。
|
2016-07-21 04:09:29 +08:00
|
|
|
|
|
2016-07-21 17:15:35 +08:00
|
|
|
|
**2.最后一个参数MPERSP_2被解释为scale**
|
2016-07-21 04:09:29 +08:00
|
|
|
|
|
2016-07-26 06:18:07 +08:00
|
|
|
|
的确,更改MPERSP_2的值能够达到类似缩放的效果,但这是因为齐次坐标的缘故,并非这个参数的实际功能。
|
2016-07-21 04:09:29 +08:00
|
|
|
|
|
2016-07-26 06:14:29 +08:00
|
|
|
|
******
|
2016-07-21 04:09:29 +08:00
|
|
|
|
|
2016-08-01 06:47:35 +08:00
|
|
|
|
<p id="jiben" />
|
|
|
|
|
|
## Matrix基本原理
|
2016-07-22 07:26:20 +08:00
|
|
|
|
|
2016-07-26 06:18:07 +08:00
|
|
|
|
Matrix 是一个矩阵,最根本的作用就是坐标转换,下面我们就看看几种常见变换的原理:
|
2016-07-24 02:53:41 +08:00
|
|
|
|
|
2016-08-01 06:47:35 +08:00
|
|
|
|
> 我们所用到的变换均属于仿射变换,仿射变换是 线性变换(缩放,旋转,错切) 和 平移变换(平移) 的复合,由于这些概念对于我们作用并不大,此处不过多介绍,有兴趣可自行了解。
|
|
|
|
|
|
|
|
|
|
|
|
基本变换有4种: 平移(translate)、缩放(scale)、旋转(rotate) 和 错切(skew)。
|
2016-07-24 03:17:36 +08:00
|
|
|
|
|
2016-07-26 06:02:36 +08:00
|
|
|
|
由于我们以下大部分的计算都是基于矩阵乘法规则,如果你已经把线性代数还给了老师,请参考一下这里:
|
2016-07-24 03:17:36 +08:00
|
|
|
|
**[维基百科-矩阵乘法](https://zh.wikipedia.org/wiki/%E7%9F%A9%E9%99%A3%E4%B9%98%E6%B3%95)**
|
2016-07-24 02:57:06 +08:00
|
|
|
|
|
2016-08-01 02:00:17 +08:00
|
|
|
|
### 1.缩放(Scale)
|
2016-07-24 02:33:08 +08:00
|
|
|
|
|
2016-07-29 23:20:33 +08:00
|
|
|
|

|
|
|
|
|
|
|
|
|
|
|
|

|
2016-07-27 04:44:59 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
用矩阵表示:
|
2016-07-24 03:06:46 +08:00
|
|
|
|
|
2016-07-24 03:17:36 +08:00
|
|
|
|

|
|
|
|
|
|
|
2016-07-27 05:31:57 +08:00
|
|
|
|
>
|
|
|
|
|
|
你可能注意到了,我们坐标多了一个1,这是使用了齐次坐标系的缘故,在数学中我们的点和向量都是这样表示的(x, y),两者看起来一样,计算机无法区分,为此让计算机也可以区分它们,增加了一个标志位,增加之后看起来是这样: <br/>
|
|
|
|
|
|
>
|
|
|
|
|
|
(x, y, 1) - 点<br/>
|
|
|
|
|
|
(x, y, 0) - 向量<br/>
|
|
|
|
|
|
>
|
|
|
|
|
|
另外,齐次坐标具有等比的性质,(2,3,1)、(4,6,2)...(2N,3N,N)表示的均是(2,3)这一个点。(**将MPERSP_2解释为scale这一误解就源于此**)。
|
|
|
|
|
|
|
2016-07-31 03:49:17 +08:00
|
|
|
|
图例:
|
|
|
|
|
|
|
2016-07-31 05:44:38 +08:00
|
|
|
|

|
2016-07-31 03:49:17 +08:00
|
|
|
|
|
2016-08-01 02:00:17 +08:00
|
|
|
|
### 2.错切(Skew)
|
2016-07-24 15:58:35 +08:00
|
|
|
|
|
2016-07-31 03:21:14 +08:00
|
|
|
|
错切存在两种特殊错切,水平错切(平行X轴)和垂直错切(平行Y轴)。
|
|
|
|
|
|
|
|
|
|
|
|
#### 水平错切
|
|
|
|
|
|
|
2016-07-31 05:47:58 +08:00
|
|
|
|

|
2016-07-31 03:21:14 +08:00
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|
|
|
|
用矩阵表示:
|
2016-07-26 04:36:27 +08:00
|
|
|
|
|
2016-07-26 04:20:03 +08:00
|
|
|
|

|
|
|
|
|
|
|
2016-07-31 05:44:38 +08:00
|
|
|
|
图例:
|
|
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
2016-07-31 05:47:58 +08:00
|
|
|
|
#### 垂直错切
|
|
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|
|
|
|
用矩阵表示:
|
|
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|
|
|
|
图例:
|
|
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
2016-07-31 07:22:27 +08:00
|
|
|
|
#### 复合错切
|
|
|
|
|
|
|
|
|
|
|
|
> 水平错切和垂直错切的复合。
|
|
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|
|
|
|
用矩阵表示:
|
|
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
2016-07-31 07:23:01 +08:00
|
|
|
|
图例:
|
|
|
|
|
|
|
|
|
|
|
|

|
2016-07-31 07:22:27 +08:00
|
|
|
|
|
2016-08-01 02:00:17 +08:00
|
|
|
|
### 3.旋转(Rotate)
|
2016-07-26 04:37:19 +08:00
|
|
|
|
|
2016-07-31 06:57:02 +08:00
|
|
|
|
假定一个点 A(x<sub>0</sub>, y<sub>0</sub>) ,距离原点距离为 r, 与水平轴夹角为 α 度, 绕原点旋转 θ 度, 旋转后为点 B(x, y) 如下:
|
|
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
2016-07-31 07:08:37 +08:00
|
|
|
|

|
|
|
|
|
|
= r \\cdot cos \\alpha \\cdot cos \\theta - r \\cdot sin \\alpha \\cdot sin \\theta
|
|
|
|
|
|
= x_0 \\cdot cos \\theta - y_0 \\cdot sin \\theta
|
|
|
|
|
|
$$)
|
|
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
= r \\cdot sin \\alpha \\cdot cos \\theta + r \\cdot cos \\alpha \\cdot sin \\theta
|
|
|
|
|
|
= y_0 \\cdot cos \\theta + x_0 \\cdot sin \\theta
|
|
|
|
|
|
$$)
|
|
|
|
|
|
|
2016-07-31 07:10:41 +08:00
|
|
|
|
用矩阵表示:
|
2016-07-26 05:13:51 +08:00
|
|
|
|
|
|
|
|
|
|
 & -sin(\\theta) & 0 \\\\
|
|
|
|
|
|
sin(\\theta) & cos(\\theta) & 0 \\\\
|
|
|
|
|
|
0 & 0 & 1
|
2016-07-26 05:13:51 +08:00
|
|
|
|
\\end{1}
|
|
|
|
|
|
\\right ]
|
|
|
|
|
|
.
|
|
|
|
|
|
\\left [
|
|
|
|
|
|
\\begin{matrix}
|
2016-07-28 04:48:35 +08:00
|
|
|
|
x_0\\\\
|
|
|
|
|
|
y_0\\\\
|
|
|
|
|
|
1
|
2016-07-26 05:13:51 +08:00
|
|
|
|
\\end{1}
|
|
|
|
|
|
\\right ]
|
|
|
|
|
|
$$)
|
|
|
|
|
|
|
2016-07-31 07:10:41 +08:00
|
|
|
|
图例:
|
|
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|
|
|
|
|
2016-08-01 02:00:17 +08:00
|
|
|
|
### 4.平移(Translate)
|
2016-07-26 04:37:19 +08:00
|
|
|
|
|
2016-08-01 06:47:35 +08:00
|
|
|
|
>
|
|
|
|
|
|
此处也是使用齐次坐标的优点体现之一,实际上前面的三个操作使用 2x2 的矩阵也能满足需求,但是使用 2x2 的矩阵,无法将平移操作加入其中,而将坐标扩展为齐次坐标后,将矩阵扩展为 3x3 就可以将算法统一,四种算法均可以使用矩阵乘法完成。
|
|
|
|
|
|
|
2016-07-29 22:50:40 +08:00
|
|
|
|

|
|
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
2016-08-01 02:00:17 +08:00
|
|
|
|
用矩阵表示:
|
2016-07-29 22:50:40 +08:00
|
|
|
|
|
2016-07-29 01:39:19 +08:00
|
|
|
|

|
2016-07-22 02:47:02 +08:00
|
|
|
|
|
2016-08-01 04:13:34 +08:00
|
|
|
|
图例:
|
2016-07-22 02:47:02 +08:00
|
|
|
|
|
2016-08-01 04:13:34 +08:00
|
|
|
|

|
2016-07-22 02:47:02 +08:00
|
|
|
|
|
2016-07-21 04:09:29 +08:00
|
|
|
|
|
2016-08-01 06:47:35 +08:00
|
|
|
|
<p id="fuhe" />
|
|
|
|
|
|
## Matrix复合原理
|
2016-07-20 17:05:00 +08:00
|
|
|
|
|
2016-07-20 04:04:36 +08:00
|
|
|
|
|
2016-07-20 01:45:13 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2016-08-01 06:50:21 +08:00
|
|
|
|
<p id="方法" />
|
|
|
|
|
|
## Matrix方法表
|
2016-07-21 03:09:37 +08:00
|
|
|
|
|
|
|
|
|
|
方法类别 | 相关API | 摘要
|
|
|
|
|
|
-----------|---------------------------------------------------------|------------------------
|
|
|
|
|
|
基本方法 | equals hashCode toString toShortString | 比较、 获取哈希值、 转换为字符串
|
2016-07-23 00:58:04 +08:00
|
|
|
|
数值操作 | set reset setValues getValues | 设置、 重置、 设置数值、 获取数值
|
|
|
|
|
|
数值计算 | mapPoints mapRadius mapRect mapVectors | 计算变换后的数值
|
2016-07-21 03:09:37 +08:00
|
|
|
|
设置(set) | setConcat setRotate setScale setSkew setTranslate | 设置变换
|
|
|
|
|
|
前乘(pre) | preConcat preRotate preScale preSkew preTranslate | 前乘变换
|
|
|
|
|
|
后乘(post) | postConcat postRotate postScale postSkew postTranslate | 后乘变换
|
|
|
|
|
|
特殊方法 | setPolyToPoly setRectToRect rectStaysRect setSinCos | 一些特殊操作
|
|
|
|
|
|
矩阵相关 | invert isAffine isIdentity | 求逆矩阵、 是否为仿射矩阵、 是否为单位矩阵 ...
|
|
|
|
|
|
|
|
|
|
|
|
|
2016-06-13 17:01:01 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2016-06-11 21:46:30 +08:00
|
|
|
|
|
|
|
|
|
|
|