drawInRect not preserving transform - iphone

UIGraphicsBeginImageContext(backgroundImageView.frame.size);
UIImageView *image1 = backgroundImageView;
UIImageView *image2 = boat;
// Draw image1
[image1.image drawInRect:CGRectMake(0, 0, image1.image.size.width, image1.image.size.height)];
// Draw image2
[image2.image drawInRect:CGRectMake(boat.center.x, boat.center.y, boat.image.size.width, boat.image.size.height)];
UIImage *resultingImage = UIGraphicsGetImageFromCurrentImageContext();
When resultingImage is displayed the transform angle value for image2 is not preserved after I set it equal to the boat UIImageView. I thought that when I set image2 = boat that the transform value of boat would carry over to image2.
I suspect it relates to the fact that I am I am working with UIImageView instead of UIVIew. I have tried many different things but have been unable to resolve this issue.
Any help would be appreciated.
Thanks.

When you draw an image into a graphics context, it uses the context's transformation matrix, which is distinct from any transformation applied to a view. So the transformation on image2 (a UIImageView presumably) is completely irrelevant to direct image drawing.
You can either specify a new transformation with the various CGContext and CGAffineTransform functions in Quartz, or you can directly apply a copy of the UIImageView 's transformation like so:
CGContextConcatCTM(UIGraphicsGetCurrentContext(), someView.transform);
[someView.image drawInRect: CGRectMake(...)];

Related

UIIMAGE rotation in iPhone without rotating UIIMAGEVIEW On Button Click In Clockwise Or Anticlock wise

I have a UIImageView with is filled with image either taken by camera or picked from the liabray after I assign UIImage to UIImageView I want to rotate it with either clockwise or anticlock wise using 2 button respectively for both on every click image should rotate but without rotationg in superview UIImageView then after I want so save the image in the final position user saved that image...
If there is any method or procedure then please share as i m searching on this query from last many days but not got any acurate solution with proper details and working.
Rotation routine ( found this routine on another post but I forget where):
-(UIImage *)rotateImage:(UIImage *)image angleInRadians:(float)angleInRadians {
UIGraphicsBeginImageContext(image.size);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextRotateCTM(ctx, angleInRadians);
CGContextDrawImage(ctx, (CGRect){{}, image.size}, image);
UIImage *imageOut = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return imageOut;
}
Angle in raadians could be M_PI/2 or -M_PI/2 to change landscape to portrait or viceversa

How to draw a Mirrored UIImage in UIView with drawRect?

I load a image and create a mirror in this way:
originalImg = [UIImage imageNamed:#"ms06.png"];
mirrorImg = [UIImage imageWithCGImage:[originalImg CGImage] scale:1.0 orientation:UIImageOrientationUpMirrored];
Then I set the above UIImage object to a subclass of UIView, and override the drawRect:
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGAffineTransform t0 = CGContextGetCTM(context);
CGContextConcatCTM(context, t0);
CGContextDrawImage(context, self.bounds, [image CGImage]);
CGContextRestoreGState(context);
}
No matter which image I draw, the displayed image always be the original one, mirrored image was never displayed when set to the UIView subclass.
I'm sure that the mirrored image was set to the UIView correctly because the debug info showed that the orientation member variable equals to 4, which means "UIImageOrientationUpMirrored", while the original image equals to 0.
Does anyone could help me with this problem, thanks.
I also tried to display the mirrored image in UIImageView with setImage: and it works correctly. By the way I found that the breakpoint in drawRect was never hit when call the setImage of UIImageView, how can we define the drawing behavior(such as draw a line above the image) when loading image to the UIImageView?
You mirrow the image on UI-Level. This returns a new UIImage, but the CGImage stays the same. If you do some NSLogs, you will notice this.
You can also do transformations on UI-Level. If you use this approach, I would suggest to use originalImg.scale instead of 1.0. Then the code would work for retina and non-retina displays.
[UIImage imageWithCGImage:[originalImg CGImage] scale:originalImg.scale orientation:UIImageOrientationUpMirrored];
If you really need to mirror the CGImage, take a look at NYXImagesKit on GitHub (see UIImage+Rotating.m)

Merge image on double Tap

