美文网首页
iOS中间镂空

iOS中间镂空

作者: gpylove | 来源:发表于2018-12-27 20:32 被阅读5次

一,在要遮罩的UIView上面添加UIImageView,然后生成一张中间镂空的UIImage,赋给UIImageView,设置UIImageView的alphe。

- (UIImage*)holeImageWithContentSize:(CGSize)size cornerRadius:(CGFloat)cR{

    UIGraphicsBeginImageContextWithOptions(size, NO, [UIScreen mainScreen].scale);

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor);

    CGContextFillRect(context,CGRectMake(0,0, size.width, size.height));

    CGContextAddEllipseInRect(context,CGRectMake((size.width-cR)/2, (size.height-cR)/2, cR, cR));

    CGContextSetBlendMode(context, kCGBlendModeClear);

    CGContextFillPath(context);

    UIImage *returnImage = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return returnImage;

}

二,绘制一个中间镂空的CAShapeLayer,然后添加在要遮罩的UIView的layer上面。

- (void)holeLayerWithContentSize:(CGSize)size cornerRadius:(CGFloat)cR {

    CAShapeLayer *fillLayer = [CAShapeLayer layer];

    fillLayer.fillRule = kCAFillRuleEvenOdd;

    fillLayer.fillColor= [UIColor blackColor].CGColor;

    fillLayer.opacity=0.3;

    [self.view.layer addSublayer:fillLayer];

    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, size.width, size.height) cornerRadius:0];

    UIBezierPath*circlePath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake((size.width-cR)/2, (size.height-cR)/2, cR, cR)cornerRadius:cR];

    [path appendPath:circlePath];

    [path setUsesEvenOddFillRule:YES];

    fillLayer.path= path.CGPath;

}

三,初始化一个UIView,设置UIView的mask,形成一个中间镂空的UIView,然后添加在要遮罩的UIView上面。

- (void)HoleMaskWithContentSize:(CGSize)size cornerRadius:(CGFloat)cR{

    UIView*maskView = [[UIView alloc]initWithFrame:CGRectMake(0,0, size.width, size.height)];

    maskView.backgroundColor= [UIColor blackColor];

    maskView.alpha=0.3;

    [self.view addSubview:maskView];

    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, size.width, size.height) cornerRadius:0];

    UIBezierPath *roundPath = [[UIBezierPath bezierPathWithRoundedRect:CGRectMake((size.width-cR)/2, (size.height-cR)/2, cR, cR) cornerRadius:cR] bezierPathByReversingPath];

    [path appendPath:roundPath];

    CAShapeLayer *shapeLayer = [CAShapeLayer layer];

    shapeLayer.path= path.CGPath;

    maskView.layer.mask= shapeLayer;

}

四,自定义一个UIView,在- (void)drawRect:(CGRect)rect中绘制中间镂空,然后添加在要遮罩的UIView上面,要注意一点,自定义的UIView的backgroundColor必须设置成clearColor。(注释掉的上下两段代码,是两种生成中间镂空的矩形)

#import "HoleView.h"

@implementation HoleView

- (void)drawRect:(CGRect)rect {

    //    CGContextRef context = UIGraphicsGetCurrentContext();

    //    CGContextAddRect(context, rect);

    //    [[UIColor colorWithWhite:0 alpha:0.3] set];

    //    CGContextFillRect(context, rect);

    //    CGContextClearRect(context, CGRectMake((rect.size.width-100)/2, (rect.size.height-100)/2, 100, 100));

    //    CGContextDrawPath(context, kCGPathFillStroke);


    CGContextRef context = UIGraphicsGetCurrentContext();

    [[UIColor colorWithWhite:0 alpha:0.3] set];

    CGContextAddRect(context, rect);

    CGContextFillPath(context);

    CGContextSetBlendMode(context, kCGBlendModeClear);

    CGContextAddEllipseInRect(context, CGRectMake(100, 100, 200, 200));

    CGContextFillPath(context);


//    [[UIColor colorWithWhite:0 alpha:0.3] setFill];

//    UIRectFill(rect);

//    CGRect holeRection = CGRectMake(100, 200, 200, 200);

//    // 交集

//    CGRect holeiInterSection = CGRectIntersection(holeRection, rect);

//    [[UIColor clearColor] setFill];

//    UIRectFill(holeiInterSection);

}

@end

相关文章

  • iOS 中间镂空效果的View

    iOS 中间镂空效果的View

  • iOS中间镂空

    一,在要遮罩的UIView上面添加UIImageView,然后生成一张中间镂空的UIImage,赋给UIImage...

  • iOS 中间镂空效果的View

    前言 之前看Layer 相关的内容时 , 也没有太注意到这部分知识 , 最近正好用到类似的功能 , 先写个Dem...

  • 链接大全

    关于 蒙版镂空蒙版镂空 这个好 关于ios性能优化 关于ios开发全流程 本地code上传至 github仓库 h...

  • canvas 实现中间镂空效果(中间透明圆环)

    示例如上图,有两个圆,形成的圆环中间透明。 参考:剪纸效果、镂空效果[https://github.com/827...

  • iOS开发之iOS11与iPhone X适配

    iOS11和iPhoneX适配 iOS11和iPhone X的适配 iOS引导页的镂空效果 iOS 人机交互指南 ...

  • 刚梦到我和我对象在一个中间镂空的楼上

    网友留言: 作者你好,我刚梦到我和我对象在一个中间镂空的楼上,大概七八层, 通过那个镂空的位置要使用类似索道的东西...

  • ios镂空提示效果

    有时候我们可能需要再界面上重点提示某些地方,例如镂空的提示效果,这个时候界面上遮盖蒙板但需要突出的地方需要镂空展示...

  • iOS 镂空蒙版

    需求要做个椭圆形的镂空的蒙版,因为设计不在,只好自己绘制。

  • iOS中镂空效果

    最近开发的app增加了一个新手引导的需求。为了实现这个需求需要界面镂空掉一部分。现在就说下iOS中实现界面镂空的...

网友评论

      本文标题:iOS中间镂空

      本文链接:https://www.haomeiwen.com/subject/aazflqtx.html