1. 存在的问题
在做为批注图片添加贴图和文字的需求时，发生批注之后生成的图片，当原图尺寸比较大时，贴图，文字，画笔就会变得模糊，例如当批注图片的原图尺寸为 580 x 5326 时，生成的图片，批注效果如下图：
image.png
2. 问题的原因
我们生成批注后的图片的基本方式是将画笔和块元素（贴图和文字）各自所在的图层先生成两张图片，再将这两张图片和原图合成一张图片。以批注图片1为例，在批注的时候，原图是用一个图层承载，画笔和块元素（贴图和文字）分别使用一个图层。批注完成之后，以画笔为例，其所在的图层会生成一张图片，这张图片的尺寸，是由图层的尺寸决定的，而图层在创建的时候尺寸是指定为和屏幕尺寸一致，以iPhone7为例生成的图片尺寸就是375 x 667。接下来将这张画笔图片和原图合成一张新图片，新图片的尺寸是指定为和原图一致的，也就是 1280 x 960，这样将 375 x 667尺寸的图片绘制到1280 x 960尺寸的画布上，画笔就变模糊了。块元素也是一样的道理，所以就会造成原图越大，批注的元素在新图片上就会越模糊。绘制部分代码如下：
- (void)drawImageCompletion:(void(^)(UIImage *image))completion
{
UIImage *originImage = self.imageView.image;
CGFloat WS = self.imageView.width / self.drawBackgroundView.width;
CGFloat HS = self.imageView.height / self.drawBackgroundView.height;
CGFloat viewToimgW = self.imageView.width / originImage.size.width;
CGFloat viewToimgH = self.imageView.height / originImage.size.height;
CGFloat drawX = self.imageView.left / viewToimgW;
CGFloat drawY = self.imageView.top / viewToimgH;
// 拼接原图跟绘制的图
UIImage *image = [self
translationImage:originImage
orientation:self.translationImageOrientation
drawImage:[UIImage qmui_imageWithView:self.drawBackgroundView]
drawFrame:CGRectMake(-drawX, -drawY, originImage.size.width / WS, originImage.size.height / HS)
blockImage:[UIImage qmui_imageWithView:self.blockTool.containerView]];
BLOCK_EXEC(completion,image)
}
- (UIImage *)translationImage:(UIImage *)backgroundImage orientation:(UIImageOrientation)orientation drawImage:(UIImage *)drawImage drawFrame:(CGRect)drawFrame blockImage:(UIImage *)blockImage
{
CGSize contextSize = backgroundImage.size;
if (orientation == UIImageOrientationLeft || orientation == UIImageOrientationRight) {
contextSize = CGSizeMake(contextSize.height, contextSize.width);
}
contextSize = CGSizeMake(flatSpecificScale(contextSize.width, backgroundImage.scale), flatSpecificScale(contextSize.height, backgroundImage.scale));
return [UIImage qmui_imageWithSize:contextSize opaque:NO scale:backgroundImage.scale actions:^(CGContextRef contextRef) {
// 画布的原点在左上角，旋转后可能图片就飞到画布外了，所以旋转前先把图片摆到特定位置再旋转，图片刚好就落在画布里
switch (orientation) {
case UIImageOrientationUp:
// 上
break;
case UIImageOrientationDown:
// 下
CGContextTranslateCTM(contextRef, contextSize.width, contextSize.height);
CGContextRotateCTM(contextRef, AngleWithDegrees(180));
break;
case UIImageOrientationLeft:
// 左
CGContextTranslateCTM(contextRef, 0, contextSize.height);
CGContextRotateCTM(contextRef, AngleWithDegrees(-90));
break;
case UIImageOrientationRight:
// 右
CGContextTranslateCTM(contextRef, contextSize.width, 0);
CGContextRotateCTM(contextRef, AngleWithDegrees(90));
break;
case UIImageOrientationUpMirrored:
case UIImageOrientationDownMirrored:
// 向上、向下翻转是一样的
CGContextTranslateCTM(contextRef, 0, contextSize.height);
CGContextScaleCTM(contextRef, 1, -1);
break;
case UIImageOrientationLeftMirrored:
case UIImageOrientationRightMirrored:
// 向左、向右翻转是一样的
CGContextTranslateCTM(contextRef, contextSize.width, 0);
CGContextScaleCTM(contextRef, -1, 1);
break;
}
// 在前面画布的旋转、移动的结果上绘制自身即可，这里不用考虑旋转带来的宽高置换的问题
[backgroundImage drawInRect:CGRectMakeWithSize(backgroundImage.size)];
// 将批注绘制到图片上
[drawImage drawInRect:drawFrame];
// 将块元素图片绘制到图片上
[blockImage drawInRect:CGRectMakeWithSize(backgroundImage.size)];
}];
}
3. 解决思路
（1）批注元素的图层，在创建的时候尺寸指定为和原图的尺寸一致
这种是最直接的解决方式，批注元素尺寸图层和原图尺寸保持一致就能解决该问题。但是这样改动的成本比较大，批注元素的尺寸，各种操作都是跟图层尺寸相关联的，改动之后各个逻辑需要重新梳理，因此排除这种解决方式。
（2）在批注元素图层生成图片的时候，先将图层尺寸等比例放大到和原图尺寸一致，再进行绘制
使用图片的transform属性可以改变图层的缩放比例，然而当我这样做的时候，生成出来的批注元素图片还是会保持原来的尺寸。也就是说使用transform属性改变图层的缩放比例后，虽然可以指定画布的尺寸和图层放大后的尺寸一致，但元素绘制到画布上的尺寸，还是原来的尺寸，和bounds.size保持一致。
（3）生成图片的时候指定倍率scale
创建画布时可以指定生成图片放大的比例：
UIGraphicsBeginImageContextWithOptions(size, opaque, scale);
通过这种方式放大批注元素图片的尺寸，元素不会变糊。UIImage是有scale这个属性的，我们平时导入本地图片的时候，如果是@2x，@3x后缀的（表示2倍图，3倍图），系统会根据屏幕倍率自动匹配到对应的倍图，并把图片缩小对应的倍率，这个scale属性，就表示图片转化为UIImage时，尺寸缩小的倍率。因此在生成批注元素图片时scale计算方式如下：
// originImage: 原图
// view: 批注元素图层
CGFloat scale = (originImage.size.width / view.bounds.size.width) * originImage.scale;
这样生成的批注图片，分辨率就和原图保持一致了。不过，这样计算的前提是，批注图层的宽高比要和原图的宽高比是一致的，所以图层的尺寸，要指定为承载原图的imageView控件的尺寸。之前批注图层的尺寸是和屏幕的尺寸保持一致的，这里就免不了要调整一下了。
4. 更改之后生成图片的批注元素和之前图片的批注元素清晰度对比
image.png
嗯，终于在大图上也能正常的批注了。
网友评论