Вычислить/проверить координаты заполнения/пробела окружности/эллипса CSS3 по JavaScript

Question

У меня есть круг или, в общем, эллипс, определенный в CSS, например. как это:
круг:border-radius: 50%; width: 50px; height: 50px;
эллипс:border-radius: 50%; width: 30px; height: 50px;

Теперь, если бы они были квадрат/прямоугольник, я бы просто использовать их ширину и высоту, чтобы вычислить/проверки координат. Однако это не так.

Так что я хочу, чтобы вычислить нарисованные координаты заполнения эллипса.
Я даже не хочу получать все координаты, потому что в конце концов мне нужно только проверить, стоит или нет Координата также является координатой заданного эллипса или нет.

Как бы это сделать, используя JavaScript (/ jQuery)?

Дополнительная информация:
круг это просто частный случай (такой же ширины & высота) эллипса;
border-radius всегда будет 50%;
он не должен быть полностью точным;

Answer 1

Здесь есть две проблемы.

Первый, и, возможно, тот, который прошел мимо вас неизвестно, или, может быть, вас просто не интересует, что использование CSS для рисования фигуры, хотя, кажется, является чем-то довольно популярным, не является хорошим подходом.

В этом подходе есть много препятствий, и наиболее примечательным является то, что CSS не является технологией, разработанной для векторного рисования, это технология разделения контента из стиля.

У вас есть доступные в вашем распоряжении технологии, такие как SVG или HTML5 Canvas, которые облегчат вашу работу.

Но мы будем углубляться дальше в этом во второй части ответа:

Как проверить, что (A, B) находится внутри окружности центра (х, у) и радиуса г?

Ну, в первую очередь, если ваша точка (A, B) находится за пределами прямоугольника, охватывающего круг, она будет вне круга, поэтому, если A < x - r || A> x + r || B < y - r || B> y + r ваша точка (A, B) равна вне прямоугольника оболочки.

Когда (A, B) находится внутри прямоугольника, линия, взятая из (A, B) в (x, y), является гипотенузом прямоугольного треугольника, где обе стороны являются разностью между (A, B) и центр вашего круга, имея в виду, что обе точки имеют одинаковое пространство координат.

Если вы вычислите эту гипотезу с теоремой Пифагора: h = sqrt ((A - x)^2 + (B - y)^2).

Точки (А, В), где ч больше г, являются за пределами круга, в то время как те, где Н является меньшим или равным, чем г, являются внутри круга.

Теперь, возобновив точку технологии. Когда вы играете с CSS, трудно подсчитать с помощью инструментов для представления холста, где вы можете вычислить истинную ось координат. Конечно, вы можете рассматривать вашу страницу как свой холст, но на нее обычно влияют внешние проблемы, такие как разрешение экрана, которое может разрушить ваши вычисления.

My first and strong Рекомендация - перейти на подходящую технологию, такую ​​как SVG или холст HTML5. Затем убедитесь, что вы понимаете основные концепции геометрии, которые я описал здесь, к случаю или кругу (простой), а затем выполните поиск в Интернете или спросите здесь об эллипсе.