---

先來看看後果圖 ↓

這個顯示後果的做法有許多:

辦法一: 應用兩張圖片, 作為邊框的配景圖片和中央的圖片,然後應用imageView的cornerRadius來做圓, 詳細代碼以下:

backImageView.layer.cornerRadius = backImageView.frame.size.width / 2;
backImageView.layer.masksToBounds = YES;
frontImageView.layer.cornerRadius = frontImageView.frame.size.width / 2;
frontImageView.layer.masksToBounds = YES;

然則很明顯, 明天的配角其實不是上邊的辦法.上邊的做法須要兩張圖片來完成帶邊框的圓形圖片,而接上去要引見的辦法其實不須要兩張圖片, 只須要一張圖片便可以!

辦法二: 應用圖形高低文, 生成一張帶有邊框的圓形圖片, 話不多說, 代碼以下:

// borderWidth 表現邊框的寬度
CGFloat imageW = image.size.width + 2 * borderWidth;
CGFloat imageH = imageW;
CGSize imageSize = CGSizeMake(imageW, imageH);
UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);
CGContextRef context = UIGraphicsGetCurrentContext();
// borderColor表現邊框的色彩
[borderColor set];
CGFloat bigRadius = imageW * 0.5;
CGFloat centerX = bigRadius;
CGFloat centerY = bigRadius;
CGContextAddArc(context, centerX, centerY, bigRadius, 0, M_PI * 2, 0);
CGContextFillPath(context);
CGFloat smallRadius = bigRadius - borderWidth;
CGContextAddArc(context, centerX, centerY, smallRadius, 0, M_PI * 2, 0);
CGContextClip(context);
[image draWinRect:CGRectMake(borderWidth, borderWidth, image.frame.size.width, image.frame.size.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

接上去說明一下上邊的代碼

1、起首是道理: 畫一個圓環, 寬度為borderWidth,然後將圖片放入這個圓環中, 使其只顯示圓環中的部門.

2、前三行代碼: 獲得帶邊框的圖片的全體寬度和高度(由於要獲得圓形圖片, 所以須要寬和高雷同), 同時獲得一個CGSize對象留著後邊用

3、代碼:

UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);

表現開啟圖形高低文, 我們來看一些頭文件中的辦法聲明:

UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)

第一個參數須要填入一個CGSize對象, 也就是第三行的imageSize,表現繪制圖形的規模

第二個參數的布爾值表現能否通明, 選擇NO便可

If the opaque parameter is YES, the alpha channel is ignored and the bitmap is treated as fully opaque

第三個參數的scale是比例因子, 我們填入0.0, 表現是以屏幕的比例來盤算

If you specify a value of 0.0, the scale factor is set to the scale factor of the device's main screen

4、代碼:

CGContextRef context = UIGraphicsGetCurrentContext();

既然要應用高低文來繪制圖片, 固然得獲得以後的高低文對象了

5、代碼:

[borderColor set];

先來看一下這個set的頭文件正文

// Sets the fill and stroke colors in the current draWing context

給以後的高低文設置填充和描邊的色彩, 說起填充色有無想到繪圖軟件中的填充 ?應用過PS的同伙應當很清晰.說白了這行代碼的意思就是設置好色彩, 待會給圓環上色用...

6、代碼:

CGFloat bigRadius = imageW * 0.5;
CGFloat centerX = bigRadius;
CGFloat centerY = bigRadius;
CGContextAddArc(context, centerX, centerY, bigRadius, 0, M_PI * 2, 0);

正常來說畫一個圓須要甚麼 ? 須要半徑和圓心對纰謬

bigRadius 是帶邊框圖片全體的繪制半徑, 畫圓須要半徑, 這個就是!

centerX 和centerY 是圓心坐標的x和y

CGContextAddArc 這個辦法表現給以後的高低文畫一個圓弧, 我們來看下頭文件的辦法聲明

void CGContextAddArc(CGContextRef cg_nullable c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)

參數比擬多, 我分離列出來其表現的意義:

     @param c 高低文

     @param x 圓弧中間點的x

     @param y 圓弧中間點的y

     @param radius 圓弧的半徑(bigRadius)

     @param startAngle 肇端點的角度

     @param endAngle 停止點的角度 M_PI * 2表現一周

     @param clockwise 順時針畫圓弧填1 逆時針填0

7、代碼:

CGContextFillPath(context);

填充任前高低文, 用甚麼填充 ? 固然是填充色! 到這裡我們獲得了一個半徑為bigRadius, 色彩為填充色的圓形高低文

8、代碼:

CGFloat smallRadius = bigRadius - borderWidth;
CGContextAddArc(context, centerX, centerY, smallRadius, 0, M_PI * 2, 0);

意義和 -代碼6- 一樣, 給以後的高低文(一個有色彩的圓)添加一個圓弧, 個中的smallRadius就是中央圖片的半徑

9、代碼:

CGContextClip(context);

頭文件是這麼說的: Intersect the context's path with the current clip path and use the
resulting path as the clip path for subsequent rendering operations.

年夜意是將以後的高低文以以後的剪輯途徑(代碼8所畫的圓弧)停止剪輯, 然後應用剪輯後的途徑(代碼8獲得的圓弧)來停止後續的著色操作.

簡略說就是應用 -代碼7- 獲得的圓形高低文中央的部門來停止後續的繪制...

10、代碼:

[image draWinRect:CGRectMake(borderWidth, borderWidth, image.frame.size.width, image.frame.size.height)];

這個辦法是將圖片以給定的規模繪制到以後的圖形高低文中, -代碼9- 中曾經獲得了停止繪制操作的途徑, 也就是說, 這張圖只保存 -代碼9- 中途徑內的部門. 留意此時高低文曾經釀成了帶邊框的圓形圖片了!

11、代碼:

UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

從以後高低文中獲得圖片並封閉圖形高低文

到這裡呢就算是停止了, 我們獲得了一個帶有邊框的圓形圖片, 從辦法龐雜性來講辦法二比擬龐雜, 應用了圖形高低文. 然則就獲得圓形圖片來講他們的意義分歧.

辦法一是用疊加的道理獲得視覺上的帶邊框

辦法二則完整生成了一張帶邊框的圓形圖片

停止語

在平常開辟中完成某項功效須要依據需求去決議若何完成, 異樣的, 上邊的兩種辦法也是, 假如想要一張自帶邊框的圓形圖片應用辦法二便可，以上就是本文的全體內容，願望對年夜家開辟進修能有所贊助。

【IOS完成圓形圖片後果的兩種辦法】的相關資料介紹到這裡，希望對您有所幫助！ 提示：不會對讀者因本文所帶來的任何損失負責。如果您支持就請把本站添加至收藏夾哦！