利用CAShaperLayer绘制气泡

实现机制

在每一View的layer层中有一个mask属性,他就是专门来设置该View的遮罩效果的。该mask本身也是一个layer层。我们只需要生成一个自定义的layer,然后覆盖在需要遮罩的View上面即可。问题就归于如何生成入上图所示的不规则图片的Layer。CAShapeLayer可以根据几个点的依次连线,产生一个闭合空间的layer。

实现方法

实现一个CAShapeLayer的Category。

+ (instancetype)createMaskLayerWithView : (UIView *)view{

       CGFloat viewWidth = CGRectGetWidth(view.frame);
       CGFloat viewHeight = CGRectGetHeight(view.frame);

       CGFloat rightSpace = 10;
       CGFloat topSpace = 10;
       CGFloat radius = 10;

       CGPoint point1 = CGPointMake(0, radius);
       CGPoint point2 = CGPointMake(radius, 0);
       CGPoint point3 = CGPointMake(viewWidth-rightSpace-radius, 0);
       CGPoint point4 = CGPointMake(viewWidth-rightSpace, topSpace);
       CGPoint point5 = CGPointMake(viewWidth, topSpace);
       CGPoint point6 = CGPointMake(viewWidth-rightSpace, topSpace+10);
       CGPoint point7 = CGPointMake(viewWidth-rightSpace, viewHeight-radius);
       CGPoint point8 = CGPointMake(viewWidth-rightSpace-radius, viewHeight);
       CGPoint point9 = CGPointMake(radius, viewHeight);
       CGPoint point10 = CGPointMake(0, viewHeight-radius);

       UIBezierPath *path = [UIBezierPath bezierPath];
       [path moveToPoint:point1];
       [path addArcWithCenter:CGPointMake(radius, radius) radius:radius startAngle:M_PI endAngle:M_PI*1.5 clockwise:YES];
       [path addLineToPoint:point2];
       [path addLineToPoint:point3];
       [path addArcWithCenter:CGPointMake(viewWidth-2*radius, radius) radius:radius startAngle:M_PI*1.5 endAngle:0 clockwise:YES];
       [path addLineToPoint:point4];
       [path addLineToPoint:point5];
       [path addLineToPoint:point6];
       [path addLineToPoint:point7];
       [path addArcWithCenter:CGPointMake(viewWidth-2*radius, viewHeight-radius) radius:radius startAngle:0 endAngle:M_PI*0.5 clockwise:YES];
       [path addLineToPoint:point8];
       [path addLineToPoint:point9];
       [path addArcWithCenter:CGPointMake(radius, viewHeight-radius) radius:radius startAngle:M_PI*0.5 endAngle:M_PI clockwise:YES];
       [path addLineToPoint:point10];
       [path closePath];

       CAShapeLayer *layer = [CAShapeLayer layer];
       layer.path = path.CGPath;

       return layer;
}

       UIView *view = [[UIView alloc] initWithFrame:CGRectMake(40, 50, 200, 40)];
       view.backgroundColor = [UIColor orangeColor];
       CAShapeLayer *layer = [CAShapeLayer createMaskLayerWithView:view];
       view.layer.mask = layer;
       [self.view addSubview:view];

参数说明

center:Specifies the center point of the circle (in the current coordinate system) used to define the arc.

radius:Specifies the radius of the circle used to define the arc.

startAngle: Specifies the starting angle of the arc (measured in radians).

endAngle:Specifies the end angle of the arc (measured in raians).

clockwise:The direction in which to draw the arc.




实现效果如下图: