iOS 仿射变换CGAffineTransform详解

UIView有CGAffineTransform类型的属性transform,它是定义在二维空间上完成View的平移,旋转,缩放等效果的实现。

初始化: CGAffineTransform  transform = CGAffineTransformIdentity;

CGAffineTransformIdentity是系统提供的一个常量,/* The identity transform: [ 1 0 0 1 0 0 ]. */(和原图一样的transform);

 CGAffineTransform transform  = CGAffineTransformMake(CGFloat a,CGFloat b,

CGFloat c,CGFloa td,CGFloat tx,CGFloat ty)

我们来解释下这里面参数的作用和变换的效果;

下面是原始的(默认的)transform

UIView默认的
参数结构

人后我们再来看它的计算公式:3 X 3矩阵合成得到(x`,y`,1)

(x`,y`,1)公式

矩阵算法公式:

算法公式

相信大家有所了解,我是懂了点点(数学是历史老师教的),看不到直观的东西。

接下来我们我们新建工程,在widow上建立两个同样大小位置相同的View,第一个为沙色,第二个是浅海蓝色,我修改第二个View的transform中a的值为0.2:CGAffineTransformMake(0.2,0,0,1,0,0);

图一是没有改变的原图,图二是改变之后的View,很明显的差异

原图
View2的transform变化后的图

我用3秒动画完成变换,发现它是两边开始往中间缩小,打印View的frame原来的{{100,100},{100,100}}变成了{{140,100},{20,100}}。我们来计算下是不是根据公式计算的。

根据变换的transform我们知道 a = 0.2 , b = 0 , c = 0 , d = 1 , t.x = 0 , t.y = 0;

                                                         x = 100 ,  y = 100

x` = ax + cy + t.x = 0.2 * 100 + 0 * 100 + 0 = 20

y` = bx + dy + t.y = 0 * 100 + 1 * 100 + 0 = 100

结合上面的图和下面的计算,瞬间明白了这是x按照a值进行了比例缩放,y按照d的值进行比列缩放,最重要的是缩放的过程中View的point(中心点)是不会改变的。

接着对b,c,t.x ,ty,进行深度研究发现:

x会跟着c的值进行拉伸(View的宽度是跟着改变),y会跟着b的值进行拉伸(View的高度跟着改变),要注意到的是c和b的值改变不会影响到View的point(center中心点)的改变。这是个很有意思的两个参数。

x会跟着t.x进行x做表平移,y会跟着t.y进行平移。这里的point(center)是跟着变换的。

下面是Apple整合的transform

平移

①根据本身的transform进行平移   CGAffineTransformMakeTranslation(CGFloat tx,CGFloat ty)

②根据本身的transform后者另外的transform进行平移CGAffineTransformTranslate(CGAffineTransform t,CGFloat tx,CGFloat ty)

缩放

①根据本身的transform进行缩放 

CGAffineTransformMakeScale(CGFloat sx,CGFloat sy)

②根据本身的transform后者另外的transform进行缩放

 CGAffineTransformScale(CGAffineTransform t,CGFloat sx,CGFloat sy)

旋转

① 根据本身的transform进行旋转

 CGAffineTransformMakeRotation(CGFloat angle) (angle 旋转的角度)

②根据本身的transform后者另外的transform进行旋转

CGAffineTransformRotate(CGAffineTransform t,CGFloat angle)

恢复 :反向旋转

CGAffineTransformInvert(CGAffineTransform t)                                                                                           

合并

CGAffineTransformConcat(CGAffineTransform t1,CGAffineTransform t2)       

两个transform合并起来

倾斜:

这个使我们自己定义

-(CGAffineTransform) CGAffineTransformMakeShear(CGFloat x,CGFloat y)

{   CGAffineTransform transform = CGAffineTransformIdentity;

transform.c= -x;

transform.b= y;

returntransform;   }

layer.affineTransform = CGAffineTransformMakeShear(1,0);

评测:

①Bool CGAffineTransformIsIdentity(CGAffineTransform t)                   

 查看是不是默认的transform

②bool CGAffineTransformEqualToTransform(CGAffineTransform t1,CGAffineTransform t2)  

 比较两个transform是否相等

仿射矩阵应用:

①CGPointApplyAffineTransform(CGPoint point,CGAffineTransform t)  得到新的中心CGPoint

②CGSizeApplyAffineTransform(CGSize size,CGAffineTransform t)          得到新的size CGSize

③CGRectApplyAffineTransform(CGRect rect,CGAffineTransform t)        得到新的rect CGRect

放射矩阵一个常用的情形就是根据用户的手势来相应的改变视图的变换

UIPanGestureRecognizer                   位移

UIPinchGestureRecognizer                缩放

UIRotationGestureRecognizer          旋转

苹果官方的建议,要多次使用transform,最好是初始化一个CGAffineTransform,进行多次操作。

Note that you do not typically need to create affine transforms directly. If you want only to draw an object that is scaled or rotated, for example, it is not necessary to construct an affine transform to do so. The most direct way to manipulate your drawing—whether by movement, scaling, or rotation—is to call the functionsCGContextTranslateCTM,CGContextScaleCTM, orCGContextRotateCTM, respectively. You should generally only create an affine transform if you want to reuse it later.(原谅我英语不够好。)


Good lucky , every one!五一快乐!

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

推荐阅读更多精彩内容