CALayer mask 遮罩

最新推荐文章于 2019-02-01 14:41:00 发布

原创最新推荐文章于 2019-02-01 14:41:00 发布 · 561 阅读

0 ·

CC 4.0 BY-SA版权

ios 专栏收录该内容

80 篇文章

订阅专栏

本文介绍如何利用iOS中的CAShapeLayer作为遮罩(mask)来限定CAGradientLayer的显示区域，通过具体代码示例展示了如何创建不规则形状的遮罩并应用到渐变色图层上，最终实现独特的视觉效果。

mask - 遮罩，遮罩之外部分不会显示

CAGradientLayer - 渐变色layer

UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(5, 5)];
    [path addLineToPoint:CGPointMake(80, 5)];
    [path addLineToPoint:CGPointMake(100, 30)];
    [path addLineToPoint:CGPointMake(120, 5)];
    [path addLineToPoint:CGPointMake(140, 80)];
    [path closePath];
    
    //遮罩layer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.strokeColor = [UIColor purpleColor].CGColor;
    shapeLayer.fillColor = [UIColor orangeColor].CGColor;
    shapeLayer.lineWidth = 3;
    shapeLayer.path = path.CGPath;
    
    //渐变色layer
    CAGradientLayer *gradiLayer = [CAGradientLayer layer];
    gradiLayer.colors = @[(__bridge id)[UIColor blueColor].CGColor,(__bridge id)[UIColor yellowColor].CGColor,(__bridge id)[UIColor redColor].CGColor];
    gradiLayer.frame = CGRectMake(0, 0, 200, 100);
    gradiLayer.locations = @[@(0),@(0.3),@(1)];
    gradiLayer.startPoint = CGPointMake(0.5, 0);
    gradiLayer.endPoint = CGPointMake(0.5, 1);
    
    [backView.layer addSublayer:gradiLayer];
    [backView.layer addSublayer:shapeLayer];
    
    //遮罩范围之外的部分不会显示
    gradiLayer.mask = shapeLayer;