CGContextDrawImage рисует изображение вверх ногами при передаче UIImage.CGImage

Вместо

CGContextDrawImage(context, CGRectMake(0, 0, 145, 15), image.CGImage);

Использовать

[image drawInRect:CGRectMake(0, 0, 145, 15)];

В середине ваших методов начала / конца CGcontext.

Это нарисует изображение с правильной ориентацией в текущем контексте изображения - я почти уверен, что это как-то связано с UIImage сохранением информации об ориентации, в то время как метод CGContextDrawImage получает исходные необработанные данные изображения без понимания ориентации.

Даже после того, как я применил все, что упомянул, у меня остались драмы с изображениями. В конце концов, я только что использовал GIMP для создания «перевернутой вертикальной» версии всех моих изображений. Теперь мне не нужно использовать какие-либо преобразования. Надеюсь, это не вызовет дальнейших проблем в будущем.

Кто-нибудь знает, почему CGContextDrawImage рисует мое изображение вверх ногами? Я загружаю изображение из своего приложения:

Quartz2d использует другую систему координат, где начало координат находится в нижнем левом углу. Поэтому, когда Quartz рисует пиксель x [5], y [10] изображения размером 100 * 100, этот пиксель рисуется в нижнем левом углу, а не в верхнем левом. Таким образом, вызывая «перевернутое» изображение.

Система координат x совпадает, поэтому вам нужно будет перевернуть координаты y.

CGContextTranslateCTM(context, 0, image.size.height);

Это означает, что мы переместили изображение на 0 единиц по оси x и на высоту изображения по оси y. Однако это само по себе будет означать, что наше изображение все еще перевернуто, просто нарисовано «image.size.height» ниже того места, где мы хотим, чтобы оно было нарисовано.

Руководство по программированию Quartz2D рекомендует использовать ScaleCTM и передавать отрицательные значения, чтобы перевернуть изображение. Для этого вы можете использовать следующий код -

CGContextScaleCTM(context, 1.0, -1.0);

Объедините эти два параметра непосредственно перед вашим CGContextDrawImage вызовом, и вы получите изображение, нарисованное правильно.

UIImage *image = [UIImage imageNamed:@"testImage.png"];    
CGRect imageRect = CGRectMake(0, 0, image.size.width, image.size.height);       

CGContextTranslateCTM(context, 0, image.size.height);
CGContextScaleCTM(context, 1.0, -1.0);

CGContextDrawImage(context, imageRect, image.CGImage);

Только будьте осторожны, если ваши координаты imageRect не совпадают с координатами вашего изображения, так как вы можете получить непредвиденные результаты.

Чтобы преобразовать координаты обратно:

CGContextScaleCTM(context, 1.0, -1.0);
CGContextTranslateCTM(context, 0, -imageRect.size.height);

Лучшее из обоих миров, используйте UIImage drawAtPoint: или drawInRect:, все еще указывая свой собственный контекст:

UIGraphicsPushContext(context);
[image drawAtPoint:CGPointZero]; // UIImage will handle all especial cases!
UIGraphicsPopContext();

Также вы избегаете изменения вашего контекста с помощью CGContextTranslateCTM или CGContextScaleCTM, как это делает второй ответ.

Соответствующие документы Quartz2D: https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html#//apple_ref/1410/156-TP400/.

Изменение системы координат по умолчанию

Переворачивание в чертеже UIKit изменяет поддерживающий CALayer, чтобы выровнять среду рисования, имеющую систему координат LLO, с системой координат по умолчанию UIKit. Если вы используете только методы и функции UIKit для рисования, вам не нужно переворачивать CTM. Однако, если вы смешиваете вызовы функций Core Graphics или Image I / O с вызовами UIKit, может потребоваться переключение CTM.

В частности, если вы рисуете изображение или PDF-документ, напрямую вызывая функции Core Graphics, объект отображается в перевернутом виде в контексте представления. Вы должны перевернуть CTM, чтобы изображение и страницы отображались правильно.

Чтобы перевернуть объект, нарисованный в контексте Core Graphics, чтобы он правильно отображался при отображении в представлении UIKit, вы должны изменить CTM в два этапа. Вы переводите начало координат в верхний левый угол области рисования, а затем применяете масштабный перевод, изменяя координату Y на -1. Код для этого выглядит примерно так:

