使用CGContextRef绘制彩票走势图

前一篇博客有提到最近在搞彩票走势图，期间遇到了很多问题，也踩了不少坑，抽出时间来整理下思路，总结下自己在画图过程中遇到的问题，为以后做到未雨绸缪，话不多说，我们直接进入正题，
首先，我们严格遵循MVC架构，直接在view里面绘图，创建view视图，重写view的初始化方法；

.h中申明方法
- (instancetype)initWithFrame:(CGRect)frame dataArray:(NSArray *)dataArray;//此处用来接收数据
.m中实现方法
- (instancetype)initWithFrame:(CGRect)frame dataArray:(NSArray *)dataArray {
    if (self = [super initWithFrame:frame]) {
        self.dataArray = dataArray;//此处接收到的listArray为所有传过来的数据
    }
    return self;
}
#pragma mark --- 由于此处可能会有scrollView上下、左右联动效果，因而，我们绘制4个scrollView分别代表，奖期、球的个数、开奖结果以及底部的（出现次数、平均遗漏、最大遗漏、最大连出）我们分别用懒加载来实现、

#pragma mark -- 最大出现次数 appearNums
- (BottomNumberView *)bottomView {
    if (!_bottomView) {
        //获取数据中是多少位数
        _bottomView = [[BottomNumberView alloc] initWithNumber:[[self.dataArray lastObject] objectForKey:@"appearNums"]];
        [self addSubview:_bottomView];
    }
    return _bottomView;
}

#pragma mark -- 懒加载最大遗漏  maxDrop
- (BottomNumberView2 *)maxYiLouView
{
    if (!_maxYiLouView) {
        _maxYiLouView = [[BottomNumberView2 alloc]initWithNumber:[[self.dataArray lastObject] objectForKey:@"maxDrop"]];
        [self addSubview:_maxYiLouView];
    }
    return _maxYiLouView;
}

#pragma mark -- 最大连出  maxAppear
- (BottomNumberView3 *)maxLianChuView
{
    if (!_maxLianChuView) {
        _maxLianChuView = [[BottomNumberView3 alloc]initWithNumber:[[self.dataArray lastObject] objectForKey:@"maxAppear"]];
        [self addSubview:_maxLianChuView];
    }
    return _maxLianChuView;
}
#pragma mark --    懒加载 平均遗漏  avgDrop
- (BottomNumberView1 *)yiLouView
{
    if (!_yiLouView) {
        _yiLouView = [[BottomNumberView1 alloc] initWithNumber:[[self.dataArray lastObject] objectForKey:@"avgDrop"]];
        [self addSubview:_yiLouView];
    }
    return _yiLouView;
}
#pragma mark -- 设置scrollView联动 用bounces属性来实现
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if ((scrollView.contentOffset.x <= 0)) {
        scrollView.contentOffset = CGPointMake(0, scrollView.contentOffset.y);
    }else if (scrollView.contentOffset.x + scrollView.frame.size.width >= scrollView.contentSize.width) {
        scrollView.contentOffset = CGPointMake(scrollView.contentSize.width - scrollView.frame.size.width, scrollView.contentOffset.y);
    }
    self.periodsView.transform = CGAffineTransformMakeTranslation(scrollView.contentOffset.x, 0);
    self.topView.transform = CGAffineTransformMakeTranslation(- scrollView.contentOffset.x, 0);
    self.bottomView.transform = CGAffineTransformMakeTranslation(- scrollView.contentOffset.x, 0);
    self.yiLouView.transform = CGAffineTransformMakeTranslation(- scrollView.contentOffset.x, 0);
    self.maxYiLouView.transform = CGAffineTransformMakeTranslation(- scrollView.contentOffset.x, 0);
    self.maxLianChuView.transform = CGAffineTransformMakeTranslation(- scrollView.contentOffset.x, 0);
}

