初识贝塞尔曲线

1.UIBezierPath简介

UIBezierPath类是Core Graphics框架关于path的一个封装。可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状。

2.使用UIBezierPath绘图的优点

使用方便,易于阅读,便于管理

3.初识UIBezierPath中的常用的属性和方法

Drawing properties

@property(nonatomic) CGFloat lineWidth;//线宽
//终点连接类型
 kCGLineCapButt,//斜角连接
 kCGLineCapRound,//圆滑衔接 
 kCGLineCapSquare//斜角连接
@property(nonatomic) CGLineCap lineCapStyle;
//交叉点的类型
 kCGLineJoinMiter
 kCGLineJoinRound
 kCGLineJoinBevel
@property(nonatomic) CGLineJoin lineJoinStyle;
@property(nonatomic) CGFloat miterLimit; // 两条线交汇处内角和外角之间的最大距离,需要交叉点类型为kCGLineJoinMiter是生效,最大限制为10,这个限制值有助于避免在连接线段志坚的尖峰
@property(nonatomic) CGFloat flatness;// 个人理解为绘线的精细程度,默认为0.6,数值越大,需要处理的时间越长
@property(nonatomic) BOOL usesEvenOddFillRule;  // 决定是否使用even-odd或者non-zero规则

path construction

//设置画笔的起始点
- (void)moveToPoint:(CGPoint)point;
//从当前点到指定点绘制直线
- (void)addLineToPoint:(CGPoint)point;
//添加贝塞尔曲线
//endPoint终点 controlPoint1、controlPoint2控制点
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
//endPoint终点 controlPoint控制点
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
//添加弧线
 center弧线圆心坐标 radius弧线半径 startAngle弧线起始角度 endAngle弧线结束角度 clockwise是否顺时针绘制
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise 
//闭合路径,封闭未形成闭环的路径
- (void)closePath;
//移除所有的点,删除所有的subPath
- (void)removeAllPoints;
//追加bezierPath路径
- (void)appendPath:(UIBezierPath *)bezierPath;
// 创建并返回一个新的反转内容的当前路径曲线路径的对象。
- (UIBezierPath *)bezierPathByReversingPath 
// 用指定的仿射变换矩阵变换路径的所有点
- (void)applyTransform:(CGAffineTransform)transform;
//填充
- (void)fill; 
//路径绘制
- (void)stroke; 
//在这以后的图形绘制超出当前路径范围则不可见
- (void)addClip; 

4.画图示例代码

直线图

// 设置线的填充色
  [[UIColor redColor] setStroke];
  // 新建一个bezier对象
  UIBezierPath *bezierPath = [UIBezierPath bezierPath];
  // 设置线宽度
  bezierPath.lineWidth = 10;
  // 设置线两头样式
  bezierPath.lineCapStyle = kCGLineCapRound;
  // 设置起点、终点坐标
  [bezierPath moveToPoint:CGPointMake(10, 10)];
  [bezierPath addLineToPoint:CGPointMake(100, 100)];
  // 开始绘制
  [bezierPath stroke];

矩形图

// 设置线的填充色
[[UIColor redColor] setStroke];
// 新建一个bezier对象,此对象用于绘制矩形,需要传入绘制的矩形的Frame
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRect:CGRectMake(10, 10, 50, 50)];
// 设置线宽度
bezierPath.lineWidth = 10;
// 设置线两头样式
bezierPath.lineCapStyle = kCGLineCapRound;
 // 开始绘制
[bezierPath stroke];

圆角矩形

// 设置线的填充色
[[UIColor redColor] setStroke];
// 新建一个bezier对象,此对象用于绘制一个圆角矩形
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 50, 50)cornerRadius:10];
// 设置线宽度
bezierPath.lineWidth = 10;
// 开始绘制
[bezierPath stroke];
// rect: 需要画的矩形的Frame 
//corners: 哪些部位需要画成圆角  
//cornerRadius: 圆角的Size

部分圆角矩形

// 设置线的填充色
[[UIColor redColor] setStroke];
// 新建一个bezier对象,此对象用于绘制一个部分圆角的矩形,左上、右下
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 50, 50) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(10, 10)];
// 设置线宽度
bezierPath.lineWidth = 10;
// 开始绘制
[bezierPath stroke];

// 设置线的填充色
[[UIColor redColor] setStroke];
// 新建一个bezier对象,此对象用于绘制内切圆,需要传入绘制内切圆的矩形的Frame
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 10, 50, 50)];
// 设置线宽度
bezierPath.lineWidth = 10;
// 设置线两头样式
bezierPath.lineCapStyle = kCGLineCapRound;
// 开始绘制
[bezierPath stroke];
//center: 圆心坐标 
//radius: 圆的半径 
//startAngle: 绘制起始点角度 
//endAngle: 绘制终点角度 
//clockwise: 是否顺时针 

圆弧

// 设置线的填充色 
[[UIColor redColor] setStroke]; 
// 新建一个bezier对象,此对象用于绘制一个圆弧 UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:110 startAngle:0 endAngle:M_PI_2 clockwise:NO]; // 设置线宽度 
bezierPath.lineWidth = 10;  
// 开始绘制 
[bezierPath stroke];

二阶曲线

// 设置线的填充色
[[UIColor redColor] setStroke];
// 新建一个bezier对象
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
// 设置线宽度
bezierPath.lineWidth = 10;
// 设置线两头样式
bezierPath.lineCapStyle = kCGLineCapRound;
// 设置起点、终点坐标
[bezierPath moveToPoint:CGPointMake(100, 100)];
[bezierPath addQuadCurveToPoint:CGPointMake(200, 200) controlPoint:CGPointMake(300, 0)];
// 开始绘制
[bezierPath stroke];

三阶曲线

// 设置线的填充色 
[[UIColor redColor] setStroke];  
// 新建一个bezier对象 
UIBezierPath *bezierPath = [UIBezierPath bezierPath]; 
// 设置线宽度 
bezierPath.lineWidth = 10; 
// 设置线两头样式 
bezierPath.lineCapStyle = kCGLineCapRound; 
// 设置起点、终点坐标 
[bezierPath moveToPoint:CGPointMake(100, 100)]; [bezierPath addCurveToPoint:CGPointMake(200, 200) controlPoint1:CGPointMake(150, 0) controlPoint2:CGPointMake(150, 300)];  
// 开始绘制 
[bezierPath stroke];

多阶曲线

// 设置线的填充色 
[[UIColor redColor] setStroke];  
// 新建一个bezier对象 
UIBezierPath *bezierPath = [UIBezierPath bezierPath]; 
// 设置线宽度 
bezierPath.lineWidth = 10; 
// 设置线两头样式 
bezierPath.lineCapStyle = kCGLineCapRound; 
// 设置起点、终点坐标 
[bezierPath moveToPoint:CGPointMake(100, 100)]; [bezierPath addCurveToPoint:CGPointMake(200, 200) controlPoint1:CGPointMake(150, 0) controlPoint2:CGPointMake(150, 300)];  
// 创建第二条贝塞尔曲线 
UIBezierPath *bezierPath2 = [UIBezierPath bezierPath]; // 设置起点、终点坐标 
[bezierPath2 moveToPoint:CGPointMake(200, 200)]; [bezierPath2 addCurveToPoint:CGPointMake(290, 290) controlPoint1:CGPointMake(250, 0) controlPoint2:CGPointMake(250, 300)]; 
// 将第二条线,加到第一条线上面去 
[bezierPath appendPath:bezierPath2];  
// 开始绘制 
[bezierPath stroke];

4.github demo地址

https://github.com/smallSmallWhite/BezierCurve.git

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容