Bonsoir,

Je suis étudiant en informatique de gestion et je dois faire un exercice concernant les canvas en javascript.
Concrètement, l'exercice est de coder 4 boutons (Ajouter,Nommer,Exporter,Importer) qui vont agir sur un canvas d'une taille prédéfinie. Le but étant de dessiner des cercles sur ce canvas, avec la méthode arc().

Pour se faire, je dois demander à l'utilisateur de taper la coordonnée X, la coordonnée Y et le rayon souhaité et tracer ce cercle. J'ai donc utilisé un tableau afin de stocker ces données.

L'énoncé demande également de vérifier si chacune de ces données est bien un nombre, ce que j'ai fais grâce à une fonction auxiliaire et la méthode isFinite().

Seulement l'énoncé me demande d'aller encore plus loin, à savoir vérifier que la coordonnée X entrée se situe entre 0 et la largeur du canvas, que la coordonnée Y se situe entre 0 et la hauteur du canvas, et enfin que le cercle ne sorte pas du canvas.

Mon problème est le suivant : je ne vois pas comment coder cela en un minimum de lignes, de manière à ne pas répéter de code.

J'ai essayé ceci mais ça me forcerais à répéter 3 fois le même code et je ne veux pas ça
while(i == 0 && donnees[i] < 0 || donnees[i] > canvas.width) { donnees[i] = prompt("Donnée invalide. Retapez une donnée valide"); }

Toute aide serait la bienvenue
Merci d'avance

Perso je ferais une fonction qui prend en paramètre x, y et r et qui retourne un booléen.

Appartenance du centre du cercle au canvas:
0 < x < largeur_canvas
0 < y < hauteur_canvas

Appartenance du cercle au canvas:

// que le cercle ne dépasse pas à gauche du canvas 
(x - r) > 0

// ne dépasse pas à droite
(x + r) < largeur_canvas

// ne dépasse pas en haut
(y - r) > 0 

// ne dépasse pas en bas
(y + r) < hauteur_canvas

Cercle dans le canvas => Centre dans le canvas
Centre dans le canvas =/=> Cercle dans le canvas

Donc le second cas de figure est un cas particulier du premier, si la seconde est remplie, la première l'est nécessairement mais pas l'inverse

Sinon pour ne pas avoir à appeler 3 prompt() différents, tu peux rentrer les 3 valeurs dans le même prompt(), en te fixant un format.
ex:

x, y, r // le séparateur serait ", "
x y r   // le séparateur serait " "

Tu utilises ensuite la fonction split() (http://www.w3schools.com/jsref/jsref_split.asp) afin de récupérer tes variables séparément et vérifier à nouveau l'inclusion dans le canvas

Merci MrGreez94 mais je ne vois toujours pas comment faire ça sans que ça soit trop "lourd".

Je m'explique, j'ai crée cette boucle dans ma fonction auxiliaire :
while(!isFinite(donnees[i]) || !verificationCoherence(donnees,i)) { donnees[i] = prompt("Nombre incorrect"); }
Dans ma fonction verificationCoherence, je ne vois pas d'autres solutions que de faire un switch pour i ==1,2,3 et pour chacun si la condition relative à la donnée est respectée, renvoyer true.

Mais je sais que c'est trop lourd et donc pas comme ça que je veux le faire

(PS : Je testerais la fonction split() quand j'aurais trouvé comment résoudre mon problème au dessus ^^
Merci en tout cas)

Si j'ai bien compris, ta fonction verificationCoherence() permet de vérifier que le cercle associé ne dépasse pas du canvas et tu utilises la fonction isFinite afin de savoir si la valeur est un nombre ?

Alors attention, je pense que isFinite ne fait pas ce que tu veux, elle te permet de déterminer si l'argument est fini. Or en javascript, null, qui n'est pas un nombre, est considéré comme fini ! Idem pour une string vide "" !

A ma connaissance il n'y a pas de fonction toute faite qui le permette, il te faudrait la créer toi même

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

ce qui marche tout de suite mieux

Le problème dans ton cas c'est que tu traites les valeurs une par une. Or pour l'inclusion du cercle, tu es obligé de connaître les 3 valeurs qui définissent le cercle.

Globalement, si tu pars sur cette structure, tu vas vites foncer dans le mur (c'est pas méchant hein).
Tu utilises une boucle pour faire deux choses, parcourir chaque valeur et tester leur cohérence. Or je sais pas si tu vois le truc mais t'as une condition qui est finie au bout de 3 itérations (une pour x, une pour y et une pour r) et une qui peut ne jamais finir.

C'est pour ça que je te conseille de ne pas te prendre la tête et de repartir sur un truc plus simple et plus efficace:

var x = y = r = null;
var donnees = null;

do {
	donnees = prompt("Entrez les valeurs x, y et r")
	donnees = donnees.split(" ")
	x = donnees [0];
	y = donnees [1];
	r = donnees [2];
} while(!isNumeric(x) && !isNumeric(y) && !isNumeric(r) && verificationCoherence(x, y, r))

Le do-while est un while qui itère au moins une fois

Merci beaucoup je vais faire comme ça