Transform – iOS视图几何变换

一.Quartz 2D与CTM

1.Quartz 2D

Quartz 2D是二维画图引擎，使用画笔模型( painter’s model )，每次画图操作都是在画布(canvas)上添加一层，称之为页(Page)，后面画的页会覆盖前面画的页，所以要控制操作顺序。
Quartz 2D的操作目标是CGContextRef对象，CGContextRef是一种称之为图形上下文（graphics context）的数据类型，其中包装了Quartz 2D将图形绘制到输出设备需要的参数。CGContextRef有很多种，其中一种为位图上下文（bitmap graphics context)，位图上下文可用于绘制彩色或灰度图像，其可使用Quartz本身CGBitmapContextCreate函数创建，也可使用高级UIKit框架中的方法创建。

• 在UIView的drawRect: 方法中，UIView对象自动建立绘图环境，使用UIKit框架的UIGraphicsGetCurrentContext方法即可获取当前的图形上下文。
• 需要创建图像时，可使用UIKit框架的UIGraphicsBeginImageContextWithOptions或UIGraphicsBeginImageContext方法创建图形上下文。使用方法如下

  
  UIGraphicsBeginImageContext(size);
  CGContextRef con = UIGraphicsGetCurrentContext();
  ....  各种绘制操作
  UIImage *replaceImage = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();

使用UIKit框架返回的CGContextRef与使用Quartz低级函数返回的CGContextRef坐标系不同，在Quartz坐标系中原点为左下角，而UIKit返回的CGContextRef使用的坐标系做了修改，称之为modified coordinate system,修改后的坐标系原点为左上角，和UIKit其他操作所使用的坐标系相同。

2.CTM(current transformation matrix)

Quartz 2D绘图模型有两种空间，用户空间(user space)和设备空间(device space)。用户空间表示当前需绘制的文档页(document page),设备空间表示原始分辨率的设备。Quartz 2D使用一个变换矩阵CTM(current transformation matrix)将用户空间映射到设备空间。CTM存储在图形上下文( graphics context)中，初始值为identity matrix。在绘制过程中可进行修改。
修改当前CTM的API有CGContextRotateCTMCGContextScaleCTMCGContextTranslateCTM分别用于旋转，缩放，平移。Rotate是以原点为圆心旋转,Quartz创建的图形上下文旋转圆心为左下角，角度值正数为逆时针旋转，负数为顺时针旋转;而UIKit创建的图像上下文旋转圆心为左上角,角度值正数为顺时针旋转，负数为逆时针旋转。
使用方法为

- (void)drawRect:(CGRect)rect {
	// Drawing code
	CGContextRef context = UIGraphicsGetCurrentContext();
	CGContextTranslateCTM(context, 60, 140); // Translate
	CGContextScaleCTM(context, 0.5, 0.5); // Scale
	CGContextRotateCTM(context,radians(60)); // Rotate
	[[UIColor blackColor] setStroke];
	[[UIColor blueColor] setFill];
	UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0,0,200,200)];
	[path fill];
	[path stroke];
}

CTM矩阵类型为仿射变换(CGAffineTransform)，可使用CGContextGetCTM获取当前图形上下文的仿射变换，也可用CGContextConcatCTM将参数中的CGAffineTransform应用于图形上下文。
设备空间与用户空间的概念，可理解为两张纸，设备空间为一张纸，固定着不动，代表着屏幕；用户空间也是一张纸，实际绘图在用户空间这张纸上画，但最终需要贴到设备空间那张纸上，怎么贴就是CTM描述的问题，我可能将用户空间的纸平移一些距离再贴，也可能放大缩小一些再贴，也可能旋转一定的角度再贴。用户空间的纸对应与绘画过程中的每一page,不同的page可能用不同的用户空间，即每次绘制时的CTM可能都不一样。

二.UIView的transfrom属性

UIView的transform属性就是一个CGAffineTransform类型的数据,默认值为CGAffineTransformIdentity。

@property(nonatomic) CGAffineTransform transform

UIView的transform指示其在屏幕上的呈现方式，与Quartz的变换原点为左上角或左下角不同，UIView变换的原点为center或layer的anchorPoint。
其使用方法为

UIView *square = [[UIView alloc] initWithFrame:CGRectMake(0,0,200,200)];
[square setBackgroundColor:[UIColor blueColor]];
[self.view addSubview:square];

//Translate
CGAffineTransform transform = CGAffineTransformMakeTranslation(60, 140);
//Scale
transform = CGAffineTransformScale(transform, 0.5, 0.5);
//Rotate
transform = CGAffineTransformRotate(transform, radians(60));
[square setTransform:transform];

三.CALayer的transform属性

CALayer的transform属性是是个CATransform3D类型的数据。

@property CATransform3D transform

同UIView的transform相同，CATransform3D也是相对于中心点的变换矩阵。

struct CATransform3D
{
CGFloat m11, m12, m13, m14;
CGFloat m21, m22, m23, m24;
CGFloat m31, m32, m33, m34;
CGFloat m41, m42, m43, m44;
};

CATransform3D是3D版本的变换矩阵，如z=0的话，可转换为CGAffineTransform。

• 赋值方式

  [layer setTransform:CATransform3DIdentity];

• 创建CATransform3D的API
  CATransform3DMakeTranslation 
  CATransform3DMakeScale
  CATransform3DMakeRotatation
• 修改CATransform3D的API
  CATransform3DTranslate 
  CATransform3DScale 
  CATransform3DRotate 
  CATransform3DInvert 
  CATransform3DConcat
• 与AffineTransform的相互转换的API
  CATransform3DGetAffineTransform 
  CATransform3DMakeAffineTransform

参考:
Quartz 2D Programming Guide
CGContext Reference
CGAffineTransform Reference
CALayer Class Reference
Core Animation Function Reference
How To Create a Rotating Wheel Control with UIKit
github: EnterTheMatrix
EnterTheMatrix.pdf