CGContextDrawImage会扭曲比例

Question

我有一个裁剪图像（mainImage），我允许用户在他们的手指上绘制。屏幕A上的红色锯齿形显示手指绘制部分。现在，使用下面的代码，新绘制的图像上下文（红色之字形）被推入与裁剪图像相同的边界，我最终得到一个扭曲的锯齿形（截图B）。您可以看到红色之字形如何被推入裁剪（mainImage）的边界。

我想要实现的是一个图像，它结合了mainImage和drawImage这两个上下文，而不会扭曲任何一张照片的比例。因此，只有红色之字形与mainImage重叠的部分将在新的上下文中绘制，如屏幕截图C所示。（我想要的结果的照片图像）。现在，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

您正在使用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使用原始大小，然后调整绘制图像的原点

Answer 2

对我来说，我需要利用这两个功能：AVMakeRectWithAspectRatioInsideRect＆amp; 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;
}