[73→100]iOS开发04：从绘制小黄人学习用Quartz2D自定义UIView

iOS上怎么绘制如下的小黄人呢？

小黄人.png

在iOS系统中，UIView是最基础的显示控件，UILabel、UIButton都是它的子类。如果需要自定义新的UI控件样式，它也必须继承自UIView。

这里我们先自定义一个MinionsView试试，它的m文件如下：

#import "MinionsView.h"
@implementation MinionsView
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/
@end

你会发现其中生成了一段被注释方法 drawRect ，而这正是自定义View最核心的方法。一般情况下它只在视图显示在屏幕上的时候被系统调用一次。

接下来的问题是怎么绘制出我们想要的View样式呢？

iOS给我们提供一个二维图形绘制引擎Quartz 2D。

Quartz 2D是一个二维图形绘制引擎，支持iOS环境和Mac OS X环境。我们可以使用Quartz 2D API来实现许多功能，如基本路径的绘制、透明度、描影、绘制阴影、透明层、颜色管理、反锯齿、PDF文档生成和PDF元数据访问。在需要的时候，Quartz 2D还可以借助图形硬件的功能。
在Mac OS X中，Quartz 2D可以与其它图形图像技术混合使用，如Core Image、Core Video、OpenGL、QuickTime。例如，通过使用 QuickTime的GraphicsImportCreateCGImage函数，可以用 Quartz从一个 QuickTime图形导入器中创建一个图像。

Quartz 2D是一个纯C的库，接口完全面向过程，挺简单的。

一、绘制流程

基本流程3步：

获得图形上下文：
CGContextRef context = UIGraphicsGetCurrentContext();
绘制图形。
将绘制的图形显示在UIView上。

CGContextFillPath(context); 
CGContextStrokePath(context);

这里面上下文有点像画笔，存放着画笔的宽度、空心颜色、实心颜色，为了避免频繁设置属性，可以保存到栈里面。

    // 保存CG上下文，放入栈中
    CGContextSaveGState(context);
    // 将CG上下文出栈，替换当前的上下文
    CGContextRestoreGState(context);

二、绘制基础元素

绘制线条

#pragma mark - 绘制线条
void drawline(){
    
    #pragma mark - 绘制斜线
    // 1:获得图形上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    // 保存CG上下文，放入栈中
    CGContextSaveGState(context);
    // 2:绘制图形
    // 设置一下线段的宽度
    CGContextSetLineWidth(context, 10);
    // 设置颜色
    CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);
    // 设置起点
    CGContextMoveToPoint(context, 10, 10);
    // 设置线条终点
    CGContextAddLineToPoint(context, 100, 100);
    // 3:将绘制的图形显示在UIView上
    CGContextStrokePath(context);   // 以空心的方式画出
    
    #pragma mark - 绘制两条线
    // 将CG上下文出栈，替换当前的上下文
    CGContextRestoreGState(context);
    [[UIColor blueColor] set];
//    CGContextSetLineWidth(context, 10);
    // 设置线条头尾部的样式
    // kCGLineCapButt: 该属性值指定不绘制端点， 线条结尾处直接结束。这是默认值。
    // kCGLineCapRound: 该属性值指定绘制圆形端点， 线条结尾处绘制一个直径为线条宽度的半圆
    // kCGLineCapSquare: 该属性值指定绘制方形端点。
    CGContextSetLineCap(context, kCGLineCapRound);
    // 设置线段转折点的样式
    CGContextSetLineJoin(context, kCGLineJoinRound);
    // 画线
    CGContextMoveToPoint(context, 100, 120);
    CGContextAddLineToPoint(context, 150, 120);
    CGContextAddLineToPoint(context, 150, 180);
    CGContextAddLineToPoint(context, 200, 180);
    CGContextStrokePath(context);
}

绘制四边形

#pragma mark - 绘制实心四边形
void drawR(){
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextAddRect(context, CGRectMake(10, 10, 120, 180));
    [[UIColor purpleColor] setFill];
    CGContextFillPath(context);
}

绘制三角形

#pragma mark - 绘制空心三角形
void drawTriangle(){
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextMoveToPoint(context, 0, 0);
    CGContextAddLineToPoint(context, 100, 100);
    CGContextAddLineToPoint(context, 150, 100);
    //关闭路径(连接起点和最后一个点)
    CGContextClosePath(context);
    [[UIColor redColor] set];
    CGContextStrokePath(context);
}

绘制圆

#pragma mark - 绘制圆
void drawCircle(){
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextAddEllipseInRect(context, CGRectMake(50, 50, 100, 100));
    CGContextSetLineWidth(context, 10);
    CGContextStrokePath(context);
}

绘制圆弧

#pragma mark - 绘制圆弧
// 角度转弧度
CGFloat arc(CGFloat angle){
    return angle * (M_PI / 180);
}
void drawArc(){
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextAddArc(context, 100, 100, 50, arc(90), arc(200), 1);
//    CGContextStrokePath(context);
    CGContextFillPath(context);
}

绘制文字

#pragma mark - 绘制文字
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];
}

绘制图片

