在app中,關(guān)于圖片的圓角應(yīng)用非常廣泛,比如,圓形頭像的設(shè)置,圖片四個(gè)角的圓角處理,顯得比較圓滑,整體UI給人的感覺(jué),圓角相對(duì)直角來(lái)說(shuō),給人一種溫和的感覺(jué),而不是那種有棱有角的感覺(jué),最近遇到,需要處理一張圖片左上角和右上角的圓角處理,也就是單獨(dú)處理圖片的任意一個(gè)直角的圓角化設(shè)置,利用CAShapeLayer處理任意一個(gè)直角的圓角設(shè)置;
最終結(jié)果:
一.app中的需求
- 頭像的圓形處理
- 圖片的左上和右上圓角需求
二.解決辦法
1.直接找UI切圖,呵呵......
2.設(shè)置layer,然后maskToBounds,即可,但是任意一個(gè)角,就處理不了了;
3.CAShapeLayer設(shè)置path;
2.1 頭像的圓角處理
視圖之所以能夠顯示,皆因?yàn)関iew中l(wèi)ayer層,因此,頭像的圓形設(shè)置就有兩種方法
- 第一種:
通過(guò)設(shè)置layer的cornerRadius=width的一半,然后設(shè)置 masksToBounds = yes;
- 第二種:
利用drawInRect繪制一張新的圓形圖片,這樣不需要每次設(shè)置當(dāng)前view的layer的圓角半徑,具體如下:
- (instancetype)circleImage
{
// 開(kāi)啟圖形上下文
UIGraphicsBeginImageContext(self.size);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
CGContextAddEllipseInRect(ctx, rect);
CGContextClip(ctx);
[self drawInRect:rect];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
2.2 圖片任意直角圓角化
直接上代碼
/**
* 返回一個(gè)任意圓角尺寸的view
*
* @param corners
枚舉UIRectCornerTopLeft
UIRectCornerTopRight
UIRectCornerBottomLeft
UIRectCornerBottomRight
UIRectCornerAllCorners
* @param cornerRadii 圓角的尺寸(CGSize)
*
* @return 返回一個(gè)任意圓角尺寸的view
*/
+ (CAShapeLayer *)viewByRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii currentView:(UIView *)view{
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds byRoundingCorners:corners cornerRadii:cornerRadii];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = view.bounds;
maskLayer.path = maskPath.CGPath;
return maskLayer;
}
