UIBezierPath的介绍和使用

上一篇文章介绍了CoreGraphics,UIBezierPath就是路径绘制的UIKit封装,可以绘制矩形曲线等简单的图形。所以,同样的,使用UIBezierPath绘制图形也是要在drawRect:方法中进行。

大体步骤为:

  1. 重写view 的drawRect:方法
  2. 创建UIBezierPath对象
  3. moveToPoint:设置路径起始点
  4. 使用UIBezierPath的类方法绘制需要的路径
  5. 设置图形属性
  6. 绘制图形

使用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];
UIBezierPathView1.png

一些常用属性

//路径宽度
@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];
UIBezierPathView2.png

绘制椭圆

    UIBezierPath *ovalPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 100)];
    [[UIColor blueColor] set];
    ovalPath.lineWidth = 2;
    [ovalPath stroke];
UIBezierPathView3.png

圆角矩形

    UIBezierPath *rectPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 200, 100) cornerRadius:10];
    [[UIColor blueColor] set];
    rectPath.lineWidth = 2;
    [rectPath stroke];
UIBezierPathView4.png

自定义圆角矩形

    UIBezierPath *rectPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 200, 100) byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight cornerRadii:CGSizeMake(10, 10)];
    [[UIColor blueColor] set];
    rectPath.lineWidth = 2;
    [rectPath stroke];
UIBezierPathView5.png

弧形

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

推荐阅读更多精彩内容