CGContextDrawImage扭曲比例

Question

我有一个裁剪图像(mainImage)，我允许用户在使用手指的基础上进行绘制。屏幕A上的红色锯齿状图显示手指画出的部分。现在，使用下面的代码，新绘制的图像上下文(red Zig)被插入到与裁剪后的图像相同的边界中，而我最终得到了一个扭曲的zig(屏幕截图B)。你可以看到红色锯齿是如何被推入裁剪(mainImage)的边界的。

我想要实现的是一幅结合了mainImage和drawImage两种背景的图片，而不扭曲这两张照片的比例。因此，只有与mainImage重叠的红色锯齿部分将在新的上下文中绘制，如屏幕截图C(我想要的结果的photoshopped图像)。现在，commitDrawingWithOpacity:方法结果与屏幕截图B和我想要的结果截图C。

我尝试过CGContextClipToRect、CGContextClipToMask，也尝试过为绘图图像创建一个新的rect，但是到目前为止还没有成功。我已经在这个问题上被困了近一个月(自学)，这是我最不需要做的事情之一，然后我才能把我的应用提交给苹果。因此，任何帮助都将是非常感谢的。下面是我正在使用https://github.com/dblapps/DAScratchPad的代码的链接

下面是每个人的大小：

drawImage.size = (width=320，height=568) // iPhone 5屏幕大小

mainImage.size = (width=260，height=800) //裁剪图像的大小

我的imageView被设置为纵横配合比。

- (void) commitDrawingWithOpacity:(CGFloat)opacity {
    UIGraphicsBeginImageContext(mainImage.size);
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextScaleCTM(ctx, 1.0f, -1.0f);
    CGContextTranslateCTM(ctx, 0.0f, -mainImage.size.height);

    CGRect rect = CGRectMake(0.0f, 0.0f, mainImage.size.width, mainImage.size.height);

    if (mainImage != nil) {
        CGContextDrawImage(ctx, rect, mainImage.CGImage);
    }

    CGContextSetAlpha(ctx, opacity);
    CGContextDrawImage(ctx, rect, drawImage.CGImage);
    mainImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    self.layer.contents = (id)mainImage.CGImage;
    drawLayer.contents = nil;
    drawImage = nil;
}

使用函数AVMakeRectWithAspectRatioInsideRect，我已经能够为我的mainImage获得正确的大小比，但仍然没有运气使任何事情都能正常工作。

​

​

下面是我想要达到的效果的照片截图。截图B(上图)是我现在的代码。

​

​

Answer 1

对我来说，我需要使用两个函数: AVMakeRectWithAspectRatioInsideRect和CGImageCreateWithImageInRect来获得所需的结果。我的问题是我的mainImage和drawImage之间的高宽比差。所以AVMakeRectWithAspectRatioInsideRect给了我一个新的矩形，它的大小比和mainImage的原点都是正确的。之后，我使用CGImageCreateWithImageInRect将drawImage CGImage放置到新的矩形和Presto中！我的drawImage和mainImage以完全相同的高宽比创建了一个新的上下文。不再扭曲或扭曲图像。工作代码张贴在下面。

- (void) commitDrawingWithOpacity:(CGFloat)opacity {

    CGRect drawRect = AVMakeRectWithAspectRatioInsideRect(mainImage.size, self.frame);

    UIGraphicsBeginImageContext(mainImage.size);
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextScaleCTM(ctx, 1.0f, -1.0f);
    CGContextTranslateCTM(ctx, 0.0f, -mainImage.size.height);

    CGRect rect = CGRectMake(0.0f, 0.0f, mainImage.size.width, mainImage.size.height);

    if (mainImage != nil) {
        CGContextDrawImage(ctx, rect, mainImage.CGImage);
    }

    CGImageRef imageRef = CGImageCreateWithImageInRect([drawImage CGImage], drawRect);

    CGContextSetAlpha(ctx, opacity);
    CGContextDrawImage(ctx, rect, imageRef);

    mainImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    self.layer.contents = (id)mainImage.CGImage;
    drawLayer.contents = nil;
    drawImage = nil;
}

Answer 2

您正在使用drawImage的比例绘制mainImage，因此它被扭曲了。您应该保持drawImage的比例，并正确地定位它。这是一个潜在的起点，你可以调整--很难从你的问题中确切地看出你想要达到的目标：

CGRect drawImageRect = (CGRect){
  .origin = {
    .x = -((drawImage.size.width - mainImage.size.width)   / 2),
    .y = -((drawImage.size.height - mainImage.size.height) / 2),
  },
  .size = drawImage.size,
};

这个rect使用原始大小，然后调整绘制图像的原点。