CALayer的mask屬性簡介

mask就是PS中的遮罩；

遮罩層必須至少有兩個圖層，上面的一個圖層為“遮罩層”，下面的稱“被遮罩層”；這兩個圖層中隻有相重疊的地方才會被顯示。也就是說在遮罩層中有對象的地方就是“透明”的，可以看到被遮罩層中的對象，而沒有對象的地方就是不透明的，被遮罩層中相應位置的對象是看不見的。

執行個體一：字型漸變的UILabel

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = CGRectMake(100, 300, 200, 25);
    [gradientLayer setStartPoint:CGPointMake(0.0, 0.0)];
    [gradientLayer setEndPoint:CGPointMake(0.0, 1.0)];
    gradientLayer.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor yellowColor].CGColor,(id)[UIColor greenColor].CGColor];
    
    UILabel *label = [[UILabel alloc] initWithFrame:gradientLayer.bounds];
    label.text = @"紅黃綠漸變~~";
    label.font = [UIFont boldSystemFontOfSize:25];
    label.backgroundColor = [UIColor clearColor];
    [self.view addSubview:label];
    
    [self.view.layer addSublayer:gradientLayer];
    gradientLayer.mask = label.layer;
           

效果圖：

說明：

這裡首先要弄清楚的是，哪個是哪個的遮罩層；

根據遮罩的概念，分析：兩個圖層中重疊的部分才被顯示，gradientLayer漸變層顯示的部分是一整塊形狀，而label顯示的部分隻有字型(預設黑色)，背景我們已經清除掉顔色了；繼續，“遮罩層”中有對象的地方就是“透明”的，可以看到“被遮罩層”中的對象，而沒有對象的地方就是不透明的，被遮罩層中相應位置的對象是看不見的；假設gradientLayer是遮罩層，那麼它的所有區域都是有對象的，是以它整塊都是透明的，我們能看到的是整個label，也就是這個gradientLayer根本就不作用，可有可無，然後，我們把label作為遮罩層，它有對象的區域就是它的文字部分，這個文字部分是透明的，正好我們透過文字看到gradientLayer的漸變顔色，而沒有對象的部分不透明，我們在腦海裡把它裁剪掉，最後正好是我們的效果圖的樣子；

執行個體二：顔色漸變的圖檔

原始圖檔效果圖：

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = CGRectMake(100, 300, 150, 50);
    gradientLayer.colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor yellowColor].CGColor,(id)[UIColor greenColor].CGColor];
    [gradientLayer setStartPoint:CGPointMake(0.0, 0.0)];
    [gradientLayer setEndPoint:CGPointMake(0.0, 1.0)];
    
    UIImageView *imageView = [[UIImageView alloc]initWithFrame:gradientLayer.bounds];
    imageView.image = [UIImage imageNamed:@"Map_help_button"];
    [self.view addSubview:imageView];
    
    [self.view.layer addSublayer:gradientLayer];
    gradientLayer.mask = imageView.layer;
           

遮罩後效果圖：

執行個體三：通過CAShapeLayer實作圖檔的裁剪

原始圖檔：

UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];
    imageView.center = self.view.center;
    imageView.image = [UIImage imageNamed:@"Share_bag"];
    [self.view addSubview:imageView];
    
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50)
                                                        radius:100 / 2.f
                                                    startAngle:0
                                                      endAngle:M_PI*2
                                                     clockwise:YES];

    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = imageView.bounds;
    maskLayer.path = path.CGPath;

    [self.view.layer addSublayer:maskLayer];
    imageView.layer.mask = maskLayer;
           

裁剪後的效果圖：

說明：

這裡隻是通過這個例子講解mask的使用，圖檔的圓角裁剪實際上隻需要修改cornerRadius屬性即可；

在這裡，原始圖檔作為被遮罩層，maskLayer作為遮罩層，maskLayer的形狀正好的是圖檔大小的圓，這個圓通過貝塞爾路徑來構造；兩個層一疊加，顯示重疊部分，maskLayer有對象的部分也就是圓形部分透明，其他部分不透明，就得到上面的效果圖；