Search code examples
ioscalayerquartz-graphics

iOS Direction Glow


I'm trying to create a "mini-map." It's a circle filled with markers, and I want the border of the circle to glow in places to indicate to the user to indicate that more markers are beyond the minimap in a given direction.

I can give the circle a 'glowing' blue border by drawing, below it, a blue circle with a slightly larger radius. I think that I can make this blue border brighter in some places than others by giving its CALayer a mask. (I've tried giving it a gradient mask, and it works.)

Assuming that I can make the proper calculations to determine how bright a given pixel should be (given the position of markers beyond the minimap's viewport), how do I set the individual pixels of a CALayer? Or is there an easier way to accomplish what I'm looking for besides making a complicated alpha value calculation for each pixel in the circle?

Thanks.


Solution

  • Here's my solution. I drew a series of 1-pixel arcs, each with a different stroke color.

    void AddGlowArc(CGContextRef context, CGFloat x, CGFloat y, CGFloat radius, CGFloat peakAngle, CGFloat sideAngle, CGColorRef colorRef){
        CGFloat increment = .05;
        for (CGFloat angle = peakAngle - sideAngle; angle < peakAngle + sideAngle; angle+=increment){
            CGFloat alpha = (sideAngle - fabs(angle - peakAngle)) / sideAngle;
            CGColorRef newColor = CGColorCreateCopyWithAlpha(colorRef, alpha);
            CGContextSetStrokeColorWithColor(context, newColor);
            CGContextAddArc(context, x, y, radius, angle, angle + increment, 0);
            CGContextStrokePath(context);
        }
    }
    

    And then, in DrawRect,

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, 2.0);
    AddGlowArc(context, 160, 160, 160, angle, .2, [UIColor colorWithRed:0 green:.76 blue:.87 alpha:1].CGColor);