iOS 中間鏤空效果的View

前言

之前看Layer 相關的內容時 , 也沒有太注意到這部分知識 , 最近正好用到類似的功能 , 先寫個Demo 熱熱身 .

做完后大概這么個效果

大致思路是這樣的 , 用貝塞爾曲線畫出一個蒙版 , 然后加在半透明View 的Layer層上 .

//創建一個View 
    UIView *maskView = [[UIView alloc] initWithFrame:self.view.bounds];
    maskView.backgroundColor = [UIColor grayColor];
    maskView.alpha = 0.8;
    [self.view addSubview:maskView];


//貝塞爾曲線 畫一個帶有圓角的矩形
UIBezierPath *bpath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, SCREEN_WIDTH - 20, SCREEN_HEIGHT - 20) cornerRadius:15];
//貝塞爾曲線 畫一個圓形
[bpath appendPath:[UIBezierPath bezierPathWithArcCenter:maskView.center radius:100 startAngle:0 endAngle:2*M_PI clockwise:NO]];

//創建一個CAShapeLayer 圖層
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = bpath.CGPath;

//添加圖層蒙板
maskView.layer.mask = shapeLayer;</code></pre> 

幾個點
 
  
 
   
貝塞爾曲線怎么用 ?
 
   
CAShapeLayer 是什么 ?
 
   
圖層蒙板 是干什么的?
 
  
 
  
貝塞爾曲線的使用
 
  
這邊也不過多介紹 , 總結幾個常用的方法吧 .
 
  
具體可以參考UIBezierPath介紹這篇文章
 
  
// 創建基本路徑
+ (instancetype)bezierPath;
// 創建矩形路徑
+ (instancetype)bezierPathWithRect:(CGRect)rect;
// 創建橢圓路徑
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
// 創建圓角矩形
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; // rounds all corners with the same horizontal and vertical radius
// 創建指定位置圓角的矩形路徑
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
// 創建弧線路徑
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
// 通過CGPath創建
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;
 
  
CAShapeLayer 是什么
 
  
 
  
CAShapeLayer定義
 
  
我理解的意思就是 , 用這個圖層的CGPath屬性 可以定義想要繪制的圖形.
 
  
也就是說 通過這個圖層 配合貝塞爾曲線 , 我可以得到任意我想要圖層形狀了 .
 
  
上面那段代碼 , 改幾個地方感受一下
 
  
//最外層套一個大的圓角矩形
    UIBezierPath *bpath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, SCREEN_WIDTH - 20, SCREEN_HEIGHT - 20) cornerRadius:15];

    //中間添加一個圓形
    [bpath appendPath:[UIBezierPath bezierPathWithArcCenter:maskView.center radius:100 startAngle:0 endAngle:2*M_PI clockwise:NO]];

    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = bpath.CGPath;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;

    //maskView.layer.mask = shapeLayer;
    [self.view.layer addSublayer:shapeLayer];
 
  
圖片中黑的地方 , 就是創建出來的圖層形狀
 
  
 
  
效果圖1
 
  
這邊需要注意的是 , 如果想保留圓以外的部分 , clockwise (順時針方向) 要選為NO , 如果想保留矩形以外的部分 , 矩形需要反方向繪制path .
 
  
UIBezierPath *bpath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, SCREEN_WIDTH - 20, SCREEN_HEIGHT - 20) cornerRadius:15];

    [bpath appendPath:[UIBezierPath bezierPathWithArcCenter:CGPointMake(SCREEN_WIDTH/2, 150) radius:100 startAngle:0 endAngle:2*M_PI clockwise:NO]];

    // - bezierPathByReversingPath ,反方向繪制path
    [bpath appendPath:[[UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 350, SCREEN_WIDTH - 100, 100) cornerRadius:20] bezierPathByReversingPath]];

    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = bpath.CGPath;
    shapeLayer.strokeColor = [UIColor redColor].CGColor;

    //maskView.layer.mask = shapeLayer;
    [self.view.layer addSublayer:shapeLayer];
 
  
 
  
效果圖2
 
  
圖層蒙板
 
  
借用核心動畫 里面的概念吧 . 餅干切割機 很形象 .
 
  
 
  
圖層蒙版定義
 
  
 
  
圖層蒙版效果圖
 
  
 
 
  
來自：http://www.jianshu.com/p/50c46c72e3dd