UI基础 - UIBezierPath：FillMode

FillMode

1 - 在绘图中经常需要对路径进行填充操作。那么问题来了, 在一个路径的覆盖范围内，如何判断哪些区域需要被填充 ？其实很简单：在你的画布中设置一个点，判断这个点是否在路径覆盖范围内即可

2 - 多边形：不自交和自相交

① 不自交：一个多边形仅顶点处连接，而在画布内没有其他的公共交点

② 自相交：一个多边形除了顶点连接外，在画布内还有其他的公共交点

3 - 如果是一个不自交的多边形，那很容易判断一个点是否在这个多边形路径的覆盖范围内。但是如何判断一个点是否在自相交多边形内， 则需要用到一下两种原则来进行判断， 这两种原则也就是 FillMode

① Even-Odd Rule 奇偶原则：从路径覆盖范围内的任意一点做一条射线，如果与该射线相交的边的数量为奇数，则该点是路径的内部点，反之该点则是路径的外部点

② Nonzero Winding Number Rule 非零环绕数原则：在我们脑海中定义一个变量 count，然后从路径覆盖范围内的任意一点做一条射线，然后我们对每一条和该射线相交的路径进行统计，规则如是：当路径是从右向左穿过射线的时候 count++；当路径是从左向右穿过射线的时候 count--。当我们统计完所有相交的路径后，如果 count 不为 0，则该点是内部点，反之该点则是路径的外部点

6 - 代码示例：根据给出的坐标点绘制区域，并给区域添加轻拍手势。要求当点击某一区域，该区域就变换成绿色，其他区域为红色；当触点不在任意一区域内，那么所有区域均是红色

// - BezierView.h

#import <UIKit/UIKit.h>
@interface BezierView : UIView

@property(nonatomic,strong)NSMutableArray *bezieArrray; // 贝塞尔数组
// 属性传值
@property(nonatomic,assign)int arrayIndex;// 下标，用来区分所绘的图
@property(nonatomic,assign)CGPoint currentPoint;// 点击的点

@end

// - BezierView.m

#import "BezierView.h"
@implementation BezierView
-(void)drawRect:(CGRect)rect{

    self.bezieArrray = [NSMutableArray array];
    // 数据源：坐标
    NSArray *arrayPoint1 = [NSArray arrayWithObjects:@[@100,@60],@[@180,@130],@[@160,@200],@[@120,@180],@[@140,@150],nil];
    NSArray *arrayPoint2 = [NSArray arrayWithObjects:@[@50,@230],@[@180,@320],@[@90,@300],nil];
    NSArray *arrayPoint3 = [NSArray arrayWithObjects:@[@299,@220],@[@299,@399],@[@200,@399],@[@200,@180],nil];
    NSArray *allPointArray = [NSArray arrayWithObjects:arrayPoint1,arrayPoint2,arrayPoint3,nil];

    for (int i = 0; i < allPointArray.count; i++) {

       
        self.arrayIndex +=i; // 下标
        UIBezierPath *path_i = [UIBezierPath bezierPath];
        // 将一条路径添加进数组
        [self.bezieArrray addObject:path_i];
        [path_i moveToPoint:CGPointMake([[[[allPointArray objectAtIndex:i] firstObject] firstObject] floatValue], [[[[allPointArray objectAtIndex:i] firstObject] lastObject] floatValue])];

        // 依次绘画的坐标点
        for (int j = 0; j < (int)[[allPointArray objectAtIndex:i] count] -1; j++) {
            [path_i addLineToPoint: CGPointMake([[[[allPointArray objectAtIndex:i]  objectAtIndex:j+1] firstObject] floatValue], [[[[allPointArray objectAtIndex:i] objectAtIndex:j+1] lastObject] floatValue])];
        }

        // 存在点击区域的坐标
        if([path_i containsPoint:self.currentPoint]){
            [[UIColor greenColor] setFill];// 选中的颜色
        }else{
            [[UIColor redColor] setFill];  // 未选中的颜色
        }

        [path_i closePath];
        [path_i fill];
        [UIColor.purpleColor setStroke];
        path_i.lineWidth = 1.5;
        [path_i stroke];
    }
}

@end

// - ViewController.m

#import "ViewController.h"
#import "BezierView.h"
@interface ViewController (){
    int _arrayIndex;// 下标：区分所绘的图
}
@property(nonatomic,strong)BezierView *myView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // 创建 View 并在 View 内绘图
    _myView = [[BezierView alloc] initWithFrame:self.view.bounds];
    _myView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:_myView];

    // 给 View 添加点击事件
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapGestureRecognized:)];
    [_myView addGestureRecognizer:tap];

}

- (void)tapGestureRecognized:(UITapGestureRecognizer *)gesture{

    // 获取点击的位置
    CGPoint tapPoint = [gesture locationInView:_myView];
    _myView.currentPoint = tapPoint;// 当前点击的点

    // 遍历路径
    for (int i = 0; i < (int)_myView.bezieArrray.count; i++) {
        // 获取相应的路径
        UIBezierPath *path_i = [_myView.bezieArrray objectAtIndex:i];
        
        if ([path_i containsPoint:tapPoint]) {
            _arrayIndex = i;// 获取对应的下标
            _myView.arrayIndex = _arrayIndex;// 属性传值：下标
            [_myView setNeedsDisplay];
            return;
        }
    }
    // 区域外的点通知重绘：区域全部为红色
    [_myView setNeedsDisplay];
}

@end

运行效果：点击最上方的区域 | 点击区域外