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