iOS高级-QuartzCore框架-2D绘图-实例:小黄人

#define MJColor(r,g,b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0]

1.自定义一个MJHumanView,继承自UIView
2.默认View(整一个View)的Class设置为MJHumanView
3.实现drawRect:方法
-(void)drawRect:(CGRect)rect
{
//1.上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();

//2.身体
drawBody(ctx,rect);

//3.嘴(微笑)
drawMouth(ctx,rect);

//4.画眼睛
drawEyes(ctx,rect);
}

二、画身体
//画身体
void drawBody(CGContextRef ctx,CGRect rect)
{
//上半圆
CGFloat topX = rect.size.width *0.5;
CGFloat topY = MJTopY;
CGFloat topRadius = MJRadius; //半径因为经常要用,所以设为宏
CGContextAddArc(ctx,topX,topY,topRadius,0,M_PI,1);

//向下延伸
CGFloat middleX = topX - topRadius;
CGFloat middleH = 100; //中间的身体长度
CGFloat middleY = topY + middleH;
CGContextAddLineToPoint(ctx,middleX,middleY);

//下半圆
CGFloat bottomX = topX;
CGFloat bottomY = middleY;
CGFloat bottomRadius = topRadius;
CGContextAddArc(ctx,bottomX,bottomY,bottomRadius,M_PI,0,1);

//合并路径
CGContextClosePath(ctx);

//设置颜色(写成了宏)
[MJColor(252,218,0) set];

//利用填充方式画出之前的路径
CGContextFillPath(ctx);
}

三、画嘴巴
void drawMouth(CGContextRef ctx,CGRect rect)
{
//中间的控制点
CGFloat controlX = rect.size.width * 0.5;
CGFloat controlY = rect.size.height * 0.4;

//当前点
CGFloat marginX = 20;//控制点与2点在X方向上的间距,越大则越长
CGFloat marginY = 10;//控制点与2点在Y方向上的间距,越大则越尖
CGFloat currentX = controlX - marginX;
CGFloat currentY = controlY - marginY;
CGContextMoveToPoint(ctx,currentX,currentY);

//结束点
CGFloat endX = controlX + marginX;
CGFloat endY = currentY;

//贝塞尔曲线
CGContextAddQuadCurveToPoint(controlX,controlY,endX,endY);

//设置颜色
[[UIColor blackColor] set];
//渲染
CGContextStrokePath(ctx);
}

四、画眼睛
void drawEyes(CGContextRef ctx,CGRect rect)
{
//1.画黑色绑带
CGFloat startX = rect.size.width * 0.5 - MJRadius;
CGFloat startY = MJTopY;
CGContextMoveToPoint(ctx,startX,startY);
CGFloat endX = start +2 * MJRadius;
CGFloat endY = startY;
CGContextAddLineToPoint(ctx,endX,endY);
CGContextSetLineWidth(ctx,15);
[[UIColor blackColor] set];
//绘制线条
CGontextStrokePath(ctx);

//2.画最外圈的镜框
[MJColor(61,62,66) set];
CGFloat frameRadius = MJRadius * 0.4;
CGFloat frameY = startY;
CGFloat frameX = rect.size.width * 0.5 - MJRadius;
CGContextAddArc(ctx,frameX,frameY,frameRadius,0,M_PI * 2,0);

CGContextFillPath(ctx);

//3.画里面的白色框
[[UIcolor whiteColor] set];
CGFloat whiteRadius = frameRadius * 0.7;
CGFloat whiteY = frameY;
CGFloat whiteX =frameX;
CGContextAddArc(ctx,whiteX,whiteY,whiteRadius,0,M_PI * 2,0);

CGContextFillPath(ctx);

PS:眼珠同理
}

时间: 2024-11-08 10:21:00

iOS高级-QuartzCore框架-2D绘图-实例:小黄人的相关文章

iOS高级-QuartzCore框架-2D绘图

一.理论知识什么是Quartz2D Quartz2D实例 Quartz2D在iOS开发中的价值 图形上下文 自定义View drawRect:方法 绘图顺序(后盖前) Quartz2D须知 二.画线段1.新建一个类MJLineView,继承自UIView.2.拖一个UIView,Class为MJLineView3.在drawRect:方法里画图-(void)drawRect:(CGRect)rect{ //1.获得图形上下文 CGContextRef ctx = UIGraphicsGetCur

iOS高级-QuartzCore框架-CoreAnimation和UIView动画的使用

一.UIView封装的动画图层动画有2个致命的缺点:1>默认情况下会反弹.2>你所看到的动画都是假象,图层的属性一直都没有变过所以建议能用UIView就用UIView,实在不行再用图层.1.UIView的移动动画-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ [UIView beginAnimations:nil context:nil]; //动画执行完毕后,会自动调用self的animateStop方法(用这

iOS高级-QuartzCore框架-图形上下文栈、矩阵操作、裁剪、重绘(刷帧)

一.图形上下文栈1.自定义一个MJView,继承自UIView2.将默认View的Class设置为MJView3.实现drawRect:方法-(void)drawRect:(CGRect)rect{ //1.获得上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(): //将当前的ctx拷贝一份放到栈中 CGContextSaveGState(ctx): //设置绘图状态 CGContextSetLineWidth(ctx,10): [[UICo

iOS高级-QuartzCore框架-CALayer图层

掌握CALayer的基本属性CALayer和UIView的关系position和anchorPoint的作用 CALayer CALayer的基本使用 CALayer的属性 //边框宽度(从Layer里面圈出一块出来作为边框)self.purpleView.layer.borderWidth = 10;//边框颜色self.purpleView.layer.borderColor = [UIColor redColor] .CGColor;//圆角self.purpleView.layer.co

iOS开发 - Quartz2D绘制小黄人

Quartz2D绘制小黄人 - (void)drawRect:(CGRect)rect { // 1.上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2.身体 drawBody(ctx, rect); // 3.嘴(微笑) drawMouth(ctx, rect); // 4.画眼睛 drawEyes(ctx, rect); } /** * 眼睛 */ void drawEyes(CGContextRef ctx, CGRect

微信小程序相关三、css写小黄人

小程序上课第三天,因为今天院里有活动,所以没去上课,第四天上午又因为要召开入党转正大会,又耽误了一上午,下午去上课,要了资料.这两天讲了一些零零碎碎的东西,做的实例有上面这个小黄人 都是用的css,基本上都是用border,transform:rotate(),animation,和一些细节做的,左边的对话框那里的小尖头也是一个重点细节 下面附上代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=&quo

Quartz2D练习 -- 小黄人

Main.storyboard <?xml version="1.0" encoding="UTF-8" standalone="no"?> <document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="5053" systemVers

利用CoreGraphics画小黄人

简单的利用 CoreGraphics 画一个小黄人 话不多说,全在代码里面,挺简单的一个东西 ///画身体 void drawBody(CGContextRef context,CGRect rect) { ///设置颜色 [[UIColor yellowColor] set]; CGFloat startX = 100; CGFloat startY = 120; ///将画笔移动到指定位置 CGContextMoveToPoint(context, startX, startY); CGFl

css3实现小黄人

效果就像这样: 不废话,直接上代码! hrml代码: <!DOCTYPE html> <html> <head lang="zh"> <meta charset="UTF-8"> <title>纯CSS3画出小黄人并实现动画效果</title> <Link href="index.css" type="text/css" rel="styl