iOS 使用CAShapeLayer实现毛玻璃遮罩

效果图 1

刚开始想做这样的遮罩效果，然后呢？看了一下view 里面的属性有maskView，然后踩了一些坑说一下：
1.如果maskView 不起作用，那请设置一下maskView的背景颜色。
2.当一个view设置了maskView后，那么它只会显示与maskView重叠并且有颜色的部分。如下图：

效果图 2

    CGFloat maskY = (SCREEN_HEIGHT - (SCREEN_WIDTH - 40)/0.618) * .5;
    CGFloat maskX = 20;
    CGFloat maskW = SCREEN_WIDTH - 40;
    CGFloat maskH = (SCREEN_WIDTH - 40)/0.618;
    UIView *maskV = [[UIView alloc] initWithFrame:CGRectMake(maskX, maskY, maskW, maskH)];
    maskV.layer.cornerRadius = 10.;
    maskV.layer.masksToBounds = YES;
    maskV.backgroundColor = [UIColor whiteColor];
    self.blurView.maskView = maskV;
等效于：self.blurView.layer.mask = maskView.layer;

显然不符合我们的需求

下面是正解：原理是使用 layer.mask ，它也是只会显示重叠并且有颜色的部分。

所以我们要生成这样的一个layer，如下图：

遮罩图 3

然后 QuartzCore 这个框架里面，有一个叫 CAShapeLayer，（主要用于设置图层的形状），配合路径（CGPath）使用。下面主要配合贝塞尔曲线UIBezierPath使用。然后设置给 layer.mask 即可。

相对于Core Graphics绘制图片，它还有几个优点：

1.、渲染快速。CAShapeLayer使用了硬件加速(使用CPU渲染)，绘制同一图形会比用Core Graphics快很多
2、高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形，所以无论有多大，都不会占用太多的内存。
3、不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。

  CAShapeLayer *shapeLayer = [CAShapeLayer layer];
  [shapeLayer setFillColor:[[UIColor blueColor] CGColor]];
  UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0,0, SCREEN_WIDTH, SCREEN_HEIGHT)];
  UIBezierPath *cropPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(maskX, maskY, maskW, maskH) cornerRadius:10];
  [path appendPath:cropPath];
  shapeLayer.fillRule = kCAFillRuleEvenOdd;
  shapeLayer.path = path.CGPath;
 //[self.blurView.layer addSublayer:shapeLayer];//添加看图层效果，把下面的注释了。要不然。看不到
  self.blurView.layer.mask = shapeLayer;

效果图 4

遇到的坑：fillRule 有两个值 kCAFillRuleEvenOdd & kCAFillRuleNonZero

个人理解：

kCAFillRuleEvenOdd：是两个路径相交会消掉(偶消积不消)

kCAFillRuleNonZero：是两个路径相加

看图：

对比图 5

作为mask 就是相反的，效果图如下图

效果图 6

就介绍到这里了。。不对的地方，希望指正谢谢。