Discussion :

[aertys]

bonjour,

je voudrais créer une application js qui permette à l'utilisateur de dessiner. pour commencer simple,
on n'aura qu'une couleur et une forme : un carré noir de 2px de coté.

pour mon html je ne prévois qu'un html suivie d'un body vide

voici mon js:

Code :

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
(function() { 
 
     var myhtml = document.getElementsByTagName("html") [0],
         mybody = document.getElementsByTagName("body") [0], 
         posX,
         posY,
         bouge;
 
     addEventListener(window, 'load', function () {
 
          addEventListener(mybody, 'mousedown', function () {
                bouge = true;
          });
 
          addEventListener(mybody, 'mousemove', function (e) {
                if (bouge = true) {
                    posX = e.clientX;
                    posY = e.clientY;
                    var div = document.createElement('div');
                    div.style.width = '2px';
                    div.style.height = '2px';
                    div.style.backgroundColor = 'black';
                    div.style.position = 'absolute';
                    div.style.left = posX;
                    div.style.top = posY;
                    mybody.appendChild(div);
                }
          });
 
          addEventListener(mybody, 'mouseout', function () {
                bouge = false;
          });
 
     });
 
})();

pouvez-vous me le corriger?

[Bovino]

C'est pas comme ça que s'utilise addEventListener()... Consulte la doc.

[TiranusKBX]

L'utilisation du addEventListener se fait comme ce qui suit

Code Javascript :

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

noeudDom.addEventListener('mouseout', function () {/*traitement*/},false);

[aertys]

voici mon nouveau script:

Code :

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
(function() { 
 
     var myhtml = document.getElementsByTagName("html") [0],
         mybody = document.getElementsByTagName("body") [0], 
         posX,
         posY,
         bouge;
 
     addEventListener(window, 'load', function () {
 
          addEventListener(mybody, 'mousedown', function () {
                bouge = true;
          }, false);
 
          addEventListener(mybody, 'mousemove', function (e) {
                if (bouge = true) {
                    posX = e.clientX;
                    posY = e.clientY;
                    var div = document.createElement('div');
                    div.style.width = '2px';
                    div.style.height = '2px';
                    div.style.backgroundColor = 'black';
                    div.style.position = 'absolute';
                    div.style.left = posX;
                    div.style.top = posY;
                    mybody.appendChild(div);
                }
          }, false);
 
          addEventListener(mybody, 'mouseout', function () {
                bouge = false;
          }, false);
 
     }, false);
 
})();

[Bovino]

Ah, super.

Mais juste par curiosité, si tu ne tiens pas compte des réponses reçues, pourquoi tu poses des questions ?

[aertys]

Peux-tu m'expliquer ce que j'ai mal fait,?

[Bovino]

C'est pas comme ça que s'utilise addEventListener()... Consulte la doc.

L'utilisation du addEventListener se fait comme ce qui suit

Code Javascript :

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

noeudDom.addEventListener('mouseout', function () {/*traitement*/},false);

Code :

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

1
2
addEventListener(window, 'load', function () {
          addEventListener(mybody, 'mousedown', function () {

[aertys]

c'est pourtant ce que j'ai écrit!

Code :

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

1
2
3
          addEventListener(mybody, 'mousedown', function () {
                bouge = true;
          }, false);

[Bovino]

Code :

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

noeudDom.addEventListener('mouseout', function () {/*traitement*/},false);

[aertys]

excusez-moi je n’avais pas compris

Code :

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
(function() { 
 
     var myhtml = document.getElementsByTagName("html") [0],
         mybody = document.getElementsByTagName("body") [0], 
         posX,
         posY,
         bouge;
 
     window.addEventListener('load', function () {
 
          mybody.addEventListener('mousedown', function () {
                bouge = true;
          }, false);
 
          mybody.addEventListener('mousemove', function (e) {
                if (bouge = true) {
                    posX = e.clientX;
                    posY = e.clientY;
                    var div = document.createElement('div');
                    div.style.width = '2px';
                    div.style.height = '2px';
                    div.style.backgroundColor = 'black';
                    div.style.position = 'absolute';
                    div.style.left = posX;
                    div.style.top = posY;
                    mybody.appendChild(div);
                }
          }, false);
 
          mybody.addEventListener('mouseout', function () {
                bouge = false;
          }, false);
 
     }, false);
 
})();

[TiranusKBX]

ha la c'est bien mieux ^^

[aertys]

voici mon html:

Code html :

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

1
2
3
4
5
6
7
<html>
     <body>
          <script type='text/javascript' src='../../js/dessin.js'> 
 
          </script>
     </body>
</html>

[aertys]

mais lors d'un clic rien ne se passe

[NoSmoking]

Bonjour,
au moins 3 choses :
- Quelle hauteur fait ton BODY?
- Que veux dire ce bout de code if (bouge = true)?
- Quelle unité pour les positions?

Code :

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

1
2
div.style.left = posX;
div.style.top = posY;

[aertys]

j'avais en effet fais un paquet d'oublis!

Code :

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
(function() { 
 
     window.addEventListener('load', function () {
 
     var myhtml = document.getElementsByTagName("html") [0],
         mybody = document.getElementsByTagName("body") [0], 
         posX,
         posY,
         bouge;
 
          mybody.style.width = '100%';   
          mybody.style.height = '100%';
 
          mybody.addEventListener('mousedown', function () {
                bouge = true;
          }, false);
 
          mybody.addEventListener('mousemove', function (e) {
                if (bouge == true) {
                    posX = e.clientX + 'px';
                    posY = e.clientY + 'px';
                    var div = document.createElement('div');
                    div.style.width = '5px';
                    div.style.height = '5px';
                    div.style.backgroundColor = 'black';
                    div.style.position = 'absolute';
                    div.style.left = posX;
                    div.style.top = posY;
                    mybody.appendChild(div);
                }
          }, false);
 
          mybody.addEventListener('mouseup', function () {
                bouge = false;
          }, false);
 
     }, false);
 
})();

[NoSmoking]

C'est bien, même si je pense que de cloner un élément devrait améliorer la vitesse ce qui reste encore à voir/tester, ...et maintenant !?!

Nota: Tu pourrais également regarder du coté des CANVAS.

[aertys]

je vous remercie beaucoup, ça marche parfaitement maintenant!

cela dit, il me reste une petite dernière question :

je voudrais ajouter un moyen de sauvegarder son dessin : je sais que je dois insérer le texte html de la page modifiée dans une base de données, mais comment récupérer ce HTML en JavaScript?

[Clemlak]

Je te conseille de suivre les conseils de NoSmoking et d'utiliser "canvas". La fonction toDataURL() te permettra de récupérer le contenu de ton canvas (et donc du dessin de l'utilisateur). Ensuite, si tu veux enregistrer ton dessin dans une base de données, tu peux utiliser Parse.com qui te permet de tout faire en Javascript.

[aertys]

merci!

[NoSmoking]

...mais comment récupérer ce HTML en JavaScript?

innerHTML me parait tout désigné mais dans ton cas il serait peut être, si tu conserves cette méthode, de ne sauvegarder que les coordonnées de chacune des DIVs.