ios ~ UIBezierPath 貝塞爾曲線，使用其appendPath:方法：設(shè)置“鏤空圖”

在此之前，我們先來說說需求：
之前我們都是使用UIBezierPath和CAShapeLayer，設(shè)置mask遮罩層，再顯示mask范圍內(nèi)的視圖，其他部分不顯示；
但是現(xiàn)在，我們想要：一個范圍內(nèi)顯示清晰圖像，其他部分顯示模糊圖像（或顏色灰暗的圖像），該怎么設(shè)置呢？
下面我們來試一下：

鏤空圖（高亮部分）.png
①原理：比如，我們想要在一個頁面上實現(xiàn)以上要求，創(chuàng)建一個鏤空圖，在頁面覆蓋一個透明的UIView，在創(chuàng)建layer之前，改變這個view的顏色為黑色半透明，如下面代碼：使用UIBezierPath的方法appendPath:實現(xiàn)鏤空圖的描繪（注意，不要忘了：_mask_Layer.fillRule = kCAFillRuleEvenOdd; ）
  • ① UIBezierPath 有個原生的方法- (void)appendPath:(UIBezierPath *)bezierPath， 這個方法作用是倆個路徑有疊加的部分則會鏤空。這個方法實現(xiàn)原理應(yīng)該是path的FillRule 默認(rèn)是FillRuleEvenOdd。
    ② CALayer 有一個fillRule屬性的規(guī)則就有kCAFillRuleEvenOdd， 而EvenOdd 是一個奇偶規(guī)則，奇數(shù)則顯示，偶數(shù)則不顯示，疊加則是偶數(shù)故不顯示。

GW_NewUserGuidance_FirstStepView.m：

@interface GW_NewUserGuidance_FirstStepView ()

@property (nonatomic, strong) UILabel   *titleL;
@property (nonatomic, strong) UIButton  *skipBut;
@property (nonatomic, strong) CAShapeLayer *mask_Layer;
@property (nonatomic, strong) UIButton  *nextBut;

// 歷史記錄：
@property (nonatomic, strong) CAShapeLayer  *history_lineLayer; // 虛線邊框

@end

@implementation GW_NewUserGuidance_FirstStepView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = UIColor.clearColor;
//        self.backgroundColor = RGBA(0, 0, 0, 0.6);
        [self setupUI];
    }
    return self;
}

// 跳過：
- (void)skip_TeachStepsAction {
    
    // 保存在本地一個判斷值，表示已經(jīng)顯示過：
    [[NSUserDefaults standardUserDefaults] setObject:@"1" forKey:@"is_skip_NewUserGuidance"];
    [[NSUserDefaults standardUserDefaults] synchronize];
    
    [self removeFromSuperview];
}


- (void)refreshUI {
    
    self.backgroundColor = RGBA(0, 0, 0, 0.6);
    
    [self.mask_Layer removeFromSuperlayer];
    [self.history_lineLayer removeFromSuperlayer];
    
    
    UIBezierPath *backBezierPath = [UIBezierPath
                                        bezierPathWithRoundedRect:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)
                                        byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
                                        cornerRadii:CGSizeMake([UIScreen mainScreen].bounds.size.width/375*0, [UIScreen mainScreen].bounds.size.width/375*0)];

    /**
     * UIBezierPath 有個原生的方法- (void)appendPath:(UIBezierPath *)bezierPath, 這個方法作用是倆個路徑有疊加的部分則會鏤空.
     * 這個方法實現(xiàn)原理應(yīng)該是path的FillRule 默認(rèn)是FillRuleEvenOdd(CALayer 有一個fillRule屬性的規(guī)則就有kCAFillRuleEvenOdd), 而EvenOdd 是一個奇偶規(guī)則,奇數(shù)則顯示,偶數(shù)則不顯示.疊加則是偶數(shù)故不顯示
     */
    // 歷史記錄 貝塞爾path：UIBezierPath（清晰 鏤空layer）
