Splitting a rect into 4 triangular pieces.

I'm trying to make a rectangular button that has four sections. They would be split from corner to corner into 4 sections, like an X going through a square. I want to use the OnPointerClick event handler to see which section of the rect the user is clicking on.

I have been trying to math it out for a while and keep scrapping it. Maybe this will come easier to someone else?

Here is what I have at the moment, which works for squares, but not rectangles:

Code (CSharp):

1. public void OnPointerClick(PointerEventData eventData)
2.     {
3.         RectTransform rect = GetComponent<RectTransform>();
4.         Vector2 clickPos = eventData.position;
5.  
6.         //Get center to set middle to 0
7.         var centerX = rect.sizeDelta.x / 2;
8.         var centerY = rect.sizeDelta.y / 2;
9.  
10.         clickPos.x -= centerX;
11.         clickPos.y -= centerY;
12.  
13.         if (clickPos.x > Math.Abs(clickPos.y))
14.         {
15.             Debug.Log("right");
16.         }
17.         else if (clickPos.y > Math.Abs(clickPos.x))
18.         {
19.             Debug.Log("top");
20.         }
21.         else if (-clickPos.x > Math.Abs(clickPos.y))
22.         {
23.             Debug.Log("left");
24.         }
25.         else if (-clickPos.y > Math.Abs(clickPos.x))
26.         {
27.             Debug.Log("bottom");
28.         }
29.  
30.         Debug.Log(clickPos);
31.     }

 

Transform the click point to get a relative offset to the center of the button, where all four triangles would meet. If you have a non square button, multiply the new y coordinate with the aspeect ratio of the button. Then simply compare the absolute value of the x and y values of your relative point to find the largest one, this is your direction.
If abs(x) larger than abs(y) you know right or left was pressed, if x is positive then right otherwise left.

 

This is where I'm having issues. The buttons sizes vary at runtime.

 

It should just be x/y if you modify the y.

 

While you can use math (and it should not be that difficult - you should get away with an ugle cascace of three 'if' statements per section, you can completely cheat your way out of this by using 4 polygon (one for each triangle) colliders and simply determine which was clicked on.

 

This was it, just need to do it separately if it's scaled on the X. Thanks man