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
参考资料
Panda
2016-07-07
