Adding a glowing effect to the circle

Question

I draw a circle in the drawRect method and fill it with color. Now I need to add a glowing effect to the circle. When I press the button, the circle should glow. How can i do this? Any help would be greatly appreciated!

Thanks in advance!

Answer 1

If you are using Quartz 2D, you can simply add a white shadow to the circle.

See Quartz 2D Shadow Programming Guide

Apple Sample code for creating the shadow taken from the link above:

void MyDrawWithShadows (CGContextRef myContext, // 1 float wd, float ht); { CGSize myShadowOffset = CGSizeMake (-15, 20);// 2 float myColorValues[] = {1.0, 1.0, 1.0, .6};// 3 (White shadow colour) CGColorRef myColor;// 4 CGColorSpaceRef myColorSpace;// 5 CGContextSaveGState(myContext);// 6 CGContextSetShadow (myContext, myShadowOffset, 5); // 7 // Your drawing code here!!!!!!!!!!!!!!!! // 8 CGContextSetRGBFillColor (myContext, 0, 1, 0, 1); CGContextFillRect (myContext, CGRectMake (wd/3 + 75, ht/2 , wd/4, ht/4)); myColorSpace = CGColorSpaceCreateDeviceRGB ();// 9 myColor = CGColorCreate (myColorSpace, myColorValues);// 10 CGContextSetShadowWithColor (myContext, myShadowOffset, 5, myColor);// 11 // Your drawing code here// 12 CGContextSetRGBFillColor (myContext, 0, 0, 1, 1); CGContextFillRect (myContext, CGRectMake (wd/3-75,ht/2-100,wd/4,ht/4)); CGColorRelease (myColor);// 13 CGColorSpaceRelease (myColorSpace); // 14 CGContextRestoreGState(myContext);// 15 } 

Good luck

Comment line 3 Above means your shadow will be white (1.0, 1.0, 1.0). Comment line 2 is the shadow offset.

Answer 2

Have you tried using a UIButton with a circular circle and color as the image? It will automatically get a glowing effect without any work from you.

Duplication of this exact glow is a little difficult, as it actually animates, starting with a smaller glow and then increasing over a short period of time.

If you want to do this without UIButton, say either using UIControl or as a view, then you can take a picture of your button, create a suitable glow in a graphic editing application, such as Photoshop, and then add this image to yours. When you want to show a glow, add it to the view with a simple animation that uses a small transform to make a pulse once.

Good luck