Quartz图形绘制及坐标变换

Quartz图形上下文

画一个三角形：

- (void)drawRect:(CGRect)rect
{
    [[UIColor whiteColor] setFill];
    UIRectFill(rect);
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextMoveToPoint(context, 75, 10);
    CGContextAddLineToPoint(context, 10, 150);
    CGContextAddLineToPoint(context, 160, 150);
    CGContextClosePath(context);
    
    [[UIColor blackColor] setStroke];
    [[UIColor redColor] setFill];
    CGContextDrawPath(context, kCGPathFillStroke);
}

- (void)drawRect:(CGRect)rect
{
    [[UIColor whiteColor] setFill];
    UIRectFill(rect);
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextMoveToPoint(context, 75, 10);
    CGContextAddLineToPoint(context, 10, 150);
    CGContextAddLineToPoint(context, 160, 150);
    CGContextClosePath(context);
    
    [[UIColor blackColor] setStroke];
    [[UIColor greenColor] setFill];
    
    CGContextSaveGState(context);
    [[UIColor redColor] setFill];
    CGContextRestoreGState(context);
    
    CGContextDrawPath(context, kCGPathFillStroke);
}

三角形是绿色填充了，因为保存了上下文，后面又恢复了。

Quartz路径

4个基本图元用于描述路径：

1. 点，一个点完全不占空间；
2. 线段
3. 弧
4. 贝塞尔曲线，任何一条曲线都可以通过与它相切的控制线两端的点的位置来定义。

Quartz坐标变换

图形操作中的另一个重要方式就是变换了。

坐标系

Quartz 2D的坐标系原点在左下角；

UIKit坐标系原点在左上角。

- (void)drawRect:(CGRect)rect
{
    [[UIColor whiteColor] setFill];
    UIRectFill(rect);
    
    NSString *path = [[NSBundle mainBundle] pathForResource:@"dog" ofType:@"jpg"];
    UIImage *img = [UIImage imageWithContentsOfFile:path];
    CGImageRef cgImage = img.CGImage;
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    
    CGRect touchRect = CGRectMake(0, 0, img.size.width, img.size.height);
    CGContextDrawImage(context, touchRect, cgImage);
    
    CGContextRestoreGState(context);
}

用Quartz 2D绘制图像，图像是倒过来的，需要这样修改：

- (void)drawRect:(CGRect)rect
{
    [[UIColor whiteColor] setFill];
    UIRectFill(rect);
    
    NSString *path = [[NSBundle mainBundle] pathForResource:@"dog" ofType:@"jpg"];
    UIImage *img = [UIImage imageWithContentsOfFile:path];
    CGImageRef cgImage = img.CGImage;
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    
    CGContextTranslateCTM(context, 0, img.size.height);
    CGContextScaleCTM(context, 1, -1);
    
    CGRect touchRect = CGRectMake(0, 0, img.size.width, img.size.height);
    CGContextDrawImage(context, touchRect, cgImage);
    
    CGContextRestoreGState(context);
}

2D图形的基本变换

有以下几种变换：

1. 平移，坐标加距离值；
2. 缩放，坐标乘缩放比例；
3. 旋转；
4. x轴对称变换，是一种特殊的缩放变换，（1，-1）；
5. y轴对称变换，一种特殊的缩放变换，（-1， 1）；
6. 坐标原点的对称变换，一种特殊的缩放变换，（-1， -1）；

Quartz 2D中主要的变换是矩阵变换（CTM）及仿射变换

CTM变换矩阵

CTM中的主要变换函数有：

• CGContextRotateCTM，旋转变换；
• CGContextScaleCTM，缩放变换；
• CGContextTranslateCTM，平移变换。

1、平移变换

CGContextTranslateCTM(context, 100, 50);

2、缩放变换

CGContextScaleCTM(context, 0.5, 0.75);

3、旋转变换

CGContextRotateCTM(context, [self p_radians:45]);

-(CGFloat)p_radians:(CGFloat)angle
{
    return angle * M_PI / 180;
}

组合变换，可以累积变换效果

CGContextTranslateCTM(context, 0, img.size.height);
CGContextScaleCTM(context, 1, -1);

仿射变换

仿射变换函数：

• CGAffineMakeRoatation，创建新的旋转矩阵；
• CGAffineMakeScale，创建新的缩放矩阵；
• CGAffineMakeTranslation，创建新的平移矩阵；
• CGAffineTransformRotate，旋转矩阵；
• CGAffineTransformScale，缩放矩阵；
• CGAffineTransformTranslate，平移矩阵；
• CGContextConcatCTM，连接到CTM变换。

1、和CTM组合变换一样效果的代码：

CGAffineTransform myAffine = CGAffineTransformMakeTranslation(0, img.size.height);
myAffine = CGAffineTransformScale(myAffine, 1, -1);
CGContextConcatCTM(context, myAffine);