Détection de clic dans une ellipse
Résolu
vincebzh
Messages postés
137
Date d'inscription
Statut
Contributeur
Dernière intervention
-
vincebzh Messages postés 137 Date d'inscription Statut Contributeur Dernière intervention -
vincebzh Messages postés 137 Date d'inscription Statut Contributeur Dernière intervention -
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.
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
- Touslesdrivers detection - Télécharger - Pilotes & Matériel
- Détection de l'ouverture du clapet de mon étui samsung - Forum iPhone
- Excel double clic cellule source ✓ - Forum Excel
4 réponses
Bonjour,
Que connais-tu de ton ellipse ? Comment est-elle définie ?
(droite directrice ? foyers ? cercle directeur ?)
Que connais-tu de ton ellipse ? Comment est-elle définie ?
(droite directrice ? foyers ? cercle directeur ?)
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)
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 :
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
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
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.
Merci beaucoup pour votre aide.
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.
