Quartz 2D

什么是Quartz 2D

Quartz 2D是一个二维绘图引擎，Quartz 2D的API是C语言，来自于CoreGraphics框架，没有面向对象的思想

Quartz 2D作用

作用，绘制图形：线条，三角形，矩形，圆形，弧形
绘制文字
绘制生成图像
读取生成PDF
截图裁剪图片
自定义UI控件

图形上下文(Graphics Context)

是一个CGContextRef类型的数据.作用:

保存绘图信息，绘图状态
决定绘制的输出目标，绘制到什么地方去，输出目标可以是PDF文件，Bitmap或者显示器的窗口上

什么时候自动调用drawRect

系统自动调用，视图显示在屏幕上的时候调用且调用一次
需要更新的时候也会被调用，这时需要使seetNeedsDisplay

1
2
3

- (void)drawRect:(CGRect)rect {
// Drawing code
}

直线绘制

void drwaline(){

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSaveGState(context);

//第1条线-----------------------------------------

CGContextSetLineWidth(context, 20);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
CGContextMoveToPoint(context, 10, 10);
CGContextAddLineToPoint(context, 100, 100);
CGContextStrokePath(context);

CGContextRestoreGState(context);

//2条线-------------------------------------------

[[UIColor blueColor] set];
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextMoveToPoint(context, 100, 120);
CGContextAddLineToPoint(context, 150, 120);
CGContextAddLineToPoint(context, 150, 180);
CGContextStrokePath(context);

}

图像保留栈

//将上下文复制一份放到栈中,防止两个图形互相影响
CGContextSaveGState(context);

....................

//将图形上下文出栈，替换当前的上下文，这样所设置的线条头尾部样式就不会影响到线条2
CGContextRestoreGState(context);

矩形绘制

void drawR(){

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextAddRect(context, CGRectMake(10, 10, 120, 180));
[[UIColor purpleColor] setFill];
CGContextFillPath(context);
}

三角形绘制

void drawTriangle(){

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(context, 0, 0);
CGContextAddLineToPoint(context, 100, 100);
CGContextAddLineToPoint(context, 150, 100);
CGContextClosePath(context);
[[UIColor redColor] set];
CGContextStrokePath(context);
}

圆形/椭圆形绘制

void drawCircle(){
CGContextRef context = UIGraphicsGetCurrentContext();

//绘制图形,宽度高度一样就是圆形，不一样就是椭圆
CGContextAddEllipseInRect(context, CGRectMake(50, 50, 130, 100));
CGContextSetLineWidth(context, 10);

CGContextStrokePath(context);
}

弧形绘制

CGFloat arc(CGFloat angle){
return angle * (M_PI / 180);
}

void drawArc(){

CGContextRef context = UIGraphicsGetCurrentContext();

//CGContextAddArc 内各个参数的定义
// x\y : 圆心
// radius : 半径
// startAngle : 开始角度
// endAngle : 结束角度
// clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)

CGContextAddArc(context, 100, 100, 50, arc(90), arc(200), 1);

//CGContextFillPath(context); 如果采用这个方法就是填充弧形
 CGContextStrokePath(context);
}

文字绘制

void drawText(){
NSString *str = @"天道酬勤";
NSMutableDictionary *attributes = [NSMutableDictionary dictionary];
attributes[NSFontAttributeName] = [UIFont systemFontOfSize:20];
attributes[NSForegroundColorAttributeName] = [UIColor purpleColor];
[str drawInRect:CGRectMake(100, 100, 100, 30) withAttributes:attributes];
}

图像绘制(设置水印)

void drawImg(){

UIImage *img = [UIImage imageNamed:@"1.jpg"];

//[img drawAtPoint:CGPointMake(50, 50)]; 这个方法是在某个点开始绘制
//[img drawInRect:CGRectMake(50, 50, 500, 500)]; 在某个矩形框内绘制

//以下方法规定了图片的宽高，以他来进行填充,可以画出格子图案
[img drawAsPatternInRect:CGRectMake(0, 0, 300, 300)];

NSString *str = @"刘米米爱兔宝宝";
[str drawInRect:CGRectMake(0, 0, 100, 30) withAttributes:nil];
}

JPG vs PNG

//取得图片,jpg要后缀名，png不用
UIImage *img = [UIImage imageNamed:@"1.jpg"];

贝塞尔曲线绘制

void drawBezier(){

CGContextRef context = UIGraphicsGetCurrentContext();
//起点
CGContextMoveToPoint(context, 10, 10);
//2个控制点 和终点
CGContextAddCurveToPoint(context, 120, 100, 180, 50, 190, 190);
//1个控制点
//CGContextAddQuadCurveToPoint(context, 150, 200, 200, 100);
CGContextStrokePath(context);
}

小黄人绘制

定义常量

#define JKColor(r,g,b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0]

中心的的x坐标

CGFloat topX = rect.size.width * 0.5;