Quartz 2D 是Core Graphics中的2D 繪製呈現引擎。Quartz 中使用的圖形環境也由一個類CGContext表示。在Quartz 中可以把一個圖形環境作爲一個繪製目標。當使用Quartz 進行繪製時，所有設備特定的特性被包含在你使用的特定類型的圖形環境中，因此通過給相同的圖像操作函數提供不同的圖像環境你就能夠畫相同的圖像到不同的設備上，因此做到了圖像繪製的設備無關性。
項目需要繪製折線圖,需要實時更新折線圖,網上看了一些 demo 似乎並不適合,不瞭解以爲很複雜,實際上一般的需求並沒有想象的複雜.廢話不說,直接上代碼.
1 . 定義繪製視圖 .h 文件
#import <UIKit/UIKit.h>
@interface YLIneView : UIView
/**
@brief x 軸上的值
*/
@property(nonatomic,strong)NSArray* xValues;
/**
@brief y 軸上的值
*/
@property(nonatomic,strong)NSArray* yValues;
/**
@brief x 軸的刻度值
*/
@property(nonatomic,strong)NSArray* xKeDuValus;
/**
@brief y 軸的刻度值
*/
@property(nonatomic,strong)NSArray* yKeDuValus;
/**
@brief x 軸上文字顏色
*/
@property(nonatomic,strong)UIColor* xValueColor;
/**
@brief y 軸上文字顏色
*/
@property(nonatomic,strong)UIColor* yValueColor;
@end
#import "YLIneView.h"
#import "UIView+Extension.h"
#define kStartX 20.0
#define kBottomHeight 30.0 // x 軸距離底部高度
#define kTopMargin 80.0 // y 軸距離頂部的高度
#define kLabelHeight 44.0
@interface YLIneView()
@property(nonatomic,assign)CGPoint perviousPoint;
@end
@implementation YLIneView
-(instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
self.backgroundColor=[UIColor whiteColor];
// 頂部 label
UILabel* textLabel=[[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.bounds.size.width, 44.0)];
textLabel.text=@"充電中";
textLabel.textAlignment=NSTextAlignmentCenter;
[self addSubview:textLabel];
// 做端文字 label
UILabel* titleLabel=[[UILabel alloc] init];
titleLabel.text=@"(度數)";
titleLabel.font=[UIFont systemFontOfSize:12];
[titleLabel sizeToFit];
titleLabel.yl_y=textLabel.yl_bottom;
[self addSubview:titleLabel];
}
return self;
}
-(void)setXValues:(NSArray *)xValues
{
_xValues=xValues;
[self setNeedsDisplay];
}
-(void)setYValues:(NSArray *)yValues
{
_yValues=yValues;
[self setNeedsDisplay];
}
-(void)drawRect:(CGRect)rect
{
// 間距
CGFloat x_space=(rect.size.width - 10 - 5 - 20) / self.xKeDuValus.count;
CGFloat y_space=(rect.size.height - kBottomHeight - kTopMargin - 20) / self.yKeDuValus.count;
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 畫 x 軸
UIBezierPath* path = [UIBezierPath bezierPath];
CGPoint startA=CGPointMake(0, rect.size.height - kBottomHeight);
CGPoint endA=CGPointMake(rect.size.width - 5, rect.size.height - kBottomHeight);
[path moveToPoint:startA];
[path addLineToPoint:endA];
CGContextAddPath(ctx, path.CGPath);
[[UIColor lightGrayColor] set];
CGContextSetLineWidth(ctx, 1);
// 渲染
CGContextStrokePath(ctx);
// 繪製右側箭頭圖片
UIImage *xImg=[UIImage imageNamed:@"right"];
[xImg drawInRect:CGRectMake(rect.size.width-5 - 5, rect.size.height - 35, 8, 10)];
/** 畫 y 軸 */
UIBezierPath* yPath=[UIBezierPath bezierPath];
CGPoint yStart=CGPointMake(kStartX, rect.size.height - kBottomHeight);
CGPoint yEnd=CGPointMake(kStartX, kTopMargin);
[yPath moveToPoint:yStart];
[yPath addLineToPoint:yEnd];
CGContextAddPath(ctx, yPath.CGPath);
CGContextStrokePath(ctx);
UIImage *yImg=[UIImage imageNamed:@"up"];
[yImg drawInRect:CGRectMake(kStartX - 4, kTopMargin, 8, 10)];
/** 畫 y 軸座標橫線*/
for (int i = 0; i < self.yKeDuValus.count; i++) {
[[UIColor lightGrayColor] setStroke];
CGContextSetLineWidth(ctx, 1);
CGContextBeginPath(ctx);
CGContextMoveToPoint(ctx,kStartX - 4 , rect.size.height - kBottomHeight - y_space * (i+1));
CGContextAddLineToPoint(ctx,kStartX,rect.size.height - kBottomHeight - y_space * (i+1));
CGContextDrawPath(ctx, kCGPathStroke);
// 畫數字
NSString* yStr=[NSString stringWithFormat:@"%@",self.yKeDuValus[i]];
CGSize size=[yStr sizeWithAttributes:@{NSFontAttributeName : [UIFont systemFontOfSize:12]}];
[yStr drawInRect:CGRectMake(0, rect.size.height - 40 - y_space * (i + 1) , kBottomHeight, size.height) withAttributes:@{NSForegroundColorAttributeName : self.yValueColor}];
}
UIBezierPath* path1=[UIBezierPath bezierPath];
endA=CGPointMake([self.xValues[0] intValue], [self.yValues[0] intValue]);
startA=CGPointMake(kStartX, rect.size.height - kBottomHeight);
[path1 moveToPoint:startA];
/** 計算移到 y 軸的位置*/
for (int i = 0; i < self.xValues.count; i++) {
CGFloat X =kStartX + x_space * (i+1) ;//[xValue[i] intValue]; //, [yValue[1] intValue])
CGFloat Y =rect.size.height - kBottomHeight - y_space * [self.yValues[i] intValue] * 0.1;
[path1 addLineToPoint:CGPointMake(X, Y)];
}
CGContextAddPath(ctx, path1.CGPath);
CGContextSetLineWidth(ctx, 6);
CGContextSetRGBStrokeColor(ctx, 131.0/255.0, 190.0/255.0, 34.0/255.0, 1.0);
CGContextStrokePath(ctx);
// 填充色
UIBezierPath* path2=[UIBezierPath bezierPath];
endA=CGPointMake(x_space * 0, [self.yValues[0] intValue]);
[path2 moveToPoint:startA];
for (int i = 0; i < self.xValues.count; i++) {
CGFloat X =kStartX + x_space * (i+1) ;
CGFloat Y = rect.size.height - kBottomHeight - y_space * [self.yValues[i] intValue] * 0.1;
[path2 addLineToPoint:CGPointMake(X, Y)];
if (i == self.xValues.count - 1) {
[path2 addLineToPoint:CGPointMake(kStartX + x_space * (i + 1), rect.size.height - kBottomHeight)];
}
}
CGContextAddPath(ctx, path2.CGPath);
CGContextSetRGBFillColor(ctx,215.0/255.0, 236.0/255.0, 177.0/255.0, 1.0);
CGContextFillPath(ctx);
// 繪製矩形框
NSString* text=[NSString stringWithFormat:@"%.1f",[self.yValues.lastObject floatValue]]; CGSize textSize=[text sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:11.0]}];
CGRect texRrect=CGRectMake(kStartX + x_space * self.xValues.count, rect.size.height - kBottomHeight - y_space * [self.yValues.lastObject intValue] * 0.1 - 20, textSize.width, textSize.height);
CGRect juRect=CGRectMake(kStartX + x_space * self.xValues.count- 5, rect.size.height - kBottomHeight - y_space * [self.yValues.lastObject intValue] * 0.1 - 20, textSize.width+10, textSize.height);
UIBezierPath* path3=[UIBezierPath bezierPathWithRoundedRect:juRect cornerRadius:5];
CGContextAddPath(ctx, path3.CGPath);
CGContextSetRGBFillColor(ctx, 131.0/255.0, 190.0/255.0, 34.0/255.0, 1.0);
CGContextFillPath(ctx);
[text drawInRect:texRrect withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:11.0],NSForegroundColorAttributeName:[UIColor whiteColor]}];
// 繪製底部的分割度線
for (int i = 0; i < self.xKeDuValus.count; i++) {
[[UIColor lightGrayColor] setStroke];
CGContextSetLineWidth(ctx, 1);
CGContextBeginPath(ctx);
CGContextMoveToPoint(ctx,kStartX + x_space * i , rect.size.height - kBottomHeight);
CGContextAddLineToPoint(ctx,kStartX + x_space * i, rect.size.height - 25);
CGContextDrawPath(ctx, kCGPathStroke);
NSString *x_titleStr= [NSString stringWithFormat:@"%@",self.xKeDuValus[i] ];
CGSize titleSize=[x_titleStr sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:12.0]}];
[x_titleStr drawInRect:CGRectMake(kStartX + x_space * i - titleSize.width*0.5, rect.size.height - 25, titleSize.width, titleSize.height) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:12.0],NSForegroundColorAttributeName:[UIColor lightGrayColor]}];
if (i == self.xKeDuValus.count - 1) {
NSString *textStr=@"時間/小時";
CGSize titleSize=[textStr sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:11.0]}];
[textStr drawInRect:CGRectMake(10 + x_space * i - titleSize.width*0.5, rect.size.height - 12, titleSize.width, titleSize.height) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:11.0],NSForegroundColorAttributeName:self.xValueColor}];
}
}
}
@end
#import "ViewController.h"
#import "YLIneView.h"
@interface ViewController ()
@property(nonatomic,weak)YLIneView* LineView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
YLIneView* LineView=[[YLIneView alloc] initWithFrame:CGRectMake(0, 100,[UIScreen mainScreen].bounds.size.width, 300)];
LineView.xValues=@[@20,@50,@80,];
LineView.yValues=@[@10,@26,@35];
LineView.xKeDuValus=@[@0,@2,@4,@6,@8,@10,@12,@14,@16];
LineView.yKeDuValus=@[@10,@20,@35,@40,@50,@60,@70,@80,@90,@100];
LineView.yValueColor=[UIColor redColor];
LineView.xValueColor=[UIColor lightGrayColor];
[self.view addSubview:LineView];
self.LineView=LineView;
[self performSelector:@selector(changeValue) withObject:nil afterDelay:5.0];
}
-(void)changeValue
{
self.LineView.xValues=@[@20,@50,@80,@110,@210,@250,@270];
self.LineView.yValues=@[@10,@26,@35,@50,@90,@30,@70];
}
@end
cocochina demo 地址:
