Détection de clic dans une ellipse [Résolu/Fermé]

Signaler
Messages postés
137
Date d'inscription
lundi 22 mars 2010
Statut
Contributeur
Dernière intervention
3 septembre 2014
-
Messages postés
137
Date d'inscription
lundi 22 mars 2010
Statut
Contributeur
Dernière intervention
3 septembre 2014
-
Bonjour à tous.

Je suis en train de m'amuser avec les canvas en javascript.

En gros, j'ai un canvas avec une ellipse dessinée dedans.

J'aurais voulu savoir comment détecter si le curseur est dans cette ellipse ou pas.

L'idéal serait une fonction qui prend en paramètre le x et le y du curseur et qui renvoie un booléen en fonction de la position du curseur et de l'ellipse.

Pour l'instant, je ne prends pas en compte la rotation de l'ellipse.

J'ai beau fouiller l'article wikipedia ( https://fr.wikipedia.org/wiki/Ellipse_%28math%C3%A9matiques%29 ), mais avec mon faible niveau en math (les cours sont loin :s) je n'arrive pas à transformer les formules mathématiques en fonction.

Merci pour toutes vos réponses.


4 réponses

Bonjour,
Que connais-tu de ton ellipse ? Comment est-elle définie ?
(droite directrice ? foyers ? cercle directeur ?)
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60511 internautes nous ont dit merci ce mois-ci

Messages postés
16065
Date d'inscription
samedi 31 mai 2008
Statut
Modérateur
Dernière intervention
21 octobre 2020
2 697
Bon alors pour faire un peu en maths (en simplifiant)

Une ellipse est définie par deux foyers F1(x1,y1) et F2(x2,y2), et un rayon R.
Le point P(x,y) est dans l'ellipse si la distance F1, P, F2, est inférieure à 2R.

Ta fonction booléenne serait donc (en pseudo-code)

p1 = pow(x1-x, 2) + pow(y1-y, 2)
p2 = pow(x2-x, 2) + pow(y2-y, 2)
d = sqrt(p1) + sqrt(p2)

return (d<=2*R)

Remarque : si tu veux faire "tourner" ton ellipse autour d'un centre (x0,y0), il suffit de faire tourner les deux foyers en faisant varier T entre 0 et 2.pi :

x1 = x0 + ro*cos(T)
y1 = y0 + ro*sin(T)
x2 = x0 - ro*cos(T)
y2 = y0 - ro*sin(T)

Ici "ro" est un paramètre constant qui définit la forme de ton ellipse (3*ro <= 2*R).La confiance n'exclut pas le contrôle
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60511 internautes nous ont dit merci ce mois-ci

Messages postés
994
Date d'inscription
lundi 23 juillet 2012
Statut
Membre
Dernière intervention
28 mai 2019
155
Bonjour, je pense que tu trouveras ton bonheur dans :
cet exemple
Messages postés
137
Date d'inscription
lundi 22 mars 2010
Statut
Contributeur
Dernière intervention
3 septembre 2014
29
Bonjour.

Merci beaucoup à tous pour vos réponses.

Après quelques heures d'arrachage de cheveux, j'ai enfin trouvé.

Le problème, c'est que pour dessiner mon ellipse, je pars d'un cercle sur lequel j'applique une échelle au niveau hauteur.

De mon ellipse, je connaissais sa hauteur et sa largeur ainsi que ses coordonnées en x et y (sachant que dans un canvas, le 0-0 d'un objet est son point haut - gauche).

Pour ceux que ça intéresse, voici la fonction que j'ai écrite :

cX : position en x du curseur
cY : position en y du curseur
eX: position en x de l'ellipse
eY: position en y de l'ellipse
width: largeur de l'ellispe
height: hauteur de l'ellipse.

var x = cX -width / 2 + eX;
var y = cY - height / 2 + eY;
var coef = height / width;
y /= coef;
var h = Math.sqrt( x*x + y*y );
return h < width / 2;


Merci beaucoup pour votre aide.