將折現表封裝到乙個view裡,暴露給使用者的只有乙個傳入資料的方法。
//
// chartline.h
// boxingchampion
//功能:根據傳入的陣列,繪製折線圖 注意 其frame的寬 不能小於20,高不能小於50
// created by on 14-12-29.
//#import @inte***ce chartline : uiview
/* 功能:繪製折線圖
引數:折線圖的資料,如@[@1,@2]
返回值:無
*/-(void)setdata:(nsarray *)array_data;
@end
在.m檔案中,重寫-(
id)initwithframe:(
cgrect
)frame 方法。
乙個折線表,我們可以將它分為三個圖層來表示:1、座標軸圖層。2、背景色圖層。3、資料折線圖層。其中座標圖層應設定貝塞爾曲線,根據路徑繪製座標軸。
// 新增座標軸曲線路徑
uibezierpath *path_coordinate=[[uibezierpath alloc] init];
[path_coordinate movetopoint:cgpointmake(8, 12)]; //帶有箭頭狀的座標軸
[path_coordinate addlinetopoint:cgpointmake(10, 10)];
[path_coordinate addlinetopoint:cgpointmake(12, 12)];
[path_coordinate addlinetopoint:cgpointmake(10, 10)];
[path_coordinate addlinetopoint:cgpointmake(10, self.frame.size.height-10)];
[path_coordinate addlinetopoint:cgpointmake(self.frame.size.width-10, self.frame.size.height-10)];
[path_coordinate addlinetopoint:cgpointmake(self.frame.size.width-12, self.frame.size.height-12)];
[path_coordinate addlinetopoint:cgpointmake(self.frame.size.width-10, self.frame.size.height-10)];
[path_coordinate addlinetopoint:cgpointmake(self.frame.size.width-12, self.frame.size.height-8)];
//座標軸路徑圖層
cashapelayer *layer_coordinate=[cashapelayer layer];
layer_coordinate.frame=
cgrectmake(0, 0, self.layer.frame.size.width, self.layer.frame.size.height);
layer_coordinate.linecap=kcalinecapbutt;
layer_coordinate.linewidth=2;
layer_coordinate.fillcolor=[[uicolor clearcolor] cgcolor];
layer_coordinate.strokecolor=[[uicolor orangecolor] cgcolor];
layer_coordinate.strokeend=1;
layer_coordinate.path=[path_coordinate cgpath];
背景色圖層應有漸變色效果,且背景色都在座標軸所包圍的象限內
//淡色背景圖層
cagradientlayer *layer_background=[cagradientlayer layer];
layer_background.frame=cgrectmake(11, 13, self.layer.frame.size.width-22,self.layer.frame.size.height-24);//保證在第一象限
[layer_background setcolors:[nsarray arraywithobjects:
(id)[[uicolor whitecolor] cgcolor],
[[uicolor colorwithred:1.000 green:0.827 blue:0.000 alpha:1.000] cgcolor] ,nil]];
layer_background.locations=@[@0.1];//從0.1處開始漸變 location 座標是左上角(0,0),在右下角(1,1) 使用時應注意
layer_background.startpoint=cgpointmake(0,0);
layer_background.endpoint=cgpointmake(0, 1);
將兩個圖層新增到檢視圖層上
//新增圖層
[self.layer addsublayer:layer_coordinate];
[self.layer addsublayer:layer_background];
最後當使用者呼叫setdata:方法時,繪製折線圖
-(void)setdata:(nsarray *)array_data
}//計算每個資料之間橫座標的間隔
cgfloat x_perdatapointinterval=(self.layer.frame.size.width-20)/(i_datacount+1);
if (0==(f_maxdata-f_mindata))//防止分母為零
//計算每個資料1 佔據幾個畫素點
cgfloat y_perpointinterval=(self.layer.frame.size.height-50)/(f_maxdata-f_mindata);
//折線路徑
uibezierpath *path_data=[[uibezierpath alloc] init];
//第乙個元素起始點的座標
[path_data movetopoint:cgpointmake(10+x_perdatapointinterval,
self.layer.frame.size.height-(20+([[array_data objectatindex:0] floatvalue]-f_mindata)*y_perpointinterval))];
for (nsinteger i=0; i
利用CoreAnimation實現乙個時間的進度條
那麼接下來就是如何用coreanimation實現乙個進度條控制項了。首先呢,讓我們建立乙個繼承自cashapelayer的wkprogressbarlayer。wkprogressbarlayer預設自身的bounds就是整個進度條的大小。inte ce wkprogressbarlayer ca...
利用CoreAnimation實現乙個時間的進度條
那麼接下來就是如何用coreanimation實現乙個進度條控制項了。首先呢,讓我們建立乙個繼承自cashapelayer的wkprogressbarlayer。wkprogressbarlayer預設自身的bounds就是整個進度條的大小。inte ce wkprogressbarlayer ca...
Core Animation動畫概述
core animation動畫概述 1 概述 在ios中,圖形可分為以下幾個層次 越上層,封裝程度越高,動畫實現越簡潔越簡單,但是自由度越低。本文著重介紹core animation層的動畫實現方案。2 動畫概念類 在ios中,展示動畫可以模擬於顯示生活中的 拍電影 拍電影有三大要素 演員 劇本 ...