iOS - Draw image with CGContext and transform

Question

I am trying to draw an image on top of another image. I have the image's size, transform and origin. My code below shows correct size and transform angle but not at the correct point.

Code:

    UIGraphicsBeginImageContextWithOptions(backgroundImage.size, NO, [[UIScreen mainScreen] scale]);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGRect baseRect = CGRectMake(0, 0, backgroundImage.size.width, backgroundImage.size.height);

    [backgroundImage drawInRect:baseRect];

    CGRect newRect = CGRectMake(x, y, width, height);

    CGContextTranslateCTM(context, x, y);
    CGContextConcatCTM(context, watermarkImageView.transform);
    CGContextTranslateCTM(context, -x, -y);

    [watermarkImageView.image drawInRect:newRect];

    UIImage* result = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return result;

The watermark image should be placed like this:

But currently its looking like this:

What did I miss?

Thanks in advance

EDIT

The x,y is the edge of the bounding box

Answer 1

The answer to my question was

I had to translate to the centre of where I want to draw the context.

CGContextTranslateCTM(context, imageView.center.x, imageView.center.y);

Then rotate context.

CGFloat angle = [(NSNumber *)[imageView valueForKeyPath:@"layer.transform.rotation.z"] floatValue];
CGContextRotateCTM(context, angle);

Then draw

[imageView.image drawInRect:CGRectMake(-width * 0.5f, -height * 0.5f, width, height)];

Answer 2

Your code doesn't show what watermarkImageView.transform is and that is important because when you concat transformations, the effects of previous transformations will also effect all the following transformations.

E.g. a translation that moves the object 10 pixels along the x-axis will move the object 10 pixels to the right. However, if you first have a rotation that rotates the object by 45 degrees and then add a translation that moves 10 pixels along the x-axis, the object will not move 10 pixels to the right, it will move 10 pixels along a line that is 45 degrees rotated, which means it will move about 7 pixels up and 7 pixels to the right. That's because a rotation does not really rotate the object itself, it actually rotates the whole coordinate system which causes the object to be drawn rotated.

See this image:

Initially the translation coordinate system (red lines) matches the "real coordinate" system. But after the rotation by 45 degrees, the translation coordinate system has been rotated and now translating across the red lines moves the object diagonally.

Think about a sheet of paper and a stamp. The stamp always has the same position and the same orientation, you cannot move or rotate the stamp. But you can move and rotate the sheet of paper below the stamp! And that's what your transformations do. They transform the sheet before the stamp is pressed upon it.

For most people it is very hard to imagine the effects of transforming the whole space, it's much easier for them to think about transforming the object. The trick is: You must read your transformations in the opposite order than you wrote them. I guess what you want to do is actually:

CGContextTranslateCTM(context, x, y);
CGContextConcatCTM(context, watermarkImageView.transform);
CGContextTranslateCTM(context, 
    -watermarkImageView.size.with * 0.5,  
    -watermarkImageView.size.height * 0.5
);

Now read them in the opposite order (from bottom to top). First you center the watermark around (0,0) by moving it up half the height and left half the width. Now the center of your watermark is exactly at (0,0). Then you rotate it as desired. Finally you move it to the desired position. Of course you wrote all transformations the other way round but that's only because you are transforming the coordinate space, not the object.

Centering your watermark prior to rotation is important because rotation always rotates around (0,0) coordinates. If you'd just rotate, the rotation looks like this:

That's not what you want as it will not just rotate the object but also changes its position. If you center the image around (0,0) first, the rotation looks like this instead: