IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    CALayer的masking显示

    王龙发表于 2016-04-12 08:34:38
    love 0

    CALayer有一个BOOL属性值是masksToBounds,当这个值为TRUE时,他的superLayer中的内容会根据bounds值进行裁剪,也就是说在bounds内的内容会显示,否则不显示,配合着CALayer的cornerRadius则可以完成诸如圆角之类的效果。

    但有时仅仅圆角的效果是不够用的,因为这些算事在rect效果上的一些小修改,如果有别的需求,比如一个五角星的相片框,只用上面两个值是无法实现的。

    在这种情况下,CALayer的mask就有用了。CALayer的mask属性也是一个CALayer,如果我们给这个CALayer赋值为一张PNG的图片,则UIKit会计算出这个PNG图片的边缘区域,结果就是所有在这个区域内的内容会显示,否则不显示。

    当我们使用如下代码时,会在屏幕中央显示一个黑色的图片

        UIImage *image = [UIImage imageNamed:@"Black"];
    
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
        imageView.center = CGPointMake(CGRectGetMidX(self.view.bounds), CGRectGetMidY(self.view.bounds));
        imageView.image = image;
    
        [self.view addSubview:imageView];
    

    如下

    如果我们加上一个五角星的maskLayer,就完成了我们需要的那种五角星边框效果,修改后的代码如下

    - (void)drawMaskedImage
    {
        UIImage *image = [UIImage imageNamed:@"Black"];
    
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
        imageView.center = CGPointMake(CGRectGetMidX(self.view.bounds), CGRectGetMidY(self.view.bounds));
        imageView.image = image;
    
        [self.view addSubview:imageView];
    
        CALayer *maskLayer = [[CALayer alloc] init];
        maskLayer.frame = imageView.bounds;
        UIImage *maskImage = [UIImage imageNamed:@"Star"];
        maskLayer.contents = (__bridge id _Nullable)(maskImage.CGImage);
        imageView.layer.mask = maskLayer;
    }
    

    效果呢,就是刚才所说的那种



沪ICP备19023445号-2号
友情链接