使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 。

1:UIBezierPath: UIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC封装。使用此类可以定义常见的圆形、多边形等形状 。我们使用直线、弧(arc)来创建复杂的曲线形状。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。

2:CAShapeLayer: CAShapeLayer顾名思义,继承于CALayer。 每个CAShapeLayer对象都代表着将要被渲染到屏幕上的一个任意的形状(shape)。具体的形状由其path(类型为CGPathRef)属性指定。 普通的CALayer是矩形,所以需要frame属性。CAShapeLayer初始化时也需要指定frame值,但 它本身没有形状,它的形状来源于其属性path 。CAShapeLayer有不同于CALayer的属性,它从CALayer继承而来的属性在绘制时是不起作用的。

实例1:画一个圆形

- (void)viewDidLoad {
[super viewDidLoad]; //创建出CAShapeLayer
self.shapeLayer = [CAShapeLayer layer];
self.shapeLayer.frame = CGRectMake(0, 0, 200, 200);//设置shapeLayer的尺寸和位置
self.shapeLayer.position = self.view.center;
self.shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充颜色为ClearColor //设置线条的宽度和颜色
self.shapeLayer.lineWidth = 1.0f;
self.shapeLayer.strokeColor = [UIColor redColor].CGColor; //创建出圆形贝塞尔曲线
UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)]; //让贝塞尔曲线与CAShapeLayer产生联系
self.shapeLayer.path = circlePath.CGPath; //添加并显示
[self.view.layer addSublayer:self.shapeLayer];
}

现在我们要用到CAShapeLayer的两个参数,strokeEnd和strokeStart

Stroke:用笔画的意思

在这里就是起始笔和结束笔的位置

Stroke为1的话就是一整圈,0.5就是半圈,0.25就是1/4圈。以此类推

如果我们把起点设为0,终点设为0.75

//设置stroke起始点

self.shapeLayer.strokeStart = 0;

self.shapeLayer.strokeEnd = 0.75;

实例2:画两个圆,其中一个圆表示进度

//画两个圆形
-(void)createBezierPath:(CGRect)mybound
{
//外圆
_trackPath = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:(mybound.size.width - 0.7)/ 2 startAngle:0 endAngle:M_PI * 2 clockwise:YES];; _trackLayer = [CAShapeLayer new];
[self.view.layer addSublayer:_trackLayer];
_trackLayer.fillColor = nil;
_trackLayer.strokeColor=[UIColor grayColor].CGColor;
_trackLayer.path = _trackPath.CGPath;
_trackLayer.lineWidth=5;
_trackLayer.frame = mybound; //内圆
_progressPath = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:(mybound.size.width - 0.7)/ 2 startAngle:- M_PI_2 endAngle:(M_PI * 2) * 0.7 - M_PI_2 clockwise:YES]; _progressLayer = [CAShapeLayer new];
[self.view.layer addSublayer:_progressLayer];
_progressLayer.fillColor = nil;
_progressLayer.strokeColor=[UIColor redColor].CGColor;
_progressLayer.lineCap = kCALineCapRound;
_progressLayer.path = _progressPath.CGPath;
_progressLayer.lineWidth=5;
_progressLayer.frame = mybound;
}

实例3:创建一个转动的圆

- (void)viewDidLoad {
[super viewDidLoad]; self.view.backgroundColor=[UIColor whiteColor]; [self circleBezierPath];
//用定时器模拟数值输入的情况
_timer = [NSTimer scheduledTimerWithTimeInterval:0.1
target:self
selector:@selector(circleAnimationTypeOne)
userInfo:nil
repeats:YES];
} -(void)circleBezierPath
{
//创建出CAShapeLayer
self.shapeLayer = [CAShapeLayer layer];
self.shapeLayer.frame = CGRectMake(0, 0, 150, 150);
self.shapeLayer.position = self.view.center;
self.shapeLayer.fillColor = [UIColor clearColor].CGColor; //设置线条的宽度和颜色
self.shapeLayer.lineWidth = 2.0f;
self.shapeLayer.strokeColor = [UIColor redColor].CGColor; //设置stroke起始点
self.shapeLayer.strokeStart = 0;
self.shapeLayer.strokeEnd = 0; //创建出圆形贝塞尔曲线
UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 150, 150)]; //让贝塞尔曲线与CAShapeLayer产生联系
self.shapeLayer.path = circlePath.CGPath; //添加并显示
[self.view.layer addSublayer:self.shapeLayer];
} - (void)circleAnimationTypeOne
{
if (self.shapeLayer.strokeEnd > 1 && self.shapeLayer.strokeStart < 1) {
self.shapeLayer.strokeStart += 0.1;
}else if(self.shapeLayer.strokeStart == 0){
self.shapeLayer.strokeEnd += 0.1;
} if (self.shapeLayer.strokeEnd == 0) {
self.shapeLayer.strokeStart = 0;
} if (self.shapeLayer.strokeStart == self.shapeLayer.strokeEnd) {
self.shapeLayer.strokeEnd = 0;
}
} - (void)circleAnimationTypeTwo
{
CGFloat valueOne = arc4random() % 100 / 100.0f;
CGFloat valueTwo = arc4random() % 100 / 100.0f; self.shapeLayer.strokeStart = valueOne < valueTwo ? valueOne : valueTwo;
self.shapeLayer.strokeEnd = valueTwo > valueOne ? valueTwo : valueOne;
}

