Question

I'm using CoreGraphics to draw a line with circular endpoints and a drop shadow using the code below:

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetShadowWithColor(UIGraphicsGetCurrentContext(), CGSizeMake(0, 0), 4.0, [UIColor blackColor].CGColor);

CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
CGContextFillEllipseInRect(context, CGRectMake(_startPoint.x - 5, _startPoint.y - 5, 10, 10));
CGContextFillEllipseInRect(context, CGRectMake(_endPoint.x - 5, _endPoint.y - 5, 10, 10));

CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);
CGContextSetLineWidth(context, 3.0);
CGContextMoveToPoint(context, _startPoint.x, _startPoint.y);
CGContextAddLineToPoint(context, _endPoint.x, _endPoint.y); 
CGContextDrawPath(context, kCGPathStroke);

However, this results in something like this:

enter image description here

The shadow is being applied to the line and circles individually. Instead, what I want is for the shadow to be applied to the 'compound' shape created by all three (i.e. only use the compound alpha channel as the basis for the shadow), like so:

enter image description here

Any idea how I might achieve this effect instead? (note that I cannot use the layer.shadow property of my UIView as this line is rendered in response to touch drag events and that method is not performant enough).

Was it helpful?

Solution

This is exactly what Transparency Layers are for.

I think you'll find that the examples look familiar.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top