Core Animation - 如何来绘制一个火柴人

简介: Core Animation - 如何来绘制一个火柴人

以后关于这本书,博主不会再细分章节来写博客,而是通过代码和自己的理解直观的呈现出来,当然,顺序还是和这本书的顺序一样。


要绘制一个火柴人,首先需要用到绘图功能,CGPath必不可少,那怎么来绘制呢?

1.png

首先是一个圆,接着是几条线,不过有一点可以确定,他们都是线条构成的,直线可能画起来不难,可是圆呢?有没有直接能画圆的方法呢?当然是有的,下面,博主通过代码的方式,边说边画:


为了更好的管理内存,我们使用UIBezierPath来创建图层,免去了人工释放的麻烦,

需要引入的库QuartzCore.framework
引入头文件  #import <QuartzCore/QuartzCore.h>
//使用UIBezierPath创建涂层
UIBezierPath *path=[[UIBezierPath alloc]init];
//开始画图,先指定一个点开始
[path moveToPoint:CGPointMake(175, 100)];   
//先画一个圆,指定圆心,半径,起始的角度和结束角度
[path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:2*M_PI clockwise:YES];
//画好圆之后,移动这一点到圆的最下方,来画火柴人的身子
[path moveToPoint:CGPointMake(150, 125)];
//先画一条直线,可以看到,x值相等,竖直方向画了一条直线
[path addLineToPoint:CGPointMake(150, 175)];
//这是一条斜线,位于左下角,通过坐标变换可以看出来
[path addLineToPoint:CGPointMake(125, 225)];
//画好左下角的斜线后移动到斜线的起始点
[path moveToPoint:CGPointMake(150, 175)];
//画右下角的那条斜线,通过坐标来观察
[path addLineToPoint:CGPointMake(175, 225)];
//画好之后火柴人就剩下胳膊了,现在移动到这个点来画一条直线
[path moveToPoint:CGPointMake(100, 150)];
//这是一条直线,y不变,x变了100,说明这是一条水平长100的直线
[path addLineToPoint:CGPointMake(200, 150)];
//这里我们的线条已经画完了,现在需要把我们画的线条显示出来
CAShapeLayer *shapeLayer=[CAShapeLayer layer];
//设置线条的颜色
shapeLayer.strokeColor=[UIColor redColor].CGColor;
//设置填充色
shapeLayer.fillColor=[UIColor clearColor].CGColor;
//设置线条宽度
shapeLayer.lineWidth=5;
//设置线条起点终点样式
shapeLayer.lineJoin=kCALineJoinRound;
//设置线条拐角样式
shapeLayer.lineCap=kCALineCapRound;
//把线条的路径交给CAShapeLayer处理成图像
shapeLayer.path=path.CGPath;    
[self.view.layer addSublayer:shapeLayer];

代码下载地址:https://github.com/codeliu6572/FirePeople

目录
相关文章
|
搜索推荐 Java C++
OpenglEs之三角形绘制
Opengl ES连载系列
75 0
Core Animation - 摇动+循环动态画圆
Core Animation - 摇动+循环动态画圆
81 0
Core Animation - 摇动+循环动态画圆
Core Animation - 变换<四>
Core Animation - 变换<四>
87 0
Core Animation - 变换<四>
Core Animation - 变换<三>
Core Animation - 变换<三>
49 0
Core Animation - 变换<三>
Core Animation - 变换<一>
Core Animation - 变换<一>
85 0
Core Animation - 变换<一>
Core Animation - 发光的太阳(附高效设置图片圆角和变圆的方法)
Core Animation - 发光的太阳(附高效设置图片圆角和变圆的方法)
80 0
Core Animation - 发光的太阳(附高效设置图片圆角和变圆的方法)
Core Animation - 如何来绘制三个圆角一个直角的矩形
Core Animation - 如何来绘制三个圆角一个直角的矩形
74 0
Core Animation - 渐变色CAGradientLayer
Core Animation - 渐变色CAGradientLayer
93 0
Core Animation - 变换<二>
Core Animation - 变换<二>
83 0
Core Animation - 变换<五>
Core Animation - 变换<五>
71 0