实例4:通过点画线组成一个五边线

//画一个五边形
-(void)fiveAnimation
{
UIBezierPath *aPath = [UIBezierPath bezierPath];
//开始点 从上左下右的点
[aPath moveToPoint:CGPointMake(100,100)];
//划线点
[aPath addLineToPoint:CGPointMake(60, 140)];
[aPath addLineToPoint:CGPointMake(60, 240)];
[aPath addLineToPoint:CGPointMake(160, 240)];
[aPath addLineToPoint:CGPointMake(160, 140)];
[aPath closePath];
//设置定点是个5*5的小圆形(自己加的)
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100-5/2.0, 0, 5, 5)];
[aPath appendPath:path]; CAShapeLayer *shapelayer = [CAShapeLayer layer];
//设置边框颜色
shapelayer.strokeColor = [[UIColor redColor]CGColor];
//设置填充颜色 如果只要边 可以把里面设置成[UIColor ClearColor]
shapelayer.fillColor = [[UIColor blueColor]CGColor];
//就是这句话在关联彼此(UIBezierPath和CAShapeLayer):
shapelayer.path = aPath.CGPath;
[self.view.layer addSublayer:shapelayer];
}

实例5:画一条虚线

//画一条虚线
-(void)createDottedLine
{
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
[shapeLayer setBounds:self.view.bounds];
[shapeLayer setPosition:self.view.center];
[shapeLayer setFillColor:[[UIColor clearColor] CGColor]]; // 设置虚线颜色为blackColor
[shapeLayer setStrokeColor:[[UIColor colorWithRed:223/255.0 green:223/255.0 blue:223/255.0 alpha:1.0f] CGColor]]; // 3.0f设置虚线的宽度
[shapeLayer setLineWidth:1.0f];
[shapeLayer setLineJoin:kCALineJoinRound]; // 3=线的宽度 1=每条线的间距
[shapeLayer setLineDashPattern:
[NSArray arrayWithObjects:[NSNumber numberWithInt:3],
[NSNumber numberWithInt:1],nil]]; // Setup the path
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 0, 89);
CGPathAddLineToPoint(path, NULL, 320,89); [shapeLayer setPath:path];
CGPathRelease(path); // 可以把self改成任何你想要的UIView, 下图演示就是放到UITableViewCell中的
[[self.view layer] addSublayer:shapeLayer];
}

实例6:画一个弧线

//画一个弧线
-(void)createCurvedLine
{
UIBezierPath* aPath = [UIBezierPath bezierPath];
aPath.lineWidth = 5.0;
aPath.lineCapStyle = kCGLineCapRound; //线条拐角
aPath.lineJoinStyle = kCGLineCapRound; //终点处理
[aPath moveToPoint:CGPointMake(20, 100)];
[aPath addQuadCurveToPoint:CGPointMake(120, 100) controlPoint:CGPointMake(70, 0)]; self.CurvedLineLayer=[CAShapeLayer layer];
self.CurvedLineLayer.path=aPath.CGPath;
[self.view.layer addSublayer:self.CurvedLineLayer];
}

另外.....

我的愿望是.......

世界和平.........