CGContextSaveGState(graphicsContext);
CGContextTranslateCTM(graphicsContext, 0.0, imageHeight);
CGContextScaleCTM(graphicsContext, 1.0, -1.0);
CGContextDrawImage(graphicsContext, image, CGRectMake(0, 0, imageWidth, imageHeight));
CGContextRestoreGState(graphicsContext);

Если кого-то интересует простое решение для рисования изображения в настраиваемом прямоугольнике в контексте:

 func drawImage(image: UIImage, inRect rect: CGRect, context: CGContext!) {

    //flip coords
    let ty: CGFloat = (rect.origin.y + rect.size.height)
    CGContextTranslateCTM(context, 0, ty)
    CGContextScaleCTM(context, 1.0, -1.0)

    //draw image
    let rect__y_zero = CGRect(origin: CGPoint(x: rect.origin.x, y:0), size: rect.size)
    CGContextDrawImage(context, rect__y_zero, image.CGImage)

    //flip back
    CGContextScaleCTM(context, 1.0, -1.0)
    CGContextTranslateCTM(context, 0, -ty)

}

Изображение будет масштабировано, чтобы заполнить прямоугольник.

Я не уверен в UIImage, но такое поведение обычно возникает, когда координаты меняются местами. Большинство систем координат OS X имеют начало в левом нижнем углу, как в Postscript и PDF. Но CGImage система координат берет начало в верхнем левом углу.

Возможные решения могут включать свойство isFlipped или аффинное преобразование scaleYBy:-1.

UIImage содержит CGImage в качестве основного элемента содержимого, а также коэффициенты масштабирования и ориентации. Поскольку CGImage и его различные функции унаследованы от OSX, он ожидает, что система координат будет перевернутой по сравнению с iPhone. Когда вы создаете UIImage, для компенсации по умолчанию используется перевернутая ориентация (вы можете это изменить!). Используйте свойство .CGImage для доступа к очень мощным CGImage функциям, но рисование на экране iPhone и т. Д. Лучше всего выполнять с помощью методов UIImage.

Дополнительный ответ с кодом Swift

Кварцевая 2D-графика использует систему координат с началом в левом нижнем углу, в то время как UIKit в iOS использует систему координат с началом в левом верхнем углу. Обычно все работает нормально, но при выполнении некоторых графических операций вам придется самостоятельно изменять систему координат. в документации говорится:

Некоторые технологии настраивают свои графические контексты, используя систему координат по умолчанию, отличную от той, которая используется Quartz. По сравнению с Кварцем такая система координат является модифицированной системой координат, и ее необходимо компенсировать при выполнении некоторых операций рисования Кварца. Наиболее распространенная модифицированная система координат помещает начало координат в верхний левый угол контекста, а ось Y меняет направление в сторону нижней части страницы.

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

Слева изображение перевернуто, а с правой стороны система координат была преобразована и масштабирована, так что начало координат находится в верхнем левом углу.

Изображение вверх ногами

override func drawRect(rect: CGRect) {

    // image
    let image = UIImage(named: "rocket")!
    let imageRect = CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height)

    // context
    let context = UIGraphicsGetCurrentContext()

    // draw image in context
    CGContextDrawImage(context, imageRect, image.CGImage)

}

Измененная система координат

override func drawRect(rect: CGRect) {

    // image
    let image = UIImage(named: "rocket")!
    let imageRect = CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height)

    // context
    let context = UIGraphicsGetCurrentContext()

    // save the context so that it can be undone later
    CGContextSaveGState(context)

    // put the origin of the coordinate system at the top left
    CGContextTranslateCTM(context, 0, image.size.height)
    CGContextScaleCTM(context, 1.0, -1.0)

    // draw the image in the context
    CGContextDrawImage(context, imageRect, image.CGImage)

    // undo changes to the context
    CGContextRestoreGState(context)
}

Я использую это Swift 5, чистое расширение Core Graphics, которое правильно обрабатывает ненулевое происхождение в прямоугольниках изображения:

extension CGContext {

    /// Draw `image` flipped vertically, positioned and scaled inside `rect`.
    public func drawFlipped(_ image: CGImage, in rect: CGRect) {
        self.saveGState()
        self.translateBy(x: 0, y: rect.origin.y + rect.height)
        self.scaleBy(x: 1.0, y: -1.0)
        self.draw(image, in: CGRect(origin: CGPoint(x: rect.origin.x, y: 0), size: rect.size))
        self.restoreGState()
    }
}

Вы можете использовать его точно так же, как обычный draw(: in:) метод CGContext:

