iOS之帶有邊框的圓形圖片裁剪

具體實現(xiàn)思路:

  • 1.假設(shè)邊框?qū)挾葹锽orderW
  • 2.開啟的圖片上下文的尺寸就應(yīng)該是原始圖片的寬高分別加上兩倍的BorderW,這樣開啟的目的是為了不讓原始圖片變形.
  • 3.在上下文上面添加一個圓形填充路徑.位置從(0,0)點開始,寬高和上下文尺寸一樣大.設(shè)置顏色為要設(shè)置的邊框顏色.
  • 4.繼續(xù)在上下文上面添加一個圓形路徑,這個路徑為裁剪路徑.
    它的x,y分別從BorderW這個點開始.寬度和高度分別和原始圖片的寬高一樣大.將繪制的這個路徑設(shè)為裁剪區(qū)域.
  • 5.把原始路徑繪制到上下文當(dāng)中.繪制的位置和是裁剪區(qū)域的位置相同,x,y分別從border開始繪制.
  • 6.從上下文狀態(tài)當(dāng)中取出圖片.
  • 7.關(guān)閉上下文狀態(tài).

圖形參照:


3.gif
加載要裁剪的圖片

UIImage *image = [UIImage imageNamed:@"阿貍頭像"];

  • 0.設(shè)置邊框大小.
    CGFloat borderW = 10;
  • 1.開啟一個和原始圖片一樣大小的位圖上下文.
UIGraphicsBeginImageContextWithOptions(size,NO,0);```
 -  2.繪制一個大圓,填充
``` UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, size.width, size.height)];    
[[UIColor blueColor] set];
[path fill];```
 -   3.添加一個裁剪區(qū)域.
```path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(borderW, borderW, image.size.width, image.size.height)];
[path addClip];```
 -   4.把圖片繪制到裁剪區(qū)域當(dāng)中.
 ```[image drawAtPoint:CGPointMake(borderW, borderW)];```
 -   5.生成一張新圖片.
```UIImage *clipImage = UIGraphicsGetImageFromCurrentImageContext();```
 -   6.關(guān)閉上下文.
 ```UIGraphicsEndImageContext();```

######抽取分類方法:

```根據(jù)傳入的圖片,生成一終帶有邊框的圓形圖片.
borderW邊框?qū)挾?borderColor:邊框顏色
image:要生成的原始圖片.
+ (UIImage *)imageWithBorderW:(CGFloat)borderW borderColor:(UIColor *)color image:(UIImage *)image;

+ (UIImage *)imageWithBorderW:(CGFloat)borderW borderColor:(UIColor *)color image:(UIImage *)image;```
  - 1.開啟一個和原始圖片一樣大小的位圖上下文.
```CGSize size = CGSizeMake(image.size.width + 2 *borderW, image.size.height + 2 * borderW);
UIGraphicsBeginImageContextWithOptions(size,NO,0);```
  -  2.繪制一個大圓,填充
```UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, size.width, size.height)];   
[[UIColor blueColor] set];
[path fill];```
  -  3.添加一個裁剪區(qū)域.
```path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(borderW, borderW, image.size.width, image.size.height)];
[path addClip];```
  -  4.把圖片繪制到裁剪區(qū)域當(dāng)中.
```[image drawAtPoint:CGPointMake(borderW, borderW)];```
  -  5.生成一張新圖片.
```UIImage *clipImage = UIGraphicsGetImageFromCurrentImageContext();```
  -  6.關(guān)閉上下文.
```UIGraphicsEndImageContext();       return clipImage;```
最后編輯于
?著作權(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)我...
    茶點故事閱讀 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
  • 正文 獨居荒郊野嶺守林人離奇死亡掉丽,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了异雁。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片捶障。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡赃额,死狀恐怖鬼吵,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情李剖,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布锭部,位于F島的核電站暂论,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏拌禾。R本人自食惡果不足惜取胎,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望湃窍。 院中可真熱鬧扼菠,春花似錦、人聲如沸坝咐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽墨坚。三九已至秧饮,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間泽篮,已是汗流浹背盗尸。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留帽撑,地道東北人泼各。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像亏拉,于是被迫代替她去往敵國和親扣蜻。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,033評論 2 355

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

  • Quartz2D以及drawRect的重繪機(jī)制字?jǐn)?shù)1487 閱讀21 評論1 喜歡1一及塘、什么是Quartz2D Q...
    PurpleWind閱讀 773評論 0 3
  • 1.圓形圖片裁剪 目標(biāo)明確: 得到一張圖片 (=> 位圖上下文亿笤,手動開啟和關(guān)閉,代碼位置任意)思路:先設(shè)置好位圖上...
    夏天不冷閱讀 797評論 0 1
  • 展示效果: 請問:實現(xiàn)的步驟是什么? 第一步栋猖,需求:需要把一張普通的圖片可以裁剪成圓形顯示,.請問:圖片裁減的思路...
    青蔥烈馬閱讀 1,389評論 0 6
  • 本學(xué)期“專心高效”2班最后一節(jié)課在今天完結(jié)净薛,第30次課還真是一波三折。一個都不能少掂铐,因為孩子們對最后一節(jié)課充滿期待...
    拉比教育劉芳閱讀 301評論 1 0
  • 今天我來給大家介紹一家很奇葩的家庭。在這個家庭里爆班,老公不是老公是爸爸衷掷。女兒不是女兒是管家。兒子你不是兒子是孫子柿菩。老...
    一切都那么美好閱讀 363評論 0 5