1.使用UIBezierPath画图步骤
创建一个UIBezierPath对象
调用-moveToPoint:设置初始线段的起点
添加线或者曲线去定义一个或者多个子路径
改变UIBezierPath对象跟绘图相关的属性。如,我们可以设置画笔的属性、填充样式等
2.工厂方法
+ (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;
下面我们一个一个地介绍其用途。
+(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;
第一个工厂方法是画矩形,但是这个矩形是可以画圆角的。第一个参数是矩形,第二个参数是圆角大小。
第二个工厂方法功能是一样的,但是可以指定某一个角画成圆角。像这种我们就可以很容易地给UIView扩展添加圆角的方法了。
+ (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方法中调用
画三角形
先看效果图:
image
// 画三角形- (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)];[path closePath];// 设置线宽path.lineWidth=1.5;// 设置填充颜色UIColor*fillColor = [UIColorgreenColor]; [fillColor set]; [path fill];// 设置画笔颜色UIColor*strokeColor = [UIColorblueColor]; [strokeColor set];// 根据我们设置的各个点连线[path stroke];}
我们设置画笔颜色通过set方法:
UIColor*strokeColor = [UIColorblueColor];[strokeColor set];
如果我们需要设置填充颜色,比如这里设置为绿色,那么我们需要在设置画笔颜色之前先设置填充颜色,否则画笔颜色就被填充颜色替代了。也就是说,如果要让填充颜色与画笔颜色不一样,那么我们的顺序必须是先设置填充颜色再设置画笔颜色。如下,这两者顺序不能改变。因为我们设置填充颜色也是跟设置画笔颜色一样调用UIColor的-set方法。
// 设置填充颜色UIColor*fillColor = [UIColorgreenColor];[fillColor set];[path fill];// 设置画笔颜色UIColor*strokeColor = [UIColorblueColor];[strokeColor set];
画矩形
先看效果图:
image
// 画矩形- (void)drawRectPath {UIBezierPath*path = [UIBezierPathbezierPathWithRect: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]; [fillColor set]; [path fill];// 设置画笔颜色UIColor*strokeColor = [UIColorblueColor]; [strokeColor set];// 根据我们设置的各个点连线[path stroke];}
lineCapStyle属性是用来设置线条拐角帽的样式的,其中有三个选择:
/* Line cap styles. */typedefCF_ENUM(int32_t,CGLineCap) { kCGLineCapButt, kCGLineCapRound, kCGLineCapSquare};
其中,第一个是默认的,第二个是轻微圆角,第三个正方形。
lineJoinStyle属性是用来设置两条线连结点的样式,其中也有三个选择:
/* Line join styles. */typedefCF_ENUM(int32_t,CGLineJoin) { kCGLineJoinMiter, kCGLineJoinRound, kCGLineJoinBevel};
其中,第一个是默认的表示斜接,第二个是圆滑衔接,第三个是斜角连接。
画圆
我们可以使用+ bezierPathWithOvalInRect:方法来画圆,当我们传的rect参数是一下正方形时,画出来的就是圆。
先看效果图:
image
- (void)drawCiclePath {// 传的是正方形,因此就可以绘制出圆了UIBezierPath*path = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(20,20,self.frame.size.width-40,self.frame.size.width-40)];// 设置填充颜色UIColor*fillColor = [UIColorgreenColor]; [fillColor set]; [path fill];// 设置画笔颜色UIColor*strokeColor = [UIColorblueColor]; [strokeColor set];// 根据我们设置的各个点连线[path stroke];}
注意:要画圆,我们需要传的rect参数必须是正方形哦!
画椭圆
先看效果图:
image
前面我们已经画圆了,我们可以使用+ bezierPathWithOvalInRect:方法来画圆,当我们传的rect参数是一下正方形时,画出来的就是圆。那么我们要是不传正方形,那么绘制出来的就是椭圆了。
// 画椭圆- (void)drawOvalPath {// 传的是不是正方形,因此就可以绘制出椭圆圆了UIBezierPath*path = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(20,20,self.frame.size.width-80,self.frame.size.height-40)];// 设置填充颜色UIColor*fillColor = [UIColorgreenColor]; [fillColor set]; [path fill];// 设置画笔颜色UIColor*strokeColor = [UIColorblueColor]; [strokeColor set];// 根据我们设置的各个点连线[path stroke];}
画带圆角的矩形
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
cornerRadius:(CGFloat)cornerRadius;+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect
byRoundingCorners:(UIRectCorner)corners
cornerRadii:(CGSize)cornerRadii;
第一个工厂方法是画矩形,但是这个矩形是可以画圆角的。第一个参数是矩形,第二个参数是圆角大小。
第二个工厂方法功能是一样的,但是可以指定某一个角画成圆角。像这种我们就可以很容易地给UIView扩展添加圆角的方法了。
四个都是圆角10:
image
- (void)drawRoundedRectPath {UIBezierPath*path = [UIBezierPathbezierPathWithRoundedRect:CGRectMake(20,20,self.frame.size.width-40,self.frame.size.height-40) cornerRadius:10];// 设置填充颜色UIColor*fillColor = [UIColorgreenColor]; [fillColor set]; [path fill];// 设置画笔颜色UIColor*strokeColor = [UIColorblueColor]; [strokeColor set];// 根据我们设置的各个点连线[path stroke];}
如果要画只有一个角是圆角,那么我们就修改创建方法:
UIBezierPath*path = [UIBezierPathbezierPathWithRoundedRect:CGRectMake(20,20,self.frame.size.width-40,self.frame.size.height-40) byRoundingCorners:UIRectCornerTopRightcornerRadii:CGSizeMake(20,20)];
其中第一个参数一样是传了个矩形,第二个参数是指定在哪个方向画圆角,第三个参数是一个CGSize类型,用来指定水平和垂直方向的半径的大小。看下效果图:
image
画弧
画弧前,我们需要了解其参考系,如下图(图片来自网络):
image
#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 = [UIBezierPathbezierPathWithArcCenter:center radius:100startAngle:0endAngle:kDegreesToRadians(135) clockwise:YES]; path.lineCapStyle= kCGLineCapRound; path.lineJoinStyle= kCGLineJoinRound; path.lineWidth=5.0;UIColor*strokeColor = [UIColorredColor]; [strokeColor set]; [path stroke];}
效果图如下:
image
我们要明确一点,画弧参数startAngle和endAngle使用的是弧度,而不是角度,因此我们需要将常用的角度转换成弧度。对于效果图中,我们设置弧的中心为控件的中心,起点弧度为0,也就是正东方向,而终点是135度角的位置。如果设置的clockwise:YES是逆时针方向绘制,如果设置为NO,效果如下:
image
这两者正好是相反的。
画二次贝塞尔曲线
先来学习一下关于控制点,如下图(图片来自网络):
image
画二次贝塞尔曲线,是通过调用此方法来实现的:
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
参数说明:
endPoint:终端点
controlPoint:控制点,对于二次贝塞尔曲线,只有一个控制点
看效果图:
image
- (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]; [strokeColor set]; [path stroke];}
画二次贝塞尔曲线的步骤:
先设置一个起始点,也就是通过-moveToPoint:设置
调用-addQuadCurveToPoint:controlPoint:方法设置终端点和控制点,以画二次曲线
在效果图中,拱桥左边的起始点就是我们设置的起始点,最右边的终点,就是我们设置的终端点,而我们设置的控制点为(width / 2, 0)对应于红色矩形中水平方向在正中央,而垂直方向在最顶部。
这个样式看起来很像sin或者cos函数吧?这两个只是特例而已,其实可以画任意图形,只是想不到,没有做不到的。
画三次贝塞尔曲线
贝塞尔曲线必定通过首尾两个点,称为端点;中间两个点虽然未必要通过,但却起到牵制曲线形状路径的作用,称作控制点。关于三次贝塞尔曲线的控制器,看下图:
image
提示:其组成是起始端点+控制点1+控制点2+终止端点
如下方法就是画三次贝塞尔曲线的关键方法,以三个点画一段曲线,一般和-moveToPoint:配合使用。
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
看下效果图:
image
实现代码是这样的:
- (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]; [strokeColor set]; [path stroke];}
我们需要注意,这里确定的起始端点为(20,150),终止端点为(300, 150),基水平方向是一致的。控制点1的坐标是(160,0),水平方向相当于在中间附近,这个参数可以调整。控制点2的坐标是(160,250),如果以两个端点的连线为水平线,那么就是250-150=100,也就是在水平线下100。这样看起来就像一个sin函数了。
文/标哥的技术博客(简书作者)
原文链接:http://www.jianshu.com/p/734b34e82135
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
网友评论