iOS学习笔记-054.自定义View02——小黄人

自定义View02小黄人
一二次曲线函数

二三次曲线函数

三代码

四图示

自定义View02——小黄人

一、二次曲线函数

二次曲线函数

void CGContextAddQuadCurveToPoint (
CGContextRef c,
CGFloat cpx,  //控制点 x坐标
CGFloat cpy,  //控制点 y坐标
CGFloat x,  //直线的终点 x坐标
CGFloat y  //直线的终点 y坐标
);

执行完函数貌似current point不会变化，没有具体测试过

二、三次曲线函数

Curves

画曲线，一般是一条直线，然后定义几个控制点，使直线变弯曲。

三次曲线函数

void CGContextAddCurveToPoint (
CGContextRef c,
CGFloat cp1x, //控制点1 x坐标
CGFloat cp1y, //控制点1 y坐标
CGFloat cp2x, //控制点2 x坐标
CGFloat cp2y, //控制点2 y坐标
CGFloat x,  //直线的终点 x坐标
CGFloat y  //直线的终点 y坐标
);

假如第二个控制点（cp2x，cp2y）比（cp1x,cp1y） 更接近current point，那么会形成一个封闭的曲线

三、代码

//
//  WMYellowManView.m
//  03_UIView42_小黄人
//
//  Created by 杞文明 on 2016/04/13 09:01:00   星期三
//  Copyright © 2016年 杞文明. All rights reserved.
//

#import "WMYellowManView.h"

#define WMTopX rect.size.width*0.5
#define WMTopY 150;
#define WMTopRadius 80;

@implementation WMYellowManView

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {

//1.获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();

//画身体
[self drawBody:rect context:ctx];

//画眼睛
[self drawEyes:rect context:ctx];

//画嘴
[self drawMouth:rect context:ctx];
}

//画嘴
-(void)drawMouth:(CGRect)rect context:(CGContextRef)ctx{
// 控制点
CGFloat controllerX = WMTopX;
CGFloat controllerY = rect.size.height * 0.5 ;
// 当前点
CGFloat maginX = 20;
CGFloat maginY = 10;
CGFloat currentX =  controllerX - maginX;
CGFloat currentY =  controllerY - maginY;
CGContextMoveToPoint(ctx, currentX, currentY);

// 结束点
CGFloat endX = controllerX + maginX;
CGFloat endY = currentY;

// 划线  二次曲线
CGContextAddQuadCurveToPoint(ctx, controllerX, controllerY, endX, endY);
//设置线条的大小
CGContextSetLineWidth(ctx, 2);
//设置颜色
[[UIColor blackColor]set];
//渲染
CGContextStrokePath(ctx);
}

//画眼睛
-(void)drawEyes:(CGRect)rect context:(CGContextRef)ctx{

//----------眼镜架-------------
//设置起点
CGFloat startX = WMTopX-WMTopRadius;
CGFloat startY = WMTopY;
CGContextMoveToPoint(ctx, startX, startY);

//结束点
CGFloat endX = WMTopX+WMTopRadius;
CGFloat endY = WMTopY;
CGContextAddLineToPoint(ctx, endX, endY);

//设置线条宽度
CGContextSetLineWidth(ctx, 18);

//重置颜色
[[UIColor blackColor]set];
CGContextStrokePath(ctx);

//----------大眼圈-------------
CGFloat maxEyeRadius = 30;
CGFloat maxLeftX = WMTopX-maxEyeRadius;
CGFloat maxY = WMTopY;
CGFloat maxRightX = WMTopX+maxEyeRadius;
//左
CGContextAddArc(ctx, maxLeftX, maxY, maxEyeRadius, 0, 2*M_PI, 0);
//右
CGContextAddArc(ctx, maxRightX, maxY, maxEyeRadius, 0, 2*M_PI, 0);
CGContextFillPath(ctx);

//----------小眼圈-------------
CGFloat smallEyeRadius = 20;
CGFloat smallLeftX = maxLeftX;
CGFloat smallY = maxY;
CGFloat smallRightX = maxRightX;
//左
CGContextAddArc(ctx, smallLeftX, smallY, smallEyeRadius, 0, 2*M_PI, 0);
//右
CGContextAddArc(ctx, smallRightX, smallY, smallEyeRadius, 0, 2*M_PI, 0);
[[UIColor whiteColor] set];
CGContextFillPath(ctx);

//-------------大眼球---------------
CGFloat maxEyeBallRadius = 10;
CGFloat maxBallLeftX = WMTopX-maxEyeBallRadius-10;
CGFloat maxBallY = WMTopY;
CGFloat maxBallRightX = WMTopX+maxEyeBallRadius+10;
//左
CGContextAddArc(ctx, maxBallLeftX, maxBallY, maxEyeBallRadius, 0, 2*M_PI, 0);
//右
CGContextAddArc(ctx, maxBallRightX, maxBallY, maxEyeBallRadius, 0, 2*M_PI, 0);
[[UIColor blackColor] set];
CGContextFillPath(ctx);

//--------------小眼球---------------
CGFloat smallEyeBallRadius = 2.5;
CGFloat smallBallLeftX = maxBallLeftX - smallEyeBallRadius;
CGFloat smallBallY = maxY;
CGFloat smallBallRightX = maxBallRightX- smallEyeBallRadius;
//左
CGContextAddArc(ctx, smallBallLeftX, smallBallY, smallEyeBallRadius, 0, 2*M_PI, 0);
//右
CGContextAddArc(ctx, smallBallRightX, smallBallY, smallEyeBallRadius, 0, 2*M_PI, 0);
[[UIColor whiteColor] set];
CGContextFillPath(ctx);

}

//画身体
-(void)drawBody:(CGRect)rect context:(CGContextRef)ctx{
//2.绘制
//-----------------2.1画身体------------------------------
CGFloat topX = WMTopX;
CGFloat topY = WMTopY;
CGFloat topRadius = WMTopRadius;
//2.1.1头部的圆弧
CGContextAddArc(ctx, topX, topY, topRadius, -M_PI, 0, 0);

//2.1.2 画身体的线
CGFloat middX = topX + topRadius;
CGFloat middY = topY + 200;
CGContextAddLineToPoint(ctx, middX, middY);

//2.1.3 画下半圆
CGFloat bottomX = topX;
CGFloat bottomY = middY;
CGFloat bottomRadius = topRadius;
CGContextAddArc(ctx, bottomX, bottomY, bottomRadius, 0, M_PI, 0);

//2.1.4 关闭路径
CGContextClosePath(ctx);
[[UIColor  colorWithRed:253/255.0 green:218/255.0 blue:0 alpha:1.0] set];

//3.显示
CGContextFillPath(ctx);
}

@end

四、图示