iOS开发 绘制长图（drawLongPic）

一、需求

最近接到产品一个需求：将页面的显示内容绘制成一张照片，并且可以保存到相册；

分析：需要绘制的内容分为三部分：头部视图、内容部分、尾部视图，个人想法：本来想要采用tableView、collectionView直接截屏的方法实现，但是最终生成长图片和页面显示的内容是不一致，所以需要一个个重新绘制;
实现过程：首先将头部需要实现的部分拼接成一张图片，接着内容、尾部视图拼接；

效果图

绘制长图.gif

二、核心代码

//1、头部视图专题图+为您精选3辆好车
- (UIImage *)splicedheadImgView
{
    //1-1、头部视图
    UIImage *image = [UIImage imageNamed:@"1.jpg"];
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, image.size.height + 50)];
    UIImageView *headImageV = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, image.size.height)];
    headImageV.image = image;

    [view addSubview:headImageV];
    //1-2、精选车辆文字
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0,image.size.height,[UIScreen mainScreen].bounds.size.width,50)];
    label.text = [NSString stringWithFormat:@"-----为您精选3辆好车-----"];
    label.font = [UIFont fontWithName:@"Arial" size:16];
    label.textAlignment = NSTextAlignmentCenter;
    label.backgroundColor = [UIColor blackColor];
    label.textColor = [UIColor whiteColor];
    [view addSubview:label];
    //1-3、合成图片[UIScreen mainScreen].scale
    UIGraphicsBeginImageContextWithOptions(view.frame.size, YES, 1.0);
    CGContextRef context = UIGraphicsGetCurrentContext();
    [view.layer renderInContext:context];
    UIImage *endImage =     UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    self.nImageView = endImage;
    _spliceImgW = endImage.size.width;
    _spliceImgH = endImage.size.height;
    headImageV.layer.contents = nil;
    return endImage;    
}


//2、车辆拼接成的图片
- (void)splicedCarImageView
{
    [self splicedheadImgView];
    for (int i = 1; i < 4; i ++) {
    
        CGFloat height = (300+100) * 0;
        UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i+1]];
        UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, height,[UIScreen mainScreen].bounds.size.width, 400)];
        //1-1、图片视图
        UIImageView *headImageV = [[UIImageView alloc]initWithFrame:CGRectMake(0, height, [UIScreen mainScreen].bounds.size.width, 300)];
        headImageV.image = image;
        [view addSubview:headImageV];
        //1-2、车型文字
        UILabel *labelModel = [[UILabel alloc] initWithFrame:CGRectMake(20,300+height,[UIScreen mainScreen].bounds.size.width-20,30)];
        labelModel.text = @"车型";
        labelModel.font = [UIFont systemFontOfSize:16];
        labelModel.textAlignment = NSTextAlignmentLeft;
        labelModel.textColor = [UIColor whiteColor];
        [view addSubview:labelModel];
    
        //1-3、车辆信息
        UILabel *carL = [[UILabel alloc] initWithFrame:CGRectMake(20,CGRectGetMaxY(labelModel.frame)+2,[UIScreen mainScreen].bounds.size.width-20,25)];
        carL.text = @"测试| 测试 | 测试";
        carL.font = [UIFont systemFontOfSize:16];
        carL.textColor = [UIColor whiteColor];
        carL.textAlignment = NSTextAlignmentLeft;
        [view addSubview:carL];
    
        //1-4、车辆价格
        UILabel *priceL = [[UILabel alloc] initWithFrame:CGRectMake(20,CGRectGetMaxY(carL.frame)+2,[UIScreen mainScreen].bounds.size.width-20,25)];
        priceL.text = @"价格";
        priceL.font = [UIFont systemFontOfSize:16];
        priceL.textAlignment = NSTextAlignmentLeft;
        priceL.textColor = [UIColor whiteColor];
        [view addSubview:priceL];
    
        //1-5、合成图片
        UIGraphicsBeginImageContextWithOptions(view.frame.size, YES, 1.0);
        CGContextRef context = UIGraphicsGetCurrentContext();
        [view.layer renderInContext:context];
        UIImage *endImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        view.layer.contents = nil;
        //调用图片拼接方法
        [self splicedNewImage:self.nImageView carImage:endImage];
    }

    [self splicedEcodeImageView];

}

//3、底部二维码图片
- (void)splicedEcodeImageView
{
    UIView *ecodeView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 300)];
    ecodeView.backgroundColor = [UIColor whiteColor];
    //1、文字
    UILabel *ecodeL = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 30)];
    ecodeL.text = @"长按二维码,查看详情";
    ecodeL.textColor = [UIColor grayColor];
    ecodeL.textAlignment = NSTextAlignmentCenter;
    [ecodeView addSubview:ecodeL];

    //2、二维码
    UIImageView *ecodeImg = [[UIImageView alloc] initWithFrame:CGRectMake(([UIScreen mainScreen].bounds.size.width - 100) / 2, CGRectGetMaxY(ecodeL.frame) + 20, 100, 100)];
    ecodeImg.image = [UIImage imageNamed:@""];
    ecodeImg.backgroundColor = [UIColor redColor];
    [ecodeView addSubview:ecodeImg];

    //3、个人信息
    UIImageView *iconImg = [[UIImageView alloc] initWithFrame:CGRectMake(([UIScreen mainScreen].bounds.size.width - 60) / 2, CGRectGetMaxY(ecodeImg.frame) + 20, [UIScreen mainScreen].bounds.size.width, 60)];
    iconImg.image = [UIImage imageNamed:@""];
    [ecodeView addSubview:iconImg];

    UILabel *iconLableN =  [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(iconImg.frame), [UIScreen mainScreen].bounds.size.width, 30)];
    iconLableN.text = @"名字";
    iconLableN.textColor = [UIColor grayColor];
    iconLableN.textAlignment = NSTextAlignmentCenter;
    [ecodeView addSubview:iconLableN];

    UILabel *iconLableP =  [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(iconLableN.frame), [UIScreen mainScreen].bounds.size.width, 30)];
    iconLableP.text = @"电话";
    iconLableP.textColor = [UIColor grayColor];
    iconLableP.textAlignment = NSTextAlignmentCenter;
    [ecodeView addSubview:iconLableP];

    //4、合成图片
    UIGraphicsBeginImageContextWithOptions(ecodeView.frame.size, YES, 1.0);
    CGContextRef context = UIGraphicsGetCurrentContext();
    [ecodeView.layer renderInContext:context];
    UIImage *endImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    ecodeView.layer.contents = nil;

    [self splicedNewImage:self.nImageView carImage:endImage];   
}

三、出现的问题

3-1:出现绘制的图片文字模糊：
解决方案1）UIGraphicsBeginImageContextWithOptions(carInfoV.frame.size, true, [[UIScreen mainScreen] scale]);
2）UIGraphicsBeginImageContext(CGSizeMake(headImgW, headImgH+carImgH));改为UIGraphicsBeginImageContextWithOptions(CGSizeMake(headImgW, headImgH+carImgH), NO, [UIScreen mainScreen].scale);

四、demo

demo下载地址：https://github.com/jinweicheng/CWDrawLongPicture.git