CAShapeLayer融合绘图

发表于 | 分类于 |

CAShapeLayer属于Core Animation框架下。
CAShapeLayer 是 CALayer 的子类，但是比 CALayer 更灵活，可以画出各种图形。
CAShapeLayer 还有一个神奇的属性 path 用这个属性配合上 UIBezierPath 这个类就可以达到超神的效果。

实现效果：普通图片 和 CAShapeLayer绘制出来的形状 进行融合
Image text Image text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@implementation CAShapeLayer (ViewMask)
+ (instancetype)createMaskLayerWithView : (UIView *)view{
    CGFloat viewWidth = CGRectGetWidth(view.frame);
    CGFloat viewHeight = CGRectGetHeight(view.frame);
    CGFloat rightSpace = 10.;
    CGFloat topSpace = 15.;
    CGPoint point1 = CGPointMake(0, 0);
    CGPoint point2 = CGPointMake(viewWidth-rightSpace, 0);
    CGPoint point3 = CGPointMake(viewWidth-rightSpace, topSpace);
    CGPoint point4 = CGPointMake(viewWidth, topSpace);
    CGPoint point5 = CGPointMake(viewWidth-rightSpace, topSpace+10.);
    CGPoint point6 = CGPointMake(viewWidth-rightSpace, viewHeight);
    CGPoint point7 = CGPointMake(0, viewHeight);
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:point1];
    [path addLineToPoint:point2];
    [path addLineToPoint:point3];
    [path addLineToPoint:point4];
    [path addLineToPoint:point5];
    [path addLineToPoint:point6];
    [path addLineToPoint:point7];
    [path closePath];
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    return layer;
}
@end
1
2
3
4
5
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(40, 50, 80, 100)];
view.backgroundColor = [UIColor orangeColor];
[self.view addSubview:view];
CAShapeLayer *layer = [CAShapeLayer createMaskLayerWithView:view];
view.layer.mask = layer;

Mask

CALayer有一个属性叫做mask，通常被称为蒙版图层，这个属性本身也是CALayer类型，有和其他图层一样的绘制和布局属性。它类似于一个子视图，相对于父图层（即拥有该属性的图层）布局，但是它却不是一个普通的子视图。不同于一般的subLayer，mask定义了父图层的可见区域，简单点说就是最终父视图显示的形态是父视图自身和它的属性mask的交集部分。
Image text
mask图层的color属性是无关紧要的，真正重要的是它的轮廓，mask属性就像一个切割机，父视图被mask切割，相交的部分会留下，其他的部分则被丢弃。
CALayer的蒙版图层真正厉害的地方在于蒙版图层不局限于静态图，任何有图层构成的都可以作为mask属性，这意味着蒙版可以通过代码甚至是动画实时生成。

打赏支持一下呗！