問題描述
對于如下圖片，類似于聊天軟件的氣泡背景圖片，在布局時要在圖片中添加文案：
1.原有圖片userGuide_dottedline.png
需要實現(xiàn)的功能時，圖片的高度隨著文案的行數(shù)增加而增加，但是對于去泡的邊緣虛線部分，不能出現(xiàn)拉伸的情況。
解決方案
1.首先想到的是自己去截取中間的部分進行重復平鋪，而在截取時需要注意的是，進行重復平鋪的中間部分在和上下部分進行拼接時可能存在不均勻的情況，所以截取需要平鋪的部分就要稍微注意些。
2.實現(xiàn)思路示意
實現(xiàn)代碼如下：
#pragma mark - 截取當前image對象rect區(qū)域內的圖像，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區(qū)域內的圖像
- (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.通過查文檔，發(fā)現(xiàn)蘋果有現(xiàn)有方法resizableImageWithCapInsets:可以實現(xiàn)該功能，一行代碼解決問題[??]
參考如下簡書，寫的非常詳細：
http://www.lxweimin.com/p/a577023677c1
http://www.lxweimin.com/p/c9cbbdaa9b02
