11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

je cherche des idées ou des pistes pour résoudre le problème suivant:

- on affiche une image à l'écran
- on clique 3 fois dans l'image, pour créer 3 points
- les 2 droites qui se touchent au point n°2 sont affichées
- l'angle formé par les 2 droites est calculé

Faudrait il que je me tourne plutôt vers canvas et javascript ou plutôt vers une librairie Php dédiée au traitement des images?

merci
Hello,

Tu peux faire ça en full JS, ou bien avec un canvas mais je ne vois pas l’intérêt.
( encore moins de le faire en back )
Pour tracer des lignes simples et des points tu peux utiliser des SVG que tu crée en JS.
SVG que tu placera en fixed et zindex supérieur à ton élément le plus haut (image ? )
C'est propre et rapide !

Perso je ferais comme ça:
( si besoin je te fais un code, là tu demande une piste Smiley cligne )

_ Une variable compteur pour le nombre de click
_ une fonction écouteur d'événement 'click'
_ une fonction qui récupère la position X et Y de la souris

let myMouse = {};
myMouse.x = window.event.clientX;
myMouse.y = window.event.clientY;
return myMouse;

_ une fonction qui ajoute les points à chaque click
_ une condition qui trace ta première ligne au deuxième click
_ une condition qui trace ta deuxième ligne au troisième click
_ Et ... avec les coordonnées tu peux calculer l'angle, trigo de 1ère Smiley lol

J'ai oublié pleins de trucs mais l'essentiel est là
J'ai trouvé une solution pour afficher des lignes: je capture les coordonnées des point où je clique et ensuite, en fin de capture (click sur un bouton) , je créé des lignes reliant mes points.

Maintenant, pour mon calcul d'angle, ça devient plus un problème de trigonométrie, alors j'ai créé une autre question sur le forum, pour éviter de mélanger les choses Smiley cligne