iOS繪圖 - UIBezierPath詳解

上一篇文章只是簡(jiǎn)單介紹了繪圖的幾種方法,你可以根據(jù)你的項(xiàng)目選擇不同的繪圖方法。通過(guò)本篇對(duì)UIBezierPath有一個(gè)詳細(xì)的了解,幫助你更好的使用UIBezierPath。

學(xué)習(xí)UIBezierPath之前,我感覺(jué)最好是先將UIBezierPath的頭文件定義先熟悉一遍,大概了解這個(gè)類(lèi)的屬性和方法。

UIBezierPath的工廠方法:

初始化一個(gè)貝塞爾對(duì)象

+ (instancetype)bezierPath;

初始化一個(gè)矩形貝塞爾

+ (instancetype)bezierPathWithRect:(CGRect)rect;

初始化一個(gè)矩形的內(nèi)切圓曲線,想要一個(gè)圓的話就傳入一個(gè)正方形Rect

+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;

初始化帶圓角的貝塞爾,可以用來(lái)為UIView擴(kuò)展添加圓角的方法

//cornerRadius是圓角的半徑大小,傳入的值最大為rect最長(zhǎng)邊的一半。rect為正方形傳入一半寬時(shí)也可以得到一個(gè)圓形。常用于繪制圓角
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;
//如果想得到對(duì)應(yīng)方向上的圓角,可以通過(guò)corners來(lái)指定某個(gè)角畫(huà)成圓角
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;

初始化一個(gè)圓弧

//center:弧線中心點(diǎn)的坐標(biāo)
//radius:所畫(huà)弧線的半徑
//startAngle:弧線的起始弧度
//endAngle:弧線的結(jié)束弧度
//clockwise:是否是順時(shí)針
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center
                                 radius:(CGFloat)radius
                             startAngle:(CGFloat)startAngle
                               endAngle:(CGFloat)endAngle
                              clockwise:(BOOL)clockwise;

用Core Graphics Path生成一個(gè)貝塞爾

+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;

下面我們通過(guò)demo進(jìn)一步了解UIBezierPath

構(gòu)建path

設(shè)置起始點(diǎn)

- (void)moveToPoint:(CGPoint)point;

添加一條直線

- (void)addLineToPoint:(CGPoint)point;

添加一條三次貝塞爾曲線路徑,一般和- (void)moveToPoint:(CGPoint)point;配合使用,設(shè)置三次貝塞爾曲線的起始點(diǎn),endPint是曲線的終點(diǎn),通過(guò)兩個(gè)控制點(diǎn)確定曲線的路徑


三次貝塞爾曲線
三次貝塞爾曲線
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;

添加一條二次貝塞爾曲線路徑,一般和- (void)moveToPoint:(CGPoint)point;配合使用,設(shè)置二次貝塞爾曲線的起始點(diǎn),endPoint是曲線的終點(diǎn),通過(guò)一個(gè)控制點(diǎn)確定曲線的路徑

- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;

添加一段弧度路徑,具體參數(shù)同上

- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;

閉合路徑,得到封閉圖形

- (void)closePath;

移除所有的點(diǎn)

- (void)removeAllPoints;

添加路徑對(duì)象

- (void)appendPath:(UIBezierPath *)bezierPath;

反方向繪制path

- (UIBezierPath *)bezierPathByReversingPath;

根據(jù)指定的放射變化矩陣變化路徑中的所有點(diǎn)

- (void)applyTransform:(CGAffineTransform)transform;

path信息

//是否包含有效的元素
@property(readonly,getter=isEmpty) BOOL empty;
//路徑相對(duì)于原點(diǎn)的bounds
@property(nonatomic,readonly) CGRect bounds;
//畫(huà)筆的當(dāng)前位置
@property(nonatomic,readonly) CGPoint currentPoint;
//路徑是否包含指定點(diǎn)
- (BOOL)containsPoint:(CGPoint)point;

path樣式設(shè)置

//線寬
@property(nonatomic) CGFloat lineWidth;
//設(shè)置線條終點(diǎn)類(lèi)型
@property(nonatomic) CGLineCap lineCapStyle;
typedef CF_ENUM(int32_t, CGLineCap) {
    kCGLineCapButt,//默認(rèn)
    kCGLineCapRound,//輕微圓角
    kCGLineCapSquare//正方形
};
//線條連接點(diǎn)樣式
@property(nonatomic) CGLineJoin lineJoinStyle;
typedef CF_ENUM(int32_t, CGLineJoin) {
    kCGLineJoinMiter,//尖角
    kCGLineJoinRound,//圓角
    kCGLineJoinBevel//平角
};

//在連接點(diǎn)樣式kCGLineJoinMiter時(shí)生效(角兩個(gè)端點(diǎn)之間的距離),如果斜接長(zhǎng)度超過(guò)miterLimit,邊角樣式就會(huì)變成kCGLineJoinBevel
@property(nonatomic) CGFloat miterLimit; 
//繪圖的精細(xì)程度,默認(rèn)是0.6,越小精度越高
@property(nonatomic) CGFloat flatness;
//使用奇偶規(guī)則
@property(nonatomic) BOOL usesEvenOddFillRule;

miterLimit


kCGLineJoinMiter.png
//繪制虛線
//pattern:CGFloat pattern[] = { 1.0f, 2.0f };
//count:pattern中的數(shù)據(jù)個(gè)數(shù)
//phase: 開(kāi)始畫(huà)線型的起始位置
- (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;


//填充([[UIColor redColor] setFill]; 設(shè)置填充顏色,設(shè)置后調(diào)用填充方法)
- (void)fill;
//描邊([[UIColor redColor] setStroke]; 設(shè)置描邊顏色,設(shè)置后調(diào)用描邊方法)
- (void)stroke;

//設(shè)置填充的混合模式
- (void)fillWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;

//設(shè)置描邊的混合模式
- (void)strokeWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;

//修改當(dāng)前圖形上下文的繪圖區(qū)域課件,隨后的繪圖操作都在執(zhí)行此方法前的區(qū)域中呈現(xiàn)
- (void)addClip;

下一篇我們用UIBezierPath實(shí)現(xiàn)一個(gè)簡(jiǎn)單水波效果

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容