iOS開發UI篇——Core Animation核心動畫CAShapeLayer(繪製圖形等)簡介

標籤：size   虛線   array   result   pattern   rtl   life   table   載入   

重點：

　　擷取繪製圖形        Layer CAShapeLayer *shapeLayer = [CAShapeLayer layer];

    設定圖形有線顏色   [CAShapeLayer layer].strokeColor = [UIColor redColor].CGColor; 

    設定圖形填滿顏色   [CAShapeLayer layer].fillColor = [UIColor clearColor].CGColor; 

　　 設定圖形線寬      [CAShapeLayer layer].lineWidth = 5; 

    圖形連線類型      [CAShapeLayer layer].lineJoin = kCALineCapRound;

      圖形連線類型      [CAShapeLayer layer].lineCap = kCALineCapRound;

    圖形的路徑        [CAShapeLayer layer].path = path.CGPath;

    添加的圖層上      [self.drawView.layer addSublayer:shapeLayer];

一、繪製火柴人

 //繪製火柴人    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)]; //畫一條50長的垂直直線，畫身體    [path addLineToPoint:CGPointMake(125,225)]; //畫一條向左且距離y軸有225的斜線，畫左腿    [path moveToPoint:CGPointMake(150, 175)]; //再將起點移動到150，175的位置    [path addLineToPoint:CGPointMake(175, 225)];//畫一條向右且距離y軸225的斜線，畫右腿    [path moveToPoint:CGPointMake(125, 150)];    [path addLineToPoint:CGPointMake(175, 150)];//畫雙手    //create CAShapeLayer    CAShapeLayer *shapeLayer = [CAShapeLayer layer]; //得到layer    shapeLayer.strokeColor = [UIColor redColor].CGColor; //線的顏色    shapeLayer.fillColor = [UIColor clearColor].CGColor; //填充顏色    shapeLayer.lineWidth = 5; //線寬    //連線類型    shapeLayer.lineJoin = kCALineCapRound;    shapeLayer.lineCap = kCALineCapRound;    //路徑添加到shapeLayer    shapeLayer.path = path.CGPath;    [self.drawView.layer addSublayer:shapeLayer];

圖1 

二、繪製特殊矩形（三個圓角，一個直角）

  //三個是圓角，一個是直角，可以隨意選擇    CGRect rect = CGRectMake(50, 50, 100, 100);    CGSize radii = CGSizeMake(20, 20);    UIRectCorner corners  = UIRectCornerTopLeft|UIRectCornerTopRight|UIRectCornerBottomLeft; //三個角    //畫矩形    UIBezierPath *rectPath = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corners cornerRadii:radii];    //路徑添加到shapeLayer    shapeLayer.path = rectPath.CGPath;    [self.drawView.layer addSublayer:shapeLayer];

二、直條圖

1.添加直條圖上視圖上

    self.chartView = [[ChartView alloc] initWithFrame:CGRectMake(12*ScaleX, 64,mainWidth-24*ScaleX, 500-24*ScaleX)];    self.chartView.layer.cornerRadius = 4 ;    self.chartView.layer.shadowColor = UIColorFromRGB(0xff9300).CGColor;    self.chartView.layer.shadowOffset = CGSizeMake(1, 1);    self.chartView.layer.shadowOpacity = 0.2;    [self.view addSubview:self.chartView];

