自己最近不满足只在界面上覆上一层又一层的view,于是想尝试画图的乐趣,发现Quartz 2D不错,拿来试试。
cocoachina上有一篇翻译的苹果帮助文档的文章不错,建议去看看,很有用,看这里http://www.cocoachina.com/ios/20111111/3486.html。当然如果英文可以直接打开帮助文档搜索Quartz 2D也一样,并且内容更全面。
先从画线条开始练习,先看个例子:
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(ctx, 20, 100);
CGContextAddLineToPoint(ctx, 200, 100);
CGContextSetRGBStrokeColor(ctx, 0, 1.0, 0, 1.0);
CGContextStrokePath(ctx);
先创建一个图片上下文,类似于一张画布,然后你就可以在上面画你想要画的东西。
这里我们先移到点(20,100)处,此时点(20,100)就是当前要画的路径的起点。
CGContextAddLineToPoint(ctx, 100, 100)将从当前起点到给定点(200,100)画一条线。这样一条路径就产生了。
然后我们可以通过CGContextSetRGBStrokeColor对这条线进行颜色设置,当然[[UIColor greenColor] set]
或者[[UIColor greenColor] setStroke]
可以起到相同的作用,都是将我们画的线进行颜色变成绿色。
CGContextStrokePath的作用是将我们所画的线渲染出来。
效果是这样的:
当然在渲染之前还可以设置一些路径的其他属性,如线的宽度样式之类
CGContextSetLineWidth(ctx, 15);
CGContextSetLineCap(ctx, kCGLineCapRound);
加上这两个设置后我们的线就会变成一条宽15顶头是圆角的粗线:
这么容易就画了一条线出来,为了庆祝一下我们马上试试画个矩形。
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(ctx, 20, 100);
CGContextAddLineToPoint(ctx, 170, 100);
CGContextAddLineToPoint(ctx, 170, 200);
CGContextAddLineToPoint(ctx, 20, 200);
[[UIColor redColor] set];
CGContextClosePath(ctx);
CGContextStrokePath(ctx);
以上通过一条条线加的方法绘制了一个矩形
注意到实际上代码中我们只画了3条线,CGContextClosePath帮我们把最后一个缺口给封闭起来,如果没有CGContextClosePath这句的话效果其实是这样的:
当然这样画矩形已经很麻烦了,我们可以这样:
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddRect(ctx, CGRectMake(20, 100, 150, 100));
[[UIColor redColor] set];
CGContextStrokePath(ctx);
使用CGContextAddRect可以很快在点(20,100)处画一个长100宽150的矩形。
如果我们不是想设置边线颜色而是整个矩形的填充颜色,CGContextStrokePath就无法满足了,我们需要CGContextFillPath
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddRect(ctx, CGRectMake(20, 100, 150, 100));
[[UIColor redColor] set];
CGContextFillPath(ctx);
这里注意,因为 set方法设置颜色是stroke和fill通用的,所以不管是用CGContextStrokePath还是CGContextFillPath渲染都可以。如果使用setStroke设置,则设置的是空心颜色,必须相应地使用CGContextStrokePath;而如果使用setFill设置颜色,则设置的是填充颜色,相应地必须使用CGContextFillPath。如果两者不匹配会没效果。
下面来试下画圆:
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddArc(ctx, 100, 100, 50, M_PI_2, M_PI, 1);
CGContextClosePath(ctx);
CGContextFillPath(ctx);
大体思路一致,不过需要注意的是CGContextAddArc。其定义是在CGContext.h中
CG_EXTERN void CGContextAddArc(CGContextRef c, CGFloat x, CGFloat y,
CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)
CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);
其中x,y是圆心,radius是半径,startAngle和endAngle分别是起始点和终点的角度,clockwise的值是0和1,0代表顺时针,1代表逆时针。这里的起始点和终点的角度的判定方法和我们平时有所不同,因为Quartz 2D中坐标系是这样的,而我们平时坐标系是这样的
所以选择角度时要注意一下。
先到这里。