Quartz2D之漸變使用初步

quartz2d提供了兩種漸變填充方法。第一種是使用quartz自帶的gradient填充方法；第二種是使用自定義的著色器。

這裡將先描述如何使用cggradient物件來做漸變填充。

// drawing code

// 建立quartz上下文
cgcontextref context = uigraphicsgetcurrentcontext();
// 建立色彩空間物件
cgcolorspaceref colorspaceref = cgcolorspacecreatedevicergb();
// 建立起點顏色
cgcolorref begincolor = cgcolorcreate(colorspaceref, (cgfloat));
// 建立終點顏色
cgcolorref endcolor = cgcolorcreate(colorspaceref, (cgfloat));
// 建立顏色陣列
cfarrayref colorarray = cfarraycreate(kcfallocatordefault, (const void*), 2, nil);
// 建立漸變物件
cggradientref gradientref = cggradientcreatewithcolors(colorspaceref, colorarray, (cgfloat));
// 釋放顏色陣列
cfrelease(colorarray);
// 釋放起點和終點顏色
cgcolorrelease(begincolor);
cgcolorrelease(endcolor);
// 釋放色彩空間
cgcolorspacerelease(colorspaceref);
cgcontextdrawlineargradient(context, gradientref, cgpointmake(0.0f, 0.0f), cgpointmake(320.0f, 460.0f), 0);
// 釋放漸變物件
cggradientrelease(gradientref);

上述**效果將產生乙個由綠到藍的乙個漸變填充矩形。

這裡使用了cgcolor和cfarray來作為設定漸變顏色的引數。另外， cggradientcreatewithcolors的最後乙個locations引數可以傳空，這樣預設為從0.0到1.0。

以上畫的是兩種顏色的漸變，是由綠到靛藍。下面我們來看一下三層顏色的漸變：

// 建立quartz上下文

cgcontextref context = uigraphicsgetcurrentcontext();
// 建立色彩空間物件
cgcolorspaceref colorspaceref = cgcolorspacecreatedevicergb();
// 建立漸變物件
cggradientref gradientref = cggradientcreatewithcolorcomponents(colorspaceref, 
(cgfloat), 
(cgfloat), 
3);  
// 釋放色彩空間
cgcolorspacerelease(colorspaceref);
// 填充漸變色
cgcontextdrawlineargradient(context, gradientref, cgpointmake(0.0f, 0.0f), cgpointmake(320.0f, 460.0f), 0);
// 釋放漸變物件
cggradientrelease(gradientref);

上述**繪製了三種顏色的漸變色，由綠到靛藍到黃色。並且在45度軸方向上的顏色都是一樣的。

當然，我們也可以通過改變矩形兩點座標的位置來改變漸變軸的方向，並且也可以設定關鍵顏色的位置：

// 建立quartz上下文

cgcontextref context = uigraphicsgetcurrentcontext();
// 建立色彩空間物件
cgcolorspaceref colorspaceref = cgcolorspacecreatedevicergb();
// 建立漸變物件
cggradientref gradientref = cggradientcreatewithcolorcomponents(colorspaceref, 
(cgfloat), 
(cgfloat), 
3);  
// 釋放色彩空間
cgcolorspacerelease(colorspaceref);
// 填充漸變色
cgcontextdrawlineargradient(context, gradientref, cgpointmake(0.0f, 460.0f), cgpointmake(320.0f, 0.0f), 0);
// 釋放漸變物件
cggradientrelease(gradientref);

執行上述**後我們可以發現，漸變軸被旋轉了90度。而且藍色與黃色區域也有所增大，更靠近矩形的中心。

Quartz2D之漸變使用初步

quartz2d提供了兩種漸變填充方法。第一種是使用quartz自帶的gradient填充方法 第二種是使用自定義的著色器。這裡將先描述如何使用cggradient物件來做漸變填充。drawing code 建立quartz上下文 cgcontextref context uigraphicsget...

Quartz2D之Path使用初步

myquartzview.m quartztest created by zenny chen on 12 2 21.import myquartzview.h quartz2d以及core animation所需要的標頭檔案 import implementation myquartzview i...

Quartz2D之著色器使用初步

上一講談到了如何使用cggradient來做線性漸變效果。那麼本講將介紹如何使用cgshader來做線性漸變效果。使用著色器製作漸變的方法與直接用quartz提供的cggradient方法類似 1 首先建立色彩空間 2 建立乙個函式物件。該物件包含了輸入範圍資訊以及輸出範圍資訊。3 建立著色器物件。...