iosmask_ios CALayer之mask使用从此不再纠结

文章结构

CALayer图层结构

mask的理解

影响mask行为的因素

mask使用前提

范例演示

CALayer图层结构

我们先来看一张layer图层的结构图，如下：

layer图层结构图

图层渲染时候，backgroundColor最底下，contents内容居中(一般该对象是一个CGImageRef对象，可通过contentsGravity属性设置图片展示模式，是平铺整个bounds还是等比例展示)，border在最上面，如果该layer有子layer，则子layer也显示在boarder下面。

mask的理解

mask是CALayer的一个属性，它本身也是一个CALayer类。我们使用该属性主要是为了让两个图层搭配出一个新的视觉效果，简单理解就是一个遮罩，mask图层区域外的任何区域不显示。

影响mask行为的因素

就是mask图层(是遮罩层，而不是被遮罩层哦~)的透明度，透明度的取值范围(0，1)，而CALayer里有两个主要的属性和透明度有关，就是contents属性和backgroundCorlor属性。我们用contents最多的就是给它赋值一个图片，而图片是有透明通道和无透明通道的，backgroundColor属性也是有透明度的(mask不关心是什么颜色，只关心颜色的透明度)，而且clearColor的透明度是0，可以去查看UIColor的API。

当mask图层完全透明时，即透明度为0，则遮罩区域不显示

当mask图层完全不透明时，即透明度为1，则遮罩区域显示

当mask图层的透明度值在0~1之间，则mask图层会和被遮罩层内容混合

使用前提

被遮罩图层不能有父图层即superLayer，否则效果是不确定的。mask属性苹果文档说明原文：

A layer whose alpha channel is used as a mask to select between the

layer's background and the result of compositing the layer's

contents with its filtered background. Defaults to nil. When used as

a mask the layer's compositingFilter' andbackgroundFilters'

properties are ignored. When setting the mask to a new layer, the

new layer must have a nil superlayer, otherwise the behavior is

undefined. Nested masks (mask layers with their own masks) are

unsupported.

正确：layer->mask

undefiend：superLayer->layer->mask

但是有一个特殊情况又可以，就是view1添加一个子图层，然后再添加一个子控件，再把子控件的layer作为子图层的mask，这种情况又可以正常使用，会在下面的例子中给出示例代码。如有想法欢迎留言交流。

范例演示

这里一共演示4种效果，每个图片上一个效果，我们先来看不使用mask图层时候的图片原样，如下图：

原图

都是同一张图片。

再来看在图片上添加mask后的效果图，如下图：

mask4种效果图

每个图片对应一种效果。

我们来一一讲解,每个mask图层区域为图片控件内缩进10,即

_firstLayer.frame = CGRectMake(space, space, _firstImageview.bounds.size.width - space * 2, _firstImageview.bounds.size.height - space * 2);

示例一：contents是一个透明的图片(就是它带透明通道的，不懂可以去问UI，其实我们天天都在用，也可以查看图片属性看是否有alpha通道字样)。

backgroundColor透明度为0，代码如下：

- (void)configureTransparentLayer{

//init mask layer

_firstLayer = [CALayer layer];

_firstLayer.frame = CGRectMake(space, space, _firstImageview.bounds.size.width - space * 2, _firstImageview.bounds.size.height - space * 2);

_firstLayer.contents = (id)[UIImage imageNamed:@"bgTransparent"].CGImage;

_firstLayer.contentsGravity = kCAGravityResizeAspect;

_firstLayer.backgroundColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:0.0].CGColor;

//or u can init the bg color with clearColor, its appha is 0.

// _firstLayer.backgroundColor = [UIColor clearColor].CGColor;

//add layer to imageview

_firstImageview.layer.mask = _firstLayer;

}

效果：如第一张图片，contents内容和被遮罩内容混合显示。

分析：背景色透明，背景色区域内都不显示被遮罩图层；图片是透明的(但是图片的轮廓内容是不透明的，否则我们怎么看得见图片呢)，由CALayer图层结构和影响mask行为的因素可知，contents内容和被遮罩区融合显示。

示例二： contents是一个透明的图片，backgroundColor透明度为1，即背景色不透明，代码如下：

- (void)configureNonTransparentLayer{

//init mask layer

_topLayer = [CALayer layer];

_topLayer.frame = CGRectMake(30, 30, _topImageview.bounds.size.width - 30 * 2, _topImageview.bounds.size.height - 30 * 2);

_topLayer.contents = (id)[UIImage imageNamed:@"bgTransparent"].CGImage;

_topLayer.contentsGravity = kCAGravityResizeAspect;

_topLayer.backgroundColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:1].CGColor;

//add layer to imageview

_topImageview.layer.mask = _topLayer;

}

效果：如第二张图片所示。

