标签:
1.基本图形绘制
>>绘图步骤
> 获取图形上下文 CGContextRef ctx = UIGraphicsGetCurrentContext();
> 拼接路径
// 设置起点 CGContextMoveToPoint(ctx, 10, 10);
// 设置终点 CGContextMoveToPoint(ctx, 100, 100);
CGContextAddLineToPoint该方法会将当前图形上下文的起点链接一条线到指定点
CGContextAddLineToPoint(ctx, 100, 100);
> 渲染
// 渲染(线段不能使用实心方式渲染)
CGContextStrokePath(ctx);(空心)
//CGContextFillPath(ctx);(实心)
/**
* 当view第一次显示的时候调用
*/
- (void)drawRect:(CGRect)rect {}
* 线段(线宽、线段样式、线条颜色)
线宽:CGContextSetLineWidth(ctx, 10);
线段样式:
// 设置线段两端样式(圆角)
CGContextSetLineCap(ctx, kCGLineCapRound);
// 设置线段连接点样式
CGContextSetLineJoin(ctx, kCGLineJoinRound);
线条颜色:
// 设置颜色
CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
注意点:画线条只能通过空心样式画。
CGContextStrokePath(ctx);
* 三角形
// 获得图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 画直线
// 设置起点
/***** 绘图信息 ******/
CGContextMoveToPoint(ctx, 10, 10);
// 设置终点
// CGContextAddLineToPoint该方法会将当前图形上下文的起点链接一条线到指定点
CGContextAddLineToPoint(ctx, 100, 100);
// 设置终点
// CGContextAddLineToPoint该方法会将当前图形上下文的终点链接一条线到指定点
CGContextAddLineToPoint(ctx, 200, 20);
// CGContextAddLineToPoint该方法会将当前图形上下文的终点链接一条线到指定点
// CGContextAddLineToPoint(ctx, 10, 10);
// 关闭路径
CGContextClosePath(ctx);
/**** 绘图状态 ****/
// 设置线宽
CGContextSetLineWidth(ctx, 10);
// 设置颜色
CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
// 设置线段两端样式(圆角)
CGContextSetLineCap(ctx, kCGLineCapRound);
// 设置线段连接点样式
CGContextSetLineJoin(ctx, kCGLineJoinBevel);
// 渲染
CGContextStrokePath(ctx);
* 矩形(空心、实心、颜色)
CGContextAddRect(ctx,CGRectMake(10,10,100,100));
该方法的缺点:只能绘制正方形和长方形,不能绘制斜的平行四边形。不够灵活。
注意点:设置绘图的状态必须在渲染之前。比如设置颜色要在渲染之前
// 获得图形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 拼接路径
CGContextAddRect(ctx, CGRectMake(10, 10, 100, 100));
// 设置绘图状态
// 设置颜色
CGContextSetStrokeColorWithColor(ctx, [UIColor blueColor].CGColor);
CGContextSetFillColorWithColor(ctx, [UIColor orangeColor].CGColor);
// 渲染(以空心形式绘制)
// CGContextStrokePath(ctx);
// // 渲染(以实心形式绘制)
// CGContextFillPath(ctx);
/*
kCGPathFill,
kCGPathEOFill,
kCGPathStroke,
kCGPathFillStroke,
kCGPathEOFillStroke
*/
CGContextDrawPath(ctx, kCGPathFillStroke);//同时渲染线段空心,内容实心
2.椭圆\圆\圆弧\饼状图(可以用到开源框架Core Plot(股市k线图)图形库,用来画一些心电图,股市走势图,饼状图)
画圆弧方法说明:
void CGContextAddArc (
CGContextRef c,上下文
CGFloat x, //圆心的x坐标
CGFloat y, //圆心的x坐标
CGFloat radius, //圆的半径
CGFloat startAngle, //开始弧度
CGFloat endAngle, //结束弧度
int clockwise //0表示顺时针,1表示逆时针
);
// 画线point的取值是相对于当前view的左上角来说的
CGContextMoveToPoint(ctx, x, y);
CGContextAddLineToPoint(ctx, x, 0);// 一定要注意
// 画线
CGContextMoveToPoint(ctx, x, y);
// CGContextAddLineToPoint(ctx, x, 0);
CGContextAddLineToPoint(ctx, x, y * 0.5);
// 画弧
/*假如当前path已经存在一个subpath(子线段),那么这个函数执行的另外一个效果是会有一条直线,从current point(即是线段的终点CGContextAddLineToPoint(ctx, x, y * 0.5)里面这个点;)到弧的起点。*/
/*If the current path already contains a subpath, Quartz adds a line connecting the current point to the starting point of the arc. If the current path is empty, Quartz creates a new new subpath with a starting point set to the starting point of the arc.*/
CGContextAddArc(ctx, x, y, raduis, - M_PI_2 ,0, 0);
// CGContextAddArc(ctx, x, y, raduis, 0 ,- M_PI_2, 1);
// 设置颜色
// OC方式渲染颜色
// [[UIColor orangeColor] setStroke];// 空心渲染颜色
// [[UIColor orangeColor] setFill]; // 实心渲染颜色
// C方式渲染颜色
//CGContextSetStrokeColorWithColor(ctx, [UIColor blueColor].CGColor);
//CGContextSetFillColorWithColor(ctx, [UIColor orangeColor].CGColor);
等价上面设置的分样式设置颜色的方法
// 设置渲染颜色(跟随渲染方式而改变)
[[UIColor orangeColor] set];
CGContextClosePath(ctx);
// 渲染
CGContextStrokePath(ctx);
假如想创建一个完整的圆圈,那么开始弧度就是0 结束弧度是2pi
最后,函数执行完后,current point就被重置为(x,y).
还有一点要注意的是,假如当前path已经存在一个subpath,
那么这个函数执行的另外一个效果是会有一条直线,从current point到弧的起点。
3.文字绘制和图片绘制(pattern)
1> 绘制文字和图片不要使用C语言函数。原因如下:
* Quarz2D 绘图坐标系和 UIKit 坐标系不一致,导致使用 C 语言函数绘文字和图片就会出现文字和图片颠倒的现象,需要通过写代码调整,要利用到数学中矩阵的知识。
* 使用 C 语言函数绘制文字和图片代码复杂且函数不好理解。非常麻烦。
2> 画格子背景。
3> 绘制文字
/**
* 绘制文字(c方式)(需要获得图形上下文)
*/
- (void)drawCText:(CGRect)rect{
// 设置文字
NSString *text = @"itcast传智";
// 获得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 创建字体
UIFont *font = [UIFont fontWithName:@"Arial" size:20];
// 颠倒坐标系(矩阵平移,旋转)
CGContextTranslateCTM(ctx, 0, rect.size.height);//
CGContextScaleCTM(ctx, 1, -1);
// 拼接路径(绘制文字格式,字体,大小)
CGContextSelectFont(ctx, [[font fontName] cStringUsingEncoding:NSUTF8StringEncoding], 20, kCGEncodingMacRoman);
// 缺点:两个方法都不会自动换行,也不能绘制中文
// CGContextShowText(ctx, [text cStringUsingEncoding:NSUTF8StringEncoding], text.length);
// 展示文字
CGContextShowTextAtPoint(ctx, 100, 100, [text cStringUsingEncoding:NSUTF8StringEncoding], text.length);
// 渲染
CGContextStrokePath(ctx);
}
/**
* 绘制文字(OC方式) (不需要获得图形上下文)
*/
// 设置文字
NSString *text = @"itcast传智itcast传智itcast传智itcast传智itcast传智itcast传智itcast传智itcast传智";
// 指定点不能自动换行
// [text drawAtPoint:CGPointZero withFont:[UIFont systemFontOfSize:20]];
// 指定区域能自动换行
// [text drawInRect:rect withFont:[UIFont systemFontOfSize:20]];
// 创建一个字典
NSMutableDictionary *textAttributes = [NSMutableDictionary dictionary];
textAttributes[NSFontAttributeName] = [UIFont systemFontOfSize:20];
textAttributes[NSForegroundColorAttributeName] = [UIColor redColor];
// 指定点不能自动换行
// [text drawAtPoint:CGPointZero withAttributes:textAttributes];
// 指定区域能自动换行
[text drawInRect:rect withAttributes:textAttributes];
/**
* 绘制图片(c方式)(需要获得图形上下文)
*
*/
// 加载图片
UIImage *image = [UIImage imageNamed:@"psb.jpeg"];
// 获得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 颠倒坐标系
CGContextTranslateCTM(ctx, 0, rect.size.height);
CGContextScaleCTM(ctx, 1, -1);
// 绘制图片(拉伸填充指定区域)
// CGContextDrawImage(ctx, CGRectMake(10, 10, 100, 100), image.CGImage);
// 以平铺的形式绘制图片
CGContextDrawTiledImage(ctx, CGRectMake(0, 0, 100, 100), image.CGImage);
/**
* 绘制图片(OC方式)(不需要获得图形上下文)
*
*/
//加载图片
UIImage *image = [UIImage imageNamed:@"test.jpg"];
// [image drawAtPoint:CGPointZero];// 以自己左上角为定位点,相对父控件的位置,大小默认是图片原来尺寸
// [image drawInRect:rect]; // 拉伸填充
[image drawAsPatternInRect:rect]; // 平铺绘制
4.矩阵操作和图片裁剪
* 旋转、缩放、平移
// 获得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// CGContextTranslateCTM(ctx, 100, 0);// 平移
// CGContextScaleCTM(ctx, 0.5, 1);// 缩放
CGContextRotateCTM(ctx, M_PI_4);// 旋转 以自己左上角为固定点旋转
// 绘制四边形
CGContextAddRect(ctx, CGRectMake(100, 100, 150, 50));
// 设置线段起点
CGContextMoveToPoint(ctx, 250, 250);
// 设置线段终点
CGContextAddLineToPoint(ctx, 100, 300);
// 渲染
CGContextStrokePath(ctx);
* 图片裁剪
1> 裁剪是Core Graphics的一项出色的功能特性,让你可以在任意形状中限制绘制操作。创建了一个剪辑区域,然后调用CGContextClip方法。以后的绘制动作都会被限定在那个区域中
// 加载图片
UIImage *iconView = [UIImage imageNamed:@"1"];
// 获得上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// CGContextSaveGState(ctx);
CGRect frame = CGRectMake(100, 100, 100, 100);
// 画圆
CGContextAddEllipseInRect(ctx, frame);
// 裁剪
// CGContextClip该方法会将当前图形上下文中的路径裁剪出来,后面再往图形上下文绘制内容,如果内容超出裁剪区域,则不显示
CGContextClip(ctx);
[iconView drawInRect:frame];
// CGContextRestoreGState(ctx);
[iconView drawInRect:CGRectMake(10, 10, 50, 50)];
// 渲染
CGContextStrokePath(ctx);
5、自定义图层
1、创建一个CALayer的子类,然后覆盖drawInContext:方法,使用Quartz2D API进行绘图
// 在指定的图形上下文中绘制图层显示的内容。
- (void)drawInContext:(CGContextRef)ctx {
CGContextSetRGBFillColor(ctx, 1, 0, 0, 1);
// 不能使用UIkit框架的类设置颜色。
//[[UIColor orangeColor] set];
CGContextAddEllipseInRect(ctx, CGRectMake(0, 0, 100, 100));
CGContextFillPath(ctx);
}
> 在自定义layer中的-(void)drawInContext:方法不会自己调用,只能自己通过setNeedDisplay方法调用
2、设置CALayer的delegate,然后让delegate实现drawLayer:inContext:方法,当CALayer需要绘图时,会调用delegate的drawLayer:inContext:方法进行绘图。
标签:
原文地址:http://www.cnblogs.com/muqizi/p/4631760.html