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

Messages postés
137
Date d'inscription
lundi 22 mars 2010
Statut
Contributeur
Dernière intervention
3 septembre 2014
- - Dernière réponse : vincebzh
Messages postés
137
Date d'inscription
lundi 22 mars 2010
Statut
Contributeur
Dernière intervention
3 septembre 2014
- 12 sept. 2012 à 13:52
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 ( http://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.


Afficher la suite 

4 réponses

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

Dire « Merci » 1

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

CCM 69378 internautes nous ont dit merci ce mois-ci

Messages postés
16079
Date d'inscription
samedi 31 mai 2008
Statut
Modérateur
Dernière intervention
22 novembre 2019
2455
1
Merci
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

Dire « Merci » 1

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

CCM 69378 internautes nous ont dit merci ce mois-ci

Messages postés
1184
Date d'inscription
lundi 23 juillet 2012
Statut
Membre
Dernière intervention
28 mai 2019
113
0
Merci
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
0
Merci
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.