Как мне проверить, наведены ли координаты моей мыши на эллипс? - PullRequest
Новая
       149

Как мне проверить, наведены ли координаты моей мыши на эллипс?

0 голосов
/ 05 августа 2020

Этот вопрос не зависит от вывода, но для простоты мы оставим проблему на холсте HTML. У меня есть овал / эллипс, который я хочу выделить, когда вы наводите на него указатель мыши. Раньше я использовал фрагмент кода, как описано в этом вопросе ( круг при наведении курсора HTML5 холст ).

Псевдокод; 


const circle = { x: 10, y:10, radius:5 };
const distanceBetween: (point1, point2) => {
    var a = point1.x - point2.x;
    var b = point1.y - point2.y;
    return  Math.sqrt( a*a + b*b );
}

var radius = distanceBetween({x: mouse.x, y: mouse.x}, {x: circle.x, circle.y});

// If radius is below 5, mouse is on top of the circle.

Но потому что радиус для x и y для этой овальной формы разные. Недостаточно просто использовать радиус. Я экспериментировал, изолировав проблему с x-радиусом и y-радиусом отдельно. Но я просто не могу найти недостающее звено для решения проблемы. 

var ellipse = {cx: 10, cy:10, rx: 5, ry:10}

Какая формула мне нужна, чтобы проверить, зависают ли координаты x / y моей мыши над эллипсом?

1 Ответ

0 голосов
/ 05 августа 2020 
var ellipse = {cx: 10, cy:10, rx: 5, ry:10}
var distance = Math.pow(mouse.x - ellipse.cx, 2) / Math.pow(ellipse.rx, 2) + Math.pow(mouse.y - ellipse.cy,2) / Math.pow(ellipse.ry,2);

// distance < 1 is everything within the ellipse.
// distance > 1 is everything outside the ellipse.

Источник: https://math.stackexchange.com/a/76463/545328

Спасибо @ Berto99

...