Introduction to iOS Development UI Chapter--core animation core Animation Cashapelayer (drawing graphics, etc.)

Focus:

Get draw graphics layer cashapelayer *shapelayer = [cashapelayer layer];

    Set graphics wired color   [cashapelayer layer .strokecolor = [uicolor redcolor< Span class= "S1" >. cgcolor;&NBSP;

< Span class= "S1" >    set graphic fill color    [cashapelayer layer< span class= "s2" > . fillcolor = [uicolor Clearcolorcgcolor;&NBSP;

Set graphic lineweight [cashapelayer layer] . linewidth = 5;

    < Span class= "S1" > graphics connection type       [cashapelayer layer]. lineJoin = kcalinecapround;

< Span class= "S1" > graphics Connection type       [cashapelayer layer] .LineCap = kcalinecapround;

    Graphics path         < span class= "s2" >[cashapelayer  layer] . Path = Path. Cgpath

On the added layer [self. Drawview. Layer addsublayer: Shapelayer];

First, draw the Stickman.

 Draw Stickman Uibezierpath *path = [[Uibezierpath alloc] init];    [Path Movetopoint:cgpointmake (175, 100)];    [Path Addarcwithcenter:cgpointmake (radius:25) startangle:0 endangle:2*m_pi Clockwise:yes]; [Path Movetopoint:cgpointmake (150, 125)]; Exactly the radius position of the circle, in the center context of the Circle [path Addlinetopoint:cgpointmake (150, 175)]; Draw a 50-long vertical line and draw the body [path Addlinetopoint:cgpointmake (125,225)]; Draw a diagonal line to the left and 225 from the Y axis, and draw the left leg [path Movetopoint:cgpointmake (150, 175)]; Then move the starting point to the position of 150,175 [path Addlinetopoint:cgpointmake (175, 225)];//draw a diagonal line to the right and the y-axis 225, draw the leg [path Movetopoint:cgpointmak    E (125, 150)]; [Path Addlinetopoint:cgpointmake (175, 150)];//draw hands//create cashapelayer cashapelayer *shapelayer = [Cashapelayer Lay ER]; Get Layer Shapelayer.strokecolor = [Uicolor Redcolor]. Cgcolor; The color of the line shapelayer.fillcolor = [Uicolor Clearcolor]. Cgcolor; Fill Color shapelayer.linewidth = 5;    Line width//connection type shapelayer.linejoin = Kcalinecapround;    Shapelayer.linecap = Kcalinecapround; Path added to shapeLayer Shapelayer.path = path.    Cgpath; [Self.drawView.layer Addsublayer:shapelayer];

Figure 1

Second, draw special rectangle (three fillets, one right angle)

  Three are rounded corners, one is right-angled, can be arbitrarily selected    cgrect rect = CGRectMake (();    Cgsize radii = Cgsizemake (a);    Uirectcorner Corners  = uirectcornertopleft| Uirectcornertopright| Uirectcornerbottomleft; Three corners    //Draw rectangle    Uibezierpath *rectpath = [Uibezierpath bezierpathwithroundedrect:rect byroundingcorners:corners CORNERRADII:RADII];    The path is added to Shapelayer    shapelayer.path = Rectpath.cgpath;    [Self.drawView.layer Addsublayer:shapelayer];

Second, column chart

1. Add a column chart on the view

    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. Setting Column chart data

 [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];            The number of arrays is not enough 10 if (Returnarray.count < 10) {//insert number of times for (int i = 0; i<10-returnarray.count; i++) {        [Temparray insertobject:[nsnumber numberwithint:0] Atindex: (Returnarray.count)];            }}//number of arrays more than 10 if (Returnarray.count >) {for (int i = 0; i<returnarray.count-10; i++) {        [Temparray removeobjectatindex:0];    }}//If the element of the array is not a numeric type nsmutablearray *resultarray = [Nsmutablearray array]; for (int i = 0; i<temparray.count; i++) {if (![ Temparray[i] Iskindofclass:[nsnumber class]) {NSString *tempstring = [NSString stringwithformat:@ "%@", TEMPARR            Ay[i]]; [Resultarray Addobject:[nsnumber NumberWithFloat:tempString.floatValue]];        }else{[Resultarray Addobject:temparray[i]];    }} Self.chartView.datas = Resultarray; [Self.chartview show];}

3. Loading UI and setting data

#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) >>))/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; @pro Perty (nonatomic, strong) Uibezierpath *backgroundpath; @property (nonatomic, strong) Catextlayer *backgroundtextlay er;//Draw Spacing @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];        }//Get maximum value self.maxvalue = [[Temparray valueforkeypath:@ "@max. Floatvalue"] floatvalue];        Ceil function, rounding up int num = (ceil ((self.maxvalue/200.00))) *200; The y-coordinate array for (int i = 0; i<9; i++) {[Self.yarray addobject:[nsstring stringWithFormat:@ "%d", (NUM-NUM/4 * i)]; }//Key is max tick self.maxvalue = num;}

4, drawing graphics

-(void) show{self.layer.sublayers = nil; [Self p_drawbackgroundpath];    Array-independent [self p_drawbackgroundtext]; [Self p_drawbackbar];} -(void) p_drawbackbar{//}-(void) p_drawbackgroundtext{//can also be drawn with a label//text for (Nsinteger i = 0; I <self . Yarray.count;        i++) {self.backgroundtextlayer = [catextlayer layer];        self.backGroundTextLayer.string = [NSString stringwithformat:@ "%@ yuan", self.yarray[i]];        NSString *text = Self.yarray[i]; if (text.floatvalue<0) {Self.backGroundTextLayer.foregroundColor = Uicolorfromrgb (0x00ce64).            Cgcolor;        self.backGroundTextLayer.string = [NSString stringwithformat:@ "%@ yuan", self.yarray[i]]; }else if (text.floatvalue>0) {Self.backGroundTextLayer.foregroundColor = Uicolorfromrgb (0xff5376).            Cgcolor;        self.backGroundTextLayer.string = [NSString stringwithformat:@ "+%@ yuan", self.yarray[i]]; }else{Self.backGroundTextLayer.foregroundColor = UicolorfrOmrgb (0x878787).        Cgcolor;        } self.backGroundTextLayer.fontSize = 10;        Self.backGroundTextLayer.alignmentMode = Kcaalignmentright; Self.backGroundTextLayer.contentsScale = [UIScreen mainscreen].scale;//causes the font to not blur the screen resolution reason self.backGroundTextLayer.fr        Ame = 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)]; }//The width of the line self.backGroundLayer.lineWidth = 1.0;    The color of the line Self.backGroundLayer.strokeColor = Strchartcolorfromrgb (0XD8D7D7).    Cgcolor;    Set the path of the Self.backgroundpath to path self.backGroundLayer.path = Self.backGroundPath.CGPath; Set the solid line above to be dashed [Self.backgroundlayer setlinedashpattern:[nsarray arraywithobjects:[nsnumber numberwithint:1], [       NSNumber Numberwithint:1], nil]];    The solid line in the middle of the painting 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

　　

Introduction to iOS Development UI Chapter--core animation core Animation Cashapelayer (drawing graphics, etc.)