浅谈 Quartz2D 在开发中的用处 - 画图形

转载自：http://www.jianshu.com/p/d5183ee5371d

在了解到 Quartz2D 的用途以后是不是打算马上动手？虽然MJ老师说会枯燥，但是自己动起手来其实也蛮有趣的，接下来就着手用 Quartz2D 画一些图形吧。

线段代码及效果图展示：

代码：

- (void)drawRect:(CGRect)rect
{
    CGContextRef line = UIGraphicsGetCurrentContext(); // 不需要* ，获得图形上下文

    CGContextMoveToPoint(line, 50, 50); // 设置线段起点

    CGContextAddLineToPoint(line, 250, 50); // 设置线段重点

    CGContextSetRGBStrokeColor(line, 0, 1.0, 0, 1.0); // 设置险段的颜色

    CGContextSetLineWidth(line, 10); // 设置线断的宽度

    CGContextSetLineJoin(line, kCGLineJoinRound); // 设置线断起点和终点的样式都为圆角

    CGContextSetLineCap(line, kCGLineCapRound); // 设置险段的转角样式为圆角

    CGContextStrokePath(line); // 渲染，绘制出一条空心的线断

    CGContextRef lineOne = UIGraphicsGetCurrentContext(); // 设置第二条线

    CGContextMoveToPoint(lineOne, 50, 150); // 设置线段起点

    CGContextAddLineToPoint(lineOne, 200, 20); // 设置线段终点

    CGContextSetRGBStrokeColor(lineOne, 1.0, 0, 0, 1.0); // 设置线断颜色

    CGContextSetLineWidth(lineOne, 10); // 设置线段宽度

    CGContextStrokePath(lineOne); // 渲染，绘制出一条空心的线断
}
@end

效果图：

线段

三角形代码及效果图展示：

代码：

- (void)drawRect:(CGRect)rect
{
    CGContextRef triangle = UIGraphicsGetCurrentContext(); // 获得图形上下文

    CGContextMoveToPoint(triangle, 150, 40); // 设置起点

    CGContextAddLineToPoint(triangle, 60, 200); // 设置第二个点

    CGContextAddLineToPoint(triangle,240, 200); // 设置第三个点

    CGContextClosePath(triangle); // 关闭起点和终点

    CGContextStrokePath(triangle); // 渲染，绘制出三角形
}
@end

效果图：

三角形

实心四边形、空心四边形，代码及效果图展示：

代码：

- (void)drawRect:(CGRect)rect
{
    CGContextRef quadrilateral = UIGraphicsGetCurrentContext(); // 获得图形上下文

    CGContextAddRect(quadrilateral, CGRectMake(45, 45, 200, 200)); // 设置起始坐标，以及长和宽

    CGContextSetRGBFillColor(quadrilateral, 1.0, 1.0, 0, 1); // 设置实心颜色

    //CGContextSetRGBStrokeColor(quadrilateral, 1.0, 1.0, 0, 1.0); // 设置空心颜色

    //CGContextStrokePath(quadrilateral); // 渲染空心，绘制四边形 

    CGContextFillPath(quadrilateral); // 渲染实心，绘制出四边形 
}
@end

效果图：

实心四边形、空心四边形

实心圆形、空心圆形、椭圆，代码及效果图展示：

空心圆形代码：

- (void)drawRect:(CGRect)rect
{
    CGContextRef round = UIGraphicsGetCurrentContext(); // 获取上下文

    CGContextAddEllipseInRect(round, CGRectMake(50, 50, 100, 100)); // 画圆

    CGContextSetRGBStrokeColor(round, 0, 0, 0, 1);// 设置颜色

    CGContextStrokePath(round); // 渲染，将空心圆形画出
}
@end

椭圆代码：

- (void)drawRect:(CGRect)rect
{
    CGContextRef circular = UIGraphicsGetCurrentContext(); // 获取上下文

    CGContextAddEllipseInRect(circular, CGRectMake(100, 100, 100, 100)); // 画圆(100,100 变成不等大的就是椭圆，这里不再贴重复代码)

    CGContextSetRGBFillColor(circular, 1.0, 0, 1.0, 1);// 设置颜色

    CGContextFillPath(circular); // 渲染，将实心圆形画出
}
@end

空心圆形、实心圆形、椭圆

实心圆弧、空心圆弧、圆环，代码及效果图展示：

实心圆弧：

- (void)drawRect:(CGRect)rect
{
    CGContextRef arc = UIGraphicsGetCurrentContext(); // 获取上下文 

    CGContextMoveToPoint(arc, 150, 150); // 画线

    CGContextAddLineToPoint(arc, 150, 150); // 画线

    CGContextAddArc(arc, 150, 150, 100, M_PI_2, M_PI, 0); // (150,150)圆心 （100）半径 （M_PI_2） 弧度开始的大小 （M_PI） 弧度结束的大小 (0,1)顺时针, 逆时针

    CGContextClosePath(arc); // 关闭路径

    [[UIColor purpleColor]set]; // 设置颜色

    CGContextFillPath(arc); // 3.渲染（ Fill 改成 Stroke 变成空心，不重复贴代码） 
}
@end

环形代码：

- (void)drawRect:(CGRect)rect
{
    CGContextRef annular = UIGraphicsGetCurrentContext();

    CGContextAddArc(annular, 100, 100, 50, 1, 20, 0);

    CGContextSetLineWidth(annular, 10);

    [[UIColor greenColor]set];

    CGContextStrokePath(annular);
}
@end

效果图：

实心圆弧、空心圆弧、圆环