11

I'd like to make a glowing text that looks like if it was shining or emmitting light. Actually this would be done with some blurryness in the background. But I've found nothing in the iPhone SDK that would do it.

  • If you mean something like this: http://activeden.net/item/xml-text-progressive-light-glow-effect/47740 ...I'm looking for that too. I've downloaded the Flash version, but it uses Flash-specific API calls (specifically a DropShadowFilter and a ColorTransform (with blending) which are not in Quartz as far as I know... – Jeffrey Berthiaume Jan 05 '10 at 21:30

3 Answers3

21

You can do this using pure Quartz drawing. Within -drawRect: for a UIView or -renderInContext: for a CALayer, the following code will draw text and apply a glow around it:

CGContextSetShadowWithColor( context, CGSizeMake( 0.0, 0.0 ), 20.0f, glowColor );   

[text drawAtPoint:CGPointMake(0.5f, 0.5f) withFont:[UIFont fontWithName:@"Helvetica" size:16.0f]];

where text is an NSString, and glowColor is a CGColorRef for the glow you want to apply. This example will draw a glow that extends out 20 pixels from the 16-point Helvetica text, and is centered on the text.

You can easily convert this into a shadow by providing a different displacement (second argument in the first function) and by using a black CGColor for the shadow.

Brad Larson
  • 170,088
  • 45
  • 397
  • 571
  • Sounds good! That's pretty much the way I would try in a vector graphics program. So when I get that right, my text should not be too long because the glow is basically a scaled version of the text, where the most central pixels are above eachother and the most left / right ones differ mostly from their clones underneeth, right? –  Aug 05 '09 at 09:11
  • btw: could this technique also be used to apply glow on any content of an view? afaik a UIView has an cached image as content where an effect could be applied to make everythig appear blurry...i'd say some kind of gaussian algorithm is needed for that. but that's probably a different question. –  Aug 05 '09 at 09:13
  • This should apply a glow to the outline of whatever Quartz vector content you draw after the CGContextSetShadowWithColor() call. For image content, it will probably just do a glow around the borders of the image. To blur content, you'd probably need to draw it as vectors, but leave the stroke color as a completely clear color. That way, only the shadow would show. – Brad Larson Aug 05 '09 at 11:56
  • what is the context variable? how to set it ? – Raptor Dec 28 '09 at 06:57
  • context is the current drawing context, where all drawing operations output their results. Within the -drawRect: method of UIView you can obtain the current context using code like `CGContextRef context = UIGraphicsGetCurrentContext();` For CALayers, -renderInContext: passes in the drawing context to use. – Brad Larson Dec 28 '09 at 15:19
2

How about rendering the text into an initially transparent buffer using the desired glow colour, then apply a blur to it, and then render the text again over the top in the desired text colour.

Then you can draw the buffer wherever it needs to be.

See also the answers to "How do I create blurred text in an iPhone view?" which would suggest Cocoa Touch lacks any built in blur filters. You can write your own of course.

Community
  • 1
  • 1
Paul Dixon
  • 295,876
  • 54
  • 310
  • 348
  • Yes that's a good idea. I thought maybe there's a library that does exactly this. –  Aug 04 '09 at 22:37
2

I created a simple iOS4 project based on answer above from Bard Larson and Cocoanetics on my blog, click here for further info and project source

new2objectivec
  • 21
  • 1