CoreAnimation實現乙個折線表

2021-06-28 09:27:29 字數 3364 閱讀 5591

將折現表封裝到乙個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中,展示動畫可以模擬於顯示生活中的 拍電影 拍電影有三大要素 演員 劇本 ...