2D GUI: Detect mouse inside an ellipse or a rounded rectangle

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, in addition, if we have the scenario when we want to import svg icon and do the same thing on it, it becomes much more complicated to be dealt with.

Thank you in advance.

I guess two solutions here (may be more).

  1. on an svg or complex image with transparency. Act on detecting the opaque parts of the button.image.
  2. else if it is just for rounded corners, use corner.radius on the button, i.e:
button1.cornerRadius = 20;

Hope this will help,

EDIT: Sry @Saba_Mirzashvili and @DarraghBurke , just realized there are two posts with the exact same title and content. One being the question, the other the feature request following your input. I HAVE RENAMED THIS FEATURE REQUEST POST to avoid confusion.

1 Like

Thanks for your interest.
I don’t know why did you suggest me the second solution, bcs when I use the corner radius a problem reveals at that time.
As regards the second one, I feel really thankful but it works with images only (not imageOnlyButtons etc).
What I want to say additionally is that I realize this technology is mainly used for 3D interactions but, in my opinion, one thing that should be definitely fixed is that onPointerClick, onPointerDown and onPointerUp events do not work on images. I just found out about that issue when I was testing the detectPointerOnOpaqueOnly attribute.

Thank you guys @DarraghBurke @mawa. As it turns out babylon really has small, but fast and helpful contributors.

Apologies. Didn’t know you tried already.
Well, the good thing is that apparently you are going to get this feature (and we will too :smiley:
Thanks for raising this. Have a great day,

1 Like