[canvas] Segment de Roue de la chance

**Alex40** · 11/05/2021, 18h09

Bonjour à tous , je cherche à créer une roue de la chance .
J'aimerais le même comportement qu'ici :

https://wheelofnames.com/

Mon problème actuel est pour créer un segment.

Je m'explique, je souhaite que lorsque je rentre un prénom le texte s'affiche au fur et à mesure qu'il est tapé dans un segment et que lorque la touche "entrée" est relâchée celà valide le segment, puis on ajoute un autre segment de la même manière et ainsi de suite.

J'utilise la bibliothèque winwheel.js.

Voici mon code html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link type="text/css" rel="stylesheet" href="styles.css" />
    <title>Canvas</title>
  </head>
  <body>
    <canvas id="canvas" width="880" height="300"></canvas>
 
    <div
      id="names"
      spellcheck="false"
      contenteditable="true"
      class="textarea"
      style="overflow: auto; width: 300px; height: 200px; border: solid black"
      onKeyUp="maj(event);"
    ></div>
 
 
    <script src="Winwheel.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

et mon javascript:

Code javaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
let theWheel = new Winwheel();
const elt = document.getElementById("names");
 
function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "#";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
 
function addSegment(texte) {
  // Use a date object to set the text of each added segment to the current minutes:seconds
  // (just to give each new segment a different label).
  let date = new Date();
  let color = getRandomColor();
 
  // The Second parameter in the call to addSegment specifies the position,
  // in this case 1 meaning the new segment goes at the start of the wheel.
  theWheel.addSegment(
    {
      text: texte,
      fillStyle: color,
    },
    1
  );
  // The draw method of the wheel object must be called in order for the changes
  // to be rendered.
  theWheel.draw();
}
 
function maj(event) {
  var x = event.keyCode;
  let texte = "";
  console.log(texte);
  if (x == 13) {
    texte = elt.textContent;
    addSegment(texte);
  }
}

Quelle serait pour vous la meilleure méthode pour résoudre ce problème?

**mathieu** · 12/05/2021, 20h56

vous pouvez par exemple vider la zone de texte après la création du segment

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
	if (x == 13) {
 
		texte = elt.textContent;
 
		addSegment(texte);
 
		elt.textContent = "";
 
	}

**Alex40** · 12/05/2021, 23h32

Oui effectivement celà fonctionne, c'est une bonne piste, par contre ce n'est pas tout a fait le comportement attendu, je souhaite que le prénom reste afficher dans le textarea, et que les prénoms s'affichent les uns en dessous des autres.
Merci d'avoir pris le temps de me répondre.

**mathieu** · 13/05/2021, 04h21

vous voulez que l'utilisateur puisse supprimer un segment ?

dans ce cas, je pense que le mieux est de faire un bouton qui va supprimer tous les segments et les recréer ensuite :
http://dougtesting.net/winwheel/docs...emove_segments

**Alex40** · 13/05/2021, 13h54

Je souhaite le comportement suivant :

1_ Lorsque Je rentre la première lettre du premier prénom cela génére un premer segment qui prend la totalité de la roue.
2_Lorsque j'appuie sur entrée, je valide le prénom sans l'effacer du textarea (je passe à la ligne en dessous).
3_A la saisie de la première lettre du second prénom celà génère un nouveau segment, le prénom s'y affiche de nouveau pas à pas et ainsi de suite.

un peu comme ici : https://wheelofnames.com/fr/

J'essaie actuellement de faire en sorte d'enregistrer les prénoms saisis dans le" textarea" dans un "array",pour pouvoir les traiter un par un , je cherche la meilleure méthode.

[canvas] Segment de Roue de la chance

JavaScript

Discussions similaires

Partager

Partager