iOS UIBezierPath的使用

先來看看我機(jī)智的呆呆....做出投籃動(dòng)作,造臺(tái)階一個(gè)犯規(guī)


OK!進(jìn)入正題,哈哈??


UIBezierPath簡(jiǎn)介

從名字上可以看得出這是一個(gè)貝塞爾路徑,可以繪制直線,曲線,以及各種幾何路徑,它是基于CoreGraphics中path相關(guān)的一個(gè)封裝,可以直接在drawRect方法中繪制出想要的幾何圖形,也可以配合CAShapeLayer來展示,待會(huì)我會(huì)在drawRect里面演示,與CAShapeLayer的配合使用,我之后會(huì)用一個(gè)更好的實(shí)例來演示。

主要的方法

 //創(chuàng)建一個(gè)矩形路徑
 + (instancetype)bezierPathWithRect:(CGRect)rect;
 //創(chuàng)建一個(gè)內(nèi)切圓或橢圓的路徑
 + (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
 //創(chuàng)建一個(gè)矩形路徑,并設(shè)置圓角
 + (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;
 //創(chuàng)建一個(gè)矩形路徑,并設(shè)置圓角方向,以及圓角大小
 + (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
 //創(chuàng)建一個(gè)圓弧路徑,參數(shù)(`center`:圓心 、`radius`:半徑 、`startAngle `:起始角度 、`endAngle `:結(jié)束角度 、`clockwise`:YES順時(shí)針/NO逆時(shí)針)。
 + (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;


 //去設(shè)置初始點(diǎn)
 - (void)moveToPoint:(CGPoint)point;
 //添加直線
 - (void)addLineToPoint:(CGPoint)point;
 //添加三次貝塞爾曲線,兩個(gè)控制點(diǎn)
 - (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
 //添加二次貝塞爾曲線,一個(gè)控制點(diǎn)
 - (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
 //添加圓弧 
 - (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
 //閉合路徑,在起點(diǎn)跟終點(diǎn)添加一條直線
 - (void)closePath;
 //路徑拼接
 - (void)appendPath:(UIBezierPath *)bezierPath;
 //返回一個(gè)與當(dāng)前路徑相反的新的貝塞爾路徑對(duì)象
 - (UIBezierPath *)bezierPathByReversingPath
 //添加虛線
 - (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;
 //去填充所繪制的區(qū)域
 - (void)fill;
 //去繪制路徑
 - (void)stroke;

屬性

//拿到CGPath
@property(nonatomic) CGPathRef CGPath;
//畫筆當(dāng)前的位置
@property(nonatomic,readonly) CGPoint currentPoint;
//線寬
@property(nonatomic) CGFloat lineWidth;
//終點(diǎn)類型
@property(nonatomic) CGLineCap lineCapStyle;
typedef CF_ENUM(int32_t, CGLineCap) {
    kCGLineCapButt,
    kCGLineCapRound,
    kCGLineCapSquare
};
//交叉點(diǎn)類型
@property(nonatomic) CGLineJoin lineJoinStyle;
typedef CF_ENUM(int32_t, CGLineJoin) {
    kCGLineJoinMiter,
    kCGLineJoinRound,
    kCGLineJoinBevel
};
//最大斜接長(zhǎng)度,只有l(wèi)ineJoin屬性為kCALineJoinMiter時(shí)miterLimit才有效
@property(nonatomic) CGFloat miterLimit
//指定even-odd(奇偶)規(guī)則是否在path可用,奇數(shù)在path內(nèi)部,偶數(shù)在外部,所以path交匯處是偶數(shù),是不會(huì)繪制的
@property(nonatomic) BOOL usesEvenOddFillRule; 

舉個(gè)栗子

- (void)drawRect:(CGRect)rect{
    [[UIColor redColor] setStroke];
    [[UIColor greenColor] setFill];
    //橢圓
    [self addPath:
     [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 100, 50) cornerRadius:25]];
    //矩形
    [self addPath:
     [UIBezierPath bezierPathWithRect:CGRectMake(140, 20, 100, 50)]];
    //內(nèi)切橢圓
    [self addPath:
     [UIBezierPath bezierPathWithOvalInRect:CGRectMake(260, 20, 100, 50)]];

    //換色
    [[UIColor lightGrayColor] setStroke];
    [[UIColor blueColor] setFill];
    //圓
    [self addPath:
     [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 90, 100, 100)]];
    //左上右下圓角
    [self addPath:
     [UIBezierPath bezierPathWithRoundedRect:CGRectMake(140, 90, 100, 100) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(50, 0)]];
    //圓弧
    UIBezierPath*cPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(310, 140) radius:50 startAngle:M_PI_2 endAngle:0 clockwise:YES];
    cPath.lineWidth = 4;
    [cPath stroke];
    
    //換色
    [[UIColor purpleColor] setStroke];
    [[UIColor orangeColor] setFill];
    //扇形
    UIBezierPath *sPath = [UIBezierPath bezierPath];
    [sPath moveToPoint:CGPointMake(70, 260)];
    [sPath addArcWithCenter:CGPointMake(70, 260) radius:50 startAngle:-M_PI*2/3.f endAngle:-M_PI_4 clockwise:YES];
    [self addPath:sPath];
    [sPath closePath];
    //二次貝塞爾
    UIBezierPath *towPath = [UIBezierPath bezierPath];
    [towPath moveToPoint:CGPointMake(150, 210)];
    [towPath addQuadCurveToPoint:CGPointMake(150, 310) controlPoint:CGPointMake(250, 260)];
    [towPath stroke];
    //三次貝塞爾
    UIBezierPath *trePath = [UIBezierPath bezierPath];
    [trePath moveToPoint:CGPointMake(260, 260)];
    [trePath addCurveToPoint:CGPointMake(360, 260) controlPoint1:CGPointMake(285, 210) controlPoint2:CGPointMake(335, 310)];
    [trePath stroke];
    //交匯圓
    UIBezierPath *yPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(20, 330, 100, 100)];
    [yPath appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(80, 330, 100, 100)]];
    yPath.usesEvenOddFillRule = YES;
    [self addPath:yPath];
    
}

- (void)addPath:(UIBezierPath *)path{
    
    path.lineWidth = 4;
    [path stroke];
    [path fill];
}

基本用法大致就這么多,本身也不是什么很難的東西,就介紹到這里吧??

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容