天天看點

iOS:使用貝塞爾曲線繪制圖表(折線圖、柱狀圖、餅狀圖)

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

iOS:使用貝塞爾曲線繪制圖表(折線圖、柱狀圖、餅狀圖)

 View Code

BezierCurveView.m

iOS:使用貝塞爾曲線繪制圖表(折線圖、柱狀圖、餅狀圖)

在ViewController.m檔案中測試如下:

iOS:使用貝塞爾曲線繪制圖表(折線圖、柱狀圖、餅狀圖)

示範截圖如下:

iOS:使用貝塞爾曲線繪制圖表(折線圖、柱狀圖、餅狀圖)
iOS:使用貝塞爾曲線繪制圖表(折線圖、柱狀圖、餅狀圖)
iOS:使用貝塞爾曲線繪制圖表(折線圖、柱狀圖、餅狀圖)
iOS:使用貝塞爾曲線繪制圖表(折線圖、柱狀圖、餅狀圖)

下載下傳位址:

程式猿神奇的手,每時每刻,這雙手都在改變着世界的互動方式!

本文轉自當天真遇到現實部落格園部落格,原文連結:http://www.cnblogs.com/XYQ-208910/p/5694749.html,如需轉載請自行聯系原作者

繼續閱讀