0
454
ViewsRound 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
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)
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
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
1 answers
Answer question0
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