矩形中的圆角矩形 - 如何检测圆角矩形外角的坐标？

Question

我正在努力寻找解决此问题的方法。

我得到这张照片 306px x 620px

这是一张带有圆角矩形的图片。为了使圆角矩形只能点击，我设置了 border-radius: 80px;这有效。

现在我正在尝试编写一种智能方法来测试它并检测点击的 (x, y) 位置（如本图所示）

实际上是在圆角矩形参数之外

我有类似的想法https://www.jsparling.com/using-rectangles-to-fill-the-area-outside-of-a-circle/但我想检查是否有一些聪明的方法来检测 (x, y) 是否在这个圆角矩形之外

最初，我在 https://math.stackexchange.com/ 上发帖，但他们提到最好在这里问。

任何 help/idea 将不胜感激。

编辑 1

也许更多信息：左边，矩形的顶部是 0,0

编辑 2

可重现环境https://stackblitz.com/edit/angular-qvf3ue?file=src%2Fapp%2Fapp.component.ts

编辑 3

只是为了澄清这些是我所知道的

    const height = 620;
    const width = 306;

而且我知道 border-radius: 80px; 会阻止在这个圆角矩形（那些小部分）之外点击

我正在尝试编写一个测试，我可以在其中检查坐标是否不在圆角矩形区域内

更新 - 结果

感谢@Yves Daoust 和@MBo

由于@MBo 首先回答了正确答案，我将他的答案标记为正确。

如果有人对实现感兴趣 - 检查一下

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

Answer 1

有了圆弧半径R，矩形左上角坐标Left, Top，尺寸Wdt和Hgt，我们可以写出点外的下一个条件：

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)

其中 Corner 是检查点是否位于弯曲三角形中的函数:

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

要查找点是否在内部 - 只需反转 Outside 结果

矩形中的圆角矩形 - 如何检测圆角矩形外角的坐标？

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

javascript

geometry

rounded-corners