1. 存在的問題
在做為批注圖片添加貼圖和文字的需求時，發(fā)生批注之后生成的圖片，當(dāng)原圖尺寸比較大時，貼圖，文字，畫筆就會變得模糊，例如當(dāng)批注圖片的原圖尺寸為 580 x 5326 時，生成的圖片，批注效果如下圖：

image.png

2. 問題的原因
我們生成批注后的圖片的基本方式是將畫筆和塊元素（貼圖和文字）各自所在的圖層先生成兩張圖片，再將這兩張圖片和原圖合成一張圖片。以批注圖片1為例，在批注的時候，原圖是用一個圖層承載，畫筆和塊元素（貼圖和文字）分別使用一個圖層。批注完成之后，以畫筆為例，其所在的圖層會生成一張圖片，這張圖片的尺寸，是由圖層的尺寸決定的，而圖層在創(chuàng)建的時候尺寸是指定為和屏幕尺寸一致，以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) {
        // 畫布的原點在左上角，旋轉(zhuǎn)后可能圖片就飛到畫布外了，所以旋轉(zhuǎn)前先把圖片擺到特定位置再旋轉(zhuǎn)，圖片剛好就落在畫布里
        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:
                // 向上、向下翻轉(zhuǎn)是一樣的
                CGContextTranslateCTM(contextRef, 0, contextSize.height);
                CGContextScaleCTM(contextRef, 1, -1);
                break;
            case UIImageOrientationLeftMirrored:
            case UIImageOrientationRightMirrored:
                // 向左、向右翻轉(zhuǎn)是一樣的
                CGContextTranslateCTM(contextRef, contextSize.width, 0);
                CGContextScaleCTM(contextRef, -1, 1);
                break;
        }
        
        // 在前面畫布的旋轉(zhuǎn)、移動的結(jié)果上繪制自身即可，這里不用考慮旋轉(zhuǎn)帶來的寬高置換的問題
        [backgroundImage drawInRect:CGRectMakeWithSize(backgroundImage.size)];
        // 將批注繪制到圖片上
        [drawImage drawInRect:drawFrame];
        // 將塊元素圖片繪制到圖片上
        [blockImage drawInRect:CGRectMakeWithSize(backgroundImage.size)];
    }];
}

3. 解決思路
（1）批注元素的圖層，在創(chuàng)建的時候尺寸指定為和原圖的尺寸一致
這種是最直接的解決方式，批注元素尺寸圖層和原圖尺寸保持一致就能解決該問題。但是這樣改動的成本比較大，批注元素的尺寸，各種操作都是跟圖層尺寸相關(guān)聯(lián)的，改動之后各個邏輯需要重新梳理，因此排除這種解決方式。

（2）在批注元素圖層生成圖片的時候，先將圖層尺寸等比例放大到和原圖尺寸一致，再進行繪制
使用圖片的transform屬性可以改變圖層的縮放比例，然而當(dāng)我這樣做的時候，生成出來的批注元素圖片還是會保持原來的尺寸。也就是說使用transform屬性改變圖層的縮放比例后，雖然可以指定畫布的尺寸和圖層放大后的尺寸一致，但元素繪制到畫布上的尺寸，還是原來的尺寸，和bounds.size保持一致。

（3）生成圖片的時候指定倍率scale
創(chuàng)建畫布時可以指定生成圖片放大的比例：

UIGraphicsBeginImageContextWithOptions(size, opaque, scale);

通過這種方式放大批注元素圖片的尺寸，元素不會變糊。UIImage是有scale這個屬性的，我們平時導(dǎo)入本地圖片的時候，如果是@2x，@3x后綴的（表示2倍圖，3倍圖），系統(tǒng)會根據(jù)屏幕倍率自動匹配到對應(yīng)的倍圖，并把圖片縮小對應(yīng)的倍率，這個scale屬性，就表示圖片轉(zhuǎn)化為UIImage時，尺寸縮小的倍率。因此在生成批注元素圖片時scale計算方式如下：

// originImage: 原圖
// view: 批注元素圖層
CGFloat scale = (originImage.size.width / view.bounds.size.width) * originImage.scale;

這樣生成的批注圖片，分辨率就和原圖保持一致了。不過，這樣計算的前提是，批注圖層的寬高比要和原圖的寬高比是一致的，所以圖層的尺寸，要指定為承載原圖的imageView控件的尺寸。之前批注圖層的尺寸是和屏幕的尺寸保持一致的，這里就免不了要調(diào)整一下了。

4. 更改之后生成圖片的批注元素和之前圖片的批注元素清晰度對比

image.png