I have two ImageViews and I am merging two images. First image is a bodyImage and second Image is a tattooImage. I already done merging, but I wants ask
1)I can drag tattooImage over bodyImage. I wants on doubleTap tattooImage mergeWith bodyImage on the tap coordinates. Hope you understand question
Thanks
+ =
and here is my code : here imageView1 is my bodyImage and imageView2 is my tattooImage
- (void)tapDetected:(UITapGestureRecognizer *)tapRecognizer
{
int width=500;
int height=500;
NSLog(#"takephoto from twitter");
CGSize newSize = CGSizeMake(width, height);
UIGraphicsBeginImageContext( newSize );
// Use existing opacity as is
[imageView1.image drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];
// Apply supplied opacity if applicable
[imageView2.image drawInRect:CGRectMake(180,200,200,200) blendMode:kCGBlendModeDarken alpha:0.4];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
imageView1.image=newImage;
UIGraphicsEndImageContext();
}
mask image http://www.developers-life.com/resize-and-mask-an-image.html
You need image masking for that. I wrote a tutorial on how to use it, and how I've used it in my own application. From the Apple documentation:
Masking techniques can produce many interesting effects by controlling which parts of an image are painted. You can:
Apply an image mask to an image. You can also use an image as a mask
to achieve an effect that’s opposite from applying an image mask.
Use color to mask parts of an image, which includes the technique
referred to as chroma key masking.
Clip a graphics context to an
image or image mask, which effectively masks an image (or any kind of
drawing) when Quartz draws the content to the clipped context.

drawAtPoint with rotation

I am having trouble drawing my imageView.image in the correct position using drawAtPoint. In the app I have used CGAffineTransformMakeRotation to rotate the image view, but when I want to save the imageView as part of a merge with others using UIGraphicsGetImageFromCurrentImageContext I don't know how to tell it to rotate.. all I am doing is rotating 180 degrees. here is the code I am using to merge it with another image.
UIGraphicsBeginImageContext(imageView.bounds.size);
[imageView.image drawAtPoint:CGPointMake(-40,0)];
[topView.image drawAtPoint:CGPointMake(0,160)];
UIImage *mergedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
So my question is: How do I drawAtPoint with rotation of 180 degrees or 3.14159265 radians?
Thanks in advance.
You can apply a transform to the image content, so all subsequent painting operation will be drawn with that transform, e.g. (untested)
UIGraphicsBeginImageContext(size);
CGContextRef c = UIGraphicsGetCurrentContext();
CGContextRotateCTM(c, M_PI/6);
[image drawAtPoint:CGPointZero];
...

How to compensate the flipped coordinate system of core graphics for easy drawing?

It's really a pain, but always when I draw an UIImage in -drawRect:, it's upside-down.
When I flip the coordinates, the image draws correctly, but at the cost of all other CG functions drawing "wrong" (flipped).
What's your strategy when you have to draw images and other things? Is there any rule of thumb how to not get stuck in this problem over and over again?
Also, one nasty thing when I flip the y-axis is, that my CGRect from the UIImageView frame is wrong. Instead of the origin appearing at 10,10 upper left as expected, it appears at the bottom.
But at the same time, all those normal line drawing functions of CGContext take correct coordinates. drawing a line in -drawRect with origin 10,10 upper left, will really start at upper left. But at the same time that's strange, because core graphics actually has a flipped coordinate system with y 0 at the bottom.
So it seems like something is really inconsistent there. Drawing with CGContext functions takes coordinates as "expected" (cmon, nobody thinks in coordinates starting from bottom left, that's silly), while drawing any kind of image still works the "wrong" way.
Do you use helper methods to draw images? Or is there anything useful that makes image drawing not a pain in the butt?
Problem: Origin is at lower-left corner; positive y goes upward (negative y goes downward).
Goal: Origin at upper-left corner; positive y going downward (negative y going upward).
Solution:
Move origin up by the view's height.
Negate (multiply by -1) the y axis.
The way to do this in code is to translate up by the view bounds' height and scale by (1, -1), in that order.
There are a couple of portions of the Quartz 2D Programming Guide that are relevant to this topic, including “Drawing to a Graphics Context on iPhone OS” and the whole chapter on Transforms. Of course, you really should read the whole thing.
You can do that by apply affinetransform on the point you want to convert in UIKit related coordinates. Following is example.
// Create a affine transform object
CGAffineTransform transform = CGAffineTransformMakeScale(1, -1);
// First translate your image View according to transform
transform = CGAffineTransformTranslate(transform, 0, - imageView.bounds.size.height);
// Then whenever you want any point according to UIKit related coordinates apply this transformation on the point or rect.
// To get tranformed point
CGPoint newPointForUIKit = CGPointApplyAffineTransform(oldPointInCGKit, transform);
// To get transformed rect
CGRect newRectForUIKit = CGRectApplyAffineTransform(oldPointInCGKit, transform);
The better answer to this problem is to use the UIImage method drawInRect: to draw your image. I'm assuming you want the image to span the entire bounds of your view. This is what you'd type in your drawRect: method.
Instead of:
CGContextRef ctx = UIGraphicsGetCurrentContext();
UIImage *myImage = [UIImage imageNamed:#"theImage.png"];
CGImageRef img = [myImage CGImage];
CGRect bounds = [self bounds];
CGContextDrawImage(ctx, bounds, img);
Write this:
UIImage *myImage = [UIImage imageNamed:#"theImage.png"];
CGRect bounds = [self bounds];
[myImage drawInRect:bounds];
It's really a pain, but always when I draw an UIImage in -drawRect:, it's upside-down.
Are you telling the UIImage to draw, or getting its CGImage and drawing that?
As noted in “Drawing to a Graphics Context on iPhone OS”, UIImages are aware of the difference in co-ordinate spaces and should draw themselves correctly without you having to flip your co-ordinate space yourself.
CGImageRef flip (CGImageRef im) {
CGSize sz = CGSizeMake(CGImageGetWidth(im), CGImageGetHeight(im));
UIGraphicsBeginImageContextWithOptions(sz, NO, 0);
CGContextDrawImage(UIGraphicsGetCurrentContext(),
CGRectMake(0, 0, sz.width, sz.height), im);
CGImageRef result = [UIGraphicsGetImageFromCurrentImageContext() CGImage];
UIGraphicsEndImageContext();
return result;
}
Call the above method using the code below:
This code deals with getting the left half of an image from an existing UIImageview and setting the thus generated image to a new imageview - imgViewleft
CGContextRef con = UIGraphicsGetCurrentContext();
CGContextDrawImage(con,
CGRectMake(0,0,sz.width/2.0,sz.height),
flip(leftReference));
imgViewLeft = [[UIImageView alloc] initWithImage:UIGraphicsGetImageFromCurrentImageContext()];