在iOS中總會遇到一些不規(guī)則圖片或者一些圓角設(shè)置的問題,一般情況下我們設(shè)置圓角可以通過layer上來實現(xiàn),
self.imgview.layer.masksToBounds=YES;
self.imgview.layer.cornerRadius=10;
但是遇到一些不規(guī)則的我們該怎么處理呢?這個時候我們就需要使用到CaShapeLayer了.
廢話不多說 先上代碼 然后仔細(xì)講解
#import <UIKit/UIKit.h>
@interface WWCustomerView : UIView
@end
#import "WWCustomerView.h"
@interface WWCustomerView()
{
CALayer* contentLayer;
CAShapeLayer* maskLayer;
}
@end
@implementation WWCustomerView
-(id)initWithFrame:(CGRect)frame{
if (self=[super initWithFrame:frame]) {
//[self makeContents1];
//[self makeContents2];
// [self makeContents3];
[self makeContents4];
}
return self;
}
/**
正常切割成圓形
*/
-(void)makeContents1
{
maskLayer= [CAShapeLayer layer];
//路徑
maskLayer.path=[UIBezierPath bezierPathWithOvalInRect:self.bounds].CGPath;
maskLayer.fillColor=[UIColor blackColor].CGColor;//填充色
maskLayer.strokeColor=[UIColor redColor].CGColor;
maskLayer.frame=self.bounds;
maskLayer.contentsCenter=CGRectMake(0.5, 0.5, 0.1, 0.1);
maskLayer.contentsScale=[UIScreen mainScreen].scale;
//
contentLayer=[CALayer layer];
contentLayer.mask=maskLayer;
contentLayer.frame=self.bounds;
[self.layer addSublayer:contentLayer];
contentLayer.contents=(__bridge id _Nullable)([UIImage imageNamed:@"2.jpg"].CGImage);
}
//切割為圓角 只需要改maskLayer.path部分 的方法
-(void)makeContents2
{
maskLayer= [CAShapeLayer layer];
//路徑
//maskLayer.path=[UIBezierPath bezierPathWithOvalInRect:self.bounds:].CGPath;
maskLayer.path=[UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:30].CGPath;
maskLayer.fillColor=[UIColor blackColor].CGColor;//填充色
maskLayer.strokeColor=[UIColor redColor].CGColor;
maskLayer.frame=self.bounds;
maskLayer.contentsCenter=CGRectMake(0.5, 0.5, 0.1, 0.1);
//按比例放大 不變形
maskLayer.contentsScale=[UIScreen mainScreen].scale;
//
contentLayer=[CALayer layer];
contentLayer.mask=maskLayer;
contentLayer.frame=self.bounds;
[self.layer addSublayer:contentLayer];
contentLayer.contents=(__bridge id _Nullable)([UIImage imageNamed:@"2.jpg"].CGImage);
}
/**
根據(jù)幾何知識規(guī)則 生成不規(guī)則圖形
*/
-(void)makeContents3{
//生成path
CGMutablePathRef path =CGPathCreateMutable();
CGPoint orginPoint=self.bounds.origin;//起點
CGFloat radius=CGRectGetWidth(self.bounds)/6;//半徑
CGPathMoveToPoint(path, NULL, orginPoint.x, orginPoint.y+5*radius);//左邊直線下點
CGPathMoveToPoint(path, NULL, orginPoint.x, orginPoint.y+radius );//左邊直線上點
//2個點 和半徑畫圓弧
CGPathAddArcToPoint(path,NULL, orginPoint.x, orginPoint.y, orginPoint.x+ radius, orginPoint.y, radius);
CGPathAddArcToPoint(path, NULL, orginPoint.x+5*radius, orginPoint.y, orginPoint.x+5*radius, orginPoint.y+radius, radius);
CGPathAddArcToPoint(path, NULL, orginPoint.x+5*radius, orginPoint.y+5*radius, orginPoint.x+radius, orginPoint.y+2*radius, radius);
CGPathAddLineToPoint(path, NULL, orginPoint.x, orginPoint.y+5*radius);
maskLayer= [CAShapeLayer layer];
// maskLayer.path=[UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:30].CGPath;
maskLayer.path=path;
maskLayer.fillColor=[UIColor blackColor].CGColor;//填充色
maskLayer.strokeColor=[UIColor redColor].CGColor;
maskLayer.frame=self.bounds;
maskLayer.contentsCenter=CGRectMake(0.5, 0.5, 0.1, 0.1);
//按比例放大 不變形
maskLayer.contentsScale=[UIScreen mainScreen].scale;
//
contentLayer=[CALayer layer];
contentLayer.mask=maskLayer;
contentLayer.frame=self.bounds;
[self.layer addSublayer:contentLayer];
contentLayer.contents=(__bridge id _Nullable)([UIImage imageNamed:@"2.jpg"].CGImage);
}
/**
可以通過設(shè)置CAShapedLayer的contents來設(shè)置maskLayer
4png 是一張帶有右邊氣泡尖角的圖片
*/
-(void)makeContents4
{
maskLayer= [CAShapeLayer layer];
//路徑
//maskLayer.path=[UIBezierPath bezierPathWithOvalInRect:self.bounds:].CGPath;
maskLayer.path=[UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:30].CGPath;
maskLayer.fillColor=[UIColor blackColor].CGColor;//填充色
maskLayer.strokeColor=[UIColor redColor].CGColor;
maskLayer.frame=self.bounds;
maskLayer.contentsCenter=CGRectMake(0.5, 0.5, 0.1, 0.1);
//按比例放大 不變形
maskLayer.contentsScale=[UIScreen mainScreen].scale;
//
contentLayer=[CALayer layer];
contentLayer.mask=maskLayer;
contentLayer.frame=self.bounds;
[self.layer addSublayer:contentLayer];
contentLayer.contents=(__bridge id _Nullable)([UIImage imageNamed:@"4png"].CGImage);
}
@end
我們自定義了一個繼承于UIView的類WWCustomerView
在類的實現(xiàn)文件中聲明了2個成員變量
CALayer* contentLayer;
CAShapeLayer* maskLayer;
-
正圓形的圖片
調(diào)用方法 -(void)makeContents1生成的結(jié)果如下 和使用layer 效果是一樣的
-
1.png
- 部分圓角的
調(diào)用方法
-(void)makeContents2
- 部分圓角的
生成的結(jié)果如下 和使用layer 效果是一樣的
相比較于方法1 只是修改了利用貝塞爾曲線生成path
[UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:30].CGPath;
2.png
-
根據(jù)幾何知識規(guī)則 生成不規(guī)則圖形
-(void)makeContents3
生成的結(jié)果如下
-
3.png
-
-
可以通過設(shè)置CAShapedLayer的contents來設(shè)置maskLayer
-(void)makeContents4
生成的結(jié)果如下
-
4.png
