• CA*Layer(CAShapeLayer--CATextLayer)


    CAShapeLayer

    CAShapeLayer是一个通过矢量图形而不是bitmap来绘制的图层子类。你指定诸如颜色和线宽等属性,用CGPath来定义想要绘制的图 形,最后CAShapeLayer就自动渲染出来了。当然,你也可以用Core Graphics直接向原始的CALyer的内容中绘制一个路径,相比直下,使用CAShapeLayer有以下一些优点:

    • 渲染快速。CAShapeLayer使用了硬件加速,绘制同一图形会比用Core Graphics快很多。

    • 高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形,所以无论有多大,都不会占用太多的内存。

    • 不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉(如我们在第二章所见)。

    • 不会出现像素化。当你给CAShapeLayer做3D变换时,它不像一个有寄宿图的普通图层一样变得像素化。

    (1).用CAShapeLayer绘制一个火柴人:
    #import "DrawingView.h"
    #import @interface ViewController ()
    @property (nonatomic, weak) IBOutlet UIView *containerView;
    @end
    @implementation ViewController
    - (void)viewDidLoad
    {
      [super viewDidLoad];
      //create path
      UIBezierPath *path = [[UIBezierPath alloc] init];
      [path moveToPoint:CGPointMake(175, 100)];
      ?
      [path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:2*M_PI clockwise:YES];
      [path moveToPoint:CGPointMake(150, 125)];
      [path addLineToPoint:CGPointMake(150, 175)];
      [path addLineToPoint:CGPointMake(125, 225)];
      [path moveToPoint:CGPointMake(150, 175)];
      [path addLineToPoint:CGPointMake(175, 225)];
      [path moveToPoint:CGPointMake(100, 150)];
      [path addLineToPoint:CGPointMake(200, 150)];
      //create shape layer
      CAShapeLayer *shapeLayer = [CAShapeLayer layer];
      shapeLayer.strokeColor = [UIColor redColor].CGColor;
      shapeLayer.fillColor = [UIColor clearColor].CGColor;
      shapeLayer.lineWidth = 5;
      shapeLayer.lineJoin = kCALineJoinRound;
      shapeLayer.lineCap = kCALineCapRound;
      shapeLayer.path = path.CGPath;
      //add it to our view
      [self.containerView.layer addSublayer:shapeLayer];
    }
    @end

    6.1.png

    (2).我们创建圆角举行其实就是人工绘制单独的直线和弧度,但是事实上UIBezierPath有自动绘制圆角矩形的构造方法,下面这段代码绘制了一个有三个圆角一个直角的矩形:
    //define path parameters
    CGRect rect = CGRectMake(50, 50, 100, 100);
    CGSize radii = CGSizeMake(20, 20);
    UIRectCorner corners = UIRectCornerTopRight | UIRectCornerBottomRight | UIRectCornerBottomLeft;
    //create path
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corners cornerRadii:radii];
    CATextLayer
    CATextLayer也要比UILabel渲染得快得多。很少有人知道在iOS 6及之前的版本,UILabel其实是通过WebKit来实现绘制的,这样就造成了当有很多文字的时候就会有极大的性能压力。而CATextLayer使 用了Core text,并且渲染得非常快
    (1).用CATextLayer来实现一个UILabel
    @interface ViewController ()
    @property (nonatomic, weak) IBOutlet UIView *labelView;
    @end
    @implementation ViewController
    - (void)viewDidLoad
    {
      [super viewDidLoad];
      //create a text layer
      CATextLayer *textLayer = [CATextLayer layer];
      textLayer.frame = self.labelView.bounds;
      [self.labelView.layer addSublayer:textLayer];
      //set text attributes
      textLayer.foregroundColor = [UIColor blackColor].CGColor;
      textLayer.alignmentMode = kCAAlignmentJustified;
      textLayer.wrapped = YES;
      //choose a font
      UIFont *font = [UIFont systemFontOfSize:15];
      //set layer font
      CFStringRef fontName = (__bridge CFStringRef)font.fontName;
      CGFontRef fontRef = CGFontCreateWithFontName(fontName);
      textLayer.font = fontRef;
      textLayer.fontSize = font.pointSize;
      CGFontRelease(fontRef);
      //choose some text
      NSString *text = @"Lorem ipsum dolor sit amet, consectetur adipiscing  elit. Quisque massa arcu, eleifend vel varius in, facilisis pulvinar  leo. Nunc quis nunc at mauris pharetra condimentum ut ac neque. Nunc elementum, libero ut porttitor dictum, diam odio congue lacus, vel  fringilla sapien diam at purus. Etiam suscipit pretium nunc sit amet  lobortis";
      //set layer text
      textLayer.string = text;
    }
    @end
    如果你自习看这个文本,你会发现一个奇怪的地方:这些文本有一些像素化了。这是因为并没有以Retina的方式渲染,第二章提到了这个 contentScale属性,用来决定图层内容应该以怎样的分辨率来渲染。contentsScale并不关心屏幕的拉伸因素而总是默认为1.0。如果 我们想以Retina的质量来显示文字,我们就得手动地设置CATextLayer的contentsScale属性,如下:
       textLayer.contentsScale = [UIScreen mainScreen].scale;

    这样就解决了这个问题(如图6.3)

    6.3.png

    (2).用NSAttributedString实现一个富文本标签。
    @implementation ViewController
    - (void)viewDidLoad
    {
      [super viewDidLoad];
      //create a text layer
      CATextLayer *textLayer = [CATextLayer layer];
      textLayer.frame = self.labelView.bounds;
      textLayer.contentsScale = [UIScreen mainScreen].scale;
      [self.labelView.layer addSublayer:textLayer];
      //set text attributes
      textLayer.alignmentMode = kCAAlignmentJustified;
      textLayer.wrapped = YES;
      //choose a font
      UIFont *font = [UIFont systemFontOfSize:15];
      //choose some text
      NSString *text = @"Lorem ipsum dolor sit amet, consectetur adipiscing  elit. Quisque massa arcu, eleifend vel varius in, facilisis pulvinar  leo. Nunc quis nunc at mauris pharetra condimentum ut ac neque. Nunc  elementum, libero ut porttitor dictum, diam odio congue lacus, vel  fringilla sapien diam at purus. Etiam suscipit pretium nunc sit amet  lobortis";
      ?
      //create attributed string
      NSMutableAttributedString *string = nil;
      string = [[NSMutableAttributedString alloc] initWithString:text];
      //convert UIFont to a CTFont
      CFStringRef fontName = (__bridge CFStringRef)font.fontName;
      CGFloat fontSize = font.pointSize;
      CTFontRef fontRef = CTFontCreateWithName(fontName, fontSize, NULL);
      //set text attributes
      NSDictionary *attribs = @{
        (__bridge id)kCTForegroundColorAttributeName:(__bridge id)[UIColor blackColor].CGColor,
        (__bridge id)kCTFontAttributeName: (__bridge id)fontRef
      };
      [string setAttributes:attribs range:NSMakeRange(0, [text length])];
      attribs = @{
        (__bridge id)kCTForegroundColorAttributeName: (__bridge id)[UIColor redColor].CGColor,
        (__bridge id)kCTUnderlineStyleAttributeName: @(kCTUnderlineStyleSingle),
        (__bridge id)kCTFontAttributeName: (__bridge id)fontRef
      };
      [string setAttributes:attribs range:NSMakeRange(6, 5)];
      //release the CTFont we created earlier
      CFRelease(fontRef);
      //set layer text
      textLayer.string = string;
    }
    @end

    6.4.png

    (3).UILabel的替代品

    我们已经证实了CATextLayer比UILabel有着更好的性能表现,同时还有额外的布局选项并且在iOS 5上支持富文本。但是与一般的标签比较而言会更加繁琐一些。如果我们真的在需求一个UILabel的可用替代品,最好是能够在Interface Builder上创建我们的标签,而且尽可能地像一般的视图一样正常工作。

    我们应该继承UILabel,然后添加一个子图层 CATextLayer并重写显示文本的方法。但是仍然会有由UILabel的-drawRect:方法创建的空寄宿图。而且由于CALayer不支持自 动缩放和自动布局,子视图并不是主动跟踪视图边界的大小,所以每次视图大小被更改,我们不得不手动更新子图层的边界。

    我们真正想要的是一个用CATextLayer作为宿主图层的UILabel子类,这样就可以随着视图自动调整大小而且也没有冗余的寄宿图啦。

    就 像我们在第一章『图层树』讨论的一样,每一个UIView都是寄宿在一个CALayer的示例上。这个图层是由视图自动创建和管理的,那我们可以用别的图 层类型替代它么?一旦被创建,我们就无法代替这个图层了。但是如果我们继承了UIView,那我们就可以重写+layerClass方法使得在创建的时候 能返回一个不同的图层子类。UIView会在初始化的时候调用+layerClass方法,然后用它的返回类型来创建宿主图层。

    清单6.4 演示了一个UILabel子类LayerLabel用CATextLayer绘制它的问题,而不是调用一般的UILabel使用的较慢的 -drawRect:方法。LayerLabel示例既可以用代码实现,也可以在Interface Builder实现,只要把普通的标签拖入视图之中,然后设置它的类是LayerLabel就可以了。

    清单6.4 使用CATextLayer的UILabel子类:LayerLabel

    #import "LayerLabel.h"
    #import @implementation LayerLabel
    + (Class)layerClass
    {
      //this makes our label create a CATextLayer //instead of a regular CALayer for its backing layer
      return [CATextLayer class];
    }
    - (CATextLayer *)textLayer
    {
      return (CATextLayer *)self.layer;
    }
    - (void)setUp
    {
      //set defaults from UILabel settings
      self.text = self.text;
      self.textColor = self.textColor;
      self.font = self.font;
      //we should really derive these from the UILabel settings too
      //but that's complicated, so for now we'll just hard-code them
      [self textLayer].alignmentMode = kCAAlignmentJustified;
      ?
      [self textLayer].wrapped = YES;
      [self.layer display];
    }
    - (id)initWithFrame:(CGRect)frame
    {
      //called when creating label programmatically
      if (self = [super initWithFrame:frame]) {
        [self setUp];
      }
      return self;
    }
    - (void)awakeFromNib
    {
      //called when creating label using Interface Builder
      [self setUp];
    }
    - (void)setText:(NSString *)text
    {
      super.text = text;
      //set layer text
      [self textLayer].string = text;
    }
    - (void)setTextColor:(UIColor *)textColor
    {
      super.textColor = textColor;
      //set layer text color
      [self textLayer].foregroundColor = textColor.CGColor;
    }
    - (void)setFont:(UIFont *)font
    {
      super.font = font;
      //set layer font
      CFStringRef fontName = (__bridge CFStringRef)font.fontName;
      CGFontRef fontRef = CGFontCreateWithFontName(fontName);
      [self textLayer].font = fontRef;
      [self textLayer].fontSize = font.pointSize;
      ?
      CGFontRelease(fontRef);
    }
    @end

    如果你运行代码,你会发现文本并没有像素化,而我们也没有设置contentsScale属性。把CATextLayer作为宿主图层的另一好处就是视图自动设置了contentsScale属性。

    在这个简单的例子中,我们只是实现了UILabel的一部分风格和布局属性,不过稍微再改进一下我们就可以创建一个支持UILabel所有功能甚至更多功能的LayerLabel类(你可以在一些线上的开源项目中找到)。

    如果你打算支持iOS 6及以上,基于CATextLayer的标签可能就有有些局限性。但是总得来说,如果想在app里面充分利用CALayer子类,用+layerClass来创建基于不同图层的视图是一个简单可复用的方法。

     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    vue 引用本地图片
    antdVue
    Nest.js —— A progressive Node.js framework
    20184313《网络对抗技术》Exp8 Web综合
    20184313《网络对抗技术》Exp7 网络欺诈防范
    20184313《网络对抗技术》Exp6 MSF应用基础
    20184313《网络对抗技术》Exp5 信息搜集与漏洞扫描
    网页激知序列号之途径(网友提供技术参考)
    【转】Delphi中正则表达式支持中文的写法
    遇到的一个奇怪问题
  • 原文地址:https://www.cnblogs.com/jingdizhiwa/p/5482841.html
Copyright © 2020-2023  润新知