CoreAnimation實現乙個折線表

將折現表封裝到乙個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實現乙個時間的進度條

Core Animation動畫概述

core animation動畫概述 1 概述在ios中，圖形可分為以下幾個層次越上層，封裝程度越高，動畫實現越簡潔越簡單，但是自由度越低。本文著重介紹core animation層的動畫實現方案。2 動畫概念類在ios中，展示動畫可以模擬於顯示生活中的拍電影拍電影有三大要素演員劇本 ...

CoreAnimation實現乙個折線表

利用CoreAnimation實現乙個時間的進度條

利用CoreAnimation實現乙個時間的進度條

Core Animation動畫概述

相關推薦