iOS UIBezierPath 類繪圖

UIBezierPath 類用來繪制直線或曲線臂痕,從而組成各種形狀。

這里以 UIView 的一個子類 BNRHypnosisView 為例兼雄,重寫 UIViewdrawRect: 方法姻僧,并在該方法中實現(xiàn)繪圖甫匹,示例代碼如下:

- (void)drawRect:(CGRect)rect {
    CGRect bounds = self.bounds;
    
    // 根據(jù) bounds 計算中心點(diǎn)
    CGPoint center;
    center.x = bounds.origin.x + bounds.size.width / 2.0;
    center.y = bounds.origin.y + bounds.size.height / 2.0;
    
    // 根據(jù)視圖寬和高中的較小值計算圓形的半徑
    float radius = (MIN(bounds.size.width, bounds.size.height) / 2.0);
    
    UIBezierPath *path = [[UIBezierPath alloc] init]; //創(chuàng)建一個對象
    
    // 以中心為原點(diǎn),radius 為半徑蓝牲,定義一個 0 到 M_PI * 2.0 弧度的路徑(整圓)
    [path addArcWithCenter:center
                    radius:radius
                startAngle:0.0
                  endAngle:M_PI * 2.0
                 clockwise:YES];

    path.lineWidth = 10; // 設(shè)置線條寬度為 10 點(diǎn)

    [[UIColor orangeColor] setStroke]; // 設(shè)置繪制顏色為橙色
    
    [path stroke]; // 繪制路徑
}

注意:這些值得單位是點(diǎn)(points)趟脂,不是像素(pixel)。若為像素例衍,則視圖在 Retina 和非 Retina 顯示屏上的大小無法保持一致昔期。

因為點(diǎn)的大小與設(shè)備分辨率相關(guān),取決于屏幕以多少像素顯示一個點(diǎn):
在 Retina 顯示屏上肄渗,一個點(diǎn)的寬高都是 2 個像素镇眷;
而在非 Retina 顯示屏上,一個點(diǎn)的寬高都是 1 個像素翎嫡。

運(yùn)行代碼欠动,效果圖如下:


透明背景的圓形

BNRHypnosisView.minitWithFrame: 方法中,設(shè)置對象的背景色透明,示例代碼:

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        // 設(shè)置 BNRHypnosisView 對象的背景顏色為透明
        self.backgroundColor = [UIColor clearColor];
    }
    return self;
}
  • 繪制同心圓

兩種方法:

  1. 創(chuàng)建多個 UIBezierPath 對象具伍,每個對象代表一個圓形翅雏;
  2. 使用一個 UIBezierPath 對象,為每個圓定義一個繪制路徑人芽。

方法 2 更好:只創(chuàng)建一個對象望几,內(nèi)存占用少。示例代碼:

float maxRadius = hypot(bounds.size.width, bounds.size.height) / 2.0;

for (float currentRadius = maxRadius; currentRadius > 0; currentRadius -= 20) {
        [path addArcWithCenter:center
                        radius:currentRadius
                    startAngle:0.0
                      endAngle:M_PI * 2.0
                     clockwise:YES];
}

注:這里的 hypot 為數(shù)學(xué)函數(shù)(已知直角三角形的兩直角邊長度萤厅,求斜邊長度)橄抹。關(guān)于其他常用數(shù)學(xué)函數(shù),可參考 iOS math.h 常用數(shù)學(xué)函數(shù)

效果如下:


繪制了不正確的同心圓

可以發(fā)現(xiàn)多了一條直線惕味,這是因為單個 UIBezierPath 對象將多個路徑(每個路徑可以畫出一個圓形)鏈接起來楼誓,形成了一個完整的路徑∶樱可以將 對象想象成一支在紙上繪畫的筆——繪制完某個圓后繪制另外一個疟羹,沒有抬起筆,因此會留下筆跡禀倔。所以要抬起筆榄融。

每次循環(huán)開始需要抬起畫筆,添加代碼如下:

[path moveToPoint:CGPointMake(center.x + currentRadius, center.y)]; //抬起畫筆

添加后的效果:


繪制同心圓
  • 繪制圖像
    從文件系統(tǒng)中加載一個圖像文件救湖,并將其繪制到同心圓中愧杯,效果如圖所示:


    繪制圖像

從該文件創(chuàng)建一個 UIImage 對象,示例代碼:

UIImage *logoImage = [UIImage imageNamed:@"logo"];

drawRect: 方法中將圖像繪制到視圖捎谨,示例代碼:

[logoImage drawInRect:rect];

更多方法和屬性可參閱官方文檔民效。此外 UIBezierPath精講 寫得也不錯!推薦下涛救!

《iOS編程(第4版)》 筆記

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末畏邢,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子检吆,更是在濱河造成了極大的恐慌舒萎,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蹭沛,死亡現(xiàn)場離奇詭異臂寝,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)摊灭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進(jìn)店門咆贬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人帚呼,你說我怎么就攤上這事掏缎≈灞模” “怎么了?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵眷蜈,是天一觀的道長沪哺。 經(jīng)常有香客問我,道長酌儒,這世上最難降的妖魔是什么辜妓? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮忌怎,結(jié)果婚禮上籍滴,老公的妹妹穿的比我還像新娘。我一直安慰自己榴啸,他們只是感情好异逐,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著插掂,像睡著了一般。 火紅的嫁衣襯著肌膚如雪腥例。 梳的紋絲不亂的頭發(fā)上辅甥,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天,我揣著相機(jī)與錄音燎竖,去河邊找鬼璃弄。 笑死,一個胖子當(dāng)著我的面吹牛构回,可吹牛的內(nèi)容都是我干的夏块。 我是一名探鬼主播,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼纤掸,長吁一口氣:“原來是場噩夢啊……” “哼脐供!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起借跪,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤政己,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后掏愁,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體歇由,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年果港,在試婚紗的時候發(fā)現(xiàn)自己被綠了沦泌。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡辛掠,死狀恐怖谢谦,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤他宛,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布船侧,位于F島的核電站,受9級特大地震影響厅各,放射性物質(zhì)發(fā)生泄漏镜撩。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一队塘、第九天 我趴在偏房一處隱蔽的房頂上張望袁梗。 院中可真熱鬧,春花似錦憔古、人聲如沸遮怜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽锯梁。三九已至,卻和暖如春焰情,著一層夾襖步出監(jiān)牢的瞬間陌凳,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工内舟, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留合敦,地道東北人。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓验游,卻偏偏與公主長得像充岛,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子耕蝉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評論 2 355

推薦閱讀更多精彩內(nèi)容