UIBezierPath+画板,签名档
下边是转自:标哥的技术博客,写在这是为了便于自己查找
前言
笔者在写本篇文章之前,也没有系统学习过贝塞尔曲线,只是曾经某一次的需求需要使用到,才临时百度看了一看而且使用最基本的功能。现在总算有时间停下来好好研究研究这个神奇而伟大的贝塞尔先生!
笔者在学习时,首先看了两遍UIBezierPath
类头文件定义,熟悉了一下相关的属性和方法。
基础知识
使用UIBezierPath
可以创建基于矢量的路径,此类是Core Graphics
框架关于路径的封装。使用此类可以定义简单的形状,如椭圆、矩形或者有多个直线和曲线段组成的形状等。
UIBezierPath
是CGPathRef
数据类型的封装。如果是基于矢量形状的路径,都用直线和曲线去创建。我们使用直线段去创建矩形和多边形,使用曲线去创建圆弧(arc)、圆或者其他复杂的曲线形状。
使用UIBezierPath
画图步骤:
- 创建一个
UIBezierPath
对象 - 调用
-moveToPoint:
设置初始线段的起点 - 添加线或者曲线去定义一个或者多个子路径
- 改变
UIBezierPath
对象跟绘图相关的属性。如,我们可以设置画笔的属性、填充样式等
UIBezierPath
创建方法介绍
我们先看看UIBezierPath
类提供了哪些创建方式,这些都是工厂方法,直接使用即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
+ (instancetype)bezierPath;
+(instancetype)bezierPathWithRect:(CGRect)rect;
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
+(instancetype)bezierPathWithRoundedRect:(CGRect)rect
cornerRadius:(CGFloat)cornerRadius;
+(instancetype)bezierPathWithRoundedRect:(CGRect)rect
byRoundingCorners:(UIRectCorner)corners
cornerRadii:(CGSize)cornerRadii;
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center
radius:(CGFloat)radius
startAngle:(CGFloat)startAngle
endAngle:(CGFloat)endAngle
clockwise:(BOOL)clockwise;
+(instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;
|
下面我们一个一个地介绍其用途。
1
2
3
|
+ (instancetype)bezierPath;
|
这个使用比较多,因为这个工厂方法创建的对象,我们可以根据我们的需要任意定制样式,可以画任何我们想画的图形。
1
2
3
|
+ (instancetype)bezierPathWithRect:(CGRect)rect;
|
这个工厂方法根据一个矩形画贝塞尔曲线。
1
2
3
|
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
|
这个工厂方法根据一个矩形画内切曲线。通常用它来画圆或者椭圆。
1
2
3
4
5
6
7
|
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
cornerRadius:(CGFloat)cornerRadius;
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
byRoundingCorners:(UIRectCorner)corners
cornerRadii:(CGSize)cornerRadii;
|
第一个工厂方法是画矩形,但是这个矩形是可以画圆角的。第一个参数是矩形,第二个参数是圆角大小。 第二个工厂方法功能是一样的,但是可以指定某一个角画成圆角。像这种我们就可以很容易地给UIView
扩展添加圆角的方法了。
1
2
3
4
5
6
7
|
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center
radius:(CGFloat)radius
startAngle:(CGFloat)startAngle
endAngle:(CGFloat)endAngle
clockwise:(BOOL)clockwise;
|
这个工厂方法用于画弧,参数说明如下: center
: 弧线中心点的坐标 radius
: 弧线所在圆的半径 startAngle
: 弧线开始的角度值endAngle
: 弧线结束的角度值 clockwise
: 是否顺时针画弧线
温馨提示:我们下面的代码都是在自定义的BezierPathView类中的
- (void)drawRect:(CGRect)rect
方法中调用
画三角形
先看效果图:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
// 画三角形
-(void)drawTrianglePath{
UIBezierPath*path= [UIBezierPathbezierPath];
[path moveToPoint:CGPointMake(20,20)];
[path addLineToPoint:CGPointMake(self.frame.size.width- 40,20)];
[path addLineToPoint:CGPointMake(self.frame.size.width/ 2,self.frame.size.height- 20)];
// 最后的闭合线是可以通过调用closePath方法来自动生成的,也可以调用-addLineToPoint:方法来添加
// [path addLineToPoint:CGPointMake(20, 20)];
[pathclosePath];
// 设置线宽
path.lineWidth= 1.5;
// 设置填充颜色
UIColor*fillColor= [UIColorgreenColor];
[fillColorset];
[pathfill];
// 设置画笔颜色
UIColor*strokeColor= [UIColorblueColor];
[strokeColorset];
// 根据我们设置的各个点连线
[pathstroke];
}
|
我们设置画笔颜色通过set
方法:
1
2
3
4
|
UIColor *strokeColor= [UIColorblueColor];
[strokeColorset];
|
如果我们需要设置填充颜色,比如这里设置为绿色,那么我们需要在设置画笔颜色之前先设置填充颜色,否则画笔颜色就被填充颜色替代了。也就是说,如果要让填充颜色与画笔颜色不一样,那么我们的顺序必须是先设置填充颜色再设置画笔颜色。如下,这两者顺序不能改变。因为我们设置填充颜色也是跟设置画笔颜色一样调用UIColor
的-set
方法。
1
2
3
4
5
6
7
8
9
10
|
// 设置填充颜色
UIColor*fillColor= [UIColorgreenColor];
[fillColorset];
[pathfill];
// 设置画笔颜色
UIColor *strokeColor= [UIColorblueColor];
[strokeColorset];
|
画矩形
先看效果图:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
// 画矩形
-(void)drawRectPath{
UIBezierPath*path= [UIBezierPath bezierPathWithRect:CGRectMake(20,20,self.frame.size.width- 40,self.frame.size.height- 40)];
path.lineWidth= 1.5;
path.lineCapStyle= kCGLineCapRound;
path.lineJoinStyle= kCGLineJoinBevel;
// 设置填充颜色
UIColor*fillColor= [UIColorgreenColor];
[fillColorset];
[pathfill];
// 设置画笔颜色
UIColor*strokeColor= [UIColorblueColor];
[strokeColorset];
// 根据我们设置的各个点连线
[pathstroke];
}
|
lineCapStyle
属性是用来设置线条拐角帽的样式的,其中有三个选择:
1
2
3
4
5
6
7
8
9
|
/* Line cap styles. */
typedef CF_ENUM(int32_t,CGLineCap){
kCGLineCapButt,
kCGLineCapRound,
kCGLineCapSquare
};
|
其中,第一个是默认的,第二个是轻微圆角,第三个正方形。
lineJoinStyle
属性是用来设置两条线连结点的样式,其中也有三个选择:
1
2
3
4
5
6
7
8
9
|
/* Line join styles. */
typedef CF_ENUM(int32_t,CGLineJoin){
kCGLineJoinMiter,
kCGLineJoinRound,
kCGLineJoinBevel
};
|
其中,第一个是默认的表示斜接,第二个是圆滑衔接,第三个是斜角连接。
画圆
我们可以使用+ bezierPathWithOvalInRect:
方法来画圆,当我们传的rect
参数是一下正方形时,画出来的就是圆。
先看效果图:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
- (void)drawCiclePath{
// 传的是正方形,因此就可以绘制出圆了
UIBezierPath*path= [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20,20,self.frame.size.width- 40,self.frame.size.width- 40)];
// 设置填充颜色
UIColor*fillColor= [UIColorgreenColor];
[fillColorset];
[pathfill];
// 设置画笔颜色
UIColor*strokeColor= [UIColorblueColor];
[strokeColorset];
// 根据我们设置的各个点连线
[pathstroke];
}
|
注意:要画圆,我们需要传的
rect
参数必须是正方形哦!
画椭圆
先看效果图:
前面我们已经画圆了,我们可以使用+ bezierPathWithOvalInRect:
方法来画圆,当我们传的rect
参数是一下正方形时,画出来的就是圆。那么我们要是不传正方形,那么绘制出来的就是椭圆了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// 画椭圆
-(void)drawOvalPath{
// 传的是不是正方形,因此就可以绘制出椭圆圆了
UIBezierPath*path= [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20,20,self.frame.size.width- 80,self.frame.size.height- 40)];
// 设置填充颜色
UIColor*fillColor= [UIColorgreenColor];
[fillColorset];
[pathfill];
// 设置画笔颜色
UIColor*strokeColor= [UIColorblueColor];
[strokeColorset];
// 根据我们设置的各个点连线
[pathstroke];
}
|
画带圆角的矩形
1
2
3
4
5
6
7
|
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
cornerRadius:(CGFloat)cornerRadius;
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
byRoundingCorners:(UIRectCorner)corners
cornerRadii:(CGSize)cornerRadii;
|
第一个工厂方法是画矩形,但是这个矩形是可以画圆角的。第一个参数是矩形,第二个参数是圆角大小。 第二个工厂方法功能是一样的,但是可以指定某一个角画成圆角。像这种我们就可以很容易地给UIView
扩展添加圆角的方法了。
四个都是圆角10:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
- (void)drawRoundedRectPath{
UIBezierPath*path= [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20,20,self.frame.size.width- 40,self.frame.size.height- 40) cornerRadius:10];
// 设置填充颜色
UIColor*fillColor= [UIColorgreenColor];
[fillColorset];
[pathfill];
// 设置画笔颜色
UIColor*strokeColor= [UIColorblueColor];
[strokeColorset];
// 根据我们设置的各个点连线
[pathstroke];
}
|
如果要画只有一个角是圆角,那么我们就修改创建方法:
1
2
3
|
UIBezierPath*path= [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20,20,self.frame.size.width- 40,self.frame.size.height- 40) byRoundingCorners:UIRectCornerTopRight cornerRadii:CGSizeMake(20,20)];
|
其中第一个参数一样是传了个矩形,第二个参数是指定在哪个方向画圆角,第三个参数是一个CGSize
类型,用来指定水平和垂直方向的半径的大小。看下效果图:
画弧
画弧前,我们需要了解其参考系,如下图(图片来自网络):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
#define kDegreesToRadians(degrees) ((pi * degrees)/ 180)
-(void)drawARCPath{
constCGFloatpi = 3.14159265359;
CGPointcenter= CGPointMake(self.frame.size.width/ 2,self.frame.size.height/ 2);
UIBezierPath*path= [UIBezierPath bezierPathWithArcCenter:center
radius:100
startAngle:0
endAngle:kDegreesToRadians(135)
clockwise:YES];
path.lineCapStyle= kCGLineCapRound;
path.lineJoinStyle= kCGLineJoinRound;
path.lineWidth= 5.0;
UIColor*strokeColor= [UIColorredColor];
[strokeColorset];
[pathstroke];
}
|
效果图如下:
我们要明确一点,画弧参数startAngle
和endAngle
使用的是弧度,而不是角度,因此我们需要将常用的角度转换成弧度。对于效果图中,我们设置弧的中心为控件的中心,起点弧度为0,也就是正东方向,而终点是135度角的位置。如果设置的clockwise:YES
是逆时针方向绘制,如果设置为NO
,效果如下:
这两者正好是相反的。
画二次贝塞尔曲线
先来学习一下关于控制点,如下图(图片来自网络):
画二次贝塞尔曲线,是通过调用此方法来实现的:
1
2
3
|
- (void)addQuadCurveToPoint:(CGPoint)endPointcontrolPoint:(CGPoint)controlPoint
|
参数说明:
endPoint
:终端点
controlPoint
:控制点,对于二次贝塞尔曲线,只有一个控制点
看效果图:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
- (void)drawSecondBezierPath{
UIBezierPath*path= [UIBezierPathbezierPath];
// 首先设置一个起始点
[path moveToPoint:CGPointMake(20,self.frame.size.height- 100)];
// 添加二次曲线
[path addQuadCurveToPoint:CGPointMake(self.frame.size.width- 20,self.frame.size.height- 100)
controlPoint:CGPointMake(self.frame.size.width/ 2,0)];
path.lineCapStyle= kCGLineCapRound;
path.lineJoinStyle= kCGLineJoinRound;
path.lineWidth= 5.0;
UIColor*strokeColor= [UIColorredColor];
[strokeColorset];
[pathstroke];
}
|
画二次贝塞尔曲线的步骤:
- 先设置一个起始点,也就是通过
-moveToPoint:
设置 - 调用
-addQuadCurveToPoint:controlPoint:
方法设置终端点和控制点,以画二次曲线
在效果图中,拱桥左边的起始点就是我们设置的起始点,最右边的终点,就是我们设置的终端点,而我们设置的控制点为(width / 2, 0)对应于红色矩形中水平方向在正中央,而垂直方向在最顶部。
这个样式看起来很像
sin
或者cos
函数吧?这两个只是特例而已,其实可以画任意图形,只是想不到,没有做不到的。
画三次贝塞尔曲线
贝塞尔曲线必定通过首尾两个点,称为端点;中间两个点虽然未必要通过,但却起到牵制曲线形状路径的作用,称作控制点。关于三次贝塞尔曲线的控制器,看下图:
提示:其组成是起始端点+控制点1+控制点2+终止端点
如下方法就是画三次贝塞尔曲线的关键方法,以三个点画一段曲线,一般和-moveToPoint:
配合使用。
1
2
3
4
5
|
- (void)addCurveToPoint:(CGPoint)endPoint
controlPoint1:(CGPoint)controlPoint1
controlPoint2:(CGPoint)controlPoint2
|
看下效果图:
实现代码是这样的:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
- (void)drawThirdBezierPath{
UIBezierPath*path= [UIBezierPathbezierPath];
// 设置起始端点
[path moveToPoint:CGPointMake(20,150)];
[path addCurveToPoint:CGPointMake(300,150)
controlPoint1:CGPointMake(160,0)
controlPoint2:CGPointMake(160,250)];
path.lineCapStyle= kCGLineCapRound;
path.lineJoinStyle= kCGLineJoinRound;
path.lineWidth= 5.0;
UIColor*strokeColor= [UIColorredColor];
[strokeColorset];
[pathstroke];
}
|
我们需要注意,这里确定的起始端点为(20,150),终止端点为(300, 150),基水平方向是一致的。控制点1的坐标是(160,0),水平方向相当于在中间附近,这个参数可以调整。控制点2的坐标是(160,250),如果以两个端点的连线为水平线,那么就是250-150=100,也就是在水平线下100。这样看起来就像一个sin
函数了。
源代码下载
小伙伴们可以到github下载:https://github.com/CoderJackyHuang/UIBezierPathLayerDemos
UIBezierPath+画板,签名档相关推荐
- IP签名档PHP源码,简单几步,教你制作自己的显IP签名档
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 简单几步,教你制作自己的显IP签名档 |=================================| |转载自bbs.idzc.com |==== ...
- 论坛IP签名档PHP源码,简单几步,教你制作自己的显IP签名档
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 简单几步,教你制作自己的显IP签名档 |=================================| |转载自bbs.idzc.com |==== ...
- 电子邮件签名档 HTML 手写时的折腾(附 原创工具)
2019独角兽企业重金招聘Python工程师标准>>> 入职必修课 鄙人作为码农进厂开电脑的第一件正事就是 -- 在 Foxmail 客户端中设置自己公司的域名邮箱,并加上看起来还挺 ...
- 收集的签名档的好去处
收集各种搞笑.给力.雷人.经典.精辟.搞怪的签名档,尽在千名党 :[url]http://www.qianmingdang.org[/url]
- 强势推出的超拽个性签名档:如果你是一朵花,那牛都不拉粪了
强势推出的超拽个性签名档:如果你是一朵花,那牛都不拉粪了 当你披上婚纱的时候 我也披上了袈裟. "你喜欢我什么?""我喜欢你,离我远一点" 不要迷恋姐 姐只是想 ...
- 高校BBS上的100个爆笑签名档 2
51.规格严格,"工夫"到家(如今黄色泛滥的年代里,哈工大首页的这条校训很容易让人产生其他"遐想",怪不得工大有很多人拿这个做签名档借此来搞笑呢^_^) 52. ...
- 2004世界中文BBS爆笑签名档
1.很久很久以前,有一群人人不离马,身不离甲,专以灌水为生,人称"马甲军".我在他们当中排行老六,人称"马六甲".很多年后,我们到南洋做生意,当地人都非常喜欢穿 ...
- IP签名档PHP开源版:轻松打造网站个性签名档
今天,我们将为大家介绍一个有趣的IP签名档项目.通过将源代码部署在服务器上,您可以轻松地为自己的社交媒体.论坛等地创建一个独特的签名档,使您的网站更加出彩! 接下来,我们将详细向大家展示如何搭建PHP ...
- 2009最新QQ签名档荟萃...
2009最新QQ签名档荟萃 ----转自<计算机应用文摘> 1.执子之手,方知子丑,泪流满面,子不走我走. 2.西游记告诉我们:凡是有后台的妖怪都被接走了,凡是没后台的都被一棒子打死了. ...
- 06年比较精典的签名档,个人觉得不好的全部Out.
1.做男人就要做金刚那样的男人--在世界最高的大楼上为心爱的女人打飞机!!! 2.男人的双手是最好的丰胸良药--终于发现我有一门手艺了--(双手愿为爱人而粗糙!) 3.jj掉了不过碗大个疤! 5.据说 ...
最新文章
- 为什么free()时不需要传指针大小
- 互斥锁、共享内存方式以及生产者消费者模型
- RoBERTa中文预训练模型:RoBERTa for Chinese
- Android RecyclerView 性能优化总结
- [NOI2018] 归程(线段树维护并查集的可持久化/kruskal重构树,倍增+dijkstra最短路)
- X Window Messing With The Mouse Cursor
- Ubuntu 16.04扩展swap分区(内存)
- 中国银保监会公布银行业金融机构目前共有4608家(附全部名录)
- 下个一个语音,计算机.,中国计算机产业的下一个亮点——汉语语音合成的实用化...
- 学数学建模算法对计算机的好处,浅议数学建模与算法
- C4D R18-R21
- Windows下使用Git+rsync构建文件同步工具
- [绍棠] This In-App purchase has already been bought. It will be restored for free.
- 台式计算机连网需要什么,台式电脑无线网络连接需要什么设备
- DBA_实践指南系列9_Oracle Erp R12应用补丁AutoPatch/AutoControl/AutoConfig(案例)
- mysql 表继承_如何在数据库中表示继承?
- 如何进行邮件营销,邮件营销群发是否有效?
- linux中添加一行,linux – sed:在某个位置插入一行
- 【STM32 .Net MF开发板学习-12】跳动的音符(PWM合成)
- OpenCV特征检测(三)SIFT,Surf及其引申的思考
热门文章
- iOS NSLayoutConstraint priority
- python--多线程爬取王者荣耀高清壁纸
- 2020 - 2021个人年度总结
- 麻省理工学院计算机博士几年,破译「罗塞塔石碑」要几十年?华裔MIT博士开发新系统,快速解密...
- 有赞BI平台实现原理
- 无需编码,可一键生成前后端代码,少写80%的代码!
- golang 结构体使用chan
- 柴静《看见》中一段深有感触的话
- 关于编写性能高效的javascript事件的技术[转] 来源:酷勤网 发布于 2015-2-12
- Python 进阶视频课 - 14. FR007 利率掉期定价和曲线拔靴