Search code examples
javascriptgeometryrounded-corners

Round rectangle in rectangle - how to detect coordinates in corners that are outside of round rectangle?

I am struggling to find a way to solve this issue.

I am getting this picture 306px x 620px

enter image description here

It's an image with a rounded rectangle. In order to make the rounded rectangle only clickable I set border-radius: 80px; and this works.

Now I am trying to write a smart way in which I can test it and detect if (x, y) position of click (like on this image)

enter image description here

is actually outside of the rounded rectangle parameters

I had a similar idea like this https://www.jsparling.com/using-rectangles-to-fill-the-area-outside-of-a-circle/ but I want to check if there is some smart way to detect if (x, y) is outside of this rounded rectangle

Initially, I posted on https://math.stackexchange.com/ but they mention that is better to ask here.

Any help/idea would be appreciated.

Edit 1

Maybe more information: Left, Top of the rectangle is 0,0

enter image description here

Edit 2

Reproducible environment https://stackblitz.com/edit/angular-qvf3ue?file=src%2Fapp%2Fapp.component.ts

Edit 3

Just to clarify those are the things I know

    const height = 620;
    const width = 306;

And I know that border-radius: 80px; would prevent from clicking outside of this rounded rectangle (those small parts)

I am trying to write a test where I can check if the coordinate is not inside rounded rectangle area

Update - result

Thanks to both @Yves Daoust and @MBo

Since @MBo answered first with the correct answer I will mark his answer as correct.

If someone is interested in implementation - check it out

https://stackblitz.com/edit/angular-b4nwrd

Solution

  • With arc radius R, rectangle left top corner coordinate Left, Top, dimensions Wdt and Hgt, we can write the next condition for points outside:

    Outside = (X < Left) or 
          (X > Left + Wdt) or 
          (Y < Top) or 
          (Y > Top + Hgt) or 
          Corner(X - Left - R - X, Y - Top - R, R) or
          Corner(X - Left - R, Top  + Hgt - R - Y, R) or
          Corner(Left + Wdt - R - X, Top  + Hgt - R - Y, R) or
          Corner(Left + Wdt - R - X, Y - Top - R, R)

    where Corner is function to check if point lies in curved triangle:

    function Corner(DX, DY, R) {
    return DX < 0 and DY < 0 and DX * DX + DY * DY > R * R
}

    To find if point is inside - just inverse Outside result