iOS 扫描框

之前通过填充四周的方式去做 扫描框。但是会填充不严实。
CGFloat bottomHeight = (kScreen_Height-self.heightAndWidth)/2;
CGFloat leftWidth = (kScreen_Width-self.heightAndWidth)/2;

CGContextRef ctx = UIGraphicsGetCurrentContext();

CGContextSetRGBFillColor(ctx, 0, 0, 0, 0.5);
CGContextFillRect(ctx, CGRectMake(0, 0, kScreen_Width, bottomHeight));
CGContextStrokePath(ctx);
CGContextFillRect(ctx, CGRectMake(0,bottomHeight, leftWidth, self.heightAndWidth));
CGContextStrokePath(ctx);
CGContextFillRect(ctx, CGRectMake((kScreen_Width+self.heightAndWidth)/2, bottomHeight, leftWidth, self.heightAndWidth));
CGContextStrokePath(ctx);
CGContextFillRect(ctx, CGRectMake(0,(kScreen_Height+self.heightAndWidth)/2, kScreen_Width, bottomHeight));
CGContextStrokePath(ctx);

后来 发现了一个新方式:
CGFloat bottomHeight = (kScreen_Height-self.heightAndWidth)/2;
CGFloat leftWidth = (kScreen_Width-self.heightAndWidth)/2;

    // 中间空心洞的区域
    CGRect cutRect = CGRectMake(leftWidth,bottomHeight,self.heightAndWidth,self.heightAndWidth);
    
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:frame];
    // 挖空心洞 显示区域
    UIBezierPath *cutRectPath = [UIBezierPath bezierPathWithRect:cutRect];
    //        将circlePath添加到path上
    [path appendPath:cutRectPath];

// 针对路径,可有可无的
path.usesEvenOddFillRule = YES;

    CAShapeLayer *fillLayer = [CAShapeLayer layer];
    fillLayer.path = path.CGPath;

// 针对渲染的
fillLayer.fillRule = kCAFillRuleEvenOdd;
fillLayer.opacity = 0.3;//透明度
fillLayer.backgroundColor = [UIColor blackColor].CGColor;

    [self.layer addSublayer:fillLayer];

效果如图所示:


image.png

但是为什么这样可以达到我们想要的效果呢?
通过探究发现,主要是
fillLayer.fillRule = kCAFillRuleEvenOdd;
这句代码起到了作用

这句代码有什么用呢?

当多边形是自相交的,判断一个点是否在多边形内,需要根据非零环绕数规则(kCAFillRuleNonZero)和奇-偶规则(kCAFillRuleEvenOdd)判断。
(1)奇-偶规则(Odd-even Rule):从任意位置作一条射线,若与该射线相交的多边形边的数目为奇数,则是多边形内部点,否则是外部点。

(2)非零环绕数规则(Nonzero Winding Number Rule):从任意位置作一条射线。当沿射线方向移动时,对在每个方向上穿过射线的边计数,每当多边形的边从右到左穿过射线时,环绕数加1,从左到右时,环绕数减1。处理完所有相关边之后,若环绕数为非零,则为内部点,否则,是外部点。

举🍐:
非零环绕数规则判断点p是否在多边形内,从点p向外做一条射线(可以任意方向),多边形的边从左到右经过射线时环数减1,多边形的边从右往左经过射线时环数加1,最后环数不为0,即表示在多边形内部。

image.png

奇-偶规则 判断点p是否在多边形内,从点p向外做一条射线(可以任意方向),和两条多边形的边相交。所以p点在多边形外


image.png

所以最开始我们的代码。图形的结构是
p点在多边形外,就不会被填充


image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容