I have an overlay of route to be placed over a map. I have to adjust its rotation so that it overlaps exactly with the underlying map view. How can I achieve this? I have found the angle to rotate. How can I rotate my overlay view? Far till now I have added the overlay but can't rotate using transforms. What I noticed is that when I change the angle, the image is not rotating, instead it slides along x axis(side ways).
Here is the code that I tried
- (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context
{
NSString *imagePath = [[NSBundle mainBundle] pathForResource:#"routeImage" ofType:#"png"];
UIImage *image = [[UIImage alloc] initWithContentsOfFile:imagePath];
MKMapRect theMapRect = self.overlay.boundingMapRect;
CGRect theRect = [self rectForMapRect:theMapRect];
CGAffineTransform transform = CGAffineTransformMakeRotation((-35.88) / 180.0 * M_PI);
[self setTransform:transform];
CGContextSaveGState(context);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextTranslateCTM(context, 0.0, -theRect.size.height);
CGContextDrawImage(context, theRect,image.CGImage);
CGContextRestoreGState(context);
}
This is what I get
I have a workaround in which I manually rotate the image using GIMP and place it. But I need it to be customized.
This is the image transformed using GIMP and when placed on map as overlay
and this is when I rotate Context using transform [note: while rotating the context the image is rotated but is not at the exact location See image. Also the image breaks on zooming]
This is what I did
//Hayl-Road-Final.png is the actual image without transformation using GIMP
UIImage *image = [[UIImage imageNamed:#"Hayl-Road-Final.png"] retain];
CGImageRef imageReference = image.CGImage;
MKMapRect theMapRect = [self.overlay boundingMapRect];
CGRect theRect = [self rectForMapRect:theMapRect];
// We need to flip and reposition the image here
CGContextScaleCTM(ctx, 1.0, -1.0);
CGContextTranslateCTM(ctx, 0.0, -theRect.size.height);
CGContextRotateCTM(ctx,-35.88);
//drawing the image to the context
CGContextDrawImage(ctx, theRect, imageReference);
Try adding this method:
- (UIImage *) rotate: (UIImage *) image angle:(double)
{
//double angle = 20;
CGSize s = {image.size.width, image.size.height};
UIGraphicsBeginImageContext(s);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(ctx, 0,image.size.height);
CGContextScaleCTM(ctx, 1.0, -1.0);
CGContextRotateCTM(ctx, 2*M_PI*angle/360);
CGContextDrawImage(ctx,CGRectMake(0,0,image.size.width, image.size.height),image.CGImage);
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
From your code, you change order of two line. It will be ok:
CGContextScaleCTM(ctx, 1.0, -1.0);
CGContextRotateCTM(ctx,-35.88);
CGContextTranslateCTM(ctx, 0.0, -theRect.size.height);
CGContextDrawImage(ctx, theRect, imageReference);
It is correct with me, please try
Related
Help, Im new to ios programming, I want to rotate may UIImage but I dont want the edges to be cut or loose some part of the image.
this is my code:
double angle = M_PI * 10/ 180; CGSize s = {image.size.width, image.size.height}; UIGraphicsBeginImageContext(s); CGContextRef ctx = UIGraphicsGetCurrentContext();
CGAffineTransform transform = CGAffineTransformIdentity;
transform = CGAffineTransformTranslate(transform, image.size.width/2, image.size.height/2);
transform = CGAffineTransformRotate(transform, angle);
transform = CGAffineTransformScale(transform, 1.0, -1.0);
CGContextConcatCTM(ctx, transform);
CGContextDrawImage(ctx,CGRectMake(-[image size].width/2,-[image size].height/2,image.size.width, image.size.height),image.CGImage);
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageWriteToSavedPhotosAlbum(newImage, nil, nil, nil);
The image is rotating but the size of the frame does not change because of that some of the image has been cut.
OUTPUT:https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-xpf1/t1.0-9/1555286_761679470521535_1800180000235265553_n.jpg
EXPECTED OUTPUT: https://fbcdn-photos-g-a.akamaihd.net/hphotos-ak-xfa1/t1.0-0/10314770_761675840521898_6536715783383115855_a.jpg
Please help me thank you.
This might be what you are searching for.
Just copy the following code at the end of the .m file (after the #end) in which you want to rotate an image.
#interface UIImage (RotationMethods)
- (UIImage *)imageRotatedByDegrees:(CGFloat)degrees;
#end
#implementation UIImage (RotationMethods)
static CGFloat DegreesToRadians(CGFloat degrees) {return degrees * M_PI / 180;};
- (UIImage *)imageRotatedByDegrees:(CGFloat)degrees
{
// calculate the size of the rotated view's containing box for our drawing space
UIView *rotatedViewBox = [[UIView alloc] initWithFrame:CGRectMake(0,0,self.size.width, self.size.height)];
CGAffineTransform t = CGAffineTransformMakeRotation(DegreesToRadians(degrees));
rotatedViewBox.transform = t;
CGSize rotatedSize = rotatedViewBox.frame.size;
// Create the bitmap context
UIGraphicsBeginImageContext(rotatedSize);
CGContextRef bitmap = UIGraphicsGetCurrentContext();
// Move the origin to the middle of the image so we will rotate and scale around the center.
CGContextTranslateCTM(bitmap, rotatedSize.width/2, rotatedSize.height/2);
// // Rotate the image context
CGContextRotateCTM(bitmap, DegreesToRadians(degrees));
// Now, draw the rotated/scaled image into the context
CGContextScaleCTM(bitmap, 1.0, -1.0);
CGContextDrawImage(bitmap, CGRectMake(-self.size.width / 2, -self.size.height / 2, self.size.width, self.size.height), [self CGImage]);
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
Then rotate your image like in the example below:
CGFloat degrees = 90;
yourImage = [yourImage imageRotatedByDegrees:degrees];
Iam applying transformations to the UIImageView(Rotate, scale and invert) and I want to save the UIImage from rotated UIImageView. So How can I get the exact bounding box of the UIImage to draw the UIImage View.
CGAffineTransform transform = selImageView.transform;
CGPathRef rotatedImageRectPath = CGPathCreateWithRect(selImageView.frame, &transform);
CGRect boundingBox = CGPathGetBoundingBox(rotatedImageRectPath);
CGSize rotatedSize = boundingBox.size;
UIGraphicsBeginImageContextWithOptions(rotatedSize, NO, 0.0f);
// Move the origin to the middle of the image so we will rotate and scale around the center.
CGContextTranslateCTM(UIGraphicsGetCurrentContext(), rotatedSize.width/2, rotatedSize.height/2);
// CGContextSetFillColorWithColor(UIGraphicsGetCurrentContex(),[UIColor clearColor].CGColor);
//Rotate the image context using tranform
CGContextConcatCTM(UIGraphicsGetCurrentContext(), selImageView.transform);
// Now, draw the rotated/scaled image into the context
CGContextScaleCTM(UIGraphicsGetCurrentContext(), 1.0, -1.0);
CGContextDrawImage(UIGraphicsGetCurrentContext(), CGRectMake(-aTransImage.size.width / 2, -aTransImage.size.height / 2, aTransImage.size.width, aTransImage.size.height), [aTransImage CGImage]);
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
Check out this app. It does most of the task you are trying to perform. you can analyze the code for working.
https://github.com/heitorfr/ios-image-editor
I have a custom MKOverlay and MKOverlayView. When the MKOverlayView is created, I can set the alpha of the view:
-(void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context {
DatasetOverlay *datasetOverlay = (DatasetOverlay *)self.overlay;
UIImage *image = [UIImage imageWithData:datasetOverlay.imageData];
CGImageRef imageReference = image.CGImage;
MKMapRect theMapRect = [self.overlay boundingMapRect];
CGRect theRect = [self rectForMapRect:theMapRect];
CGContextScaleCTM(context, 1.0, -1.0);
CGContextTranslateCTM(context, 0.0, -theRect.size.height);
CGContextSetAlpha(context, 1);
CGContextDrawImage(context, theRect, imageReference);
}
But I want to be able to change the alpha of the view after its draw.
How can I do that?
I am have not worked much with Core Graphics yet.
-(void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context {
DLog(#"Fired");
DatasetOverlay *datasetOverlay = (DatasetOverlay *)self.overlay;
UIImage *image = [UIImage imageWithData:datasetOverlay.imageData];
CGImageRef imageReference = image.CGImage;
MKMapRect theMapRect = [self.overlay boundingMapRect];
CGRect theRect = [self rectForMapRect:theMapRect];
CGContextScaleCTM(context, 1.0, -1.0);
CGContextTranslateCTM(context, 0.0, -theRect.size.height);
// CGContextSetAlpha(context, 1);
CGContextDrawImage(context, theRect, imageReference);
}
K, thanks to #ttarules's comment, I did some testing and realized I needed to remove the CGContextSetAlpha() and just set the alpha with the MKOverlayView's alpha property. I can now change the alpha outside of initialization and give me what I need.
I have a couple of questions.
I have a loaded UIImage and i would like to:
1st - draw another image onto my loaded UIImage
2nd - draw a line (with color and thickness) onto my loaded UIImage
I would greatly appreciate if you would come up with some basic stuff, i'm still a noob :)
There's another alternative and it comes using core-graphics.
UIGraphicsBeginImageContextWithOptions(size, NO, 0.0);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
UIImage *bottomImage = ...;
CGRect bottomImageRect = ...;
CGContextScaleCTM(context, 1.0, -1.0);
CGContextTranslateCTM(context, 0, -bottomImageRect.size.height);
CGContextDrawImage(context, bottomImageRect, bottomImage.CGImage);
CGContextRestoreGState(context);
CGContextSaveGState(context);
UIImage *topImage = ...;
CGRect topImageRect = ...;
CGContextScaleCTM(context, 1.0, -1.0);
CGContextTranslateCTM(context, 0, -topImageRect.size.height);
CGContextDrawImage(context, topImageRect, topImage.CGImage);
CGContextRestoreGState(context);
CGPoint origin = ...;
CGPoint end = ...;
CGContextMoveToPoint(context, origin.x, origin.y);
CGContextAddLineToPoint(context, end.x, end.y);
CGContextSetStrokeColorWithColor(context, [UIColor whatever].CGColor);
CGContextStrokePath(context);
UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
EDIT:
Changed the code a little so that images are not inverted
I want to rotate a UIImageView with the press of a button. I am using this code:
#import "UIImage-Extensions.h"
UIImage *rotatedImage = [SplashItGroupPicker.image imageRotatedByDegrees:360/arrayCount];
SplashItGroupPicker.image = rotatedImage;
and in "UIImage-Extensions.h" i have:
#interface UIImage (CS_Extensions)
- (UIImage *)imageRotatedByRadians:(CGFloat)radians;
- (UIImage *)imageRotatedByDegrees:(CGFloat)degrees;
and in the .m:
- (UIImage *)imageRotatedByRadians:(CGFloat)radians
{
return [self imageRotatedByDegrees:RadiansToDegrees(radians)];
}
- (UIImage *)imageRotatedByDegrees:(CGFloat)degrees
{
// calculate the size of the rotated view's containing box for our drawing space
UIView *rotatedViewBox = [[UIView alloc] initWithFrame:CGRectMake(0,0,self.size.width, self.size.height)];
CGAffineTransform t = CGAffineTransformMakeRotation(DegreesToRadians(degrees));
rotatedViewBox.transform = t;
CGSize rotatedSize = rotatedViewBox.frame.size;
// Create the bitmap context
UIGraphicsBeginImageContext(rotatedSize);
CGContextRef bitmap = UIGraphicsGetCurrentContext();
// Move the origin to the middle of the image so we will rotate and scale around the center.
CGContextTranslateCTM(bitmap, rotatedSize.width/2, rotatedSize.height/2);
// // Rotate the image context
CGContextRotateCTM(bitmap, DegreesToRadians(degrees));
// Now, draw the rotated/scaled image into the context
CGContextScaleCTM(bitmap, 1.0, -1.0);
CGContextDrawImage(bitmap, CGRectMake(-self.size.width / 2, -self.size.height / 2, self.size.width, self.size.height), [self CGImage]);
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
...the rotation works fine, but when the image is rotated, the image also gets smaller and I can't understand why. Any ideas?
Here's a guess, is this only happening on Retina screens? Whenever saving a UIImage from a graphics context, you need to make sure the scale is correct. This is how I have done it:
CGFloat scale = [[UIScreen mainScreen] scale];
CGSize size = CGSizeMake(rotatedViewBox.frame.size.width * scale, rotatedViewBox.frame.size.height * scale);
UIGraphicsBeginImageContext( size );
/* Do your image manipulations here */
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// overwrite the image with one that has the correct scale set
newImage = [UIImage imageWithCGImage:newImage.CGImage scale:scale orientation:newImage.imageOrientation];
Using Kekoa's snippet (thanks a ton), I was able to get a working rotateImage function that works on retina devices based on Apples rotateImage code:
- (UIImage *)imageRotatedByDegrees:(CGFloat)degrees {
CGFloat radians = DegreesToRadians(degrees);
UIView *rotatedViewBox = [[UIView alloc] initWithFrame:CGRectMake(0,0, self.size.width, self.size.height)];
CGAffineTransform t = CGAffineTransformMakeRotation(radians);
rotatedViewBox.transform = t;
CGSize rotatedSize = rotatedViewBox.frame.size;
UIGraphicsBeginImageContextWithOptions(rotatedSize, NO, [[UIScreen mainScreen] scale]);
CGContextRef bitmap = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(bitmap, rotatedSize.width / 2, rotatedSize.height / 2);
CGContextRotateCTM(bitmap, radians);
CGContextScaleCTM(bitmap, 1.0, -1.0);
CGContextDrawImage(bitmap, CGRectMake(-self.size.width / 2, -self.size.height / 2 , self.size.width, self.size.height), self.CGImage );
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
There is no need to UIGraphicsGetImageFromCurrentImageContext. its a way to get screenshot of desired portion of mainscreen. so the result image quality affected. the only way to get Rotated Image is...
first rotate your image view by(if you want to show rotated view)
[mainImgV setTransform:CGAffineTransformRotate(mainImgV.transform, M_PI)];
it will rotate your imageview.
now you will take this rotated image by these lines.(you can call these lines without rotate imgaeview also.)
CGImageRef cgRef = mainImgV.image.CGImage;
newImage = [[UIImage alloc] initWithCGImage:cgRef scale:1.0 orientation:UIImageOrientationDown];
there is no need to save or take screenshot or compromise bad quality image. just enjoy coding.