先來(lái)看看效果圖 ↓

這個(gè)顯示效果的做法有很多:

方法一: 使用兩張圖片, 作為邊框的背景圖片和中間的圖片,然后使用imageView的cornerRadius來(lái)做圓, 具體代碼如下:

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

但是很顯然, 今天的主角并不是上邊的方法.上邊的做法需要兩張圖片來(lái)完成帶邊框的圓形圖片,而接下來(lái)要介紹的方法并不需要兩張圖片, 只需要一張圖片就可以!

方法二: 使用圖形上下文, 生成一張帶有邊框的圓形圖片, 話不多說(shuō), 代碼如下:

// 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();

接下來(lái)解釋一下上邊的代碼

1、首先是原理: 畫一個(gè)圓環(huán), 寬度為borderWidth,然后將圖片放入這個(gè)圓環(huán)中, 使其只顯示圓環(huán)中的部分.

2、前三行代碼: 得到帶邊框的圖片的整體寬度和高度(因?yàn)橐玫綀A形圖片, 所以需要寬和高相同), 同時(shí)得到一個(gè)CGSize對(duì)象留著后邊用

3、代碼:

UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);

表示開(kāi)啟圖形上下文, 我們來(lái)看一些頭文件中的方法聲明:

UIGraphicsBeginImageContextWithOptions(CGSize size, BOOL opaque, CGFloat scale)

第一個(gè)參數(shù)需要填入一個(gè)CGSize對(duì)象, 也就是第三行的imageSize,表示繪制圖形的范圍

第二個(gè)參數(shù)的布爾值表示是否透明, 選擇NO即可

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

第三個(gè)參數(shù)的scale是比例因子, 我們填入0.0, 表示是以屏幕的比例來(lái)計(jì)算

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();

既然要使用上下文來(lái)繪制圖片, 當(dāng)然得獲取當(dāng)前的上下文對(duì)象了

5、代碼:

[borderColor set];

先來(lái)看一下這個(gè)set的頭文件注釋

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

給當(dāng)前的上下文設(shè)置填充和描邊的顏色, 說(shuō)起填充色有沒(méi)有想到畫圖軟件中的填充 ?使用過(guò)PS的朋友應(yīng)該很清楚.說(shuō)白了這行代碼的意思就是設(shè)置好顏色, 待會(huì)給圓環(huán)上色用...

6、代碼:

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

正常來(lái)講畫一個(gè)圓需要什么 ? 需要半徑和圓心對(duì)不對(duì)

bigRadius 是帶邊框圖片整體的繪制半徑, 畫圓需要半徑, 這個(gè)就是!

centerX 和centerY 是圓心坐標(biāo)的x和y

CGContextAddArc 這個(gè)方法表示給當(dāng)前的上下文畫一個(gè)圓弧, 我們來(lái)看下頭文件的方法聲明

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

參數(shù)比較多, 我分別列出來(lái)其表示的意義:

     @param c 上下文

     @param x 圓弧中心點(diǎn)的x

     @param y 圓弧中心點(diǎn)的y

     @param radius 圓弧的半徑(bigRadius)

     @param startAngle 起始點(diǎn)的角度

     @param endAngle 結(jié)束點(diǎn)的角度 M_PI * 2表示一周

     @param clockwise 順時(shí)針畫圓弧填1 逆時(shí)針填0

7、代碼:

CGContextFillPath(context);

填充當(dāng)前上下文, 用什么填充 ? 當(dāng)然是填充色! 到這里我們得到了一個(gè)半徑為bigRadius, 顏色為填充色的圓形上下文

8、代碼:

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

意義和 -代碼6- 一樣, 給當(dāng)前的上下文(一個(gè)有顏色的圓)添加一個(gè)圓弧, 其中的smallRadius就是中間圖片的半徑

9、代碼:

CGContextClip(context);

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

大意是將當(dāng)前的上下文以當(dāng)前的剪輯路徑(代碼8所畫的圓弧)進(jìn)行剪輯, 然后使用剪輯后的路徑(代碼8得到的圓弧)來(lái)進(jìn)行后續(xù)的著色操作.

簡(jiǎn)單說(shuō)就是使用 -代碼7- 得到的圓形上下文中間的部分來(lái)進(jìn)行后續(xù)的繪制...

10、代碼:

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

這個(gè)方法是將圖片以給定的范圍繪制到當(dāng)前的圖形上下文中, -代碼9- 中已經(jīng)得到了進(jìn)行繪制操作的路徑, 也就是說(shuō), 這張圖只保留 -代碼9- 中路徑內(nèi)的部分. 注意此時(shí)上下文已經(jīng)變成了帶邊框的圓形圖片了!

11、代碼:

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

從當(dāng)前上下文中得到圖片并關(guān)閉圖形上下文

到這里呢就算是結(jié)束了, 我們得到了一個(gè)帶有邊框的圓形圖片, 從方法復(fù)雜性來(lái)說(shuō)方法二比較復(fù)雜, 使用了圖形上下文. 但是就得到圓形圖片來(lái)說(shuō)他們的意義不同.

方法一是用疊加的原理得到視覺(jué)上的帶邊框

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

結(jié)束語(yǔ)

在日常開(kāi)發(fā)中完成某項(xiàng)功能需要根據(jù)需求去決定如何實(shí)現(xiàn), 同樣的, 上邊的兩種方法也是, 如果想要一張自帶邊框的圓形圖片使用方法二即可，以上就是本文的全部?jī)?nèi)容，希望對(duì)大家開(kāi)發(fā)學(xué)習(xí)能有所幫助。

最新評(píng)論