Ajouter des évènements mouseup et mousedown

Version imprimable

salut a tous

j'ai besoin de votre aide , j'ai entrain de coder en javascript et c'est la première fois que je travail avec canvas mon problème c'est ajouter des événements lorsque je fait un dessin sur mes plusieurs " canvas " j'ai utiliser dans mon code la freamwork CreateJs ma question est comment je peut ajouter faire clique pour commencer le dessin et le clique pour stopper le dessin , j'ai deja ajouter 2 function mais ca marche pas puisque je fait le dessin sur plusieurs canvas voici mon code :

Code:

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
(function (){
 
    var TousLesCanvas = document.getElementsByTagName('canvas');
    var tab = new Array();
    var tab_shape = new Array();
    var stage, shape;
    var color = "#000";
    var size = 10;
 
    for (var i=0; i<TousLesCanvas.length; i++) {
 
      stage = new createjs.Stage(TousLesCanvas[i]);
      tab[ TousLesCanvas[i].id ] = stage;
 
      shape = new createjs.Shape();
      tab_shape[TousLesCanvas[i].id] = shape ;
      stage.addChild(shape);
 
      console.log("stage id : "+stage.id);
 
      TousLesCanvas[i].onmouseover = function (event) {
 
        var oldX, oldY;       
 
        canvas_id = event.target.id;
        console.log("hello man : "+canvas_id);
 
        current_stage = tab[ canvas_id ];
        current_shape = tab_shape[canvas_id];
 
 
 
       function handleMouseDown (evt){
 
      current_stage.addEventListener("stagemousemove", handleMouseMove);
 
      };
 
 
        function handleMouseMove (evt) {
          if (oldX) {
            current_shape.graphics.beginStroke(color)
                    .setStrokeStyle(size, "round")
                    .moveTo(oldX, oldY)
                    .lineTo(evt.stageX, evt.stageY);
            current_stage.update();
          }
          oldX = evt.stageX;
           console.log("X ========" +oldX);
          oldY = evt.stageY;
       console.log("y ========" +oldY);
        };
 
 
       function handleMouseUp(evt){
 
      current_stage.removeEventListener("stagemousemove", handleMouseMove);
 
      };
      };
 
    }
 // end for   
 
 
 
 
 })();//end function

03/09/2016, 10h38
NoSmoking

Bonjour et bienvenue sur DVP.

Sur le mousedown d'un <canvas> tu affectes une fonction sur le mousemove que tu retires sur le mouseup en ayant pris soin de garder en référence le <canvas> actif.

voila ce que j'ai fait je peut cliquer pour dessiner mais j'ai un problème que il me donne de cliquer et dessiner sur chaque <canvas> d'une façon individuelle mon résultat c'est de cliquer et dessiner sur tous les canvas comme une seule canvas

Code:

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
(function (){
 
    var TousLesCanvas = document.getElementsByTagName('canvas');
    var tab = new Array();
    var tab_shape = new Array();
    var stage, shape;
    var size = document.getElementById("drawing-line-width").value;
    var color = "#000";
 
 
 
    for (var i=0; i<TousLesCanvas.length; i++) {
 
      stage = new createjs.Stage(TousLesCanvas[i]);
      tab[ TousLesCanvas[i].id ] = stage;
 
      shape = new createjs.Shape();
      tab_shape[TousLesCanvas[i].id] = shape ;
      stage.addChild(shape); 
 
      console.log("stage id : "+stage.id);
 
      TousLesCanvas[i].onmouseover = function (event) { 
 
        var oldX, oldY;        
 
        canvas_id = event.target.id;
        console.log("hello man : "+canvas_id);
 
        current_stage = tab[ canvas_id ];
        current_shape = tab_shape[canvas_id];
 
        current_stage.addEventListener("stagemousedown", handleMouseDown);
        current_stage.addEventListener("stagemouseup", handleMouseUp);
        /////////////////////////////////////////////////////////////////
 
   function handleMouseDown(event) {
 
    current_stage.addEventListener("stagemousemove", handleMouseMove);
 
  }
 
  /////////////////////////////////////////////////////////////////////    
 
    function handleMouseMove(event) {
 
 
     if (oldX) {
            current_shape.graphics.beginStroke(color)
                    .setStrokeStyle(size, "round")
                    .moveTo(oldX, oldY)
                    .lineTo(event.stageX, event.stageY);
            current_stage.update();
          }
          oldX = event.stageX;
           console.log("X ========" +oldX);
          oldY = event.stageY; 
       console.log("y ========" +oldY);
  }
  /////////////////////////////////////////////////////////////////    
 function handleMouseUp(event) {
 
    current_stage.removeEventListener("stagemousemove", handleMouseMove);
 
  }
 
      };
 
    }
 // end for    
 
 
 
 
 })();//end function

11/09/2016, 19h51
NoSmoking

dans un premier temps tu devrais regarder de près cet exemple : http://createjs.com/demos/easeljs/curveto, puis « anonymiser » les fonctions handleMouseDown/Move et UP.
14/09/2016, 12h40
sararajinfo

merci pour vos réponse ,oui j'ai déjà basé sur cet exemple pour faire ça ,le problème c'est d'appliquer cet exemple sur plusieurs canvas qui se trouve dans la meme page j'ai fait une matrice des canvas sur la page pour faire dessiner mais sans aucune résultat ,comment puis-je me faire dessiner de placer sur les canvas et dessiner sans une autre clique seulement un clique sur n'importe quel canvas pour dessiner et déplacer sur les canvas qui sont placer l'une a cote de l'autre