屏幕快照 2017-04-06 17.17.02.png
從開始使用初始化說起
首先初始化個(gè)LineGraph視圖，賦值XY軸數(shù)組，XY軸的最大值，XY軸的顏色，每條折線所代表的意思放置位置（代碼中為upleft）
LineGraph* lineGraphView = [[LineGraph alloc]initWithFrame:CGRectMake(20, 100, 300, 200)];
lineGraphView.XArray = @[@"0",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10"];
lineGraphView.YArray = @[@"0",@"0.3",@"0.4",@"0.6",@"0.8",@"1.0"];
lineGraphView.MaxX = 10.0f;
lineGraphView.MaxY = 1.0f;
lineGraphView.XYlineColor = [UIColor redColor];
lineGraphView.namePosition = LineNamePositionUpleft;
lineGraphView.layer.borderWidth = 1;
[self.view addSubview:lineGraphView];
這一段相較于之前沒做多大改變，添加了折線信息的位置設(shè)置
typedef NS_ENUM(NSUInteger, LineNamePosition) {
LineNamePositionUpleft, //折線對(duì)應(yīng)的名稱在左上
LineNamePositionUpRight, //折線對(duì)應(yīng)的名稱在右上
LineNamePositionCenter, //折線對(duì)應(yīng)的名稱在中上
};
之后對(duì)折線進(jìn)行封裝，每一條直線都是一個(gè)BrokenLine的實(shí)例
BrokenLine* bkLin = [BrokenLine new];
bkLin.lineColor = [UIColor greenColor];
bkLin.lineName = @"測(cè)試1";
bkLin.brokenArray = @[[NSValue valueWithCGPoint:CGPointMake(0, 0.7)],[NSValue valueWithCGPoint:CGPointMake(1.3, 0.3)],[NSValue valueWithCGPoint:CGPointMake(1.7, 0.5)],[NSValue valueWithCGPoint:CGPointMake(1.9, 0.8)],[NSValue valueWithCGPoint:CGPointMake(2.4, 0.3)],[NSValue valueWithCGPoint:CGPointMake(3.3, 0.44)],[NSValue valueWithCGPoint:CGPointMake(3.9, 0.3)]];
[lineGraphView addBrokenLine:bkLin];
實(shí)例中對(duì)折線的顏色，名字及折線中點(diǎn)的數(shù)值進(jìn)行賦值，并添加在lineGraphView上，add方法為以下：
-(void)addBrokenLine:(BrokenLine*)bkLin
{
[self.totalBrokenArray addObject:bkLin];
bkLin.brokenArray = [bkLin drawBrokenLine:self.frame andMaxX:_MaxX andMaxY:_MaxY];
}
BrokenLine類
@interface BrokenLine : NSObject
@property (nonatomic, assign) UIColor* lineColor; //折線顏色
@property (nonatomic, strong) NSArray* brokenArray; //傳入的point數(shù)組
@property (nonatomic, strong) NSString* lineName; //該折線對(duì)應(yīng)的名稱
-(NSMutableArray*)drawBrokenLine:(CGRect)lineFrame andMaxX:(CGFloat)maxX andMaxY:(CGFloat)maxY;
@end
@implementation BrokenLine
-(NSMutableArray*)drawBrokenLine:(CGRect)lineFrame andMaxX:(CGFloat)maxX andMaxY:(CGFloat)maxY
{
NSMutableArray* positionArr = [NSMutableArray new];
for (int i = 0; i<self.brokenArray.count; i++) {
NSValue* valueStart = self.brokenArray[i];
CGPoint pointStart = [valueStart CGPointValue];
CGPoint p = CGPointMake((pointStart.x/maxX)*(lineFrame.size.width-2*defaultX), (pointStart.y/maxY)*(lineFrame.size.height-2*defalutY));
if (i == 0) {
[positionArr addObject:[NSValue valueWithCGPoint:CGPointMake(p.x+defaultX,lineFrame.size.height-p.y-defalutY)]];
}
else
{
//把點(diǎn)加入到路徑里面
[positionArr addObject:[NSValue valueWithCGPoint:CGPointMake(p.x+defaultX,lineFrame.size.height-p.y-defalutY)]];
}
}
return positionArr;
}
@end
drawBrokenLine這個(gè)方法中計(jì)算出傳入的點(diǎn)相對(duì)于XY軸坐標(biāo)系的真正位置，返回給自身的brokenArray，之后可以在LineGraph的totalBrokenArray數(shù)組中獲取
畫折線的時(shí)機(jī)放在了畫完XY軸虛線之后
在
-(void)drawVirtualLine:(UILabel*)lab andStartPt:(CGPoint)pStart andEndPt:(CGPoint)pEnd
下添加
for (int i = 0; i < self.totalBrokenArray.count; i++) {
BrokenLine* bkLin = self.totalBrokenArray[i];
[self drawBrokenLine:self.frame andMaxX:_MaxX andMaxY:_MaxY andBkLin:bkLin andptArr:[bkLin drawBrokenLine:self.frame andMaxX:_MaxX andMaxY:_MaxY]];
}
-(void)drawBrokenLine:(CGRect)lineFrame andMaxX:(CGFloat)maxX andMaxY:(CGFloat)maxY
andBkLin:(BrokenLine*)bkLin andptArr:(NSMutableArray*)ptArr
{
CGContextRef context = UIGraphicsGetCurrentContext();
//創(chuàng)建貝塞爾曲線對(duì)象
UIBezierPath *currenPath = [UIBezierPath bezierPath];
currenPath.lineCapStyle = kCGLineCapRound;//拐彎處為弧線
currenPath.lineJoinStyle = kCGLineCapRound;
currenPath.lineWidth = 0.3f;
UIColor *color = bkLin.lineColor;
[color set];
CGFloat lengths[] = {10,0};
CGContextSetLineDash(context, 0, lengths,2);
for (int i = 0; i<bkLin.brokenArray.count; i++) {
NSValue* valueStart = bkLin.brokenArray[i];
CGPoint pointStart = [valueStart CGPointValue];
if (i == 0) {
[currenPath moveToPoint:CGPointMake(pointStart.x,pointStart.y)];
}
else
{
//把點(diǎn)加入到路徑里面
[currenPath addLineToPoint:CGPointMake(pointStart.x,pointStart.y)];
}
}
//畫線
[currenPath stroke];
}
對(duì)了，忘記說那個(gè)每條折線所代表的意思放置位置。
用xib畫成這樣
屏幕快照 2017-04-06 17.11.41.png
LineNameView類的實(shí)現(xiàn)如下....并沒多少實(shí)現(xiàn)其實(shí)
@interface LineNameView : UIView
@property (nonatomic, strong) IBOutlet UIView* colorView;
@property (nonatomic, strong) IBOutlet UILabel* nameLab;
+ (instancetype)viewFromNIB;
@end
@implementation LineNameView
// Convenience Method
+ (instancetype)viewFromNIB {
NSArray *views = [[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class]) owner:nil options:nil];
return views[0];
}
- (void)awakeFromNib {
[super awakeFromNib];
}
@end
完成上述之后可以對(duì)其進(jìn)行初始化，根據(jù)NSEUM計(jì)算出放置的位置
-(void)drawLineName
{
for (int i = 0; i < self.totalBrokenArray.count; i++) {
BrokenLine* bkLin = self.totalBrokenArray[i];
LineNameView* nameView = [LineNameView viewFromNIB];
nameView.colorView.backgroundColor = bkLin.lineColor;
nameView.nameLab.text = bkLin.lineName;
[self addSubview:nameView];
switch (self.namePosition) {
case LineNamePositionUpleft:
nameView.frame = CGRectMake(defaultX+NameWidth*i, 0, NameWidth, defalutY);
break;
case LineNamePositionUpRight:
nameView.frame = CGRectMake(defaultX+NameWidth*i, 0, NameWidth, defalutY);
break;
case LineNamePositionCenter:
nameView.frame = CGRectMake(defaultX+NameWidth*i, 0, NameWidth, defalutY);
break;
default:
break;
}
}
}