2.設定直條圖資料

 [self refreshWithArray:@[@"600.00",@"6.91",@"1310.00",@"600.00",@"0.00",@"-800.00",@"0.00",@"152.00",@"-30.00",@"0.00"]];- (void)refreshWithArray:(NSArray *)returnArray{    NSMutableArray *tempArray = [NSMutableArray arrayWithArray:returnArray];    // 數組個數不夠10個    if (returnArray.count < 10) {        // 插入的次數        for (int i = 0; i<10-returnArray.count; i++) {            [tempArray insertObject:[NSNumber numberWithInt:0] atIndex:(returnArray.count)];        }    }    // 數組個數多於10個    if (returnArray.count > 10) {        for (int i = 0; i<returnArray.count - 10; i++) {            [tempArray removeObjectAtIndex:0];        }    }    // 如果數組的元素不是數字類型    NSMutableArray *resultArray = [NSMutableArray array];    for (int i = 0; i<tempArray.count; i++) {        if (![tempArray[i] isKindOfClass:[NSNumber class]]) {            NSString *tempString = [NSString stringWithFormat:@"%@",tempArray[i]];            [resultArray addObject:[NSNumber numberWithFloat:tempString.floatValue]];        }else{            [resultArray addObject:tempArray[i]];        }    }    self.chartView.datas = resultArray;    [self.chartView show];}

3.載入UI及設定資料

#import <UIKit/UIKit.h>@interface ChartView : UIView@property (nonatomic, strong) NSArray *datas;- (void)show;@end#import "ChartView.h"#define STRChartLeftWidth 60#define STRChartColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]@interface ChartView()@property (nonatomic, assign) CGFloat          maxValue;@property (nonatomic, strong) NSMutableArray  *yArray;@property (nonatomic, strong) CAShapeLayer    *backGroundLayer;@property (nonatomic, strong) UIBezierPath    *backGroundPath;@property (nonatomic, strong) CATextLayer     *backGroundTextLayer;// 畫圖的間距@property (nonatomic,assign) CGFloat minWidth;@property (nonatomic,assign) CGFloat minHeight;@end@implementation ChartView#pragma mark - ??life cycle- (instancetype)initWithFrame:(CGRect)frame{    if (self = [super initWithFrame:frame]) {        [self loadUI];    }    return self;}- (instancetype)init{    self = [super init];    if (self) {        [self loadUI];    }    return self;}- (void)loadUI{        self.yArray = [NSMutableArray array];    self.backgroundColor = [UIColor whiteColor];    self.minWidth = (self.bounds.size.width - STRChartLeftWidth - 10)/(11+10*2);    self.minHeight = self.bounds.size.height/10;}#pragma mark - ??overwrite- (void)setDatas:(NSArray *)datas{    _datas = datas;    NSMutableArray *tempArray = [NSMutableArray array];    for (int i = 0; i<datas.count; i++) {        NSString *tempStr = [NSString stringWithFormat:@"%@",datas[i]];        NSNumber *tempNum = [NSNumber numberWithFloat:fabsf(tempStr.floatValue)];        [tempArray addObject:tempNum];    }        // 擷取最大值    self.maxValue = [[tempArray valueForKeyPath:@"@max.floatValue"] floatValue];        // ceil函數，向上取整    int num = (ceil((self.maxValue / 200.00)))*200;        // y座標數組    for (int i = 0; i<9; i++) {        [self.yArray addObject:[NSString stringWithFormat:@"%d",(num - num/4 * i)]];    }    // 關鍵是最大刻度    self.maxValue = num;}

　4、畫圖形

- (void)show{         self.layer.sublayers = nil;    [self p_drawBackGroundPath]; //和數組無關    [self p_drawBackGroundText];    [self p_drawBackBar];}- (void)p_drawBackBar{    //未完待續}- (void)p_drawBackGroundText{    //也可以用label    //畫文字    for (NSInteger i = 0; i <self.yArray.count ; i++) {        self.backGroundTextLayer = [CATextLayer layer];        self.backGroundTextLayer.string = [NSString stringWithFormat:@"%@元",self.yArray[i]];        NSString *text = self.yArray[i];        if (text.floatValue<0) {            self.backGroundTextLayer.foregroundColor = UIColorFromRGB(0x00CE64).CGColor;            self.backGroundTextLayer.string = [NSString stringWithFormat:@"%@元",self.yArray[i]];        }else if (text.floatValue>0){            self.backGroundTextLayer.foregroundColor = UIColorFromRGB(0xFF5376).CGColor;            self.backGroundTextLayer.string = [NSString stringWithFormat:@"+%@元",self.yArray[i]];        }else{            self.backGroundTextLayer.foregroundColor = UIColorFromRGB(0x878787).CGColor;        }        self.backGroundTextLayer.fontSize = 10;        self.backGroundTextLayer.alignmentMode = kCAAlignmentRight;        self.backGroundTextLayer.contentsScale = [UIScreen mainScreen].scale;// 使字型不模糊  螢幕解析度原因        self.backGroundTextLayer.frame = CGRectMake(0,self.minHeight-10+i*self.minHeight, 50, 20);        [self.layer addSublayer:self.backGroundTextLayer];    }}- (void)p_drawBackGroundPath{        self.backGroundLayer = [CAShapeLayer layer];    [self.layer addSublayer:self.backGroundLayer];    self.backGroundLayer.frame = self.bounds;    self.backGroundPath = [UIBezierPath bezierPath];    NSInteger lineNum = 9;    for (NSInteger i = 0; i< lineNum; i++) {                [self.backGroundPath moveToPoint:CGPointMake(STRChartLeftWidth,i*self.minHeight+self.minHeight)];        [self.backGroundPath addLineToPoint:CGPointMake(self.bounds.size.width - 10,i*self.minHeight+self.minHeight)];            }    //線的寬度    self.backGroundLayer.lineWidth = 1.0;    //線的顏色    self.backGroundLayer.strokeColor = STRChartColorFromRGB(0xD8D7D7).CGColor;    //將self.backGroundPath的路徑設定到path    self.backGroundLayer.path = self.backGroundPath.CGPath;    //將上面的實線設定為虛線    [self.backGroundLayer setLineDashPattern:[NSArray arrayWithObjects:[NSNumber numberWithInt:1], [NSNumber numberWithInt:1], nil]];       //畫中間的實線    CAShapeLayer *centerLine = [CAShapeLayer layer];    [self.layer addSublayer:centerLine];    centerLine.frame = CGRectMake(STRChartLeftWidth,self.frame.size.height/2-0.5,self.bounds.size.width - STRChartLeftWidth -20, 1);    centerLine.backgroundColor = STRChartColorFromRGB(0xF0F0F0).CGColor;}@end

　　

 

iOS開發UI篇——Core Animation核心動畫CAShapeLayer(繪製圖形等)簡介