CGContextDrawImage искажает пропорции

Question

У меня есть обрезанное изображение (mainImage), которое я разрешаю пользователям рисовать поверх пальцев. Красный циг-заг на экране А. показывает участок, нанесенный пальцем. Прямо сейчас, используя приведенный ниже код, вновь созданный контекст изображения (красный зигзаг) запирается в те же границы, что и обрезанное изображение, и я заканчиваю искаженным зигзагом (снимок экрана Б.). Вы можете видеть, как красный зигзаг был засунут в рамки обрезанного (mainImage).

То, что я пытаюсь достичь, - это изображение, которое объединяет два контекста из mainImage и drawImage, не искажая пропорции любой фотографии. Так что только фрагменты красного зигзага, которые перекрывают mainImage, будут рисоваться в новом контексте, как на скриншоте C. (фотошоп из результатов, которые я хотел бы). Прямо сейчас, метод commitDrawingWithOpacity: результат с скриншотом B. И мне бы хотелось получить скриншот C.

Я пробовал CGContextClipToRect, CGContextClipToMask, а также попытался создать новый прямоугольник для рисованного изображения, помимо прочего, но до сих пор нет успеха. Я застрял в этом вопросе почти месяц (самообучение), и это одна из последних вещей, которые мне нужно сделать, прежде чем я могу отправить свое приложение на яблоко. Таким образом, любая помощь была бы высоко оценена. Вот ссылка на код, я использую https://github.com/dblapps/DAScratchPad

Вот размер каждого:

drawImage.size = (ширина = 320, высота = 568) // iPhone 5 размер экрана

mainImage.size = (ширина = 260, высота = 800) // размер обрезанного изображения

my 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, но до сих пор не было никакой удачи с получением ничего работать правильно.

Ниже Photoshopped скриншот результатов я пытаюсь достичь. Снимок экрана 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 используя пропорцию , следовательно, почему она искажается. Вы должны сохранять пропорции drawImage и правильно позиционировать их. Вот потенциальная отправная точка для вас, чтобы настроить - это трудно точно сказать, что вы пытаетесь добиться от вашего вопроса:

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

Этот прямоугольник использует оригинальный размер, а затем регулирует происхождение, где изображение рисуется