批注元素清晰度优化

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

嗯,终于在大图上也能正常的批注了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345