Element box issue in 2d

Hello, I am new here and wanna use a two-dimensional Babylon GUI. I just came across the one disturbing issue. the problem is that when I’m creating a button (and not only a button) with a rounded shape, the element content remains the same. specifically, I have some buttons with rounded corners and want to listen them on click, but when I click out of the bounds, the event is still triggered. I know it can be fixed by mathematical calculations if we know an area that should be excluded and then compare mouse positions but it’s a complex way.

Thank you in advance.

cc @DarraghBurke

Hi, as it currently stands the GUI system simply compares the pointers position to the bounds of a given control. Thus it cannot support detecting mouse inside an ellipse or a rounded rectangle. We can consider adding support for this, but it would be considered a feature rather than a bug. Can you open a thread inside of the Feature Requests section of the forum? Feel free to tag me (@DarraghBurke) when you do.

Alternatively, as you mentioned, you could implement this yourself in your project. Here is an example of how to do it: Round rectangle in rectangle - how to detect coordinates in corners that are outside of round rectangle? - ServeAnswer

The math is actually not too bad!

Thanks for the response.
I wonder it would be better if I posted as the same thing happens when I want to load svg icons that have a much complicated shape to be dealed with (but affordable).

So would you say that this option is not applicable? I haven’t tested it. Thx,

1 Like

Yes, that’s a good point, Image controls have this feature. However, it’s not currently supported in other controls. We wouldn’t want to take this approach with ellipses or rounded rectangles, since we can mathematically compute whether the pointer is in bounds in a much more performant way than pixel-sampling.

2 Likes