傳統依然是效果展示,請看下圖 ↓
這個顯示效果的做法有很多:
方法一: 使用兩張圖片, 作為邊框的背景圖片和中間的圖片,然后使用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();
接下來解釋一下上邊的代碼
- 首先是原理: 畫一個圓環, 寬度為borderWidth,然后將圖片放入這個圓環中, 使其只顯示圓環中的部分.
- 前三行代碼: 得到帶邊框的圖片的整體寬度和高度(因為要得到圓形圖片, 所以需要寬和高相同), 同時得到一個CGSize對象留著后邊用
- 代碼:
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
- 代碼:
CGContextRef context = UIGraphicsGetCurrentContext();
既然要使用上下文來繪制圖片, 當然得獲取當前的上下文對象了
- 代碼:
[borderColor set];
先來看一下這個set的頭文件注釋
// Sets the fill and stroke colors in the current drawing context
給當前的上下文設置填充和描邊的顏色, 說起填充色有沒有想到畫圖軟件中的填充 ?使用過PS的朋友應該很清楚.說白了這行代碼的意思就是設置好顏色, 待會給上下文上色用...
- 代碼:
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
- 代碼:
CGContextFillPath(context);
填充當前上下文, 用什么填充 ? 當然是填充色! 到這里我們得到了一個半徑為bigRadius, 顏色為填充色的圓形上下文
- 代碼:
CGFloat smallRadius = bigRadius - borderWidth;
CGContextAddArc(context, centerX, centerY, smallRadius, 0, M_PI * 2, 0);
意義和 -代碼6- 一樣, 給當前的上下文(一個有顏色的圓)添加一個圓弧, 其中的smallRadius就是中間圖片的半徑
- 代碼:
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- 得到的圓形上下文中間的部分來進行后續的繪制...
- 代碼:
[image drawInRect:CGRectMake(borderWidth, borderWidth, image.frame.size.width, image.frame.size.height)];
這個方法是將圖片以給定的范圍繪制到當前的圖形上下文中, -代碼9- 中已經得到了進行繪制操作的路徑, 也就是說, 這張圖只保留 -代碼9- 中路徑內的部分. 注意此時上下文已經變成了帶邊框的圓形圖片了!
- 代碼:
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
從當前上下文中得到圖片并關閉圖形上下文
到這里呢就算是結束了, 我們得到了一個帶有邊框的圓形圖片, 從方法復雜性來說方法二比較復雜, 使用了圖形上下文. 但是就得到圓形圖片來說他們的意義不同.
方法一是用疊加的原理得到視覺上的帶邊框
方法二則完全生成了一張帶邊框的圓形圖片
在日常開發中完成某項功能需要根據需求去決定如何實現, 同樣的, 上邊的兩種方法也是, 如果想要一張自帶邊框的圓形圖片使用方法二即可.
