Question

I am creating a number of transparent controls on a form which each display a hex shape, they are grouped as a map, so that the hexes are edge to edge. Of course each hex is contained within a square control, and so they overlap with each neighbor hex. I want to have able to click inside a hex to cause it to become highlighted. However, unless I would click in the middle of the hex where there is no overlap, depending on the stack order of the controls the click event would be picked up by whichever control is on top, not necessarily the control I want. So as I see it, I need to do two things:

1. I need to ensure that the cursor is inside a hex shape (there is a small gap between the edge of each hex). So if I click in one of the corners of the control, that control would not respond to that click since its outside of the hex.
2. When I click, I need to determine which control owns the hex I am clicking on.

Answer 1

I cannot give you the code because I would need to spend some time working the exact code out, but I do have a suggestion of how you can achieve it…

1) Work out all the controls that the mouse could potentially be clicking on. Perhaps you can do this by calculating the mouse position relative to all the controls and looking for overlapping points

2) Iterate though all the potential candidates and calculate the the distance between the mouse point and the centre point of each control (this might help). The correct control will be the one with the shortest distance

You are going to need to put your maths head on for this one!

---

SOLUTION:

This works and I have tested it. What I have: A UserControl that draws the shape, this is called “ClickControl”. All of my ClickControls are inside a Panel called mainPanel. Each ClickControl has the same MouseClick event registered to it, in this case the control_MouseClick event. With all that in mind, here is the example code:

void control_MouseClick(object sender, MouseEventArgs e)
{
    //get mouse point relative to panel
    var mousePoint = panelMain.PointToClient(Cursor.Position);
    int startX = mousePoint.X;
    int startY = mousePoint.Y;

    //store the best match as we find them
    ClickControl selected = null;
    double? closestDistance = null;

    //loop all controls to find the best match
    foreach (Control c in panelMain.Controls)
    {
        ClickControl control = c as ClickControl;
        if (control != null)
        {
            //calculate the center point of the control relative to the parent panel
            int endX = control.Location.X + (control.Width / 2);
            int endY = control.Location.Y + (control.Height / 2);

            //calculate the distance between the center point and the mouse point
            double distance = Math.Sqrt(Math.Pow(endX - startX, 2) + Math.Pow(endY - startY, 2));

            //if this one is closer then we store this as our best match and look for the next best match
            if (closestDistance == null || closestDistance > distance)
            {
                selected = control;
                closestDistance = distance;
            }
        }
    }

    //`selected` is now the correct control
}

I am sure there is plenty of optimising that can be done if you have performance issues, but this is a working start at the very least!