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个基本图元用于描述路径:
- 点,一个点完全不占空间;
- 线段
- 弧
- 贝塞尔曲线,任何一条曲线都可以通过与它相切的控制线两端的点的位置来定义。
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图形的基本变换
有以下几种变换:
- 平移,坐标加距离值;
- 缩放,坐标乘缩放比例;
- 旋转;
- x轴对称变换,是一种特殊的缩放变换,(1,-1);
- y轴对称变换,一种特殊的缩放变换,(-1, 1);
- 坐标原点的对称变换,一种特殊的缩放变换,(-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);