iOS 漸變色實現,漸變色圓環,圓環進度條

2022-07-24 21:42:20 字數 2313 閱讀 2428

cagradientlayer圖層可以通過設定mask來給檢視新增漸變效果 cagradientlayer主要需要設定一下幾個引數

colors:傳入需要漸變的顏色 例如 self.gradientlayer.colors = @[(__bridge id)[uicolor orangecolor].cgcolor,(__bridge id)[uicolor orangecolor].cgcolor]; 需要注意的color格式

startpoint:漸變開始的位置 self.gradientlayer.startpoint = cgpointmake(0, 0);

endpoint:漸變結束的位置 self.gradientlayer.endpoint = cgpointmake(1, 1);

我畫乙個座標你立刻就明白了,中間是0.5

(0,0) -------- (1,0)

| |

| 0.5 |

| |

(0,1) -------- (1,1)

cashapelayer 可以傳入uibezierpath曲線,這樣我們可以通過uibezierpath繪製乙個圓環,通過cagradientlayer來實現漸變效果

fillcolor:填充顏色

strokecolor:繪製顏色

linewidth:線寬

path:繪圖路徑(cgpath)

關於用uibezierpath畫圓 圓環

uibezierpath bezierpath = [uibezierpath bezierpathwitharccenter:cgpointmake(self.bounds.size.width0.5, self.bounds.size.height*0.5) radius:self.bounds.size.width/2 - 20 startangle:0 endangle:m_pi clockwise:yes];

這裡需要注意傳入的是弧度而不是角度 弧度轉角度可以自行查閱資料

弧度在座標系中的位置我這裡大致畫一下,方便觀察開始角度和結束角度

-m_pi_2(m_pi+m_pi_2)∧|

|||m_pi---------|----------> 0||

||m_pi_2

//給圓環新增漸變效果

self.shapelayer = [[cashapelayer alloc] init];

self.shapelayer.frame = self.bounds;

self.shapelayer.fillcolor = [uicolor clearcolor].cgcolor;

self.shapelayer.strokecolor = [uicolor redcolor].cgcolor;

self.shapelayer.linewidth = 10.f;

uibezierpath *bezierpath = [uibezierpath bezierpathwitharccenter:cgpointmake(self.bounds.size.width*0.5, self.bounds.size.height*0.5) radius:self.bounds.size.width/2 - 20 startangle:0 endangle:m_pi clockwise:yes];

self.shapelayer.path = bezierpath.cgpath;

//建立漸變層

self.gradientlayer = [[cagradientlayer alloc] init];

self.gradientlayer.frame = self.bounds;

self.gradientlayer.colors = @[(__bridge id)[uicolor orangecolor].cgcolor,(__bridge id)[uicolor orangecolor].cgcolor];

self.gradientlayer.startpoint = cgpointmake(0, 0);

self.gradientlayer.endpoint = cgpointmake(1, 1);

self.gradientlayer.mask = self.shapelayer;

[self.layer addsublayer:self.gradientlayer];

繪製漸變色

迴圈改變的畫素值,請注意每一行使用乙個顏色。int data new int fontimage.getwidth fontimage.getheight fontimage.getrgb data,0,fontimage.getwidth 0,0,fontimage.getwidth fontim...

漸變色原理

引用 作為計算機圖形學中重要的原色混合系統,rgb 紅綠藍 加色系統廣泛應用於發光體,如彩色crt顯示或彩色燈光.這三種單色是得以匹配或生成可見光譜中幾乎所有顏色的最小數量的原色.為了適應不同的顏色深度,使用0 1來表示r,g,b顏色深淺.使用三維座標分別表示rgb.如下圖1所示.這樣原點rgb 0...

iOS 文字漸變色的實現

專案中需要實現的效果 實現方法 自定義cfgradientlabel繼承於uilabel,實現 drawrect 方法,在該方法裡面畫漸變色。在 cfgradientlabel.h 裡 import inte ce cfgradientlabel uilabel property nonatomic...