iOS开发 贝塞尔曲线UIBezierPath(2)的更多相关文章

  1. iOS开发 贝塞尔曲线UIBezierPath(后记)

    使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 . 1:UIBezierPath: UIBezierPath是在 UIKit 中 ...

  2. iOS开发 贝塞尔曲线UIBezierPath

    最近项目中需要用到用贝塞尔曲线去绘制路径 ,然后往路径里面填充图片,找到这篇文章挺好,记录下来 自己学习! 转至 http://blog.csdn.net/guo_hongjun1611/articl ...

  3. iOS开发 贝塞尔曲线

    iOS开发 贝塞尔曲线UIBezierPath - 陌云 时间 2014-03-14 11:04:00  博客园-所有随笔区 原文  http://www.cnblogs.com/moyunmo/p/ ...

  4. 贝塞尔曲线UIBezierPath简单使用

    //常用属性 /* 1.CGPath: 将UIBezierPath类转换成CGPath 2.currentPoint: 当前path的位置,可以理解为path的终点 3.lineWidth: 线条宽度 ...

  5. iOS 使用贝塞尔曲线绘制路径

    使用贝塞尔曲线绘制路径 大多数时候,我们在开发中使用的控件的边框是矩形,或者做一点圆角,是使得矩形的角看起来更加的圆滑. 但是如果我们想要一个不规则的图形怎么办?有人说,叫UI妹子做,不仅省事,还可以 ...

  6. iOS:使用贝塞尔曲线绘制图表(折线图、柱状图、饼状图)

    1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点 ...

  7. iOS贝塞尔曲线(UIBezierPath)的基本使用方法

    简介 UIBezierPath是对Core Graphics框架的一个封装,使用UIBezierPath类我们可以画出圆形(弧线)或者多边形(比如:矩形)等形状,所以在画复杂图形的时候会经常用到. 分 ...

  8. 通过UIBezierPath贝塞尔曲线画圆形、椭圆、矩形

    /**创建椭圆形的贝塞尔曲线*/ UIBezierPath *_ovalPath=[UIBezierPath bezierPathWithOvalInRect:CGRectMake(, , , )]; ...

  9. iOS关于CAShapeLayer与UIBezierPath的知识内容

    使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 . 1:UIBezierPath: UIBezierPath是在 UIKit 中 ...

随机推荐

  1. 2.4G无线模块NRF2401

    RF24L01+,是工作在2.4~2.5GHz 频段的,具备自动重发功能,6 个数据传输通道,最大无线传输速率为2Mbits.MCU 可与该芯片通过SPI 接口访问芯片的寄存器进行配置,达到控制模块. ...

  2. 前端代码编辑器ace 语法提示 代码提示

    本文主要是介绍ace编辑器的语法提示,自动完成.其实没什么可特别介绍的,有始有终吧,把项目中使用到的ace的功能都介绍下. { enableBasicAutocompletion: false, // ...

  3. Web前端开发最佳实践(1):前端开发概述

    引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...

  4. 使用Unity解耦你的系统—PART4——Unity&PIAB

    在前面几篇有关Unity学习的文章中,我对Unity的一些常用功能进行介绍,包括:Unity的基本知识.管理对象之间的关系.生命周期.依赖注入等,今天则是要介绍Unity的另外一个重要功能——拦截(I ...

  5. CodeForces 772B Volatile Kite

    计算几何,直觉. 凭直觉猜的做法,把每条线段的中点连起来,每个点到对应内部线段的距离,取个最小值. #include <iostream> #include <cstdio> ...

  6. bazel使用汇总

    最近重构代码之后,打算在本地用bazel来作项目构建.主要是因为brpc已经支持了bazel,所以在此之前料想会简单许多. 安装比较简单,centos直接用yum就行.按照这个指示: https:// ...

  7. JS中关于换行的2个坑

    //第一个为ul/ol使用中的li使用需要注意的地方 1.<ul id="banner_indicator"><li></li><li&g ...

  8. 【BZOJ 4631】4631: 踩气球 (线段树)

    4631: 踩气球 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 316  Solved: 153 Description 六一儿童节到了, SHUX ...

  9. 【BZOJ 3133】 3133: [Baltic2013]ballmachine (线段树+倍增)

    3133: [Baltic2013]ballmachine Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 148  Solved: 66 Descri ...

  10. BZOJ 3231: [Sdoi2008]递归数列 (JZYZOJ 1353) 矩阵快速幂

    http://www.lydsy.com/JudgeOnline/problem.php?id=3231   和斐波那契一个道理在最后加一个求和即可 #include<cstdio> #i ...