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 ?