矩形图表绘制

矩形图表绘制

• 矩形图表绘制

矩形图表绘制是根据每一项数量斜体增长矩形图表功能。

在上篇日志中我讲到过使用CAShapeLayer配合UIBezierPath贝塞尔曲线绘制锯齿状图表。这篇中主要是说矩形图表绘制，涉及技术和上篇差不多，重复的具体就不说了。主要说一下CATextLayer，继承于CALayer。它以图层的形式包含了UILabel几乎所有的绘制特性，并且额外提供了一些新的特性。同样，CATextLayer也要比UILabel渲染得快得多。很少有人知道在iOS 6及之前的版本，UILabel其实是通过WebKit来实现绘制的，这样就造成了当有很多文字的时候就会有极大的性能压力。而CATextLayer使用了Core text，并且渲染得非常快。

通过layer类方法创建同时设置frame

contentsScale属性设置字体放大倍数，一般我们设置为[UIScreen mainScreen].scale;和主屏幕保持一致。

CATextLayer的font属性不是一个UIFont类型，而是一个CFTypeRef类型。这样可以根据你的具体需要来决定字体属性应该是用CGFontRef类型还是CTFontRef类型（Core Text字体）。同时字体大小也是用fontSize属性单独设置的，因为CTFontRef和CGFontRef并不像UIFont一样包含点大小。这个例子会告诉你如何将UIFont转换成CGFontRef。

另外，CATextLayer的string属性并不是你想象的NSString类型，而是id类型。这样你既可以用NSString也可以用NSAttributedString来指定文本了（注意，NSAttributedString并不是NSString的子类）。属性化字符串是iOS用来渲染字体风格的机制，它以特定的方式来决定指定范围内的字符串的原始信息，比如字体，颜色，字重，斜体等。
通过以下方式设置富文本

UIFont *font = [UIFont boldSystemFontOfSize:30];    NSMutableAttributedString *string = nil;    string = [[NSMutableAttributedString alloc] initWithString:str];    CFStringRef fontName = (__bridge CFStringRef)font.fontName;    CGFloat fontSize = font.pointSize;    CTFontRef fontRef = CTFontCreateWithName(fontName, fontSize, NULL);    NSDictionary *attribs = @{                              (__bridge id)kCTForegroundColorAttributeName:(__bridge id)[UIColor whiteColor].CGColor,                              (__bridge id)kCTFontAttributeName: (__bridge id)fontRef                              };    [string setAttributes:attribs range:NSMakeRange(0, [str length])];        font = [UIFont boldSystemFontOfSize:14];    fontName = (__bridge CFStringRef)font.fontName;    fontSize = font.pointSize;    fontRef = CTFontCreateWithName(fontName, fontSize, NULL);    attribs = @{                (__bridge id)kCTForegroundColorAttributeName: (__bridge id)[UIColor whiteColor].CGColor,                (__bridge id)kCTFontAttributeName: (__bridge id)fontRef                };    [string setAttributes:attribs range:NSMakeRange(str - 2 > 0 ? str.length - 2 : 0 , 2)];    CFRelease(fontRef);    textLayer.string = string;

创建步骤：
（开始步骤和上篇日志大致一样）
根据可看到的逐个绘制图层中间一个角度问题需要根据三角函数计算点的坐标进行绘制。
以上矩形内容可以根据CATransformLayer进行绘制，关于CATransformLayer会在以后日志中讲到。
源码地址