Salut, voil� j'essaie de me construire quelques composants (bouton, combobox, tirette etc... � int�grer directement dans paper)
pour �viter d'avoir des balises html qui se chargent avant et ind�pendamment de l'animation. En fait, je veux refaire du flash...
Du coup, je me suis essay� � un bouton pour d�marrer.

J'aimerais faire une classe que je pourrais typer d�s le d�part comme un objet paper.element

faire un truc comme �a : class Button extends paper.element {....

En effet, j'aimerais pouvoir faire mybutton=new Button(....) et mybutton.click(handleClick)

Alors pour l'instant, j'arrive toujours � bidouiller une solution :
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
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
<!DOCTYPE html>
 
<html>
<head>
    <title></title>
    <style>
        #stage{
            
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
</head>
<body>
<div id="stage"></div>
 
<script>
function Button(x,y,w,h){
  var _Text1 ="Button",_Text2="";
  var bascule=false; 
  var form=paper.rect(x,y,w,h,7).attr({
          'stroke-width' :1,
           stroke: '#707070'});
  
  var str=paper.text(x+w/2 ,y +h/2, _Text1).attr({
           "font-family":"Tahoma",
           "font-size":18,
            fill:'black'
        });
  
 
  var  group=paper.set();
  group.push( form,str ).attr({ "cursor" : "pointer"});
  
 this.innerHTML=group; 
  
  Object.defineProperties(this, {
        "titre": {
            get: function () {
                return _Text1;
            },
            set: function (value) {
                _Text1 = value;
               str.attr({'text':value});
            }
        }
    });
 
 
 Object.defineProperties(this, {
        "titreclick": {
            get: function () {
                return _Text2;
            },
            set: function (value) {
                _Text2 = value;
            }
        }
    });
 
   
 function skin(order){
  switch(order){
    case (0): form.attr({ fill: '90-#cfcfcf:50-#dddddd:5-#ebebeb:20-#f2f2f2:25'});
     break;
    case (1): form.attr({fill: '90-#bef6fd:20-#a7d9f5:50-#d9f0f2:15-#eaf6f2:15' });
      break;
    case (2): form.attr({fill: '90-#98d1ef:20-#66afd7:50-#c4e5f6:15-#deedf6:15'});
      break;
   }
 }
 
 skin(0);
 
  function handleMouseOver(e){
     skin(1);
  }
  
   function handleMouseOut(e){
     skin(0);
  }
  
   function handleMouseDown(e){
    bascule=!bascule;
    skin(2);
    caption();
  
  }
  
  function caption(){
    if (_Text2 !='' ){
       if (bascule){
          str.attr({'text':_text2});
       } else {
          str.attr({'text':_text1});
       }
    }
    else {
          str.attr({'text':_text1});
    }
  }
 
   
  group.mouseout(handleMouseOut);
  group.mouseover(handleMouseOver);
  group.mousedown(handleMouseDown);
  group.mouseup(handleMouseOut);
}
 
var paper= Raphael("stage",500,300);
var mybutton=new Button(20,20,150,50);
mybutton.titre='Start';
mybutton.titreclick='Stop';
 
mybutton.innerHTML.click(function(e){
   console.log("ça marche");
});
 
</script>
 
</body>
</html>

Mais bon, le but, c'est d'essayer de faire �a un peu plus correctement...Alors comment trouver la bonne syntaxe pour faire d�river mon bouton de paper element ?