在一个UIView上画图:
代码:
//
// QJView.h
// 14-(2)画小黄人
//
// Created by 瞿杰 on 15/10/27.
// Copyright © 2015年 itcast. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface QJView : UIView
@end
//
// QJView.m
// 14-(2)画小黄人
//
// Created by 瞿杰 on 15/10/27.
// Copyright © 2015年 itcast. All rights reserved.
//
#import "QJView.h"
#define Width 200.0
#define Hight 200.0
@implementation QJView
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// 画身体
[self drawBody];
// 画嘴
[self drawMouth];
// 画眼睛
[self drawEyes];
// 画库子
[self drawJeans];
// 画头发
[self drawHair];
// 画手
}
/**
* 画身体
*/
- (void)drawBody{
// 1.获得图形上下文
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
// 2.画图
CGFloat radius = Width / 2.0 ;
CGFloat upCircleX = self.frame.size.width / 2.0 ;
CGFloat upCircleY = self.frame.size.height / 2.0 - Hight / 2;
// 画上半圆弧
CGContextAddArc(context, upCircleX, upCircleY, radius, 0, M_PI, 1);
// CGContextAddArcToPoint(<#CGContextRef _Nullable c#>, <#CGFloat x1#>, <#CGFloat y1#>, <#CGFloat x2#>, <#CGFloat y2#>, <#CGFloat radius#>)
// 画线
CGFloat midleX = upCircleX - radius;
CGFloat midleY = upCircleY + Hight;
CGContextAddLineToPoint(context, midleX, midleY);
// 画下半圆弧
CGFloat downCircleX = upCircleX ;
CGFloat downCircleY = midleY;
CGContextAddArc(context, downCircleX, downCircleY, radius, M_PI, M_PI *2, 1);
// 封闭
CGContextClosePath(context);
// 设置身体的颜色
[[UIColor colorWithRed:254.0/255 green:202.0/255 blue:22.0/255 alpha:0.7] set];
// CGContextSetRGBFillColor(<#CGContextRef _Nullable c#>, <#CGFloat red#>, <#CGFloat green#>, <#CGFloat blue#>, <#CGFloat alpha#>)
// 3.渲染
CGContextFillPath(context);
// 恢复图形上下文的状态
CGContextRestoreGState(context);
}
/**
* 画嘴
*/
- (void)drawMouth{
// 1.获得图形上下文
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
// 2.画图
// 嘴宽
CGFloat mouthWidth = 90;
// 嘴角与控制点在垂直方法上的闹中间隔
CGFloat space = 30;
CGFloat mouthCpX = self.frame.size.width / 2.0;
CGFloat mouthCpY = self.frame.size.height / 2.0 ;
CGFloat mouthLeftX = mouthCpX - mouthWidth / 2.0;
CGFloat mouthLeftY = mouthCpY - space ;
CGFloat mouthRightX = mouthCpX + mouthWidth / 2.0;
CGFloat mouthRightY = mouthLeftY ;
// 设置初始点
CGContextMoveToPoint(context, mouthLeftX, mouthLeftY);
// 画一个控制点的曲线
CGContextAddQuadCurveToPoint(context, mouthCpX, mouthCpY, mouthRightX, mouthRightY);
// 设置线宽
CGContextSetLineWidth(context, 10);
// 设置颜色
[[UIColor colorWithRed:0.4 green:0.6 blue:0.7 alpha:0.7]set];
// 3.渲染
CGContextStrokePath(context);
// CGContextFillPath(context);
CGContextRestoreGState(context);
}
/**
* 画左右两只眼睛
*/
- (void)drawEyes{
// 1.获得图形上下文
CGContextRef context = UIGraphicsGetCurrentContext();
// 2.存储图形上下文当前旧的状态
CGContextSaveGState(context);
// 3.画图
// 3.1 画线
CGFloat lineP1X = self.frame.size.width / 2.0 - Width / 2.0;
CGFloat lineP1Y = self.frame.size.height / 2.0 - Hight / 2;
CGFloat lineP2X = lineP1X + Width ;
CGFloat lineP2Y = lineP1Y ;
// 设置线宽
CGContextSetLineWidth(context, 10);
// 设置初始点
CGContextMoveToPoint(context, lineP1X, lineP1Y);
CGContextAddLineToPoint(context, lineP2X, lineP2Y);
// 渲染
CGContextStrokePath(context);
// 3.2 画左眼
[self drawEyeWithContext:context andInt:1];
// 3.3 画右眼
[self drawEyeWithContext:context andInt:-1];
// 4.恢复图形上下文旧的状态
CGContextRestoreGState(context);
}
/**
* 画一只眼
*
* @param context 图形上下文
* @param flag 1:表示画左眼,-1:表示画右眼
*/
- (void)drawEyeWithContext:(CGContextRef )context andInt:(int)flag{
// 保存图形上下文旧的状态
CGContextSaveGState(context);
CGFloat eye1CircleX = self.frame.size.width / 2.0 - flag * Width / 4.0;
CGFloat eye1CircleY = self.frame.size.height / 2.0 - Hight / 2;
// 圆1
CGFloat eye1Radius1 = Width / 2.0 * 0.35;
CGContextAddArc(context, eye1CircleX, eye1CircleY, eye1Radius1, 0, M_PI * 2, 0);
CGContextFillPath(context);
// 圆2
CGFloat eye1Radius2 = eye1Radius1 * 0.7;
[[UIColor whiteColor]set];
CGContextAddArc(context, eye1CircleX, eye1CircleY, eye1Radius2, 0, M_PI * 2, 0);
CGContextFillPath(context);
// 圆3
CGFloat eye1Circle3X = eye1CircleX + flag * eye1Radius2 * 0.2 ;
CGFloat eye1Circle3Y = eye1CircleY;
CGFloat eye1Radius3 = eye1Radius2 * 0.6;
[[UIColor blueColor]set];
CGContextAddArc(context, eye1Circle3X, eye1Circle3Y, eye1Radius3, 0, M_PI * 2, 0);
CGContextFillPath(context);
// 圆4
CGFloat eye1Radius4 = eye1Radius3 * 0.4;
[[UIColor greenColor] set];
CGContextAddArc(context, eye1Circle3X, eye1Circle3Y, eye1Radius4, 0, M_PI * 2, 0);
CGContextFillPath(context);
// 恢复图形上下文旧的状态
CGContextRestoreGState(context);
}
/**
* 画库子
*/
- (void)drawJeans{
// 取图形上下文
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
// 画库子
int kSegment = 4; // 库子总片数 = kSegment +1
CGFloat add = Width / (kSegment*2) ;
CGFloat pointX = self.frame.size.width * 0.5 - Width * 0.5;
CGFloat pointY = self.frame.size.height * 0.5 + Hight * 0.5;
// 设置初始点
CGContextMoveToPoint(context, pointX, pointY);
// 画一个控制点的曲线
CGContextAddQuadCurveToPoint(context, pointX - 20, pointY + Width * 0.25, pointX, pointY + Width * 0.5);
// CGContextAddLineToPoint(context, pointX, pointY + Width * 0.5);
for (int i = 1; i <= kSegment * 2; i++) {
CGFloat x , y;
x = pointX + i * add;
if (i&1)
y = pointY + Width * 0.3;
else
y = pointY + Width * 0.5;
CGContextAddLineToPoint(context, x, y);
}
CGContextAddQuadCurveToPoint(context, pointX + Width +20, pointY + Width * 0.25, pointX + Width, pointY);
// CGContextAddLineToPoint(context, pointX + Width, pointY );
// 线条闭合
CGContextClosePath(context);
// 设置颜色
[[UIColor colorWithRed:0 green:0 blue:0.7 alpha:0.7]set];
// 设置线的转折点状态,对填充没有效果
// CGContextSetLineJoin(context, kCGLineJoinRound);
// CGContextSetLineWidth(context, 10);
// 渲染
CGContextFillPath(context);
// CGContextStrokePath(context);
// 从栈顶中取出状态恢复图形上下文状态
CGContextRestoreGState(context);
}
/**
* 画头发
*/
- (void)drawHair{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
// 头发X坐标的间隔
CGFloat space = 30;
// 头发长度
CGFloat hairLen = 50;
CGFloat hair1X = self.frame.size.width * 0.5 - space;
CGFloat hair1Y = self.frame.size.height * 0.5 - Hight * 0.5 - Width * 0.4 ;
// 设置第1根毛的初始位置
CGContextMoveToPoint(context, hair1X, hair1Y);
// 画第1根毛曲线
CGFloat cp1X = hair1X + space;
CGFloat cp1Y = hair1Y - hairLen * 0.25 ;
CGFloat cp2X = hair1X - space ;
CGFloat cp2Y = hair1Y - hairLen * 0.75 ;
CGContextAddCurveToPoint(context, cp1X, cp1Y, cp2X, cp2Y, hair1X, hair1Y - hairLen);
CGFloat hair2X = self.frame.size.width * 0.5 ;
CGFloat hair2Y = hair1Y;
// 设置第2根毛的初始位置
CGContextMoveToPoint(context, hair2X, hair2Y);
// 画第2根毛曲线
cp1X = hair2X + space;
cp1Y = hair2Y - hairLen * 0.25 ;
cp2X = hair2X - space ;
cp2Y = hair2Y - hairLen * 0.75 ;
CGContextAddCurveToPoint(context, cp1X, cp1Y, cp2X, cp2Y, hair2X, hair2Y - hairLen);
CGFloat hair3X = self.frame.size.width * 0.5 + space;
CGFloat hair3Y = hair2Y;
// 设置第3根毛的初始位置
CGContextMoveToPoint(context, hair3X, hair3Y);
// 画第3根毛曲线
cp1X = hair3X + space;
cp1Y = hair3Y - hairLen * 0.25 ;
cp2X = hair3X - space ;
cp2Y = hair3Y - hairLen * 0.75 ;
CGContextAddCurveToPoint(context, cp1X, cp1Y, cp2X, cp2Y, hair3X, hair3Y - hairLen);
// 设置线宽
CGContextSetLineWidth(context, 5);
// 渲染
CGContextStrokePath(context);
// 恢复上下文
CGContextRestoreGState(context);
}
@end