iOS 繪圖
阿新 • • 發佈：2017-05-08
bsp eve stop ger import width shape n) switch
// // BezierCurveView.m // BezierCurveLineDemo // // Created by mac on 17/5/7. // Copyright ? 2016年 kcl. All rights reserved. // #import "BezierCurveView.h" static CGRect myFrame; @interface BezierCurveView () @end @implementation BezierCurveView //初始化畫布 +(instancetype)initWithFrame:(CGRect)frame{ BezierCurveView*bezierCurveView = [[NSBundle mainBundle] loadNibNamed:@"BezierCurveView" owner:self options:nil].lastObject; bezierCurveView.frame = frame; //背景視圖 UIView *backView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)]; backView.backgroundColor = XYQColor(255, 229, 239); [bezierCurveView addSubview:backView]; myFrame = frame; return bezierCurveView; } /** * 畫坐標軸 */ -(void)drawXYLine:(NSMutableArray *)x_names{ UIBezierPath *path = [UIBezierPath bezierPath]; //1.Y軸、X軸的直線 [path moveToPoint:CGPointMake(MARGIN, CGRectGetHeight(myFrame)-MARGIN)]; [path addLineToPoint:CGPointMake(MARGIN, MARGIN)]; [path moveToPoint:CGPointMake(MARGIN, CGRectGetHeight(myFrame)-MARGIN)]; [path addLineToPoint:CGPointMake(MARGIN+CGRectGetWidth(myFrame)-2*MARGIN, CGRectGetHeight(myFrame)-MARGIN)]; //2.添加箭頭 [path moveToPoint:CGPointMake(MARGIN, MARGIN)]; [path addLineToPoint:CGPointMake(MARGIN-5, MARGIN+5)]; [path moveToPoint:CGPointMake(MARGIN, MARGIN)]; [path addLineToPoint:CGPointMake(MARGIN+5, MARGIN+5)]; [path moveToPoint:CGPointMake(MARGIN+CGRectGetWidth(myFrame)-2*MARGIN, CGRectGetHeight(myFrame)-MARGIN)]; [path addLineToPoint:CGPointMake(MARGIN+CGRectGetWidth(myFrame)-2*MARGIN-5, CGRectGetHeight(myFrame)-MARGIN-5)]; [path moveToPoint:CGPointMake(MARGIN+CGRectGetWidth(myFrame)-2*MARGIN, CGRectGetHeight(myFrame)-MARGIN)]; [path addLineToPoint:CGPointMake(MARGIN+CGRectGetWidth(myFrame)-2*MARGIN-5, CGRectGetHeight(myFrame)-MARGIN+5)]; //3.添加索引格 //X軸 for (int i=0; i<x_names.count; i++) { CGFloat X = MARGIN + MARGIN*(i+1); CGPoint point = CGPointMake(X,CGRectGetHeight(myFrame)-MARGIN); [path moveToPoint:point]; [path addLineToPoint:CGPointMake(point.x, point.y-3)]; } //Y軸（實際長度為200,此處比例縮小一倍使用） for (int i=0; i<11; i++) { CGFloat Y = CGRectGetHeight(myFrame)-MARGIN-Y_EVERY_MARGIN*i; CGPoint point = CGPointMake(MARGIN,Y); [path moveToPoint:point]; [path addLineToPoint:CGPointMake(point.x+3, point.y)]; } //4.添加索引格文字 //X軸 for (int i=0; i<x_names.count; i++) { CGFloat X = MARGIN + 15 + MARGIN*i; UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(X, CGRectGetHeight(myFrame)-MARGIN, MARGIN, 20)]; textLabel.text = x_names[i]; textLabel.font = [UIFont systemFontOfSize:10]; textLabel.textAlignment = NSTextAlignmentCenter; textLabel.textColor = [UIColor blueColor]; [self addSubview:textLabel]; } //Y軸 for (int i=0; i<11; i++) { CGFloat Y = CGRectGetHeight(myFrame)-MARGIN-Y_EVERY_MARGIN*i; UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, Y-5, MARGIN, 10)]; textLabel.text = [NSString stringWithFormat:@"%d",10*i]; textLabel.font = [UIFont systemFontOfSize:10]; textLabel.textAlignment = NSTextAlignmentCenter; textLabel.textColor = [UIColor redColor]; [self addSubview:textLabel]; } //5.渲染路徑 CAShapeLayer *shapeLayer = [CAShapeLayer layer]; shapeLayer.path = path.CGPath; shapeLayer.strokeColor = [UIColor blackColor].CGColor; shapeLayer.fillColor = [UIColor clearColor].CGColor; shapeLayer.borderWidth = 2.0; [self.subviews[0].layer addSublayer:shapeLayer]; } /** * 畫折線圖 */ -(void)drawLineChartViewWithX_Value_Names:(NSMutableArray *)x_names TargetValues:(NSMutableArray *)targetValues LineType:(LineType) lineType{ //1.畫坐標軸 [self drawXYLine:x_names]; //2.獲取目標值點坐標 NSMutableArray *allPoints = [NSMutableArray array]; for (int i=0; i<targetValues.count; i++) { CGFloat doubleValue = 2*[targetValues[i] floatValue]; //目標值放大兩倍 CGFloat X = MARGIN + MARGIN*(i+1); CGFloat Y = CGRectGetHeight(myFrame)-MARGIN-doubleValue; CGPoint point = CGPointMake(X,Y); UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(point.x-1, point.y-1, 2.5, 2.5) cornerRadius:2.5]; CAShapeLayer *layer = [CAShapeLayer layer]; layer.strokeColor = [UIColor purpleColor].CGColor; layer.fillColor = [UIColor purpleColor].CGColor; layer.path = path.CGPath; [self.subviews[0].layer addSublayer:layer]; [allPoints addObject:[NSValue valueWithCGPoint:point]]; } //3.坐標連線 UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:[allPoints[0] CGPointValue]]; CGPoint PrePonit; switch (lineType) { case LineType_Straight: //直線 for (int i =1; i<allPoints.count; i++) { CGPoint point = [allPoints[i] CGPointValue]; [path addLineToPoint:point]; } break; case LineType_Curve: //曲線 for (int i =0; i<allPoints.count; i++) { if (i==0) { PrePonit = [allPoints[0] CGPointValue]; }else{ CGPoint NowPoint = [allPoints[i] CGPointValue]; [path addCurveToPoint:NowPoint controlPoint1:CGPointMake((PrePonit.x+NowPoint.x)/2, PrePonit.y) controlPoint2:CGPointMake((PrePonit.x+NowPoint.x)/2, NowPoint.y)]; //三次曲線 PrePonit = NowPoint; } } break; } CAShapeLayer *shapeLayer = [CAShapeLayer layer]; shapeLayer.path = path.CGPath; shapeLayer.strokeColor = [UIColor greenColor].CGColor; shapeLayer.fillColor = [UIColor clearColor].CGColor; shapeLayer.borderWidth = 2.0; [self.subviews[0].layer addSublayer:shapeLayer]; //4.添加目標值文字 for (int i =0; i<allPoints.count; i++) { UILabel *label = [[UILabel alloc] init]; label.textColor = [UIColor purpleColor]; label.textAlignment = NSTextAlignmentCenter; label.font = [UIFont systemFontOfSize:10]; [self.subviews[0] addSubview:label]; if (i==0) { CGPoint NowPoint = [allPoints[0] CGPointValue]; label.text = [NSString stringWithFormat:@"%.0lf",(CGRectGetHeight(myFrame)-NowPoint.y-MARGIN)/2]; label.frame = CGRectMake(NowPoint.x-MARGIN/2, NowPoint.y-20, MARGIN, 20); PrePonit = NowPoint; }else{ CGPoint NowPoint = [allPoints[i] CGPointValue]; if (NowPoint.y<PrePonit.y) { //文字置於點上方 label.frame = CGRectMake(NowPoint.x-MARGIN/2, NowPoint.y-20, MARGIN, 20); }else{ //文字置於點下方 label.frame = CGRectMake(NowPoint.x-MARGIN/2, NowPoint.y, MARGIN, 20); } label.text = [NSString stringWithFormat:@"%.0lf",(CGRectGetHeight(myFrame)-NowPoint.y-MARGIN)/2]; PrePonit = NowPoint; } } } /** * 畫柱狀圖 */ -(void)drawBarChartViewWithX_Value_Names:(NSMutableArray *)x_names TargetValues:(NSMutableArray *)targetValues{ //1.畫坐標軸 [self drawXYLine:x_names]; //2.每一個目標值點坐標 for (int i=0; i<targetValues.count; i++) { CGFloat doubleValue = 2*[targetValues[i] floatValue]; //目標值放大兩倍 CGFloat X = MARGIN + MARGIN*(i+1)+5; CGFloat Y = CGRectGetHeight(myFrame)-MARGIN-doubleValue; UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(X-MARGIN/2, Y, MARGIN-10, doubleValue)]; CAShapeLayer *shapeLayer = [CAShapeLayer layer]; shapeLayer.path = path.CGPath; shapeLayer.strokeColor = [UIColor clearColor].CGColor; shapeLayer.fillColor = XYQRandomColor.CGColor; shapeLayer.borderWidth = 2.0; [self.subviews[0].layer addSublayer:shapeLayer]; //3.添加文字 UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(X-MARGIN/2, Y-20, MARGIN-10, 20)]; label.text = [NSString stringWithFormat:@"%.0lf",(CGRectGetHeight(myFrame)-Y-MARGIN)/2]; label.textColor = [UIColor purpleColor]; label.textAlignment = NSTextAlignmentCenter; label.font = [UIFont systemFontOfSize:10]; [self.subviews[0] addSubview:label]; } } /** * 畫餅狀圖 */ -(void)drawPieChartViewWithX_Value_Names:(NSMutableArray *)x_names TargetValues:(NSMutableArray *)targetValues{ //設置圓點 CGPoint point = CGPointMake(self.frame.size.width/2,self.frame.size.height/2); CGFloat startAngle = 0; CGFloat endAngle ; CGFloat radius = 100; //計算總數 __block CGFloat allValue = 0; [targetValues enumerateObjectsUsingBlock:^(NSNumber *targetNumber, NSUInteger idx, BOOL * _Nonnull stop) { allValue += [targetNumber floatValue]; }]; //畫圖 for (int i =0; i<targetValues.count; i++) { CGFloat targetValue = [targetValues[i] floatValue]; endAngle = startAngle + targetValue/allValue*2*M_PI; //bezierPath形成閉合的扇形路徑 UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:point radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES]; [bezierPath addLineToPoint:point]; [bezierPath closePath]; //添加文字 CGFloat X = point.x + 120*cos(startAngle+(endAngle-startAngle)/2) - 10; CGFloat Y = point.y + 110*sin(startAngle+(endAngle-startAngle)/2) - 10; UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(X, Y, 30, 20)]; label.text = x_names[i]; label.font = [UIFont systemFontOfSize:11]; label.textColor = XYQColor(13, 195, 176); [self.subviews[0] addSubview:label]; //渲染 CAShapeLayer *shapeLayer=[CAShapeLayer layer]; shapeLayer.lineWidth = 1; shapeLayer.fillColor = XYQRandomColor.CGColor; shapeLayer.path = bezierPath.CGPath; [self.layer addSublayer:shapeLayer]; startAngle = endAngle; } } @end
iOS 繪圖