Printable View
I am wondering how to create a border around a pop-up menu of a custom shape. Shadow would be nice too. So far I managed to create the following:
https://thumb.ibb.co/d8xB9m/custom_s...ith_border.png
The menu features a custom shape. However, the border is still rectangular and the shadow is missing.
My guess is that you are using a mask, which is what I would do as well.Quote:
However, the border is still rectangular and the shadow is missing.
Mask however doesn't change the shape of the widget it only controls which parts are "transparent" (for a lack of a better description).
So when you apply a border it is placed on the real rect of the widget.
The solution would be to paint the border your self along the mask lines.
The shadow is just a visual candy painted on the widget - since you didn't post any code my guess is that at the moment you are painting it outside the widgets rect.
First of all, thank you for your reply. I don't use a mask as long as I don't know how to fit its size to the items inside the menu. Depending on the machine settings, the items may take more or less screen space and I may need to add more items in future, whereas the mask can't stretch. My approach was to use QWidgetAction added as a bottom item. This widget action contains an image with a transparent background. The menu itself is also transparent. This way I managed to achieve this shape which can adjust to the items being altered.
I see.
However, even so (or even more so) my proposals are still valid.
Probably, I don't understand your idea fully. If I paint the image with a border and a shadow, how do I make it stretch to fit the menu items?
And now I don't fully understand your question :-)Quote:
Probably, I don't understand your idea fully. If I paint the image with a border and a shadow, how do I make it stretch to fit the menu items?
If your paint your border by "tracing" the menu's border, then it will always trace the border fitting to the size of the menu (by tracing I mean you take the current rect and paint with a pen with some width along the rect. at least for the upper three edges. For the lower one you would need to know where the opaque part of the image is and paint there).
Is this is what you meant with your question?
If I paint an image it will be of a fixed size, e.g. 300x400. But the items may take more or less space (depending on screen resolution, title, number of items etc). Thus, I don't understand how can it fit the items then.
Ok, there are two issues:
1. The border
2. The image below (because of the ---v--- shape)
For the border I think its clear how to draw it, let me know if not.
For the image below, I'd have it done in tow stages:
1. A rectangular transparent image without the --v--- in the top of the image. you can then resize the image as you need depending on the with of your menu (I guess the height is constant)
2. Put a new opaque image only of the --v-- on top of the transparent image in the middle of the menu width (minus the --v-- image width/2), and voila! :-)
Another possibility is to use 1 pixel wide tiles, and that you can always fit your shadow and lower transparent image to the size of your menu similar to how the Qt Style sheets are doing it.
Indeed, maybe even using stylesheets might do the trick, but I am not sure if any problem may come up or if your situation has any restrictions that might impact the usage of stylesheets - you might want to read about them to be sure.