【iOS】中间透明的引导蒙层

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/dolacmeng/article/details/79285679

需求

如图口袋蜜蜂app一键海报的新手指引图,需求是遮罩层中间透明的,把底层的第一张海报显示出来,如图:
这里写图片描述

实现

通过UIBezierPath和CAShapeLayer绘制一张中间为透明的黑色半透明遮罩层。

步奏1、新建类PCOnePosterGuide继承自UIView
步奏2、重写drawRect:方法:

- (void)drawRect:(CGRect)rect {
  [super drawRect:rect];

  //整个view(如下图,蓝色部分)
  UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:0];

  //中间空的部分(如下图:粉红色部分)
  UIBezierPath *maskPath;
  CGFloat maskW = (IOS_VERSION>=10.)?64.:50.;
  CGFloat padding = (SCREEN_WIDTH>375)?6.:2.;
  maskPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(SCREEN_WIDTH-maskW-padding, PCSTATUSBAR_HEIGHT+4, maskW, 36.)
                                   byRoundingCorners:UIRectCornerAllCorners
                                         cornerRadii:CGSizeMake(2, 2)];
  [path appendPath:maskPath];
  //使用奇偶性原则,设置填充部分为除去粉色的蓝色部分
  [path setUsesEvenOddFillRule:YES];

  CAShapeLayer *fillLayer = [CAShapeLayer layer];
  fillLayer.path = path.CGPath;
  fillLayer.fillRule = kCAFillRuleEvenOdd;
  fillLayer.fillColor = [UIColor blackColor].CGColor;
  fillLayer.opacity = 0.5;
  [self.layer addSublayer:fillLayer];  
}

这里写图片描述

猜你喜欢

转载自blog.csdn.net/dolacmeng/article/details/79285679
今日推荐