分析：背景色不透明，背景色区域内的被遮罩图层内容都显示，即使contents有内容，但是背景色为不透明，无法和被遮罩图层混合显示。

示例三：contents是一个不透明的图片，backgroundColor透明度为0.5，即背景色不透明，代码如下：

- (void)configureCompositeMaskLayer{

//init mask layer

_middleLayer = [CALayer layer];

_middleLayer.frame = CGRectMake(30, 30, _middleImageview.bounds.size.width - 30 * 2, _middleImageview.bounds.size.height - 30 * 2);

_middleLayer.contents = (id)[UIImage imageNamed:@"bgNonTransparent"].CGImage;

_middleLayer.contentsGravity = kCAGravityResizeAspect;

_middleLayer.backgroundColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:0.5].CGColor;

//add layer to imageview

_middleImageview.layer.mask = _middleLayer;

}

效果：第三张图片所示。

分析：背景色有一定透明度 ，能显示被遮罩层内容，但是有一定的模糊，而contents内容为不透明的，所以在contents内容处的被遮罩内容没有模糊。

示例四：在一个有superLayer的layer上添加mask，结果是undefined的。代码如下：

- (void)configureUndefinedMaskLayer{

//add gradient layer to imageview layer

_gradientLayer = [CAGradientLayer layer];

_gradientLayer.frame = _bottomImageview.bounds;

[self setupGradientlayer:_gradientLayer];

[_bottomImageview.layer addSublayer:_gradientLayer];

//init mask layer

_btmLayer = [CALayer layer];

_btmLayer.frame = CGRectMake(30, 30, _bottomImageview.bounds.size.width - 30 * 2, _bottomImageview.bounds.size.height - 30 * 2);

_btmLayer.contents = (id)[UIImage imageNamed:@"bgTransparent"].CGImage;

_btmLayer.contentsGravity = kCAGravityResizeAspect;

_btmLayer.backgroundColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:0.5].CGColor;

_gradientLayer.mask = _btmLayer;

}

效果：如第四张图片所示。

分析：在gradientLayer上添加一个mask，mask图层的contents是一张透明图片，backgroundColor为0.5。按理mask区域外的被遮罩层不显示(我们的mask的bounds是比被遮罩层的bounds小的哦~，效果更明显)，但是得到的效果和理论不一样，所以是和苹果文档里说的一样，当mask的图层有父图层时即superLayer->layer->mask，得到的结果是undefined的。

在使用前提里提到的特殊情况我们实现下。

示例五：把label的文字渲染到另一个图层上

代码如下：

- (void)configureLayerForLabelBgView{

//add gradient layer to label bg view

CAGradientLayer *gradientLayer = [CAGradientLayer layer];

gradientLayer.frame = _labelBgView.bounds;

[self setupGradientlayer:gradientLayer];

[_labelBgView.layer addSublayer:gradientLayer];

//add label to label bg view

UILabel *label = [[UILabel alloc] initWithFrame:_labelBgView.bounds];

//remember to set the bg color's alpha to 0

label.backgroundColor = [UIColor clearColor];

label.textAlignment = NSTextAlignmentCenter;

label.text = @"天王老子天下无敌";

label.font = [UIFont systemFontOfSize:30];

[_labelBgView addSubview:label];

gradientLayer.mask = label.layer;

}

效果如下图：

文字渲染到另外图层上

分析：在一个view上添加一个渐变图层，再把label作为子控件添加到一个view上，最后把label的layer作为渐变图层的mask，要把文字渲染到渐变图层上，需要把label的backgroundColor透明度设置为0，就可以融合lable的文字到渐变图层上了。

示例六：把图片内容渲染到另外一个图层上

代码如下：

- (void)configureLayerForImageBgView_1{

//add gradient layer to ImageBgView_1

CAGradientLayer *gradientLayer = [CAGradientLayer layer];

gradientLayer.frame = _imageBgView_1.bounds;

[self setupGradientlayer:gradientLayer];

[_imageBgView_1.layer addSublayer:gradientLayer];

//add imageview to imageBgView_1

UIImageView *imgView = [self imageViewWithframe:CGRectMake(10, 10, _imageBgView_1.bounds.size.width-20, _imageBgView_1.bounds.size.height-20) image:@"bgTransparent"];

[_imageBgView_1 addSubview:imgView];

_imageBgView_1.layer.mask = imgView.layer;

}

效果如下图中的第一个图片，mask的bounds比渐变图层小10，即内缩进10pixel，第二个图是图片的原图。

把图片渲染到另外图层上

分析：和示例五一个样，backgroundColor不显式设置的话都是nil，透明度也是0。

我认为已经讲得够透彻了，不明白的可以下载Demo玩玩，欢迎下载交流，有疑问或者更好的建议可以留言哦！

最后，谢谢你的垂閲！