0
\$\begingroup\$

Recently I heard about possible algorithms to determine if the mouse cursor is on a GUI element such as a button:

  • Determine the element's coordinates and size to check whether the cursor is on the element mathematically.

  • Giving each element its own color so that the mouse cursor interacts with a specific color. I think this method is better with complex shapes of elements, but I don't know how this method works.

I don't know if those are the actual methods used, or if there are other ways.

I also read that there is a relationship between the GUI and the offscreen buffer for mouse cursor events, but I didn't find much about that.

So based on what I mentioned, my question is:

What are the algorithms and methods used in the GUI to determine if the mouse cursor is on one of the GUI elements?

I would be grateful if there were sources to look at or examples to understand the topic.

\$\endgroup\$
2
  • \$\begingroup\$ It's unclear to me what one question you'd like answered here. Can you edit your post to focus it on a single question? \$\endgroup\$
    – DMGregory
    Aug 19, 2023 at 16:41
  • \$\begingroup\$ Sorry about that, I just edited it \$\endgroup\$ Aug 19, 2023 at 17:36

1 Answer 1

0
\$\begingroup\$

Assuming your GUI elements are simple shapes like rectangles, detecting if your mouse is on the element becomes fairly trivial. Here's the pseudo code:

function IsCursorInRectangle[mouse,rectangle]
Is mouse.x > rectangle.x
     is mouse.x < rectangle.x + rectangle.width
          is mouse.y > rectangle.y
               is mouse.y < rectangle.y + rectangle.height
                    return true;
 return false;

This is a simple example of how to check it in C.

#include <stdio.h>
struct Coordinate
{
     int m_nPositionX;
     int m_nPositionY;
};
struct GUIElement
{
     struct Coordinate m_csPosition;
     int m_nRecWidth;
     int m_nRecHeight;
};

int IsCursorOnElement(struct GUIElement* pgElement, struct Coordinate* pcCursor)
{
     if(pcCursor->m_nPositionX > pgElement->m_csPosition.m_nPositionX &&
        pcCursor->m_nPositionX < pgElement->m_csPosition.m_nPositionX + pgElement->m_nRecWidth &&
        pcCursor->m_nPositionY > pgElement->m_csPosition.m_nPositionY &&
        pcCursor->m_nPositionY < pgElement->m_csPosition.m_nPositionY + pgElement->m_nRecHeight)
     {
          return 1;
     }
     
     return 0;
}
int main(void)
{
     struct GUIElement gsButton = {{100,100},50,50};
     struct Coordinate csCursor = {105,120};
     
     if(IsCursorOnElement(&gsButton, &csCursor))
     {
          puts("We're inside the element");
     }
     else
     {
          puts("We're outside the element");
     }
     return 0;
}

If you want to do other shapes like circles, you would need the center x,y of the circle + it's radius.

Here's a resource you can check out . https://www.jeffreythompson.org/collision-detection/point-rect.php

\$\endgroup\$
3
  • \$\begingroup\$ This looks like an example of the mathematical method, though the source is interesting, and could be considered as an introduction to advanced gui tasks like CAD, that's what I thought, thank you very much. \$\endgroup\$ Aug 20, 2023 at 5:09
  • \$\begingroup\$ Now I need to see an example of the second method that depends on giving each widget its own color, if possible, please \$\endgroup\$ Aug 20, 2023 at 5:14
  • \$\begingroup\$ The second method depends heavily on the library you are using rather than the math of the bounding box. You would grab the pixel at your current mouse location, read the color then go through your list of GUI elements to see which one contains that color. \$\endgroup\$
    – Tofu
    Aug 20, 2023 at 7:49

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .