使用UIBezierPath贝塞尔曲线配合CAShapeLayer抠图

使用UIBezierPath贝塞尔曲线配合CAShapeLayer抠图

系统提供的UIBezierPath构造方法

先来看看构造方法列表,以及构造出来的形状,具体详见后面的示例及图片。

1、矩形

+ (instancetype)bezierPathWithRect:(CGRect)rect;

2、内切圆,即椭圆

+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;

3、圆角矩形

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; // rounds all corners with the same horizontal and vertical radius

,可设置圆角的半径

4、部分圆角的矩形

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;

* rect: 矩形frame
* corners: 要画成圆角的部位
* cornerRadii: 圆角的大小

5、圆弧

+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;

* center: 圆心坐标
* radius: 圆的半径
* startAngle: 起点角度
* endAngle: 终点角度
* clockwise: 是否顺时针

6、指定路径

+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;

配合CAShapeLayer

利用CAShapeLayer,能画出各种形状,只需要将UIBezierPath的CGPath赋予CAShapeLayer的path即可。

代码示例

// 要抠的透明区域位置
CGRect cutFrame = CGRectMake(0, 200, self.view.bounds.size.width, 400);
UIBezierPath *cutPath1 = [UIBezierPath bezierPathWithRect:cutFrame];//图1 - 普通矩形
/*
 UIBezierPath *cutPath2 = [UIBezierPath bezierPathWithRoundedRect:cutFrame cornerRadius:20];//图2 - 圆角为20的圆角矩形
 UIBezierPath *cutPath3 = [UIBezierPath bezierPathWithRoundedRect:cutFrame byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(20, 20)];//图3 - 左上和右上为圆角20的部分圆角矩形
 UIBezierPath *cutPath4 = [UIBezierPath bezierPathWithOvalInRect:cutFrame];//图4 - 内切圆(椭圆)
 */

// 要抠透明区域的原图
CGRect viewFrame = self.view.bounds;
UIBezierPath *viewPath = [UIBezierPath bezierPathWithRect:viewFrame];

// 调用bezierPathByReversingPath,进行路径反转,才会产生抠图效果
[viewPath appendPath:[cutPath1 bezierPathByReversingPath]];

// 配合CAShapeLayer,调用layer(此layer必须是第一层,不能嵌套)的setMask方法设置遮罩层
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = viewPath.CGPath;
[self.view.layer setMask:shapeLayer];       

效果图

图1 - 普通矩形
使用UIBezierPath贝塞尔曲线配合CAShapeLayer抠图_第1张图片
General preferences pane
图2 - 圆角为20的圆角矩形
使用UIBezierPath贝塞尔曲线配合CAShapeLayer抠图_第2张图片
General preferences pane
图3 - 左上和右上为圆角20的部分圆角矩形
使用UIBezierPath贝塞尔曲线配合CAShapeLayer抠图_第3张图片
General preferences pane
图4 - 内切圆(椭圆)
使用UIBezierPath贝塞尔曲线配合CAShapeLayer抠图_第4张图片
General preferences pane

你可能感兴趣的:(使用UIBezierPath贝塞尔曲线配合CAShapeLayer抠图)