1.介紹:
UIBezierPath :畫貝塞爾曲線的path類
UIBezierPath定義 : 貝賽爾曲線的每一個頂點都有兩個控制點,用于控制在該頂點兩側的曲線的弧度。
曲線的定義有四個點:起始點、終止點(也稱錨點)以及兩個互相分離的中間點。
滑動兩個中間點,貝塞爾曲線的形狀會發生變化。
UIBezierPath :對象是CGPathRef資料類型的封裝,可以友善的讓我們畫出 矩形 、 橢圓 或者 直線和曲線的組合形狀
初始化方法:
+ (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
+ (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;
2.最基本的使用方法是:
//設定描繪的起點
- (void)moveToPoint:(CGPoint)point;
//畫直線
- (void)addLineToPoint:(CGPoint)point;
//畫曲線
(1)繪制二次貝塞爾曲線 分别對應終點和一個控制點
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
(1)繪制三次貝塞爾曲線 分别對應終點和兩個控制點
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
//畫圓弧
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
3.使用貝塞爾曲線的基本步驟是:
(1)建立一個Bezier path對象。
(2)使用方法moveToPoint:去設定初始線段的起點。
(3)添加line或者curve去定義一個或者多個subpaths。
(4)改變UIBezierPath對象跟繪圖相關的屬性。
4.demo示範如下:
建立一個工具類,BezierCurveView,同時給它建立一個xib檔案,它繼承自UIView,用來專門繪制圖表的畫布
BezierCurveView.h
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLrN2bsJEZlR3YhJHdu92Qvw1cy9GdhNWak5WSn5WaulGb0V3TvwVbvNmLzd2bsJmbj5ycldWYtl2Lc9CX6MHc0RHaiojIsJye.gif)
View Code
BezierCurveView.m
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLrN2bsJEZlR3YhJHdu92Qvw1cy9GdhNWak5WSn5WaulGb0V3TvwVbvNmLzd2bsJmbj5ycldWYtl2Lc9CX6MHc0RHaiojIsJye.gif)
在ViewController.m檔案中測試如下:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLrN2bsJEZlR3YhJHdu92Qvw1cy9GdhNWak5WSn5WaulGb0V3TvwVbvNmLzd2bsJmbj5ycldWYtl2Lc9CX6MHc0RHaiojIsJye.gif)
示範截圖如下:
下載下傳位址:
程式猿神奇的手,每時每刻,這雙手都在改變着世界的互動方式!
本文轉自當天真遇到現實部落格園部落格,原文連結:http://www.cnblogs.com/XYQ-208910/p/5694749.html,如需轉載請自行聯系原作者