上一篇文章介绍了CoreGraphics
,UIBezierPath
就是路径绘制的UIKit
封装,可以绘制矩形曲线等简单的图形。所以,同样的,使用UIBezierPath绘制图形也是要在drawRect:
方法中进行。
大体步骤为:
- 重写view 的
drawRect:
方法- 创建
UIBezierPath
对象moveToPoint:
设置路径起始点- 使用
UIBezierPath
的类方法绘制需要的路径- 设置图形属性
- 绘制图形
使用UIBezierPath绘制简单的图形
//1.创建UIBezierPath
UIBezierPath *path = [UIBezierPath bezierPath];
//2.绘制路径
[path moveToPoint:CGPointMake(50, 300)];
[path addLineToPoint:CGPointMake(50, 200)];
[path addCurveToPoint:CGPointMake(350, 200) controlPoint1:CGPointMake(160, 50) controlPoint2:CGPointMake(240, 350)];
[path addLineToPoint:CGPointMake(350, 300)];
[path closePath];
//3.设置图形属性
[[UIColor redColor] setStroke];
[[UIColor blueColor] setFill];
path.lineWidth = 5;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineJoinRound;
//4.绘制图形
[path fill];
一些常用属性
//路径宽度
@property(nonatomic) CGFloat lineWidth;
//路径端点样式
/*
kCGLineCapButt 默认,平的
kCGLineCapRound 圆的
kCGLineCapSquare 矩形
*/
@property(nonatomic) CGLineCap lineCapStyle;
//路径拐点样式
/*
kCGLineJoinMiter 拐点形状为尖的
kCGLineJoinRound 拐点形状为圆的
kCGLineJoinBevel 拐点形状为平的
*/
@property(nonatomic) CGLineJoin lineJoinStyle;
//最大斜接长度 斜接长度指的是在两条线交汇处内角和外角之间的距离,如果正常的斜接长度大于miterLimit的值,则显示类型类似kCGLineJoinBevel
@property(nonatomic) CGFloat miterLimit; // Used when lineJoinStyle is kCGLineJoinMiter
//确定路径渲染的精确度,默认值为0.6,值越小,渲染精度越高,计算时间也越长。
@property(nonatomic) CGFloat flatness;
//渲染规则,设置为yes则路径会使用奇偶规则填充,设置为no使用非零规则填充。
@property(nonatomic) BOOL usesEvenOddFillRule;
//获取路径的终点,如果当前路径为空, 那么该属性的值将会是 CGPointZero
@property(nonatomic, readonly) CGPoint currentPoint;
一些常用方法
//创建一个路径对象
+ (instancetype)bezierPath;
//创建一个矩形
+ (instancetype)bezierPathWithRect:(CGRect)rect;
//创建一个椭圆,内切于矩形
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
//创建一个圆角矩形
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; // rounds all corners with the same horizontal and vertical radius
//圆角位置可选的矩形
//rect:矩形位置及尺寸
//corners:圆弧所在角的位置,可多选
/*
UIRectCornerTopLeft 左上角
UIRectCornerTopRight 右上角
UIRectCornerBottomLeft 左下角
UIRectCornerBottomRight 右下角
UIRectCornerAllCorners 所有角
*/
+ (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;
//利用CGPathRef创建路径
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;
//路径移动到某点
- (void)moveToPoint:(CGPoint)point;
//从当前点划一条到指定点的直线
- (void)addLineToPoint:(CGPoint)point;
//从当前点划一条到指定点的三次贝塞尔曲线
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
//从当前点划一条到指定点的二次贝塞尔曲线
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
//添加一段弧线
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);
//关闭路径
- (void)closePath;
//删除路径內的所有点
- (void)removeAllPoints;
//拼接已经存在的路径
- (void)appendPath:(UIBezierPath *)bezierPath;
//返回一个当前路径翻转后的路径
- (UIBezierPath *)bezierPathByReversingPath NS_AVAILABLE_IOS(6_0);
//对路径中的所有点进行仿射变换
- (void)applyTransform:(CGAffineTransform)transform;
//设置虚线
//pattern c语言数组,表示的是虚线的实线长度和实现中间间隔距离
//count pattern数组的个数
//phase 虚线从哪个位置开始绘制
- (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;
//重新获取之前设置过的虚线样式
- (void)getLineDash:(nullable CGFloat *)pattern count:(nullable NSInteger *)count phase:(nullable CGFloat *)phase;
//路径中是否包含某个点,如果是封闭路径,则返回封闭区域是否包含某个点
- (BOOL)containsPoint:(CGPoint)point;
//绘制路径中间的填充
- (void)fill;
//绘制路径
- (void)stroke;
//以指定模式填充路径封闭的范围
- (void)fillWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;
//以指定模式绘制路径
- (void)strokeWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;
//剪切区域,路径之外的区域将不被渲染
- (void)addClip;
绘制矩形
UIBezierPath *rectPath = [UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 200, 100)];
[[UIColor blueColor] set];
[rectPath fill];
绘制椭圆
UIBezierPath *ovalPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 100)];
[[UIColor blueColor] set];
ovalPath.lineWidth = 2;
[ovalPath stroke];
圆角矩形
UIBezierPath *rectPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 200, 100) cornerRadius:10];
[[UIColor blueColor] set];
rectPath.lineWidth = 2;
[rectPath stroke];
自定义圆角矩形
UIBezierPath *rectPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 200, 100) byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight cornerRadii:CGSizeMake(10, 10)];
[[UIColor blueColor] set];
rectPath.lineWidth = 2;
[rectPath stroke];
弧形
UIBezierPath *arcPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:100 startAngle:-M_PI_2 endAngle:M_PI_4 clockwise:YES];
[[UIColor blueColor] set];
[arcPath fill];