Quartz2D之漸變使用初步

2021-06-29 11:37:48 字數 2634 閱讀 9626

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 建立著色器物件。...