Détection de clic dans une ellipse

Résolu/Fermé

vincebzh Messages postés 137 Date d'inscription lundi 22 mars 2010 Statut Contributeur Dernière intervention 7 mai 2013 - 10 sept. 2012 à 22:32
vincebzh Messages postés 137 Date d'inscription lundi 22 mars 2010 Statut Contributeur Dernière intervention 7 mai 2013 - 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 ( 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.

A voir également:

Détection de clic dans une ellipse
Detection materiel pc - Guide
Atout clic - Télécharger - Éducatifs
Windows 11 clic droit afficher plus d'options par défaut - Guide
Eaton ellipse eco 650 ne s'allume pas - Forum Matériel & Système
Aucun pilote de périphérique n'a été détecté - Forum Windows 10

4 réponses

Réponse 1 / 4

swed
11 sept. 2012 à 09:55

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

Réponse 2 / 4

KX Messages postés 16733 Date d'inscription samedi 31 mai 2008 Statut Modérateur Dernière intervention 31 janvier 2024 3 015
Modifié par KX le 11/09/2012 à 14:57

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

Réponse 3 / 4

tuxboy Messages postés 994 Date d'inscription lundi 23 juillet 2012 Statut Membre Dernière intervention 28 mai 2019 189
11 sept. 2012 à 10:53

Bonjour, je pense que tu trouveras ton bonheur dans :
cet exemple

Réponse 4 / 4

vincebzh Messages postés 137 Date d'inscription lundi 22 mars 2010 Statut Contributeur Dernière intervention 7 mai 2013 29
12 sept. 2012 à 13:52

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.

Discussions similaires

Clic molette qui ne marche pas

One piece : l'ellipse

double clic donne proprietes !

"AMD a détecté un dépassement de délai du pilote"

Touche ctrl + clic ?

Discussions similaires

Newsletters