ctx.drawFlipped(myImage, in: myRect)

Swift 3.0 и 4.0

yourImage.draw(in: CGRect, blendMode: CGBlendMode, alpha: ImageOpacity)

Никаких изменений не требуется

drawInRect, безусловно, правильный путь. Вот еще одна мелочь, которая вам пригодится при этом. Обычно изображение и прямоугольник, в который он собирается попасть, не совпадают. В этом случае drawInRect растянет изображение. Вот быстрый и классный способ убедиться, что соотношение сторон изображения не изменилось, путем обращения преобразования (что будет соответствовать всему):

//Picture and irect don't conform, so there'll be stretching, compensate
    float xf = Picture.size.width/irect.size.width;
    float yf = Picture.size.height/irect.size.height;
    float m = MIN(xf, yf);
    xf /= m;
    yf /= m;
    CGContextScaleCTM(ctx, xf, yf);

    [Picture drawInRect: irect];

Мы можем решить эту проблему, используя ту же функцию:

UIGraphicsBeginImageContext(image.size);

UIGraphicsPushContext(context);

[image drawInRect:CGRectMake(gestureEndPoint.x,gestureEndPoint.y,350,92)];

UIGraphicsPopContext();

UIGraphicsEndImageContext();

Решение Swift 3 CoreGraphics

Если вы хотите использовать CG по любой причине, вместо UIImage, эта конструкция Swift 3, основанная на предыдущих ответах, решила для меня проблему:

if let cgImage = uiImage.cgImage {
    cgContext.saveGState()
    cgContext.translateBy(x: 0.0, y: cgRect.size.height)
    cgContext.scaleBy(x: 1.0, y: -1.0)
    cgContext.draw(cgImage, in: cgRect)
    cgContext.restoreGState()
}

Это происходит потому, что QuartzCore имеет систему координат «нижний левый», а UIKit - «верхний левый».

Если вы можете расширить CGContext:

extension CGContext {
  func changeToTopLeftCoordinateSystem() {
    translateBy(x: 0, y: boundingBoxOfClipPath.size.height)
    scaleBy(x: 1, y: -1)
  }
}

// somewhere in render 
ctx.saveGState()
ctx.changeToTopLeftCoordinateSystem()
ctx.draw(cgImage!, in: frame)

В ходе своего проекта я перескочил с ответа Кендалла на Ответ Клиффа, чтобы решить эту проблему для изображений, загружаемых с самого телефона.

В конце концов я использовал _ 1_ вместо этого:

NSString* imageFileName = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"clockdial.png"];

return CGImageCreateWithPNGDataProvider(CGDataProviderCreateWithFilename([imageFileName UTF8String]), NULL, YES, kCGRenderingIntentDefault);

Это не страдает от проблем с ориентацией, которые могут возникнуть при получении CGImage от UIImage, и его можно без проблем использовать в качестве содержимого CALayer.

Ответ Swift 5 на основе отличного ответа @ ZpaceZombor

Если у вас есть UIImage, просто используйте

var image: UIImage = .... 
image.draw(in: CGRect)

Если у вас есть CGImage, используйте мою категорию ниже

Примечание. В отличие от некоторых других ответов, этот учитывает, что прямоугольник, который вы хотите нарисовать, может иметь y! = 0. Те ответы, которые не учитывают это, неверны и не будут работать в общем случае.

extension CGContext {
    final func drawImage(image: CGImage, inRect rect: CGRect) {

        //flip coords
        let ty: CGFloat = (rect.origin.y + rect.size.height)
        translateBy(x: 0, y: ty)
        scaleBy(x: 1.0, y: -1.0)

        //draw image
        let rect__y_zero = CGRect(x: rect.origin.x, y: 0, width: rect.width, height: rect.height)
        draw(image, in: rect__y_zero)

        //flip back
        scaleBy(x: 1.0, y: -1.0)
        translateBy(x: 0, y: -ty)

    }
} 

Используйте так:

let imageFrame: CGRect = ...
let context: CGContext = ....
let img: CGImage = ..... 
context.drawImage(image: img, inRect: imageFrame)

Вы также можете решить эту проблему, выполнив следующие действия:

//Using an Image as a mask by directly inserting UIImageObject.CGImage causes
//the same inverted display problem. This is solved by saving it to a CGImageRef first.

//CGImageRef image = [UImageObject CGImage];

//CGContextDrawImage(context, boundsRect, image);

Nevermind... Stupid caching.