iOS的图片拉伸与拼接

问题描述

对于如下图片，类似于聊天软件的气泡背景图片，在布局时要在图片中添加文案：

1.原有图片userGuide_dottedline.png

需要实现的功能时，图片的高度随着文案的行数增加而增加，但是对于去泡的边缘虚线部分，不能出现拉伸的情况。

解决方案

1.首先想到的是自己去截取中间的部分进行重复平铺，而在截取时需要注意的是，进行重复平铺的中间部分在和上下部分进行拼接时可能存在不均匀的情况，所以截取需要平铺的部分就要稍微注意些。

2.实现思路示意

实现代码如下：

#pragma mark - 截取当前image对象rect区域内的图像，height为文本高度
- (UIImage *)extendImageWithImage:(UIImage *)image withHeight:(CGFloat)height {
    CGFloat screenScale = [UIScreen mainScreen].scale;
    
    // 20 / 212 是userGuide_dottedline 3倍图的高度(212px)以及想要重复的部分高度(20px)的比例
    CGFloat upperPartHeight = (image.size.height * 97 / 212) * screenScale;
    CGRect upperPartRect = CGRectMake(0, 0, image.size.width * screenScale, upperPartHeight);
    UIImage *upperPartImage = [self subImageWithImage:image inRect:upperPartRect];
    
    CGFloat middlePartHeight = (image.size.height * 20 / 212) * screenScale;
    CGRect middlePartaRect = CGRectMake(0, upperPartHeight, image.size.width * screenScale, middlePartHeight);
    UIImage *middlePartImage = [self subImageWithImage:image inRect:middlePartaRect];
    
    CGFloat bottomPartHeight = (image.size.height * 95 / 212) * screenScale;
    CGRect bottomPartaRect = CGRectMake(0, upperPartHeight + middlePartHeight, image.size.width * screenScale, bottomPartHeight);
    UIImage *bottomPartImage = [self subImageWithImage:image inRect:bottomPartaRect];
    
    NSInteger repeatTimes = (int)ceilf((height + middlePartHeight - image.size.height)* screenScale / middlePartHeight);
    UIImage *mergedImage = [self mergeImage:upperPartImage withImage:middlePartImage];
    
    for (NSInteger index = 0; index < repeatTimes; index ++) {
        mergedImage = [self mergeImage:mergedImage withImage:middlePartImage];
    }
    
    mergedImage = [self mergeImage:mergedImage withImage:bottomPartImage];
    mergedImage = [self scaledImageWithImage:mergedImage withScale:(1/screenScale)];
    
    return mergedImage;
}

// 截取指定image对象rect区域内的图像
- (UIImage *)subImageWithImage:(UIImage *)image inRect:(CGRect)subAreaRect {
    CGImageRef subAreaImageRef = CGImageCreateWithImageInRect(image.CGImage, subAreaRect);
    
    UIImage *subAreaImage = [UIImage imageWithCGImage:subAreaImageRef];
    
    CGImageRelease(subAreaImageRef);
    
    return subAreaImage;
}

// 将两个图片合并成一张图片
- (UIImage*)mergeImage:(UIImage*)firstImage withImage:(UIImage*)secondImage
{
    CGImageRef firstImageRef = firstImage.CGImage;
    CGFloat firstWidth = CGImageGetWidth(firstImageRef);
    CGFloat firstHeight = CGImageGetHeight(firstImageRef);
    
    CGImageRef secondImageRef = secondImage.CGImage;
    CGFloat secondWidth = CGImageGetWidth(secondImageRef);
    CGFloat secondHeight = CGImageGetHeight(secondImageRef);
    
    CGSize mergedSize = CGSizeMake(MAX(firstWidth, secondWidth), firstHeight + secondHeight);
    UIGraphicsBeginImageContext(mergedSize);
    [firstImage drawInRect:CGRectMake(0, 0, firstWidth, firstHeight)];
    [secondImage drawInRect:CGRectMake(0, firstHeight, secondWidth, secondHeight)];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

// 等比缩放图片
- (UIImage *)scaledImageWithImage:(UIImage *)image withScale:(CGFloat)scale {
    CGSize scaledSize = CGSizeMake(image.size.width*scale, image.size.height*scale);
    UIGraphicsBeginImageContext(scaledSize);
    [image drawInRect:CGRectMake(0, 0, scaledSize.width, scaledSize.height)];
    UIImage *scaledImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return scaledImage;
}

2.通过查文档，发现苹果有现有方法resizableImageWithCapInsets:可以实现该功能，一行代码解决问题[]
参考如下，写的非常详细：
http://www.jianshu.com/p/a577023677c1
http://www.jianshu.com/p/c9cbbdaa9b02