Discussion :

[imikado]

Journal de bord: création d’une application de création de schéma en HTML5: Jour 1

Introduction
Depuis quelques temps déjà j’ai besoin de créer des schémas, si possible interactif.
Principalement des schémas d’architecture avec des serveurs, des bases de données ainsi que des liens entre eux.

Avec le développement des derniers jeux RTS et Bomberman en HTML5, j’ai appris à utiliser les canvas.

Je viens donc vous présenter ici l’application sur laquelle je travaille en ce moment: MkDraw.

Présentation fonctionnelle de l’application
Cette application, basée sur le mkframework, permet de créer des schémas si besoin interactif.
Vous pouvez actuellement:

• gérer des calques
• afficher/cacher des calques/objets
• créer des rectangles, lignes, flèches et bases de données
• créer des liens entre certains éléments
• placer des éléments de manière fixe ou relative (comme un aimant)
• définir une couleur de fond, de bord ainsi que son épaisseur
• écrire un texte sur un rectangle/base de données
• créer une infobulle (avec html si besoin)
• enregistrer votre schéma

Présentation technique
Dans cette application, je créé autant de canvas que de calques, chaque objet ajouté sur la map est un objet javascript.
Chaque objet est une instanciation de la classe Data dans le fichier public/js/data.js
Le constructeur:

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
43
44
function Data(type,idLayer){
    this.type=type;
    this.idLayer=idLayer;
    this.x;
    this.y;
    this.x2;
    this.y2;
 
    this.texte='';
    this.id=oApplication.idObject;
    this.size=11;
    this.visible=1;
 
    this.fillStyle='#ffffff';
    this.lineWidth=2;
    this.strokeStyle='#000000';
 
    this.from;
    this.to;
 
    this.comment='comment';
 
    this.info='';
 
    this.relativeObject='';
 
    this.relativeX=0;
    this.relativeY=0;
 
    this.points='';
 
    oApplication.tObject[this.id]=this;
 
    oApplication.idObject++;
 
    if(!oApplication.tMenuLayerObject[idLayer]){
        oApplication.tMenuLayerObject[idLayer]=Array();
    }
 
 
    oApplication.tMenuLayerObject[idLayer].unshift(this.id);
 
 
}

Dans ce constructeur, on définit les variables par défaut, incrément l’id général et on ajoute le nouvel objet en début de tableau d’objet.
Au moment de dessiner un objet sur la map, on appelle la méthode build() de l’objet:

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
Data.prototype={
    build:function(){
 
        if(this.relativeObject!=''){
            var tmpRelativeObject=oApplication.getObject(this.relativeObject);
            if(tmpRelativeObject){
                this.x=this.relativeX+tmpRelativeObject.x;
                this.y=this.relativeY+tmpRelativeObject.y;
            }
        }
 
        if(this.type=='carre'){
            oApplication.tLayer[this.idLayer].drawRect(this.x,this.y,this.width,this.height,this.lineWidth,this.strokeStyle,this.fillStyle);
            oApplication.tLayer[this.idLayer].fillText(this.x+10,this.y+10,this.texte,this.strokeStyle,this.size);
        }else if(this.type=='texte'){
            oApplication.tLayer[this.idLayer].fillText(this.x,this.y,this.texte,this.strokeStyle,this.size);
        }else if(this.type=='ligne'){
            oApplication.tLayer[this.idLayer].line(this.x,this.y,this.x2,this.y2,this.strokeStyle,this.lineWidth);
        }else if(this.type=='fleche'){
            oApplication.tLayer[this.idLayer].arrow(this.x,this.y,this.x2,this.y2,this.strokeStyle,this.lineWidth);
        }else if(this.type=='bdd'){
            oApplication.tLayer[this.idLayer].drawBdd(this.x,this.y,this.width,this.height,this.lineWidth,this.strokeStyle,this.fillStyle);
            oApplication.tLayer[this.idLayer].fillText(this.x+10,this.y+30,this.texte,this.strokeStyle,this.size);
        }else if(this.type=='link'){
 
            var oFrom=oApplication.getObject(this.from);
            var oTo=oApplication.getObject(this.to);
            console.log('build link from:'+this.from+' to:'+this.to);
 
            if(!oFrom || !oTo){
            }else if(this.points!=''){
                oApplication.tLayer[this.idLayer].linkPoint(oFrom,oTo,this.points,this.strokeStyle,this.lineWidth);
            }else{
                console.log('oFrom et oTo'+oFrom+' '+oTo);
                oApplication.tLayer[this.idLayer].link(oFrom,oTo,this.strokeStyle,this.lineWidth);
 
            }
        }
 
        this.updateInfo();
    },

La suite dans le bilet: http://blog.developpez.com/ducodeetdulibre/