美文网首页
iOS 圆角+masksToBounds一定触发离屛渲染吗?

iOS 圆角+masksToBounds一定触发离屛渲染吗?

作者: mtko | 来源:发表于2019-08-20 17:15 被阅读0次

    先抛出个人总结的有关圆角触发离屏渲染的一个结论背景和结论:

    结论背景:

    只考虑cornerRadius、masksToBounds、backgroundColor、layer.bacgroundColor、text、border这六个组合因素,不考虑阴影、光栅化等因素

    结论:

    masksToBounds=true和cornerRadius同时设置不一定会触发离屛渲染;masksToBounds=no一定不会触发离屛渲染(当然要结合结论背景)

    masksToBounds和cornerRadius同时设置不一定会触发离屛渲染

    首先打开模拟器的 Debug - Color Off-screen Rendered 工具来检测是否触发离屛渲染,控件标黄即为触发了离屏渲染;

    iOS系统在定义圆角触发离屏渲染的时机是分不同控件的,以下是6种同时设置了masksToBounds和cornerRadius属性但并不会触发离屏渲染的case:

    一、UIView无绘制元素
    • 无绘制元素:
    TestView *view = [[TestView alloc] initWithFrame:CGRectMake(100, 100, 30, 30)];
     view.layer.backgroundColor = UIColor.blueColor.CGColor;
     view.layer.borderWidth = 1.5;
     view.layer.masksToBounds = YES;
     view.layer.cornerRadius = 20;
     [self.view addSubview:view];
    
    drawBefore.png
    • 有绘制元素:
      在TestView类中实现drawLayer: inContext:方法并调用[layer setNeedsDisplay]进行绘制后:
    - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
        CGContextSetLineWidth(ctx, 10.f);
        CGContextSetStrokeColorWithColor(ctx, [UIColor blueColor].CGColor);
        CGContextStrokeEllipseInRect(ctx, CGRectMake(10, 10, 30, 30));
    }
    
    drawAfter.png
    二、UILabel无text
    • 无text时:
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(100, 200, 200, 20)];
    label.layer.backgroundColor = UIColor.cyanColor.CGColor;
    label.layer.borderColor = [UIColor blackColor].CGColor;
    label.layer.borderWidth = 1.5;
    //    label.text = @"off screen render test";
    label.textColor = [UIColor grayColor];
    label.layer.masksToBounds = YES;
    label.layer.cornerRadius = 20;
    [self.view addSubview:label];
    
    nullText
    三、UILabel的backgroundColor=clearColor且无border
        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(100, 200, 200, 20)];
    //    label.layer.backgroundColor = UIColor.cyanColor.CGColor;
    //    label.layer.borderColor = [UIColor blackColor].CGColor;
    //    label.layer.borderWidth = 1.5;
        label.text = @"off screen render test";
        label.textColor = [UIColor grayColor];
        label.layer.masksToBounds = YES;
        label.layer.cornerRadius = 20;
        [self.view addSubview:label];
    
    clearColorAndNullBorder
    四、设置label.backgroundColor = 非clearColor ,且不设置 label.layer.backgroundColor,且无border
        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(100, 200, 200, 20)];
        label.backgroundColor = UIColor.cyanColor;
    //    label.layer.borderColor = [UIColor blackColor].CGColor;
    //    label.layer.borderWidth = 1.5;
        label.text = @"off screen render test";
        label.textColor = [UIColor grayColor];
        label.layer.masksToBounds = YES;
        label.layer.cornerRadius = 20;
        [self.view addSubview:label];
    
    屏幕快照 2019-08-20 17.51.19.png
    五、UIImageview无backgroundColor且无border
    UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"jiayou"]];
    //    imgView.backgroundColor = [UIColor cyanColor];
    //    imgView.layer.backgroundColor = [UIColor cyanColor].CGColor;
    //    imgView.layer.borderWidth = 1.5;
        imgView.frame = CGRectMake(100, 300, 200, 100);
        imgView.contentMode = UIViewContentModeScaleAspectFit;
        imgView.layer.masksToBounds = YES;
        imgView.layer.cornerRadius = 20;
        [self.view addSubview:imgView];
    
    屏幕快照 2019-08-20 17.52.56.png
    六、UIButton未设置titleText且未设置image
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    //    [btn setTitle:@"button" forState:UIControlStateNormal];
    //    [btn setImage:[UIImage imageNamed:@"jiayou"] forState:UIControlStateNormal];
        btn.layer.borderWidth = 1.5;
        btn.layer.borderColor = [UIColor redColor].CGColor;
        btn.backgroundColor = [UIColor cyanColor];
        btn.frame = CGRectMake(100, 100, 50, 50);
        btn.layer.masksToBounds = YES;
        btn.layer.cornerRadius = 20;
        [self.view addSubview:btn];
    
    屏幕快照 2019-08-20 17.54.03.png

    tips(要基于结论背景)

    设置了圆角且能达到圆角效果的一些tips:

    • UILabel 可以不设置bgcolor且设置layer.backgroundColor = UIColor.xxxColor.CGColor 且 layer.masksToBounds = NO 避免离屛渲染
    • UILabel 可以不设置border 且不设置bgcolor和layerBgColor 且 layer.masksToBounds = YES 避免离屛渲染
    • UIImageView 设置 layer.masksToBounds = NO无法切除边角 ;可以不设置border 且 不设置bgcolor和layerBgColor 且 设置layer.masksToBounds = YES 避免离屛渲染
    • UIButton 设置 layer.masksToBounds = NO无法切除边角 ;并且设置label.layer.masksToBounds = YES 也不能避免离屛渲染

    如有出入,欢迎各位指正~

    相关文章

      网友评论

          本文标题:iOS 圆角+masksToBounds一定触发离屛渲染吗?

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