I can't achieve drawing some white text on a black view using CGContext in a drawRect method.
I do :
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);
CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
CGContextSetLineWidth(context, 1.0);
CGContextSelectFont(context, "Helvetica", 20, kCGEncodingMacRoman);
CGContextSetTextDrawingMode(context, kCGTextFill);
CGPoint center = self.center;
And then...
Impossible to find the correct method.
I've tried this :
UIFont* font = [UIFont fontWithName:#"Geneva" size:12.0];
[#"Some text" drawAtPoint:center withFont:font];
But it does not work.
I don't find any CGContext method for that. Where is it hidden ?
How may I draw that text in white ?
Ok after a couple of hours and reading the Quartz 2D programming guide I discovered that you also have to set the FILL color, not just the STROKE color. So the follow code works.
CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);
CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
I needed to show chart labels on a darkGray border. Now the labels appear in white.
This will draw a string in white in a black rectangle
NSString *text = #"Some text";
CGPoint center = CGPointMake(100, 200);
UIFont *font = [UIFont systemFontOfSize:14];
CGSize stringSize = [text sizeWithFont:font];
CGRect stringRect = CGRectMake(center.x-stringSize.width/2, center.y-stringSize.height/2, stringSize.width, stringSize.height);
[[UIColor blackColor] set];
CGContextFillRect(context, stringRect);
[[UIColor whiteColor] set];
[text drawInRect:stringRect withFont:font];
On shorter example try using [[UIColor whiteColor] set] before the drawAtPoint: call.
Works with :
CGContextShowTextAtPoint (context, center.x, center.y, "Some text", strlen("Some text"));
But still need some transformations to be displayed not mirrored :-)
This will work with this code :
NSString *text = #"Some text";
UIFont *font = [UIFont systemFontOfSize:14];
[ text drawAtPoint:CGPointMake( 0, 0 ) withAttributes:#{ NSFontAttributeName:font, NSForegroundColorAttributeName : UIColor.redColor } ];
Related
I am trying to do this:
so I am using this code:
[self.lblRound setOutlineColor:[UIColor colorWithRed:(68/255.0) green:(82/255.0) blue:(120/255.0) alpha:1]];
self.lblRound.drawOutline = YES;
but this is what i get:
I also did try this code:
lblRound.shadowColor = [UIColor colorWithRed:(68/255.0) green:(82/255.0) blue:(120/255.0) alpha:1];
lblRound.shadowOffset = CGSizeMake(0, 0);
I also did try to make another label with the needed color and to draw it behind the text, but if I am playing with the size of the text, it influence on the width of the all text.
How can I make the stroke thicker?
I can't use an image because I have a number in this text that should be variable.
Thanks
This is the solution:
- (void)drawRect:(CGRect)rect
{
UIFont *font=[UIFont fontWithName:#"VAGRoundedStd-Bold" size:40];
CGContextRef context = UIGraphicsGetCurrentContext();
string = lblRoundnumber;
CGSize fontWidth = [string sizeWithFont:font];
CGRect tempRect=rect;
tempRect.origin.x +=160-(fontWidth.width/2);
tempRect.origin.y +=high+42;
CGContextSetRGBStrokeColor(context, 68/255.0f, 82/255.0f, 120/255.0f, 1/1.0f);
CGContextSetRGBFillColor(context, 68/255.0f, 82/255.0f, 120/255.0f, 1/1.0f);
CGContextSetTextDrawingMode(context, kCGTextStroke);
CGContextSetLineWidth(context, 11);
[string drawInRect:tempRect withFont:font];
CGContextSetRGBFillColor(context, 1,1,1,1);
CGContextSetTextDrawingMode(context, kCGTextFill);
[string drawInRect:tempRect withFont:font];
}
I'm writing text onto an image like so:
-(UIImage *)addLabelToImage:(UIImage *)img
{
UIFont *font = [UIFont boldSystemFontOfSize:20];
UIGraphicsBeginImageContext(img.size);
[img drawInRect:CGRectMake(0, 0,img.size.width,img.size.height)];
CGRect rect = CGRectMake(60, 550, img.size.width, img.size.height);
[[UIColor whiteColor] set];
[[NSString stringWithFormat:#"%#, %#", [[NSUserDefaults standardUserDefaults] valueForKey:#"whatever"], [[NSUserDefaults standardUserDefaults] valueForKey:#"whatever2"]] drawInRect:CGRectIntegral(rect) withFont:font];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
How would I add a drop shadow to this text? I know I can just redraw the text in black shifted over a few pixels, but is there an easier way?
Cheers,
George
Before you draw your text, you can set a shadow like this:
//...
CGContextRef c = UIGraphicsGetCurrentContext();
CGSize offset = CGSizeMake(0, 1);
CGFloat blur = 2.0;
UIColor *shadowColor = [UIColor blackColor];
CGContextSetShadowWithColor(c, offset, blur, [shadowColor CGColor]);
//draw your text ...
Adjust the offset, blur and shadowColor parameters as needed to achieve the effect you want. For a sharp shadow (like on a UILabel), set blur to 0.
I need the label as
I created one label subclass.Where I write the code as,
- (void)drawRect:(CGRect)rect
{
[super drawRect:rect];
UIColor * textColor = [UIColor colorWithRed:57.0/255.0 green:100.0/255.0 blue:154.0/255.0 alpha:1.0];
CGContextRef c = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(c, 3.5);
CGContextSetLineJoin(c, kCGLineJoinRound);
CGContextSetTextDrawingMode(c, kCGTextFillStroke);;
self.textColor = [UIColor whiteColor];
[super drawTextInRect:rect];
CGContextSetTextDrawingMode(c, kCGTextFill);
self.textColor = textColor;
// self.shadowColor = [UIColor colorWithRed:11.0/255.0 green:63.0/255.0 blue:126.0/255.0 alpha:1.0];
//self.shadowOffset = CGSizeMake(0.5, -0.5);
[super drawTextInRect:rect];
}
By this I am getting the blue color text and white outline to that text.But I need to get the dark blue color shade. How can I do this?
Please help me.
You should probably have a look at the CGContextSetShadowWithColor method.
CGContextSetShadowWithColor (
context,
shadowSize,
shadowBlur,
color
);
I found an article that could help you on this website : http://majicjungle.com/blog/191/
EDIT
The following code works:
- (void)drawRect:(CGRect)rect
{
UIColor * textColor = [UIColor colorWithRed:57.0/255.0 green:100.0/255.0 blue:154.0/255.0 alpha:1.0];
CGContextRef c = UIGraphicsGetCurrentContext();
//save the context before add shadow otherwise the shadow will appear for both stroke and fill
CGContextSaveGState(c);
//this is where I add the shadow, and it works
CGContextSetShadowWithColor(c, CGSizeMake(2, 2), 3, [[UIColor grayColor] CGColor]);
CGContextSetLineWidth(c, 3.5);
CGContextSetLineJoin(c, kCGLineJoinRound);
CGContextSetTextDrawingMode(c, kCGTextStroke);;
self.textColor = [UIColor whiteColor];
[super drawTextInRect:rect];
//restore the context to clear the shadow
CGContextRestoreGState(c);
CGContextSetTextDrawingMode(c, kCGTextFill);
self.textColor = textColor;
[super drawTextInRect:rect];
}
Have you tried using the standard quartz properties like:
label.layer.shadowColor
label.layer.shadowOffset
(you need the QuartzCore framework in your project and to import the header).
I have a custom UITableView cell that sports an Image, and a headline. I used the fast scrolling example of ABTableViewCell from atebits.
It seems when I select the first row (which is my row with the largest image) it takes a considerable amoun of time to highlight the row, and then push the new view controller.
However when I select any of the other rows, with much smaller images, its almost instant.
Ive attempted to draw the picture using CGContextDrawImage and drawInRect but both yield the same results.
- (void)drawContentView:(CGRect)r highlighted:(BOOL)highlighted {
if ([type isEqualToString:#"first"]) {
CGContextRef context = UIGraphicsGetCurrentContext();
UIColor *backgroundColor = [UIColor blackColor];
UIColor *textColor = [UIColor whiteColor];
UIColor *textBackgroundColor = [[UIColor alloc] initWithWhite:0 alpha:.5];
UIColor *highlightColor;
if (highlighted) {
backgroundColor = [UIColor clearColor];
textColor = [UIColor blueColor];
highlightColor = [[UIColor alloc] initWithWhite:0 alpha:.3];
} else {
highlightColor = [UIColor clearColor];
}
[backgroundColor set];
CGContextFillRect(context, r);
[self.picture drawInRect:CGRectMake(0.0, 0.0, 320, 225)];
[textBackgroundColor set];
CGContextFillRect(context, CGRectMake(0, 170, 320, 55));
[textColor set];
[self.title drawInRect:CGRectMake(5, 170, 320, 55) withFont:firstHeadlineFont lineBreakMode:UILineBreakModeWordWrap];
[highlightColor set];
CGContextFillRect(context, r);
} else {
CGContextRef context = UIGraphicsGetCurrentContext();
UIColor *backgroundColor = [UIColor blackColor];
UIColor *textColor = [UIColor blueColor];
if (highlighted) {
backgroundColor = [UIColor clearColor];
textColor = [UIColor whiteColor];
}
[backgroundColor set];
CGContextFillRect(context, r);
CGPoint p;
p.x = 0;
p.y = 0;
[self.picture drawInRect:CGRectMake(0.0, 0.0, 44, 44)];
[textColor set];
p.x += 44 + 6; // space between words
[self.title drawAtPoint:p withFont:[UIFont systemFontOfSize:20]];
}
}
EDIT:
IS there anything I can do to speed this up? I am caching the image and reading it as well.
I realized I was using a very very large version of the image for my first row, I was able to scale it down before I pulled it from the webserver and this vastly improved performance. NOTE: double check your dimensions are not huge. IE: 2184x1456 hahah
is it possible to create such a UILabel with inner and outer shadow?
alt text http://dl.getdropbox.com/u/80699/Bildschirmfoto%202010-07-12%20um%2021.28.57.png
i only know shadowColor and shadowOffset
zoomed:
alt text http://dl.getdropbox.com/u/80699/Bildschirmfoto%202010-07-12%20um%2021.39.56.png
thanks!
The answer by dmaclach is only suitable for shapes that can easily be inverted. My solution is a custom view that works with any shape and also text. It requires iOS 4 and is resolution independent.
First, a graphical explanation of what the code does. The shape here is a circle.
The code draws text with a white dropshadow. If it's not required, the code could be refactored further, because the dropshadow needs to be masked differently. If you need it on an older version of iOS, you would have to replace the block and use an (annoying) CGBitmapContext.
- (UIImage*)blackSquareOfSize:(CGSize)size {
UIGraphicsBeginImageContextWithOptions(size, NO, 0);
[[UIColor blackColor] setFill];
CGContextFillRect(UIGraphicsGetCurrentContext(), CGRectMake(0, 0, size.width, size.height));
UIImage *blackSquare = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return blackSquare;
}
- (CGImageRef)createMaskWithSize:(CGSize)size shape:(void (^)(void))block {
UIGraphicsBeginImageContextWithOptions(size, NO, 0);
block();
CGImageRef shape = [UIGraphicsGetImageFromCurrentImageContext() CGImage];
UIGraphicsEndImageContext();
CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(shape),
CGImageGetHeight(shape),
CGImageGetBitsPerComponent(shape),
CGImageGetBitsPerPixel(shape),
CGImageGetBytesPerRow(shape),
CGImageGetDataProvider(shape), NULL, false);
return mask;
}
- (void)drawRect:(CGRect)rect {
UIFont *font = [UIFont fontWithName:#"HelveticaNeue-Bold" size:40.0f];
CGSize fontSize = [text_ sizeWithFont:font];
CGImageRef mask = [self createMaskWithSize:rect.size shape:^{
[[UIColor blackColor] setFill];
CGContextFillRect(UIGraphicsGetCurrentContext(), rect);
[[UIColor whiteColor] setFill];
// custom shape goes here
[text_ drawAtPoint:CGPointMake((self.bounds.size.width/2)-(fontSize.width/2), 0) withFont:font];
[text_ drawAtPoint:CGPointMake((self.bounds.size.width/2)-(fontSize.width/2), -1) withFont:font];
}];
CGImageRef cutoutRef = CGImageCreateWithMask([self blackSquareOfSize:rect.size].CGImage, mask);
CGImageRelease(mask);
UIImage *cutout = [UIImage imageWithCGImage:cutoutRef scale:[[UIScreen mainScreen] scale] orientation:UIImageOrientationUp];
CGImageRelease(cutoutRef);
CGImageRef shadedMask = [self createMaskWithSize:rect.size shape:^{
[[UIColor whiteColor] setFill];
CGContextFillRect(UIGraphicsGetCurrentContext(), rect);
CGContextSetShadowWithColor(UIGraphicsGetCurrentContext(), CGSizeMake(0, 1), 1.0f, [[UIColor colorWithWhite:0.0 alpha:0.5] CGColor]);
[cutout drawAtPoint:CGPointZero];
}];
// create negative image
UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0);
[[UIColor blackColor] setFill];
// custom shape goes here
[text_ drawAtPoint:CGPointMake((self.bounds.size.width/2)-(fontSize.width/2), -1) withFont:font];
UIImage *negative = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CGImageRef innerShadowRef = CGImageCreateWithMask(negative.CGImage, shadedMask);
CGImageRelease(shadedMask);
UIImage *innerShadow = [UIImage imageWithCGImage:innerShadowRef scale:[[UIScreen mainScreen] scale] orientation:UIImageOrientationUp];
CGImageRelease(innerShadowRef);
// draw actual image
[[UIColor whiteColor] setFill];
[text_ drawAtPoint:CGPointMake((self.bounds.size.width/2)-(fontSize.width/2), -0.5) withFont:font];
[[UIColor colorWithWhite:0.76 alpha:1.0] setFill];
[text_ drawAtPoint:CGPointMake((self.bounds.size.width/2)-(fontSize.width/2), -1) withFont:font];
// finally apply shadow
[innerShadow drawAtPoint:CGPointZero];
}
Although Steve's answer does work, it didn't scale to my particular case and so I ended up creating an inner shadow by applying a shadow to a CGPath after clipping my context:
CGContextRef context = UIGraphicsGetCurrentContext();
// clip context so shadow only shows on the inside
CGPathRef roundedRect = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:4].CGPath;
CGContextAddPath(context, roundedRect);
CGContextClip(context);
CGContextAddPath(context, roundedRect);
CGContextSetShadowWithColor(UIGraphicsGetCurrentContext(), CGSizeMake(0, 0), 3, [UIColor colorWithWhite:0 alpha:1].CGColor);
CGContextSetStrokeColorWithColor(context, [UIColor colorWithWhite:0 alpha:1].CGColor);
CGContextStrokePath(context);
Which results in:
You can change the shadow offset and blur to change the shadow style. If you need it to be darker, you can also successively add and then stroke the same CGPath, which will make the shadows pile up.
I use FXLabel for inner shadow, look here https://github.com/nicklockwood/FXLabel.
Yes, I have a blog post about it here. The short answer is to borrow the JTAInnerShadowLayer from here, subclass UILabel, and change its layerclass by overriding + (Class)layerClass so that it returns JTAInnerShadowLayer class like this:
+ (Class)layerClass
{
return [JTAInnerShadowLayer class];
}
Then in the init method for the layer set up the JTAInnerShadowLayer something like this:
[self setBackgroundColor:[UIColor clearColor]];
JTAInnerShadowLayer *innerShadow = (JTAInnerShadowLayer *)[self layer];
[innerShadow setClipForAnyAlpha:YES];
[innerShadow setOutsideShadowSize:CGSizeMake(0.0, 1.0) radius:1.0];
[innerShadow setInsideShadowSize:CGSizeMake (0.0, 4.0) radius:6.0];
/* Uncomment this to make the label also draw the text (won't work well
with black text!*/
//[innerShadow drawOriginalImage];
(or just borrow the JTAIndentLabel class).
You will have to do your own custom drawing to get an inner shadow. There's no way currently to do it with a standard UILabel.
Here's a reasonable explanation on doing inner shadow with Quartz.
Inner shadow in Core Graphics
Try PaintCode trial version! For beginners, you'll learn how to create custom drawings. It's very nice! :3 You can use it for practice or for learning, but don't use it all the time, you should also learn how to create drawings on your own.
Disclaimer: I'm not an endorser, I was just amazed by my discovery. ;)