#pragma mark - 绘制图片
void drawPicture(){
    UIImage *image = [UIImage imageNamed:@"1.png"];
//    [image drawAtPoint:CGPointMake(50, 50)];
//    [image drawInRect:CGRectMake(0, 0, 100, 100)];
    [image drawAsPatternInRect:CGRectMake(0, 0, 300, 300)]; //平铺
    NSString *str = @"我是图片";
    [str drawInRect:CGRectMake(30, 30, 100, 30) withAttributes:nil];
}

绘制贝塞尔曲线

#pragma mark - 贝塞尔曲线
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);
}

三、挑战大BOSS：绘制小黄人

//
//  MinionsView.m
//  PandaiOSDemo
//
//  Created by shitianci on 16/7/7.
//  Copyright © 2016年 Panda. All rights reserved.
//

#import "MinionsView.h"
#define JYFRadius 70
#define JYFTopY 100
#define JYFColor(r,g,b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0]


@implementation MinionsView

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
    CGContextRef context = UIGraphicsGetCurrentContext();
    drawBody(context, rect);
    drawMouse(context, rect);
    drawEyes(context, rect);
}

#pragma mark - 绘制身体
void drawBody(CGContextRef context,CGRect rect){
    // 上半圆
    CGFloat topX = rect.size.width * 0.5;
    CGFloat topY = JYFTopY;
    CGFloat topRadius = JYFRadius;
    CGContextAddArc(context, topX, topY, topRadius, 0, M_PI, 1);
    
    // 向下延伸的直线
    CGFloat starPoint = topX - topRadius;
    CGFloat leftHeight = JYFTopY;
    CGFloat endPoint = topY + leftHeight;
    CGContextAddLineToPoint(context, starPoint, endPoint);
    
    // 下半圆
    CGFloat bottomX = topX;
    CGFloat bottomY = endPoint;
    CGFloat bottomRadius = topRadius;
    CGContextAddArc(context, bottomX, bottomY, bottomRadius, M_PI, 0, 1);
    
    // 合并路径
    CGContextClosePath(context);
    
    // 设置颜色
    [JYFColor(252, 218, 0) set];
    
    CGContextFillPath(context);
    
}
#pragma mark - 绘制嘴巴
void drawMouse(CGContextRef context,CGRect rect){
    // 设置一个控制点
    CGFloat controlX = rect.size.width * 0.5;
    CGFloat controlY = rect.size.height * 0.4;
    
    // 设置当前点
    CGFloat marginX = 20;
    CGFloat marginY = 10;
    CGFloat currentX = controlX - marginX;
    CGFloat currentY = controlY - marginY;
    CGContextMoveToPoint(context, currentX, currentY);
    
    // 设置结束点
    CGFloat endX = controlX + marginX;
    CGFloat endY = currentY;
    
    // 绘制贝塞尔曲线
    CGContextAddQuadCurveToPoint(context, controlX, controlY, endX, endY);
    
    // 设置颜色
    [[UIColor blackColor] set];
    
    // 显示
    CGContextStrokePath(context);
}
#pragma mark - 绘制眼睛
void drawEyes(CGContextRef context,CGRect rect){
    // 黑色绑带
    
    // 起点
    CGFloat startPointX = rect.size.width * 0.5 - JYFRadius;
    CGFloat startPointY = JYFTopY;
    CGContextMoveToPoint(context, startPointX, startPointY);
    
    // 结束点
    CGFloat endX = startPointX + JYFRadius * 2;
    CGFloat endY = startPointY;
    CGContextAddLineToPoint(context, endX, endY);
    CGContextSetLineWidth(context, 15);
    
    [[UIColor blackColor] set];
    CGContextStrokePath(context);
    
    // 灰色镜框
    [JYFColor(61, 62, 66) set];
    CGFloat kuangRadius = JYFRadius * 0.4;
    CGFloat kuangX = rect.size.width * 0.5 - kuangRadius;
    CGFloat kuangY = startPointY;
    CGContextAddArc(context, kuangX + 25, kuangY, kuangRadius, 0, M_PI * 2, 0);
    CGContextFillPath(context);
    
    // 白色镜框
    [[UIColor whiteColor] set];
    CGFloat whiteRadius = kuangRadius * 0.7;
    CGFloat whiteX = kuangX;
    CGFloat whiteY = kuangY;
    CGContextAddArc(context, whiteX + 25, whiteY, whiteRadius, 0, M_PI * 2, 0);
    CGContextFillPath(context);
    
    // 黑色眼珠
    [[UIColor blackColor] set];
    CGFloat eyeRadius = whiteRadius * 0.5;
    CGFloat eyeX = whiteX;
    CGFloat eyeY = whiteY;
    CGContextAddArc(context, eyeX + 25, eyeY, eyeRadius, 0, M_PI * 2, 1);
    CGContextFillPath(context);
}

@end

参考资料

Quartz 2D编程指南(1) －概览
极客学院视频·IOS项目开发实战——绘制小黄人
Quartz2D

Panda
2016-07-07

[73→100]iOS开发04：从绘制小黄人学习 用Quartz2D自定义UIView

一、绘制流程

二、绘制基础元素

三、挑战大BOSS：绘制小黄人

参考资料

你可能感兴趣的:([73→100]iOS开发04：从绘制小黄人学习 用Quartz2D自定义UIView)

[73→100]iOS开发04：从绘制小黄人学习用Quartz2D自定义UIView

你可能感兴趣的:([73→100]iOS开发04：从绘制小黄人学习用Quartz2D自定义UIView)