IOS開發基礎之繪制餅圖、柱狀圖、自定義進度條

源碼在我的主頁里
1.繪制餅圖
效果

源碼

// LJView.m // 34-繪圖餅圖 // Created by 魯軍 on 2021/2/23. #import "LJView.h"@implementation LJView - (void)drawRect:(CGRect)rect {NSArray *array = @[@0.3,@0.1,@0.2,@0.4];CGFloat end=0,start = 0;for(int i=0;i<array.count;++i){end =2*M_PI* [array[i] floatValue] + start;UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:100 startAngle:start endAngle:end clockwise:1];[path addLineToPoint:CGPointMake(150, 150)];//隨機的顏色[[UIColor colorWithRed:((float)arc4random_uniform(256)/255.0) green:((float)arc4random_uniform(256)/255.0) blue:((float)arc4random_uniform(256)/255.0) alpha:1.0] set];[path fill];//下一次的起點等于上一次的終點start = end;} }- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{// NSLog(@"123");// [self setNeedsDisplay];//刷新指定的區域[self setNeedsDisplayInRect:CGRectMake(0, 0, 150, 150)]; } @end

2.繪制柱狀圖

// // LJView.m // 35-柱狀圖繪圖 // // Created by 魯軍 on 2021/2/23. //#import "LJView.h"@implementation LJView- (void)drawRect:(CGRect)rect {NSArray *array = @[@1,@0.5,@0.7,@0.3,@0.1,@0.6];for(int i=0;i<array.count;++i){CGFloat w =20 ,h =[array[i] floatValue] * rect.size.height ,x =i*2*w,y=rect.size.height-h;UIBezierPath *path =[UIBezierPath bezierPathWithRect:CGRectMake(x, y, w, h)];//隨機的顏色[[UIColor colorWithRed:((float)arc4random_uniform(256)/255.0) green:((float)arc4random_uniform(256)/255.0) blue:((float)arc4random_uniform(256)/255.0) alpha:1.0] set];[path fill]; }} - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{[self setNeedsDisplay];}@end

3.繪制自定義進度條

#import <UIKit/UIKit.h> @interface LJView : UIView @property(nonatomic,assign)CGFloat progressValue; @end // // LJView.m // 35-自定義進度條 // // Created by 魯軍 on 2021/2/23. //#import "LJView.h"@interface LJView ()@property (weak, nonatomic) IBOutlet UILabel *progressLbl;@end@implementation LJView- (void)setProgressValue:(CGFloat)progressValue{_progressValue = progressValue;self.progressLbl.text = [NSString stringWithFormat:@"%.2f%%",progressValue *100];[self setNeedsDisplay];}- (void)drawRect:(CGRect)rect {UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:100 startAngle:0-M_PI_2 endAngle:2*M_PI *self.progressValue - M_PI_2 clockwise:1];[path addLineToPoint:CGPointMake(150, 150)];[[UIColor redColor] setFill];[path fill];}@end // // ViewController.m // 35-自定義進度條 // // Created by 魯軍 on 2021/2/23. //#import "ViewController.h" #import "LJView.h" @interface ViewController () @property (weak, nonatomic) IBOutlet LJView *progressView; //@end@implementation ViewController - (IBAction)sender:(UISlider *)sender {self.progressView.progressValue = sender.value;} - (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view. } @end

// LJView.m // 33-繪圖的樣式 // Created by 魯軍 on 2021/2/23. #import "LJView.h" @implementation LJView - (void)drawRect:(CGRect)rect { // [self testCStyle]; // [self testOCStyleOCcode];[self testJiOu];} //使用奇偶填充規則 -(void)testJiOu{UIBezierPath *path =[UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 200, 100)];[path addArcWithCenter:CGPointMake(150, 150) radius:100 startAngle:0 endAngle:2 * M_PI clockwise:1];path.usesEvenOddFillRule =YES;[path fill];}-(void)testSanjiaoxingOC{UIBezierPath *path = [UIBezierPath bezierPath];[path moveToPoint:CGPointMake(50, 50)];[path addLineToPoint:CGPointMake(100, 100)];[path addLineToPoint:CGPointMake(150, 50)];[path closePath];[path setLineWidth:30];[[UIColor redColor]setFill];[[UIColor blueColor] setStroke];//同時設置描邊的和填充的顏色[[UIColor greenColor] set];[path stroke];[path fill];} -(void)testSanjiaoxingC{CGContextRef ctx =UIGraphicsGetCurrentContext();CGContextMoveToPoint(ctx, 50, 50);CGContextAddLineToPoint(ctx, 100, 100);CGContextAddLineToPoint(ctx, 150, 50); // CGContextAddLineToPoint(ctx, 50, 50);CGContextClosePath(ctx); //關閉路徑CGContextSetLineWidth(ctx, 10); // CGContextStrokePath(ctx); //描邊//填充 // CGContextFillPath(ctx);//CGContextDrawPath(ctx, kCGPathStroke);[[UIColor redColor] setFill];[[UIColor blueColor] setStroke];CGContextDrawPath(ctx, kCGPathFillStroke); }-(void)testOCStyleOCcode{UIBezierPath *path =[UIBezierPath bezierPath];[path moveToPoint:CGPointMake(50, 50)];[path addLineToPoint:CGPointMake(100, 100)];[path addLineToPoint:CGPointMake(150, 50)];//設置線寬[path setLineWidth:30];//設置連接處樣式[path setLineJoinStyle:kCGLineJoinRound];//設置頭尾樣式[path setLineCapStyle:kCGLineCapRound];//OC 設置藍色[[UIColor blueColor] setStroke];[path stroke]; }-(void)testCStyle{CGContextRef ctx = UIGraphicsGetCurrentContext();CGContextMoveToPoint(ctx, 50, 50);CGContextAddLineToPoint(ctx, 100, 100);CGContextAddLineToPoint(ctx, 150, 50);//設置線寬CGContextSetLineWidth(ctx, 30);//連接處的樣式//kCGLineJoinMiter 默認//kCGLineJoinBevel 切角//kCGLineJoinRound。圓角CGContextSetLineJoin(ctx, kCGLineJoinRound);//頭尾樣式//kCGLineCapButt。默認//kCGLineCapRound。圓角//kCGLineCapSquare。方的。變短一點。CGContextSetLineCap(ctx, kCGLineCapSquare);//C 設置紅色CGContextSetRGBStrokeColor(ctx,1, 0, 0, 1);CGContextStrokePath(ctx); } @end

總結

以上是生活随笔為你收集整理的IOS开发基础之绘制饼图、柱状图、自定义进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。