I want to rotate my NSString that's at a set location so that it reads from bottom to up.
I know the issue lies in the CGContextTranslateCTM, but I'm not sure how to fix it. If I comment this line, I see my text where I want it, just not rotated. This must be moving my NSString to where it is not visible.
Thoughts?
Here's what I have tried:
NSString * xString = [NSString stringWithFormat:#"%#", self.xStringValue];
CGContextSetFillColorWithColor(UIGraphicsGetCurrentContext(), [[UIColor blackColor] CGColor]);
CGContextSaveGState(UIGraphicsGetCurrentContext());
CGContextTranslateCTM(UIGraphicsGetCurrentContext(), 0, 0);
CGContextRotateCTM(UIGraphicsGetCurrentContext(), M_PI/2);
[xString drawInRect:(CGRectMake(x, y, width, height) withFont:self.Font];
CGContextRestoreGState(UIGraphicsGetCurrentContext());
EDIT:
The code above is drawing my NSString values, but they are being positioned off screen where I can not see them.
This code is actually getting them on screen, just not in the right place.
X and Y are both calculated distances.
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGAffineTransform transform = CGAffineTransformMakeRotation(-90.0 * M_PI/180.0);
CGContextConcatCTM(context, transform);
CGContextTranslateCTM(context, -rect.size.height-x, rect.size.height-y);
CGContextSetFillColorWithColor(UIGraphicsGetCurrentContext(), [[UIColor blackColor] CGColor]);
[xString drawInRect:CGRectMake(x, y, w, h) withFont:self.textFont];
CGContextRestoreGState(context);
}
EDIT THREE:
Solution:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGContextTranslateCTM(context, point.x, point.y);
CGAffineTransform textTransform = CGAffineTransformMakeRotation(-1.57);
CGContextConcatCTM(context, textTransform);
CGContextTranslateCTM(context, -point.x, -point.y);
CGContextSetFillColorWithColor(UIGraphicsGetCurrentContext(), [[UIColor whiteColor] CGColor]);
[string drawInRect:CGRectMake(x, y, width, height) withFont:font];
CGContextRestoreGState(context);
If you want to rotate a UILabel vertically (90°) you can do :
[_myLabel setTransform:CGAffineTransformMakeRotation(-M_PI / 2)];
The result for a UILabel :
Related
I want create image using CGcontext. This is simple image with white or black background. also I want to add transperent part which is in circle ( check attached image). I know how to do this in rect. But i want to make it circle. Please anyone help me in this.
Use the below code to clear circle in your context
-(UIImage *) getImageWithcenterClear:(CGPoint) center{
CGRect frame = [[UIScreen mainScreen] bounds];
UIGraphicsBeginImageContextWithOptions([[UIScreen mainScreen] bounds].size,
NO, [UIScreen mainScreen].scale);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [[UIColor colorWithRed:0 green:0 blue:0 alpha:0.5 ] CGColor]);
CGContextFillRect(context, frame);
float radius = 50 * 2;
// Clear Circle
CGContextSetFillColorWithColor(context, [UIColor clearColor].CGColor);
CGContextSetBlendMode(context, kCGBlendModeClear);
CGContextAddArc(context, center.x, center.y, radius - 0.54, 0, 2 * M_PI, 0);
CGContextDrawPath(context, kCGPathFill);
CGContextSetBlendMode(context, kCGBlendModeNormal);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
I want to draw a delete button just like the delete app button on home screen like below code.
The idea is draw the cross first, and then rotate 45 degree. What's wrong with my code?
self.deleteButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, BADGE_SIZE, BADGE_SIZE)];
if (!deleteBtnImg) {
CGRect imgFrame = self.deleteButton.bounds;
UIGraphicsBeginImageContextWithOptions(imgFrame.size, NO, 0.0);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGFloat size = MIN(imgFrame.size.width, imgFrame.size.height);
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(imgFrame.size.width/2, imgFrame.size.height/2)
radius:size/2-RADIUS_MARGIN
startAngle:0
endAngle:M_PI * 2
clockwise:YES];
[path moveToPoint:CGPointMake(size / 2, 0)];
[path addLineToPoint:CGPointMake(size / 2, size)];
[path moveToPoint:CGPointMake(0, size / 2)];
[path addLineToPoint:CGPointMake(size, size / 2)];
[[UIColor whiteColor] setFill];
[[UIColor redColor] setStroke];
[path setLineWidth:1.0];
[path fill];
[path stroke];
CGContextRotateCTM(context, M_PI/4);
deleteBtnImg = UIGraphicsGetImageFromCurrentImageContext();
CGContextRestoreGState(context);
UIGraphicsEndImageContext();
}
[self.deleteButton setImage:deleteBtnImg forState:UIControlStateNormal];
You have to rotate the context before start drawing. However even if you rotate before drawing. The image still does not look right. It is because when you rotate the context, the context is actually rotating around it's origin point which is (0,0) or the bottom-left corner (The CoreGraphic's coordinate system is a bit different from UI's). So what you could do is, before rotation, translate the context so that it will rotate around its center, and then move it back after rotation. Here is a quick example:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGFloat size = MIN(imgFrame.size.width, imgFrame.size.height);
CGContextTranslateCTM(context, size / 2, size / 2);
CGContextRotateCTM(context, M_PI_4);
CGContextTranslateCTM(context, -size / 2, -size / 2);
// Start your drawing code
I am drawing a simple filled circle using following code in draw rect.
CGContextRef con = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(con, CGRectMake(0,0,self.bounds.size.width,self.bounds.size.height));
CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor);
CGContextFillPath(con);
it draws a circle properly. Now I want to clip the circle with another small circle in the middle so that it becomes a hollow circle and you can see whatever is behind the main circle. How can i do that?
Use the even-odd rule with CGContextEOClip()
CGSize size = rect.size;
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, 0, 0);
CGContextSaveGState(context);
CGContextAddPath(context, ([UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, size.width, size.height)].CGPath));
CGContextAddPath(context, ([UIBezierPath bezierPathWithOvalInRect:CGRectMake(size.width/4, size.height/4, size.width/2, size.height/2)].CGPath));
CGContextEOClip(context); //clip
CGContextAddPath(context, [UIBezierPath bezierPathWithRect:rect].CGPath);
CGContextSetFillColorWithColor(context, [UIColor greenColor].CGColor);
CGContextFillPath(context);
CGContextRestoreGState(context);
I was able to do that using the EO rule.
CGContextRef con = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(con, rect);
CGContextAddEllipseInRect(con, CGRectInset(rect, 40, 40));
CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor);
CGContextEOFillPath(con);
I am using following context in UIView's extended class's drawrect method to draw Paths and Strings.
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextScaleCTM(context, 1, -1);
CGContextTranslateCTM(context, 0, -rect.size.height);
To Draw Path I use
CGContextSetRGBStrokeColor(context, 0, 0, 0, 1.0f);
CGContextSetLineWidth(context, 1);
CGContextBeginPath(context);
CGContextMoveToPoint(context, origin.x, origin.y);
CGContextAddLineToPoint(context, currentX, origin.y);
......
CGContextStrokePath(context);
To Draw text I use
CGContextSetLineWidth(context, 2.0);
[self.title drawInRect:CGRectMake(100, 100, 200, 40) withFont:font];
I get paths correctly but Text gets up side down! If I remove CGContextScaleCTM and CGContextTranslateCTM I get path up side down! Can someone help me to resolve this please.
Save your previous context before drawing your path and restore it afterward:
CGContextRef context = UIGraphicsGetCurrentContext();
// save the original context
CGContextSaveGState(context);
CGContextScaleCTM(context, 1, -1);
CGContextTranslateCTM(context, 0, -rect.size.height);
// draw path
// restore the context
CGContextRestoreGState();
// draw text
That should do it.
I end up writting following code. May help someone!
- (void)drawText:(NSString*)text context:(CGContextRef)context rect:(CGRect)rect verticle:(BOOL)verticle {
CGAffineTransform translate = CGAffineTransformMakeTranslation(0, -rect.size.height);
CGAffineTransform transform = translate;
if(verticle) {
CGAffineTransform rotation = CGAffineTransformMakeRotation(M_PI/2);
transform = CGAffineTransformConcat(translate, rotation);
}
CGContextSetTextMatrix(context, transform);
CGContextShowTextAtPoint(context, rect.origin.x, rect.origin.y, [text UTF8String], text.length);
}
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