CODEWITHSUNDEEP
iphoneuikitcore-graphics
teabot
teabot

Reputation: 15444

Vertical flip of CGContext

I have a UIView that I am trying to render into a UIImage using [CALayer renderInContext:]. However, I find that the resultant image is flipped vertically. I kind of expect this due to the different coordinate systems. However, I then try and flip the context back to normal with an affine transform - but it doesn't have any effect:

CGAffineTransform flipVertical = CGAffineTransformMake(
    1, 0, 0, -1, 0, imageContextHeight
);
CGContextConcatCTM(imageContext, flipVertical);
CGImageRef cgImage = CGBitmapContextCreateImage(imageContext);
UIImage* uiImage = [[UIImage imageWithCGImage:cgImage] retain];
CGImageRelease(cgImage);

What am I doing wrong?

Upvotes: 38

Views: 31635

Answers (8)

andrewchan2022
andrewchan2022

Reputation: 5290

swift version to get y flip affine matrix:

let t1 = CGAffineTransform(scaleX: 1, y: -1)
let t = t1.translatedBy(x: 0, y: height)

// or in one step
let t = CGAffineTransform(a: 1, b: 0, c: 0, d: -1, tx: 0, ty: height)

Upvotes: 3

Drew
Drew

Reputation: 976

Swift 5 extension:

import CoreGraphics

extension CGContext {

    /// Transforms the user coordinate system in a context
    /// such that the y-axis is flipped.
    func flipYAxis() {
        concatenate(CGAffineTransform(a: 1, b: 0, c: 0, d: -1, tx: 0, ty:
            CGFloat(height)/abs(userSpaceToDeviceSpaceTransform.d)))
    }

}

Upvotes: 2

AppDever
AppDever

Reputation: 707

Here is the same code as above (benvolioT's answer) but in SWIFT 4.0

import QuartzCore
...
func flipImageVertically(originalImage:UIImage) -> UIImage{

    let tempImageView:UIImageView = UIImageView(image: originalImage)
    UIGraphicsBeginImageContext(tempImageView.frame.size)
    let context:CGContext = UIGraphicsGetCurrentContext()!
    let flipVertical: CGAffineTransform = CGAffineTransform(a: 1, b: 0, c: 0, d: -1, tx: 0, ty: tempImageView.frame.size.height)

    context.concatenate(flipVertical)
    tempImageView.layer.render(in: context)

    let flippedImage:UIImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()

    return flippedImage
}

And here is an even better way in SWIFT:

func flipImageVertically(originalImage:UIImage) -> UIImage {
    let image:UIImage = UIImage(CGImage: originalImage.CGImage, scale: 1.0, orientation: UIImageOrientation.RightMirrored)!
    return image
}

Upvotes: 8

Agisight
Agisight

Reputation: 1818

Use this function in Swift 4:

func drawImage(image: UIImage) -> UIImage {
    // Setup our context
    let opaque = false
    let scale: CGFloat = 0 // 0 means we use scale factor of the device’s main screen.
    UIGraphicsBeginImageContextWithOptions(image.size, opaque, scale)
    let context = UIGraphicsGetCurrentContext()!
    let flipVertical = CGAffineTransform(a: 1, b: 0, c: 0, d: -1, tx: 0, ty: image.size.height)
    context.concatenate(flipVertical) // flip by y

    // draw your another figures
    //...
    // Drawing complete, set context to image and finish
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image!
}

Upvotes: 2

Halyna Rubashko
Halyna Rubashko

Reputation: 605

Swift 4:

let flipVertical = CGAffineTransform(a: 1, b: 0, c: 0, d: -1, tx: 0, ty: originalImage.size.height)
ctx.concatenate(flipVertical)

Upvotes: 3

Joe
Joe

Reputation: 149

I use this code in swift:

            UIGraphicsBeginImageContextWithOptions(myImageView.image!.size, false, 1.0)

            var context = UIGraphicsGetCurrentContext()

            //move and invert canvas by scaling
            CGContextTranslateCTM(context, myImageView.image!.size.width, 0)
            CGContextScaleCTM(context, -1, 1)

            myImageView.image!.drawInRect(CGRect(x: 0, y: 0, width: myImageView.image!.size.width, height: myImageView.image!.size.height))

            // move back and reinvert
            CGContextScaleCTM(context, 1, 1)
            CGContextTranslateCTM(context, -myImageView.image!.size.width, 0)

            let flippedImg = UIGraphicsGetImageFromCurrentImageContext()

            myImageView.image = flippedImg

            UIGraphicsEndImageContext()

Upvotes: 1

benvolioT
benvolioT

Reputation: 4556

Here is some code that I wrote based on this answer, in case it is helpful to anyone:

#import <QuartzCore/QuartzCore.h>
...
+ (UIImage *) flipImageVertically:(UIImage *)originalImage {
    UIImageView *tempImageView = [[UIImageView alloc] initWithImage:originalImage];

    UIGraphicsBeginImageContext(tempImageView.frame.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGAffineTransform flipVertical = CGAffineTransformMake(
            1, 0, 0, -1, 0, tempImageView.frame.size.height
    );
    CGContextConcatCTM(context, flipVertical);  

    [tempImageView.layer renderInContext:context];

    UIImage *flipedImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    [tempImageView release];

    return flipedImage;
}

Upvotes: 36

Peter Hosey
Peter Hosey

Reputation: 96323

The CTM affects future drawing; you're capturing what you have already drawn. You need to concat that transformation before you draw, not after.

Upvotes: 33

Related Questions