CATransform3D背后

发表于

CATransform3D

1
2
3
4
5
6
7
 struct CATransform3D
{
  CGFloat m11, m12, m13, m14;
  CGFloat m21, m22, m23, m24;
  CGFloat m31, m32, m33, m34;
  CGFloat m41, m42, m43, m44;
};

图层的两个属性指定了变换矩阵: transform和sublayer Transform
transform:是结合anchorPoint的位置来对图层和图层上的子图层进行变化
sublayer Transform:是结合anchorPoint的位置来对图层的子图层进行变化,不包括本身.

矩阵知识点补充 — 切变

切变矩阵图解

切变矩阵图解

以原点为起始点,设矩形的四个顶点分别为OABC,取特殊点B，坐标(a,b),将B点坐标的迁移转化为矩阵计算:

\(\big[\begin{smallmatrix} a+m \\ b\end{smallmatrix} \big]\) = \(\big[ \begin{smallmatrix} 1 & m/b \\ 0 & 1 \end{smallmatrix} \bigr]\)\(\big[\begin{smallmatrix} a \\ b\end{smallmatrix} \big]\)

  • 矩阵\(\big[\begin{smallmatrix}1 & k \\ 0 & 1 \end{smallmatrix}\big]\)把平面上的点P(x , y)沿 x 轴方向平移 | ky | 个单位
  • 矩阵\(\big[\begin{smallmatrix}1 & 0 \\ k & 1 \end{smallmatrix}\big]\)把平面上的点P(x , y)沿 y 轴方向平移 | ky | 个单位

一般地,对图中任意一点 (x , y),纵坐标保持不变,横坐标依纵坐标的比例增加, (x , y) –> (x + ky, y) 即,\(\big[\begin{smallmatrix} x\\y\end{smallmatrix}\big]\)–>\(\big[\begin{smallmatrix} x^\prime\\y^\prime\end{smallmatrix}\big]\) = \(\big[\begin{smallmatrix} a+m \\ b\end{smallmatrix} \big]\),所以\[M = \left[ \begin{matrix} 1 & k \\ 0 & 1 \\ \end{matrix} \right] 为切变矩阵或切变变换矩阵\] 象由矩阵\(\big[\begin{smallmatrix} 1 & k \\0 & 1 \end{smallmatrix}\big]\)或者\(\big[\begin{smallmatrix} 1 & 0 \\k & 1 \end{smallmatrix}\big]\)确定的变换通常叫做切变变换,对应的矩阵叫做切变变换矩阵.

矩阵知识点补充 — 齐次坐标

首先我们要搞明白,为什么三维的坐标系中的图层,需要用四维矩阵来计算图层的变化,这里引入齐次坐标概念.

齐次坐标就是将一个原本是n维的向量用一个n+1维向量来表示。 知乎中陈嘉栋对 “表示三维坐标为什么要建立4*4矩阵?" 的回答

最终的结论:

引入齐次坐标是为了结局3*3矩阵无法表示三维空间模型的平移操作,\(\Delta x\),\(\Delta y\),\(\Delta z\)分别是 x, y, z轴方向上的平移量

\(\left [\begin{smallmatrix} x\prime\ \\ y\prime\\z\prime\\1\end{smallmatrix} \right]\) = \(\left[ \begin{smallmatrix} 1 & 0 & 0 & \Delta x\ \\ 0 & 1 & 0 & \Delta y\ \\0 & 0 & 1 & \Delta z\ \\0 & 0 & 0 & 1\\ \end{smallmatrix} \right]\)\(\left [ \begin{smallmatrix} x \\ y \\ z \\1 \\ \end{smallmatrix} \right]\)

等号左侧为转换后的坐标,等号右侧为原始坐标

CGTransform3D对图层的影响

m 效果
m11,m22,m33 三个坐标轴方向上的缩放
m12,m21  控制切变,m12y 切变 m21 x切变
m13,m31 控制旋转
m41,m42,m43,m44 控制平移
m33 若m33>1，图形整体缩小
若0<m33<1，图形整体放大
若m33<0，发生关于原点对称的等比变换
m34 透视效果-1/观测者的距离(500-1000)如果要求是透视加旋转，先修改transform的m34属性,再旋转