Quartz2D
Quartz2D是二维绘图引擎,同时支持iOS和Mac系统。可以绘制图形,绘制文字,绘制/生成图片,读取/生成PDF,截图/裁剪图片,自定义UI控件。Quartz2D在IOS开发中很重要的一个价值:自定义view(自定义UI控件)
图形上下午(Graphics Context)是一个CGContextRef类型的数据
图形上下文保存绘图信息,绘图状态,决定绘制的输出目标。Qurttz2D提供 了Bitmap Graphics Context,PDF Graphics Context,Window Graphics Context,Layer Graphics Context,Printer Graphics Context.
自定义view的步骤
新建一个类,继承自UIView;
实现- (void)drawRect:(CGRect)rect方法,然后在这个方法中;
取得跟当前view相关联的图形上下文;
绘制相应的图形内容;
利用图形上下文将绘制的所有内容渲染显示到view上面;
drawRect:方法在什么时候被调用?
当view第一次显示到屏幕上时(被加到UIWindow上显示出来)
调用view的setNeedsDisplay或者setNeedsDisplayInRect:时
代码步骤:
//1.获得图形上下文
CGContextRefctx= UIGraphicsGetCurrentContext();
//2.拼接路径(下面代码是搞一条线段)
CGContextMoveToPoint(ctx,10, 10);
CGContextAddLineToPoint(ctx,100, 100);
//3.绘制路径
CGContextStrokePath(ctx);//CGContextFillPath(cox);
常用拼接路径函数
//新建一个起点
void CGContextMoveToPoint(CGContextRefc, CGFloatx, CGFloaty)
//添加新的线段到某个点
void CGContextAddLineToPoint(CGContextRefc, CGFloatx, CGFloaty)
//添加一个矩形
void CGContextAddRect(CGContextRefc, CGRectrect)
//添加一个椭圆
void CGContextAddEllipseInRect(CGContextRefcontext, CGRectrect)
//添加一个圆弧
void CGContextAddArc(CGContextRefc, CGFloatx, CGFloaty,
CGFloatradius, CGFloatstartAngle, CGFloatendAngle, intclockwise)
常用的绘制路径函数
//Mode参数决定绘制的模式
void CGContextDrawPath(CGContextRefc, CGPathDrawingModemode)
//绘制空心路径
void CGContextStrokePath(CGContextRefc)
//绘制实心路径
void CGContextFillPath(CGContextRefc)
提示:一般以CGContextDraw、CGContextStroke、CGContextFill开头的函数,都是用来绘制路径的
图形上下文栈
//将当前的上下文copy一份,保存到栈顶(那个栈叫做”图形上下文栈”)
voidCGContextSaveGState(CGContextRefc)
//将栈顶的上下文出栈,替换掉当前的上下文
voidCGContextRestoreGState(CGContextRefc)
分析
【画线drawLine】
1.获取上下文件UIGraphicsGetCurrentContext();
2.设置起点CGContextMoveToPoint(ctx, 10, 10);
3.添加连接点AddLineToPoint(ctx, 110, 10);
4.渲染CGContextStrokePath(ctx);
5.设置线宽CGContextSetLineWidth(ctx, 3);
6.设置线的颜色CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);
7.再添加1个连接点完成矩形绘制
8.设置线的首尾样式CGContextSetLineCap(ctx, kCGLineCapButt);
9.设置线的连接样式CGContextSetLineJoin(ctx, kCGLineJoinRound);
【画矩形drawRectangle】
1.获取上下文件UIGraphicsGetCurrentContext();
2.设置起点,并连接四个点成为矩形
CGContextMoveToPoint(ctx, 10, 10)AddLineToPoint(ctx, 110, 10);
AddLineToPoint(ctx, 110, 110);AddLineToPoint(ctx, 110, 10);
*AddLineToPoint(ctx, 10, 10);
3.画空心CGContextStrokePath(ctx)
4.画实心CGContextFillPath(ctx);
5.使用CGContextStrokeRect();/ CGContextFillRect(); 画矩形
【画三角形triangle】
1.获取上下文件UIGraphicsGetCurrentContext();
2.设置起点,并连接三个点
3.关闭路径CGContextClosePath(ctx);
4.渲染CGContextStrokePath(ctx)
【画圆circle】
CGContextAddEllipseInRect(context, CGRectMake(10, 10, 100, 100));
【画弧arc】
//x y 圆点
//radius 半径
//startAngle 开始角度
//endAngle 结束角度
//clockwise 圆弧的伸展方向 0 顺时针 1 逆时针
CGContextAddArc(context, 100, 100, 50, 0, M_PI_2, 1);
//1顺时针 0
【画扇形sector】
//设置扇形路径的起点
CGContextMoveToPoint(context, 100, 100);
CGContextAddArc(context, 100, 100, 50, M_PI_4, 3 * M_PI_4, 0);
CGContextClosePath(context);
【画文字和图片】
调用文字或者图片的drawAtPoint:或drawInRect方法
文字可设置属性
@{NSFontAttributeName:[UIFont systemFontOfSize:15],NSForegroundColorAttributeName:[UIColor redColor]};
图片
可view上画图片调用drawAtPoint:或drawInRect方法
drawAsPatternInRect可以平铺图片