文章結(jié)構(gòu)
- CALayer圖層結(jié)構(gòu)
- mask的理解
- 影響mask行為的因素
- mask使用前提
- 范例演示
CALayer圖層結(jié)構(gòu)
我們先來看一張layer圖層的結(jié)構(gòu)圖，如下：
圖層渲染時(shí)候阔逼，backgroundColor最底下杂拨，contents內(nèi)容居中（一般該對象是一個(gè)CGImageRef對象妄田，可通過contentsGravity屬性設(shè)置圖片展示模式，是平鋪整個(gè)bounds還是等比例展示）许起，border在最上面满俗，如果該layer有子layer，則子layer也顯示在boarder下面淋样。
mask的理解
mask是CALayer的一個(gè)屬性，它本身也是一個(gè)CALayer類胁住。我們使用該屬性主要是為了讓兩個(gè)圖層搭配出一個(gè)新的視覺效果趁猴，簡單理解就是一個(gè)遮罩，mask圖層區(qū)域外的任何區(qū)域不顯示彪见。
影響mask行為的因素
就是mask圖層（是遮罩層儡司，而不是被遮罩層哦~）的透明度，透明度的取值范圍（0余指，1）捕犬，而CALayer里有兩個(gè)主要的屬性和透明度有關(guān)，就是contents屬性和backgroundCorlor屬性酵镜。我們用contents最多的就是給它賦值一個(gè)圖片碉碉，而圖片是有透明通道和無透明通道的，backgroundColor屬性也是有透明度的（mask不關(guān)心是什么顏色淮韭，只關(guān)心顏色的透明度）垢粮，而且clearColor的透明度是0，可以去查看UIColor的API靠粪。
- 當(dāng)mask圖層完全透明時(shí)蜡吧，即透明度為0毫蚓，則遮罩區(qū)域不顯示
- 當(dāng)mask圖層完全不透明時(shí)，即透明度為1昔善，則遮罩區(qū)域顯示
- 當(dāng)mask圖層的透明度值在0~1之間元潘，則mask圖層會和被遮罩層內(nèi)容混合
使用前提
被遮罩圖層不能有父圖層即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'scompositingFilter' 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
但是有一個(gè)特殊情況又可以柬批，就是view1添加一個(gè)子圖層，然后再添加一個(gè)子控件袖订，再把子控件的layer作為子圖層的mask氮帐，這種情況又可以正常使用，會在下面的例子中給出示例代碼洛姑。如有想法歡迎留言交流上沐。
范例演示
這里一共演示4種效果，每個(gè)圖片上一個(gè)效果楞艾，我們先來看不使用mask圖層時(shí)候的圖片原樣参咙，如下圖：
都是同一張圖片。
再來看在圖片上添加mask后的效果圖硫眯，如下圖：
每個(gè)圖片對應(yīng)一種效果蕴侧。
我們來一一講解,每個(gè)mask圖層區(qū)域?yàn)閳D片控件內(nèi)縮進(jìn)10,即
_firstLayer.frame = CGRectMake(space, space, _firstImageview.bounds.size.width - space * 2, _firstImageview.bounds.size.height - space * 2);
- 示例一：contents是一個(gè)透明的圖片（就是它帶透明通道的，不懂可以去問UI两入，其實(shí)我們天天都在用净宵，也可以查看圖片屬性看是否有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內(nèi)容和被遮罩內(nèi)容混合顯示。
分析：背景色透明剃氧，背景色區(qū)域內(nèi)都不顯示被遮罩圖層敏储；圖片是透明的（但是圖片的輪廓內(nèi)容是不透明的，否則我們怎么看得見圖片呢）朋鞍，由CALayer圖層結(jié)構(gòu)和影響mask行為的因素可知已添，contents內(nèi)容和被遮罩區(qū)融合顯示。
- 示例二： contents是一個(gè)透明的圖片滥酥，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;
}
效果：如第二張圖片所示恨狈。
分析：背景色不透明疏哗，背景色區(qū)域內(nèi)的被遮罩圖層內(nèi)容都顯示，即使contents有內(nèi)容，但是背景色為不透明返奉，無法和被遮罩圖層混合顯示贝搁。
- 示例三：contents是一個(gè)不透明的圖片，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;
}
效果：第三張圖片所示。
分析：背景色有一定透明度 污尉，能顯示被遮罩層內(nèi)容膀哲，但是有一定的模糊，而contents內(nèi)容為不透明的被碗，所以在contents內(nèi)容處的被遮罩內(nèi)容沒有模糊某宪。
- 示例四：在一個(gè)有superLayer的layer上添加mask，結(jié)果是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上添加一個(gè)mask，mask圖層的contents是一張透明圖片焚志，backgroundColor為0.5衣迷。按理mask區(qū)域外的被遮罩層不顯示（我們的mask的bounds是比被遮罩層的bounds小的哦~，效果更明顯）酱酬，但是得到的效果和理論不一樣壶谒，所以是和蘋果文檔里說的一樣，當(dāng)mask的圖層有父圖層時(shí)即superLayer->layer->mask膳沽，得到的結(jié)果是undefined的汗菜。
在使用前提里提到的特殊情況我們實(shí)現(xiàn)下。
- 示例五：把label的文字渲染到另一個(gè)圖層上
代碼如下：
- (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;
}
效果如下圖：
分析：在一個(gè)view上添加一個(gè)漸變圖層贵少，再把label作為子控件添加到一個(gè)view上呵俏，最后把label的layer作為漸變圖層的mask，要把文字渲染到漸變圖層上滔灶，需要把label的backgroundColor透明度設(shè)置為0，就可以融合lable的文字到漸變圖層上了吼肥。
- 示例六：把圖片內(nèi)容渲染到另外一個(gè)圖層上
代碼如下：
- (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;
}
效果如下圖中的第一個(gè)圖片录平，mask的bounds比漸變圖層小10，即內(nèi)縮進(jìn)10pixel缀皱，第二個(gè)圖是圖片的原圖斗这。
分析：和示例五一個(gè)樣，backgroundColor不顯式設(shè)置的話都是nil啤斗，透明度也是0表箭。
我認(rèn)為已經(jīng)講得夠透徹了，不明白的可以下載Demo玩玩钮莲，歡迎下載交流免钻，有疑問或者更好的建議可以留言哦彼水！
最后，謝謝你的垂閲极舔！