//    UIBezierPath *backBezierPath = [UIBezierPath bezierPathWithRect:self.bounds];
    UIBezierPath *history_Path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake([UIScreen mainScreen].bounds.size.width/375*2, k_Height_StatusBar + [UIScreen mainScreen].bounds.size.width/375*(27+ 46 + 60), [UIScreen mainScreen].bounds.size.width/2, [UIScreen mainScreen].bounds.size.width/375*80) cornerRadius:[UIScreen mainScreen].bounds.size.width/375*5];    
    
    [backBezierPath appendPath:history_Path]; // 可以多個path疊加(同一個path之中可以添加多個子path)
    // [backBezierPath appendPath:matchCalendar_Path];
    // [backBezierPath appendPath:often_Path];
    
    // 創(chuàng)建 底層layer
    _mask_Layer = [CAShapeLayer layer];
    _mask_Layer.path        = [backBezierPath CGPath];
    _mask_Layer.fillRule = kCAFillRuleEvenOdd; // 這個屬性fillRule要加上，有時候，防止默認(rèn)不生效
    // 遮罩
    self.layer.mask = self.mask_Layer;
    
    
    /** 給鏤空圖 添加一個虛線邊框： */
    // 邊界框 layer（可以設(shè)置成 虛線，將鏤空位置框起來）
    UIBezierPath *history_linePath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake([UIScreen mainScreen].bounds.size.width/375*1, k_Height_StatusBar + [UIScreen mainScreen].bounds.size.width/375*(27+ 46 + 60 -1), [UIScreen mainScreen].bounds.size.width/2+[UIScreen mainScreen].bounds.size.width/375*2, [UIScreen mainScreen].bounds.size.width/375*(80 + 2)) cornerRadius:[UIScreen mainScreen].bounds.size.width/375*5];
    
    _history_lineLayer = [[CAShapeLayer alloc] init];
    _history_lineLayer.lineWidth = [UIScreen mainScreen].bounds.size.width/375*1;
    // 顏色
    _history_lineLayer.strokeColor = [UIColor whiteColor].CGColor;
    // 背景填充色
    _history_lineLayer.fillColor = UIColor.clearColor.CGColor;
    _history_lineLayer.lineDashPattern = @[@4, @4];
    _history_lineLayer.path = [history_linePath CGPath];
    [self.layer addSublayer:self.history_lineLayer];
    
    self.titleL.hidden = NO;
    self.skipBut.hidden = NO;
    self.nextBut.hidden = NO;
}

- (void)setupUI {
    
    _titleL = [[UILabel alloc] init];
    _titleL.text = @"新手引導(dǎo)";
    _titleL.textColor = UIColor.whiteColor;
    _titleL.textAlignment = NSTextAlignmentLeft;
    _titleL.font = [UIFont systemFontOfSize:[UIScreen mainScreen].bounds.size.width/375*18 weight:UIFontWeightBlack];
    [self addSubview:self.titleL];
    [self.titleL makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(self.mas_top).offset(k_Height_StatusBar);
        make.left.mas_equalTo(self.mas_left).offset([UIScreen mainScreen].bounds.size.width/375*20);
    }];
    
    _skipBut = [UIButton buttonWithType:UIButtonTypeCustom];
    [_skipBut setTitle:@"跳過" forState:UIControlStateNormal];
    [_skipBut setTitleColor:UIColor.whiteColor forState:UIControlStateNormal];
    _skipBut.titleLabel.font = [UIFont systemFontOfSize:[UIScreen mainScreen].bounds.size.width/375*16 weight:UIFontWeightMedium];
    _skipBut.contentHorizontalAlignment =UIControlContentHorizontalAlignmentRight;
    [self.skipBut addTarget:self action:@selector(skip_TeachStepsAction) forControlEvents:UIControlEventTouchUpInside];
    [self addSubview:self.skipBut];
    [self.skipBut makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(self.titleL);
        make.right.mas_equalTo(self.mas_right).offset(-[UIScreen mainScreen].bounds.size.width/375*20);
        make.width.mas_equalTo([UIScreen mainScreen].bounds.size.width/375*50);
        make.height.mas_equalTo([UIScreen mainScreen].bounds.size.width/375*20);
    }];
    if (self.skipBut.titleLabel.text.length > 0) {
        NSDictionary *attributeDic = @{NSUnderlineStyleAttributeName:[NSNumber numberWithInteger:NSUnderlineStyleSingle]};
        NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:self.skipBut.titleLabel.text attributes:attributeDic];
        self.skipBut.titleLabel.attributedText = attributedString;
    }
    
    _nextBut = [UIButton buttonWithType:UIButtonTypeCustom];
    [_nextBut setTitle:@"下一步" forState:UIControlStateNormal];
    [_nextBut setTitleColor:UIColor.whiteColor forState:UIControlStateNormal];
    _nextBut.titleLabel.font = [UIFont systemFontOfSize:[UIScreen mainScreen].bounds.size.width/375*14 weight:UIFontWeightMedium];
    _nextBut.layer.borderColor = UIColor.whiteColor.CGColor;
    _nextBut.layer.borderWidth = [UIScreen mainScreen].bounds.size.width/375*2;
    self.nextBut.layer.masksToBounds = YES;
    self.nextBut.layer.cornerRadius = [UIScreen mainScreen].bounds.size.width/375*4;
    [self addSubview:self.nextBut];
    [self.nextBut makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self);
        make.top.mas_equalTo(self.mas_top).offset(k_Height_StatusBar + [UIScreen mainScreen].bounds.size.width/375*((292 + 20) + (36 + 107 - 5-3) + 40+5 + 100 + 20));
        make.width.mas_equalTo([UIScreen mainScreen].bounds.size.width/375*60);
        make.height.mas_equalTo([UIScreen mainScreen].bounds.size.width/375*25);
    }];
    [self.nextBut addTarget:self action:@selector(guidance_NextAction) forControlEvents:UIControlEventTouchUpInside];
    
    self.titleL.hidden = YES;
    self.skipBut.hidden = YES;
    self.nextBut.hidden = YES;
}


@end
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容