I am currently creating a custom control and wondering how I could get a drop shadow from the top of the rectanlge to
the inner of the rectangle.
I can tell you folks, I’ve spent several hours but don’t get it work. I’ve used a drawroundrect several times + offsetting. The results
doesn’t look nice. I think you need to use a fillroundrect or playing around with mask. I am not a drawing expert and would appriciate
some code snippets or hint what do to
I have attached a sample which I tried but seems like dead end. awkward example
What platform? It’s built in to OSX and can be accessed with a few small declares. I’m guessing there is equivalent declares for Windows but I’m not quite sure.
Unfortunately, Windows is vastly inferior in terms of such things.
If your control does not require resizing, you could design the effect in Photoshop or other graphic program a picture. That could be vastly simpler.
Your example is not quite explicit about what you want to obtain, though. What I see is a gradient. Is that what you mean by “drop shadow” ? Typically, a drop shadow is observed under a Mac OS X window or sometimes Windows, looking like the window is separated from the background by about 1/4 inch, therefore projecting a blurred shadow. Such shadow inside a control does not make very much sense. Would you have another example than your small program ? Maybe a screen shot from a commercial app ?
[quote=179987:@Michel Bujardet]Unfortunately, Windows is vastly inferior in terms of such things.
If your control does not require resizing, you could design the effect in Photoshop or other graphic program a picture. That could be vastly simpler.
Your example is not quite explicit about what you want to obtain, though. What I see is a gradient. Is that what you mean by “drop shadow” ? Typically, a drop shadow is observed under a Mac OS X window or sometimes Windows, looking like the window is separated from the background by about 1/4 inch, therefore projecting a blurred shadow. Such shadow inside a control does not make very much sense. Would you have another example than your small program ? Maybe a screen shot from a commercial app ?[/quote]
Hi Michel,
Basically, I’ve programmed a switch control like in Xojo (see picture) - works great and behaves correctly with animation and all that stuff + offers 3 sizes and variable width so fixed mask won’t work.
I am no drawing expert but I’ve done the shadow by just drawoval+offsetting a bit. The result is
acceptable but I thought there is a better way to archive that.
The picture is taken from on old version. The shadow to the right of the knob is fixed.
Basically, I’ve programmed a switch control like in Xojo (see picture) - works great and behaves correctly with animation and all that stuff + offers 3 sizes and variable width so fixed mask won’t work.
I am no drawing expert but I’ve done the shadow by just drawoval+offsetting a bit. The result is
acceptable but I thought there is a better way to archive that.
The picture is taken from on old version. The shadow to the right of the knob is fixed. [/quote]
Looks good. If you want to keep it cross platform, the iteration method you have used is probably the best.
I do think so too. For iOS and MacOs, you could use the CALayer’s shadow with a custom ShadowPath, but then it is unsure how the other systems could be convinced to perform a similar way.
unfortunately, the shadow of the knob overlaps. If I could get this sorted, I could make it much nicer.
FillRoundRect looks better than just DrawRoundRect as the corners are nicer.
Looks like you should blend the shadows with the background, not paint them over, and draw then background shadow first, then the knob’s. Or maybe a shadow color with a little bit of alpha value helps? And then you would have to reduce the sizes so the complete image with shadow fits into the frame.
You can make 3 images for each size, a left, middle and right section. Draw the left image on the left, the right on the right, and use the middle to fill in the variable gap.
Xojo does this for some kinda button, look in Xojo > Contents > Resources for these files…
cmd_down_off_left_round.png
cmd_down_off_fill.png
cmd_down_off_right_round.png
You could also build left, middle and right into a single image and draw from just the part you need.
unfortunately, the shadow of the knob overlaps. If I could get this sorted, I could make it much nicer.
FillRoundRect looks better than just DrawRoundRect as the corners are nicer.[/quote]
You may want to change the knob shadow to lower instead of on the right. That is the way the switch is designed in iOS. And probably make it a lot less obvious. Maybe 5 instead of 5.
I quickly modified your code, that looks better. Although you are using directly g.Height instead of H, which crops the know shadow. Maybe using H through instead of g.Height would allow you to make the control very slightly shorter, so the shadow under the knob does not get cropped.
Basically, I’ve programmed a switch control like in Xojo (see picture) - works great and behaves correctly with animation and all that stuff + offers 3 sizes and variable width so fixed mask won’t work.
I am no drawing expert but I’ve done the shadow by just drawoval+offsetting a bit. The result is
acceptable but I thought there is a better way to archive that.
The picture is taken from on old version. The shadow to the right of the knob is fixed. [/quote]
That doesn’t look too bad, and it seems you’re already well invested in this. But you can also consider http://thezaz.com/code/zirconkit/switch/ if you want to save yourself some time.
I “solved” the problem using Photoshop-rendered bitmaps. For the three sizes in two resolutions, that’s a good number of bitmaps, but the results are second to none.
[quote=180241:@Thom McGrath]That doesn’t look too bad, and it seems you’re already well invested in this. But you can also consider http://thezaz.com/code/zirconkit/switch/ if you want to save yourself some time.
I “solved” the problem using Photoshop-rendered bitmaps. For the three sizes in two resolutions, that’s a good number of bitmaps, but the results are second to none.[/quote]
Hi Tom,
I’ve analysed your control switch and had my suspicion that you use PS bitmaps but where do you include those ?
[quote=180082:@Will Shank]You can make 3 images for each size, a left, middle and right section. Draw the left image on the left, the right on the right, and use the middle to fill in the variable gap.
Xojo does this for some kinda button, look in Xojo > Contents > Resources for these files…
cmd_down_off_left_round.png
cmd_down_off_fill.png
cmd_down_off_right_round.png
You could also build left, middle and right into a single image and draw from just the part you need.[/quote]
Yep. I made Xojo’s version too, which looked nicer until they started messing with it.
As for the “encode” trick I do, a drop a batch of images into a tool, and it spits out a Xojo method. This method builds a static dictionary whose keys are the file name, and value is base64 (or hex, I can’t remember) PNG data. The method accepts a file name, matches the key, decodes the data, and outputs a picture.
There are a number of improvements or changes I could make, such as using a Select to only build the string necessary, as well as caching the built pictures.
