仿射变换矩阵入门教程

更新时间 : 2021-07-30 17:48:07

仿射变换, 又称仿射映射, 是指在几何中, 一个向量空间进行一次线性变换并接上一个平移, 变换为另一个向量空间。

在 ve sdk 中， 仿射变换是基于 affine 矩阵来实现的，本文将会介绍基本的原理和使用方法

1. 概念分类

• 缩放 ( Scale )
• 平移 ( Transform )
• 旋转 ( Rotate )

2. 图形展示

3. 图形解析

注: 从左到右依次排列分析

图1(No Change) 代表是没有变化的初始坐标点 (1, 0, 0, 0, 1, 0, 0, 0, 1)

初始状态(没有变化) 数学矩阵(转换): 
|1 0 0|     |a c e|
|0 1 0| =>  |b d f|
|0 0 1|     |0 0 1|

------------------------------------
应用矩阵公式: matrix(1,0,0,1,0,0)
------------------------------------
结合demo示例(初始化): 
 // 导入
let matrix = new Affine(); // 初始化对象
let anchor = { x: 0, y: 0 };
let position = { x: 0, y: 0};
let zoom = { x: 1, y: 1 }; 
let rotation = 0; 
matrix.set(anchor, position,  zoom, rotation);

• 初始位置

图 2 （Translate）代表平移之后的坐标点 (1, 0, X, 0, 1, Y, 0, 0, 1)

平移 数学矩阵: 
|a c e|   |x|   |ax cy e|  
|b d f| · |y| = |bx dy f|
|0 0 1|   |1|   |0  0  1|

------------------------------------
x' = ax+cy+e (x点坐标, 水平)
y' = bx+dy+f (y点坐标, 垂直)
------------------------------------
举例: X = 10, Y = 10
x' = ax+cy+e+10
y' = bx+dy+f+10
------------------------------------
应用矩阵公式: matrix(1,0,0,1,10,10)
------------------------------------
结合demo示例(平移): 
let moveMatrix = new Affine();
position = { x: 10, y: 10 };
zoom = { x: 1, y: 1 };
rotation = 0;
moveMatrix.set(anchor, position, zoom, rotation);
matrix.multiply(moveMatrix);

• 平移效果

图 3 (Scale) 代表缩放之后的坐标点 (W, 0, 0, 0, H, 0, 0, 0, 1)

缩放 数学矩阵: 
|w 0 0|
|0 h 0|
|0 0 1|

------------------------------------
举例: W = 2, H = 2   (w,h 均为倍数)
------------------------------------
应用矩阵公式: matrix(2,0,0,2,0,0)
------------------------------------
结合demo示例(缩放): 
let scaleMatrix = new Affine();
anchor = {x: 0, y : 0};
position = {x: 0, y: 0};
zoom = {x: 2, y: 2};
rotation = 0;
scaleMatrix.set(anchor, position, zoom, rotation);
matrix.premultiply(scaleMatrix);

• 缩放/放大效果

图4 (Rotate) 代表旋转之后的坐标点 (cosθ, sinθ, 0, -sinθ, cosθ, 0, 0, 0, 1)

旋转 数据矩阵:
|cosθ -sinθ 0|     |x|   |xcosθ-ysinθ|
|sinθ cosθ  0|  ·  |y| = |xsinθ+ycosθ|
|0    0     1|     |1|   |     1     |

------------------------------------
x' = xcosθ-ysinθ
y' = xsinθ+ycosθ
------------------------------------
举例: 顺时针方向旋转 45° (sin45°, cos45°) => (0.707, 0.707)
------------------------------------
应用矩阵公式: matrix(0.707, 0.707, -0.707, 0.707, 0, 0)
------------------------------------
结合demo示例(旋转): 
let rotationMatrix = new Affine();
anchor = {x: 0, y:0};
position = { x: 0, y: 0 };
zoom = { x: 1, y: 1 }; 
rotation = 45;
rotationMatrix.set(anchor, position, zoom, rotation);
matrix.premultiply(rotationMatrix);

• 旋转效果

4. 概念理解

• 经过对坐标轴的缩放, 旋转, 平移后的原坐标在新坐标域中的值
• 简单来说就是 仿射变换 = 线性变换 + 平移

相关资源

• affine js demo下载