Recttransform.Overlaps

Unity Engine
1

I have a panel (background) that fills the entire canvas. Inside of it centred is another panel (container) which has space around it where the background is visible.

I then add a button (myUIElement) as a child of container that can be moved around.

I am trying to check if the button is moved outside of the container by using Recttransform.Overlaps() but from what I see as the button is in container which is itself in background it always reports that there is an overlap.

RectTransform background;
RectTransform myUIElement;

        if (myUIElement.rect.Overlaps(background.rect)) {
     
          // myUIElement has overlapped background
       }
       else {
          
           // myUIElement does not overlapped background
       }

Is this the correct way to use this?

I thought container would act as a block between itself and background?

2

I’m also trying to see if I can test has the button exited any part of the container but failing on that too :frowning:

3

2 ideas that you may find suitable:

  1. if you’re okay with semi precision of the IPointerEnter interface, you could use that to detect it entering the background area. By semi precise, I mean because if you drag from the bottom part of the button and just the top enters, that wouldn’t register.
  2. If you know the dimensions of the rect for the inner panel (size + position), you could just check against that, to see if you’re outside its limits.

I’m sure there are probably more options… like you could create 4 bounds (on the outter sides), just in code, and then check against those with your button… This would be sort of similar to #2.
You could use ‘encapsulate’ in some form… really reaching here. I mean, if you set the bounds to be the inner one, then use encapsulate and recheck the bounds to see if it grew…
I may have gotten carried away :wink:

Anyways, hopefully one of those sounds helpful lol

1 Like
4

Thanks once again for offering advice and help :slight_smile:

Yeah, option 1 would not work as like you say if only the top enters then it would not register.

I have been also trying the accepted answer here:http://answers.unity3d.com/questions/918955/is-there-a-simple-way-to-check-if-a-ui-element-is.html?childToView=1359856#answer-1359856

But I always get an overlap result, I think due to different coord systems?

Now trying to see if it is better to check the child of the container has exited the containers rect, but all I get is overlap

5

The accepted answer there sounds very similar to the second suggestion that I posted.

I couldn’t be sure I followed your train of thought with different coordinate systems, but if you mean like screen vs. world, then yep you’d want to convert.

6

Yeah, trying to figure that out. I see that the rect I am dragging is obtained by GetWorldCorners and then goes through a loop to test against the other rect which is in I local coordinates. But I dont see how I convert this rect to world and then use in the test loop.

So lets say I have two images, square A in center of screen and a smaller square B inside square A. As I drag square B around I need to know has any part of it gone outside of square A’s bounds

The answer from that thread is close same as yours above but I see that I have to get square B’s corners in world coords. But the test then uses them against square A that is in local (i presume)

Been trying to figure out how to covert square A to world then use in the loop test…with little success

7

I assume with the inner button/image that you’d take the position and adjust it based on its pivot.
I can think of a simple way for you, if you don’t mind adjusting the pivot (ie: you don’t care about it for other calculations/adjustments).
If you set the 3rd most inner object you have to upper left or bottom left (pivot)… you can then check very easily. I guess it’s almost as easy to do with other pivot settings + math, sorry bear with me…
Let’s say we chose the bottom left. Now, let’s say it’s 20 in height. and the 2nd inner panel is 200 in height.
At (0,0) we’re at the bottom … and anything negative (in local space) is outside.
Anything higher than 180 means it’s outside. Then similar comparisons for the right side, etc…

1 Like
8

Mm that sounds like a plan, but I have to keep the pivot of the container at centre for aspect ratio fitter and rotation purposes … :frowning:

9

Right, well then you use 1/2 size (then scale if applicable) I think :slight_smile: lol

10

99.9% complete :slight_smile:

From http://orbcreation.com/orbcreation/docu.orb?1005 for which I had not realised had the method to handle exactly what I was after!!!

Rect r1 = RectTransformExtensions.GetRect (panelOne.GetComponent<RectTransform> ());

Rect r2 = RectTransformExtensions.GetRect (childImageGetComponent<RectTransform> ());

if (!r1.Contains(r2)) {

      // do stuff when image not completely in panelOne           
}

From http://www.voxelbusters.com/ extremely friendly and helpful crew which I have appended to the OrbCreationExtensions extension

public static bool Contains (this Rect rect1, Rect rect2) {
            
            if ((rect1.position.x <= rect2.position.x) &&
                (rect1.position.x + rect1.size.x) >= (rect2.position.x + rect2.size.x) &&
                (rect1.position.y <= rect2.position.y) &&
                (rect1.position.y + rect1.size.y) >= (rect2.position.y + rect2.size.y)) {

                return true;
            } 
            else {

                return false;
            }
        }

Trying to figure out how to deal with if image is rotated clockwise the test fails, but am so close

Thanks
methos5k
VoxelBusters
OrbCreationExtensions

11

Cool – you’ll get there :slight_smile:

And you’re welcome… Enjoy your project.

1 Like