CODEWITHSUNDEEP
iphoneobjective-ccocoa-touch
sudo rm -rf
sudo rm -rf

Reputation: 29524

Quartz shadows not drawing correctly

So, I've got this image for my app that looks like this:

enter image description here

Now this is nice and all, but I'm trying to reduce my dependency on images and instead try to draw this dynamically.

Okay, so I found this image built into UIColor: (scrollViewTexturedBackgroundColor)

enter image description here

Looks kinda light, but sweet. We're getting there.

So now, I override drawRect in a UIView subclass to darken that a bit. 

-(void)drawRect:(CGRect)rect {
    [[UIColor colorWithWhite:0.0 alpha:0.4] setFill];
    UIRectFillUsingBlendMode(rect , kCGBlendModeDarken);
}

Hey, it's not perfect but it's close enough. I can always tweak the blending mode & color later. Now comes the hard part. I can't figure out how to get the shadows to draw correctly. For example, I tried to set my shadow like this:

enter image description here

CGContextSetShadowWithColor(ctx, CGSizeMake(0, 6), 5, [[UIColor blackColor]CGColor]);

However, the shadow doesn't display. Also, I tried saving the graphics state, applying the shadow, then restoring it, but when I did that the shadow appeared but with the color in reverse (probably due to the blending mode I set). Obviously that's not what I'd hoped.

Any ideas?

Upvotes: 2

Views: 304

Answers (1)

Davyd Geyl
Davyd Geyl

Reputation: 4623

The shadow is rendered with something that is drawn. You cannot draw just a shadow without actual object which drops it. If you find a way to do it, please let me know.

I see on the first picture you use inner shadow effect. To have a similar result you need to draw a path that drops a shadow around the area.

enter image description here

On the picture the red path is a bezier path with stroke of 10px. I have left a thing gap between the picture and the path to show that the path is bigger than the background picture. To generate such a path you can use a bezier path with rect. Inset the the background picture rect by negative value that equals a half of the stroke width.

If the actual context is bigger then the picture, clip it with the picture rect before drawing the path.

Upvotes: 2

Related Questions