CGAffineTransform

关于CGAffineTransform苹果的定义是这样的

image.png

• CGAffineTransform用于绘制2D图形的一个仿射变换矩阵
• 用于做旋转、缩放、平移，一个仿射变换矩阵 （是一个3*3的矩阵）
• 它采用的是二维坐标系（ 即向右为x轴正方向,向下为y轴正方向）

3x3的矩阵

CGAffineTransform提供了这样一个函数

CGAffineTransform CGAffineTransformMake (CGFloat a,CGFloat b,CGFloat c,CGFloat d,CGFloat tx,CGFloat ty);

其中tx用来控制在x轴方向上的平移
ty用来控制在y轴方向上的平移
a用来控制在x轴方向上的缩放
d用来控制在y轴方向上的缩放
abcd共同控制旋转

为了把二维图形的旋转、缩放、平移变化统一在一个坐标系里,引入了齐次坐标的概念,即把一个图形用一个三维矩阵表示,其中第三列总是(0,0,1),用来作为坐标系的标准。所以所有的变化都由前两列完成.

矩阵算法公式：

矩阵算法公式

说明: 原坐标设为(x,y,1);

image.png

计算公式

上图中的tx 和ty 记做 t小x ，t小y

                  |a    b    0|
   [x,y,1]        |c    d    0|     =     [ax+cy+t小x   bx+dy+t小y  1] ;
                  |tx   ty  1 |

通过矩阵运算后的坐标[ax+cy+t小x bx+dy+t小y 1]

看个栗子

我修改第二个View的transform中a的值为0.2：

创建两个同样大小宽高都是100位置相同的View，上面的为天蓝色，下面是草绿色，修改天蓝色视图的transform中a的值为0.3 d的值为 0.5 即CGAffineTransformMake(0.2,0,0,0.5,0,0);

图一是没有改变的原图

image.png

因为a和d是控制缩放，所以根据矩阵公式计算

x` = ax + cy + t小x = 0.5 * 100 + 0 * 100 + 0 = 50

y` = bx + dy + t.y = 0 * 100 + 0.5 * 100 + 0 = 50

• x按照a值进行了比例缩放
• y按照d的值进行比列缩放
• 最重要的是缩放的过程中View的point（中心点）是不会改变的

看下平移 CGAffineTransformMake(0.5,0,0,0.5,50,50)

image.png

• 当tx为正值时,会向x轴正方向平移 （向右），反之,则向x轴负方向平移（向左）
• 当ty为正值时,会向y轴正方向平移（向下），反之,则向y轴负方向平移（向上）

看一下旋转

先看下这个函数

CGAffineTransform CGAffineTransformMakeRotation(CGFloat angle)

• 该函数实现以初始位置为基准,将坐标系统逆时针旋转angle弧度
• 弧度计算公式： 弧度=π/180 × 角度
• 程序中 M_PI = π
• M_PI弧度 =》代表180角度 （180度）

CGAffineTransformMakeRotation(M_PI * 0.25)

因为M_PI弧度 表示180度
所以(M_PI * 0.25)弧度 45度
所以(M_PI * 0.25)逆时针旋转(M_PI * 0.25)弧度就等于 逆时针旋转45度

image.png

CGAffineTransformRotate实现以一个已经存在的形变为基准,将坐标系统逆时针旋转angle弧度(弧度=π/180×角度,M_PI弧度代表180角度)

CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI*0.25);
self.demoImageView.transform = CGAffineTransformRotate(transform, M_PI*0.25);

transform属性默认值为CGAffineTransformIdentity,可以在形变之后设置该值以还原到最初状态

旋转公式 ： t' = [ cos(angle) sin(angle) -sin(angle) cos(angle) 0 0 ]

CGAffineTransformMake(cos(M_PI * 0.25), sin(M_PI * 0.25), -sin(M_PI * 0.25), cos(M_PI * 0.25), 0, 0)

image.png