Mask MaskView

最新推荐文章于 2021-05-28 09:05:22 发布

原创最新推荐文章于 2021-05-28 09:05:22 发布 · 400 阅读

0 ·

CC 4.0 BY-SA版权

本文深入解析CALayer中的mask与View中的maskView的使用与区别，通过实例展示如何创建遮罩层与被遮罩层，并实现特定视觉效果。重点介绍了mask属性的应用场景，以及如何在不同视图组件间建立遮罩关系。

关于CALayer中的mask（遮罩）和 View中的maskView（遮罩view）的理解；

1.首先说一下关于我对遮罩的理解吧

　　第一：遮罩我感觉就是当遮罩层的alpha通道为0的时候就是透明的，反之则显示，只是背景色变为被遮罩层的背景色，（感觉跟PS中的蒙版差不多原理）；

　　第二：例子，假设，我这边有A,B2个View，其中A的背景色为纯绿色，B为label，text=@“我是遮罩层”；

　　　　　　然后就可以A.maskView = B；那么就把B看做是A的遮罩层（MaskView），最终的显示结果是，显示的字为绿色的“我是遮罩层”，

　　额，大概的效果就是这样子，具体的话，代码来实现以下吧

　　maskView：

 //遮罩背景层，相当于A层
    UIView *maskView = [[UIView  alloc]initWithFrame:self.gradientLabel.frame];
    maskView.backgroundColor = [UIColor redColor];
    [self.view addSubview:maskView];
    [self.view addConstraints:[self getLayoutConstraintWithView:maskView SupperView:self.gradientLabel Inset:UIEdgeInsetsMake(0, 30, 0, 120)]];
    
    //遮罩层 相当于B层
    UILabel *newLabel = [[UILabel alloc]init];
    newLabel.numberOfLines = 0;
    newLabel.text = @"LabelLabelLabelLabel";
    //关于这个，遮罩层要不要ADD进父视图，额，我这边的实验结果是可以不ADD进去，当然ADD进父视图貌似也没有影响
//    [self.view addSubview:newLabel];
//    [self.view addConstraints:[self getLayoutConstraintWithView:newLabel SupperView:self.gradientLabel Inset:UIEdgeInsetsZero]];
    maskView.maskView = newLabel;
    
    //设置了mask之后，一定要记住，重新设置B层的frame，此时可以看成B层是A层的subView来定位
    CGRect frame = self.gradientLabel.bounds;
    frame.origin.x = -30;
    frame.size.width += 30;
    newLabel.frame = frame;

显示结果：

关于layer的Mask

 //可以定义layer
//    CALayer *layer = [CALayer layer];
//    layer.frame = CGRectMake(50, 50, 100, 200);
//    layer.backgroundColor = [UIColor greenColor].CGColor;
//    [self.view.layer insertSublayer:layer atIndex:0];
    
    //也可以定义imageView
    UIImageView *image = [[UIImageView alloc]initWithFrame:CGRectMake(50, 50, 100, 200)
    ];
    image.image = [UIImage imageNamed:@"app1.png"];
    [self.view addSubview:image];

    UILabel *label = [[UILabel alloc]init];
    label.frame = CGRectMake(0, 0, 100, 0);
    label.font = [UIFont systemFontOfSize:25];
    label.text = @"我是遮罩层";
    label.numberOfLines = 0;
    [label sizeToFit];
    //记住，如果用的是layer的mask，那么遮罩层一定要ADD到父视图中
    [self.view addSubview:label];
    
    image.layer.mask = label.layer;
    label.frame = image.layer.bounds;

显示结果：

这个关于Mask（遮罩层）大致需要注意的就是这些了，

那么说一说我为什么会用到这个属性吧，因为我这边需要用到一个颜色渐变的Label，（额，网上别人也有，只是当时没理解，现在自己做一遍的话，理解透彻点）

那么这里就需要用到一个渐变的类CAGradientLayer

 CAGradientLayer *layer = [[CAGradientLayer alloc]init];
    layer.frame = CGRectMake(50, 50, 100, 200);
    layer.colors = @[(id)[UIColor greenColor].CGColor,(id)[UIColor blueColor].CGColor,(id)[UIColor yellowColor].CGColor];
    layer.startPoint = CGPointMake(0, 1);
    layer.endPoint = CGPointMake(1,1);
    [self.view.layer insertSublayer:layer atIndex:0];
    
    //也可以定义imageView
//    UIImageView *image = [[UIImageView alloc]initWithFrame:CGRectMake(50, 50, 100, 200)
//    ];
//    image.image = [UIImage imageNamed:@"app1.png"];
//    [self.view addSubview:image];

    UILabel *label = [[UILabel alloc]init];
    label.frame = CGRectMake(0, 0, 100, 0);
    label.font = [UIFont systemFontOfSize:25];
    label.text = @"我是遮罩层我是遮罩层";
    label.numberOfLines = 0;
    [label sizeToFit];
    //记住，如果用的是layer的mask，那么遮罩层一定要ADD到父视图中
    [self.view addSubview:label];
    
    layer.mask = label.layer;
    label.frame = layer.bounds;