通過JavaScript計算/檢查CSS3圓/橢圓的填充/空間坐標

Question

我在CSS中定義了一個圓或一個橢圓，例如：
圓圈： border-radius: 50%; width: 50px; height: 50px; border-radius: 50%; width: 50px; height: 50px;
橢圓： border-radius: 50%; width: 30px; height: 50px; border-radius: 50%; width: 30px; height: 50px;

現在，如果它們是正方形/矩形，我將使用它們的寬度和高度來計算/檢查坐標。 但是，事實並非如此。

所以我要做的是計算繪制的橢圓的填充坐標。
我什至不想獲得所有坐標，因為最后，我實際上只需要檢查某個坐標是否也是給定橢圓的坐標。

我將如何使用JavaScript（/ jQuery）做到這一點？

附加信息：
圓只是橢圓的一種特殊情況（寬度和高度相同）；
邊界半徑將始終為50％；
它不必完全精確；

Answer 1

這里有兩個問題。

第一個，也許是一個您未曾意識到的，或者您根本不在乎的是，盡管看起來很流行，但使用CSS進行形狀繪制並不是一種好方法。

這種方法有很多障礙，最值得注意的是CSS並不是為矢量繪圖開發的技術，而是一種將內容與樣式分開的技術。

您擁有可以使用的功能強大的技術，例如SVG或HTML5 Canvas，將大大簡化您的工作。

但是，我們將在答案的第二部分中對此進行深入研究：

如何檢查（A，B）是否在中心（x，y）和半徑r的圓內？

好吧，首先，如果您的（A，B）點在包圍圓的矩形之外，那么它將在圓之外，所以如果A <x-r || A> x + r || B <y-r || B>ÿ+ R的點（A，B）是該包覆部的矩形的外部 。

當（A，B）在矩形內部時，從（A，B）到（x，y）繪制的線是矩形三角形的假設，其中其他兩側都是（A，B）坐標與（A，B）坐標之間的差請記住，圓點的兩個中心共享相同的坐標空間。

如果使用畢達哥拉斯定理計算該假設，則h = sqrt（（A-x）^ 2 +（B-y）^ 2）。

h大於r的點（A，B）在圓的外面 ，而h小於或等於r的點在圓的里面 。

現在，恢復技術要點。 在使用CSS時，很難用工具來表示可以在其中計算真實坐標軸的畫布。 當然，您可以將頁面視為畫布，但是它通常會受到外部問題的影響，例如屏幕分辨率會破壞您的計算。

我的第一個強烈建議是切換到適當的技術，例如SVG或HTML5 Canvas。 然后，確保您了解我在這里為情況或一個圓（簡單的情況）所分配的基本幾何概念，然后在Internet上搜索或在此處詢問橢圓的情況。