/*
*奖期属性直接是从数组中取出奖期数据，加载，这里不在描述，主要描述绘制开奖结果的问题
*/
#pragma mark -- 获取到上层开奖结果数据
- (instancetype)initWithNumberArray:(NSArray *)numberArray {
    if (self = [super init]) {
        self.numberArray = numberArray;
        self.backgroundColor = [UIColor whiteColor];
        self.pointArray = [NSMutableArray array];
    }
    return self;
}
#pragma mark -- 使用上层数组数据绘制图形
- (void)drawRect:(CGRect)rect 
{
     //获取上下文方法
    CGContextRef context = UIGraphicsGetCurrentContext();
    //数字的个数
    NSInteger listCount = [[self.numberArray[index] objectForKey:@"number"] count];

    for (NSDictionary *dic in self.numberArray) {
        //设置背景颜色
        index % 2 == 0 ? CGContextSetRGBFillColor(context, 240 / 255.0, 240 / 255.0, 240 / 255.0, 1) : CGContextSetRGBFillColor(context, 255 / 255.0, 255 / 255.0, 255 / 255.0, 1);
        CGContextFillRect(context, CGRectMake(0,index * kItemWidth,listCount * (kItemWidth + 1),kItemWidth));
        NSInteger numbIndex = 0;
        NSInteger selectIndex = 0;
        //绘制文字以及图片
        NSArray *numberArr = [dic objectForKey:@"number"];
        NSArray *awardArray = [dic objectForKey:@"award"];
        NSArray *blueawardArray = [dic objectForKey:@"blueaward"];//如果是大乐透会有后区蓝球加载
        self.lotteryId = [[dic objectForKey:@"lotteryId"] intValue];//根据每个彩种id来判断
        NSInteger ballFlag = [[dic objectForKey:@"ballFlag"] integerValue];//获取到每个点击的数值，主要对双色球和大乐透来判断1为红球，2为蓝球，如果是七乐彩（蓝球为特殊号码，并且和红球绘制在一起）
        if (self.lotteryId == 10033) {//七乐彩加载蓝球
                    for ( int i = 0 ; i < blueawardArray.count; i ++) {
                        NSString *blueBall = [blueawardArray objectAtIndex:i];
                        if ([blueBall integerValue] == [numStr integerValue]) {
                            [RGB(0, 160, 255, 1) set];
                            CGContextFillEllipseInRect(context, CGRectMake(numbIndex * kItemWidth + 1 * numbIndex + 2.5,index * kItemWidth + 2.5, kItemWidth - 5, kItemWidth - 5));
                            NSMutableParagraphStyle *para = [[NSMutableParagraphStyle alloc] init];
                            para.alignment = NSTextAlignmentCenter;
                            [numStr drawInRect:CGRectMake(numbIndex * kItemWidth + 1 * numbIndex,7 + index * kItemWidth,kItemWidth,kItemWidth)
                                withAttributes:@{NSFontAttributeName : [UIFont systemFontOfSize:14], NSForegroundColorAttributeName: [UIColor whiteColor], NSParagraphStyleAttributeName : para}];
                        }
                    }
                }
        if (!([numStr integerValue] == [awardArray[selectIndex] integerValue])) {
                    NSMutableParagraphStyle *para = [[NSMutableParagraphStyle alloc] init];
                    para.alignment = NSTextAlignmentCenter;
                    
                }else {
                    [RGB(230, 47, 23, 1) set];
                    CGContextFillEllipseInRect(context, CGRectMake(numbIndex * kItemWidth + 1 * numbIndex + 2.5,index * kItemWidth + 2.5, kItemWidth - 5, kItemWidth - 5));
                    NSMutableParagraphStyle *para = [[NSMutableParagraphStyle alloc] init];
                    para.alignment = NSTextAlignmentCenter;
                    [numStr drawInRect:CGRectMake(numbIndex * kItemWidth + 1 * numbIndex,7 + index * kItemWidth,kItemWidth,kItemWidth)
                        withAttributes:@{NSFontAttributeName : [UIFont systemFontOfSize:14], NSForegroundColorAttributeName: [UIColor whiteColor], NSParagraphStyleAttributeName : para}];
                    
                    if (self.lotteryId == 10026) { //福彩3d
                        if (selectIndex < 4) { //根据开奖的结果得到福彩3D的前区号码
                            selectIndex ++;
                        }
                    }
                    if (self.lotteryId == 10032) { // 双色球
                        if (selectIndex < 5) {//双色球红球号码（蓝球绘制时候需要绘制连线、由于我是先绘制的蓝球，后绘制的线条，导致线条遮挡了蓝球上面的数字，暂时还未解决，）
                            selectIndex ++;
                        }
                    }
      }
          CGContextSetRGBStrokeColor(context, 210 / 255.0, 210 / 255.0, 210 / 255.0, 1);//线条颜色
          for (NSInteger i = 0; i < listCount; i++) {
             //画期数竖着的线线条
             CGContextMoveToPoint(context,kItemWidth + i * kItemWidth + 1 * i, 0);
             CGContextAddLineToPoint(context,kItemWidth + i * kItemWidth + 1 * i, self.numberArray.count * kItemWidth);
             }
     }
           CGContextStrokePath(context);

}
/*
* 以上就是绘制线条和相关红球的代码，有时间我会缕缕，拿出这段代码改成demo放在github，期待大家star，虽然有点乱，但是主要代码是OK的，一起加油！！！至于最下面的（最大连出、最大遗漏、平均遗漏、平均遗漏对于label来说so easy了，可能效率上和drawRect相比还是有差距的）
*/