Core Graphics仿射变换知识

这是补充记录关于CG的几何变换的一些知识,涉及到简单的矩阵变换

变换矩阵

在Core Graphics进行图层缩放、旋转、平移的时候,本质的操作就是使用CGAffineTransform这个3x2矩阵对象,与我们的CGPoint这个1x2的矩阵(其实就是对应就是[x,y]这个向量)进行矩阵相乘操作,得到的新矩阵就是变换后的新向量。一般通过CALayer得到的图层都是矢量,因此可以把整个图层进行相应的缩放、旋转、平移。

typedef struct CGAffineTransform { 
  CGFloat a; 
  CGFloat b; 
  CGFloat c; 
  CGFloat d; 
  CGFloat tx; 
  CGFloat ty; 
} CGAffineTransform;

这个结构体对应的矩阵如下(看不到LaTeX公式的请看Apple Developer Document):

$ \begin{bmatrix} a & b & 0 \\ c & d & 0 \\ t_{x} & t_{y} & 1 \end{bmatrix} $

Apple采用了用[1]补齐1x3的向量,和用[0,0,1]的转置补齐的3x3的变换矩阵相乘来做仿射变换。虽然可能觉理论上可以直接用2x3变换矩阵和3x1的向量([x,y,1]的转置)运算,得到一个2x1的向量,省3个CGFloat的空间。但是由于这种变换操作叠加次数特别多,与其每次得到的向量结果再补齐[1],还不如一次性就用一个1x3和3x3运算,用空间换取时间,这也许是QuartzCore的实现者的考虑吧。

$ \begin{bmatrix} x & y & 1 \end{bmatrix} \times \begin{bmatrix} a & b & 0 \\ c & d & 0 \\ t_{x} & t_{y} & 1 \end{bmatrix} = \begin{bmatrix} ax+cy+t_{x} & bx+dy+t_{y} & 1 \end{bmatrix} $

注意:iOS上坐标原点从屏幕左上方起,x轴指向右方,y轴指向下方。macOS的原点在屏幕左下方,x轴指向右方,y轴指向上方,要注意区别

平移

变换矩阵第三行的t_x和t_y对应的就是x、y的平移量,因此矩阵变换很简单,比如将[x,y]向量平移到[x+a,y+b]:

平移矩阵:
$ \begin{bmatrix} x & y & 1 \end{bmatrix} \times \begin{bmatrix} 1 & 0 & 0 \\ 0 & 1 & 0 \\ a & b & 1 \end{bmatrix} = \begin{bmatrix} x+a & y+b & 1 \end{bmatrix} $

对应API:

CGAffineTransform CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty);

缩放

缩放的本质,就是对向量[x,y]通过同时乘以相同的系数a,得到[ax,ay],那么矩阵很简单,只需要一个对角矩阵,系数都为a就行

缩放矩阵:

$\begin{bmatrix} x & y & 1 \end{bmatrix} \times \begin{bmatrix} a & 0 & 0 \\ 0 & a & 0 \\ 0 & 0 & 1 \end{bmatrix} = \begin{bmatrix} ax & by & 1 \end{bmatrix} $

这个可以使用CA的API来简单构造(也可以直接自己初始化):

CGAffineTransform CGAffineTransformMakeScale(CGFloat sx, CGFloat sy);

旋转

旋转的变换矩阵初看上去好像难以理解(各种cos、sin),其实就是一个简单的解方程的出来的结果,注意这里需要的是弧度,而且iOS上旋转的正弧度代表顺时针(macOS上就是正弧度是顺时针),需要注意

旋转矩阵:

$ \begin{bmatrix} x & y & 1 \end{bmatrix} \times \begin{bmatrix} \cos \theta & \sin \theta & 0 \\ - \sin \theta & \cos \theta & 0 \\ 0 & 0 & 1 \end{bmatrix} = \begin{bmatrix} x \cos \theta - y \sin \theta & x \sin \theta + y \cos \theta & 1 \end{bmatrix} $

推导过程:

$ P = (x,y) = (r\cos A , r\sin A) \\ P^{'} = (r \cos B, r \sin B) = (r\cos(A + \theta), r\sin(A + \theta)) \\ r\cos(A + \theta) = r\cos A \cos \theta - r\sin A \sin \theta = x \cos \theta - y \sin \theta \\ r\sin(A + \theta) = r\sin A \cos \theta + r\cos A \sin \theta = y \cos \theta + x \sin \theta \\ \therefore M = \begin{bmatrix} \cos \theta & \sin \theta & 0 \\ - \sin \theta & \cos \theta & 0 \\ 0 & 0 & 1 \end{bmatrix} $

对应API:

CGAffineTransform CGAffineTransformMakeRotation(CGFloat angle);

弧度可以用自带的定义,比如M_PI_4这些,也可以手动转换,比如用弧度、角度转换的宏:

#define RADIANS_TO_DEGREES(x) ((x)/M_PI*180.0) 
#define DEGREES_TO_RADIANS(x) ((x)/180.0*M_PI)

错切

错切,就是一种特殊的线性变换(不平移),指的是某一个坐标轴依赖不变,另一个轴线性变换,参考Wiki上的图片:


错切矩阵:

$ \begin{bmatrix} x & y & 1 \end{bmatrix} \times \begin{bmatrix} 1 & 0 & 0 \\ m & 1 & 0 \\ 0 & 0 & 1 \end{bmatrix} = \begin{bmatrix} x+my & y & 1 \end{bmatrix} $

这种变换没有提供专用的API,我们自己可以用CGAffineTransformIdentity创建一个矩阵,然后赋值矩阵中c或者b的值就行

叠加

既然了解了这些图层操作的矩阵变换,我们也可以自己定义矩阵,比如非线性变换(得到的向量不平行)、也可以把几个连续的变换串起来,这时候就要注意矩阵的运算顺序,比如先缩放50%,再旋转M_PI_4,再平移到[x+100,y],那么等价于沿着45度平移50的距离(对应结果坐标就成了[x*sqrt(2)/4, y*sqrt(2)/4])

对应API:

CGAffineTransform CGAffineTransformConcat(CGAffineTransform t1, CGAffineTransform t2); // 最通用
CGAffineTransform CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy);
// 缩放
CGAffineTransform CGAffineTransformMakeRotation(CGFloat angle); //旋转
CGAffineTransform CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty); // 平移

参考资料

iOS Core Animation Advanced Techniques

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 221,576评论 6 515
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,515评论 3 399
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 168,017评论 0 360
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,626评论 1 296
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,625评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,255评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,825评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,729评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,271评论 1 320
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,363评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,498评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,183评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,867评论 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,338评论 0 24
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,458评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,906评论 3 376
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,507评论 2 359

推荐阅读更多精彩内容