11519 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Tout d'abord, vu que je n'utilise que du JQuery avec Canvas me suis dis qu'ici ce serait plus adapté que HTML, alors j'espère ne pas mettre trompé ^^

En bref voilà mon objectif final : http://jsfiddle.net/yBejR/
La où je coince c'est pour le pointeur dans le triangle. Je n'arrive pas à le conserver dans le triangle et de continuer à le bouger Même si ma souris sort du Triangle. Dans mon cas, dès que la souris sort du triangle, le pointeur reste à la dernière position connue, du coup niveau ergonomie c'est zéro Smiley ohwell J'espère que je suis clair x)

J'ai déjà demandé à un ami qui s'y connais beaucoup en JQuery, il m'a dis qu'il s'agissait surement de trigonométrie, en rapport avec le théorème de Thales.
Voilà une illustration de son idée : (au cas où : http://puu.sh/8OPP5.jpg)
upload/54790-imgpbmAlsa.png

(Explication : Lorsque la souris sort du triangle, un 2nd triangle "invisible" se crée et s'agrandit de sorte à ce que la souris reste toujours sur le bord du 2nd triangle "invisible". Ensuite un calcul se fait pour rendre le résultat dans le 1er triangle, celui de base.)

J'ai parfaitement compris son idée mais la je sais pas du tout quels calculs réaliser x) Pourriez-vous me dire si cette méthode est la bonne, et si oui me guider un peu dans les calculs à effectuer s'il vous plait ^^
J'ai bien réfléchi et finalement j'ai trouvé une autre solution, faire comme ceci :http://puu.sh/8SSJg.jpg (désolé, l'upload de l'image sur Alsa bug et me re-affiche l'ancienne image Smiley ohwell )
Explications :
- Le triangle invisible en gris et le triangle de base ont le même centre O, de coordonnées 0,0
et chacun un sommet X de coordonnées différentes.
- Je calcul le ratio de la taille des deux triangles : (O,X2) / (O,X1)
- Je récupère la position de la souris par rapport au centre O
- Je divise ses coordonnées par le ratio
- Les nouvelles coordonnées s'applique au pointeur dans le triangle

Exemple :
distance O,X1 : 50
distance O,X2 : 150
ratio : (O,X2) / (O,X1) = 150 / 50 = 3
coord Souris : x=72 ; y=18
coord Pointeur : x=72 / 3 ; y=18 / 3 >> x = 14 ; y=6

En revanche j'y pense que maintenant mais je sais pas comment m'y prendre pour changer la taille du triangle invisible, de sorte que la souris soit toujours sur ses extrémités. Une idée ? Smiley ohwell

Je ne peux pas tester mon code actuellement, j'ai fais ça sur l'ordi du bureau et étant en alternance j'y retourne que dans 2 semaine x) donc en attendant je voulais vos avis si selon vous ça pourrait fonctionner Smiley smile
Modifié par burnout293 (19 May 2014 - 21:44)