views:

851

answers:

2

I want to add a FADED shadow/outer glow to a UIImage/UIImageView/UIView but I know no Core Graphics at all.

Edit: Please Help!!

A: 

As a performance consideration, iPhone OS does not support the shadowColor, shadowOffset, shadowOpacity, and shadowRadius properties, which you could normally use in Cocoa. Most people duplicate the shape they want to glow several times with each time lowering the opacity and offsetting the shape one pixel at a time to simulate the look of a glow. If your glow does not need to be very big, you cannot tell the difference.

Cirrostratus
This will take up alot of performance if the view is being updated many times per second. I am changing the size using the `touchesMoved` event.
Jaba
+1  A: 

Take the approach outlined by Cirrostratus, keep a cached copy of it, and then apply a transform to change the size and/or position of the image while dragging.

(warning, this is not functional/tested code, but should get you started)

-(UIImage*)addGlowToImage:(UIImage*)imageInput;
{
    CGRect newSize = imageInput.bounds;
    CGImageRef theImage = imageInput.CGImage;

    // expand the size to handle the "glow"
    newSize.size.width += 6.0;
    newSize.size.height += 6.0;
    UIGraphicsBeginImageContext(newSize);
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    CGContextBeginTransparencyLayerWithRect(ctx, newSize, NULL);
    CGContextClearRect(ctx, newSize);

    // you can repeat this process to build glow.
    CGContextDrawImage(ctx, newSize, theImage); 
    CGContextSetAlpha(ctx, 0.2);  

    CGContextEndTransparencyLayer(ctx);

    // draw the original image into the context, offset to be centered;
    CGRect centerRect = inputImage.bounds;
    centerRect.origin.x += 3.0;
    centerRect.origin.y += 3.0;
    CGContextDrawImage(ctx, centerRect, theImage);

    result = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return result;
}

Then in your method while scaling you would do something like:

// assumes UIImage *cachedImage = [self addGlowToImage:origImage]; has been called already.
// assumes ivars for scale exists

    CGRect newRect = cachedImage.bounds;
    newRect.size.width += scale;
    newRect.size.height += scale;

    [cachedImage drawInRect:newRect];  // image will be scaled to fill destination rectangle.

Definitely take a look at the apple docs. A good starting place is the Quartz 2D Programming Guide.

Chip Coons
Alright, not exactly what I wanted but, I will accept, I wanted a fade.
Jaba