IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Journal de bord de création d'une application de dessin


Sujet :

JavaScript

Mode arborescent

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Rédacteur
    Avatar de imikado
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Décembre 2006
    Messages
    5 239
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Finance

    Informations forums :
    Inscription : Décembre 2006
    Messages : 5 239
    Billets dans le blog
    17
    Par défaut Journal de bord de création d'une application de dessin
    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/
    Images attachées Images attachées  
    Framework php sécurisé et simple à prendre en main avec générateur web http://mkframework.com/ (hebergé sur developpez.com)
    Mes cours/tutoriaux

Discussions similaires

  1. Réponses: 2
    Dernier message: 09/11/2006, 22h22
  2. [VS2005/C#]création d'une application MDI
    Par malikoo dans le forum Windows Forms
    Réponses: 1
    Dernier message: 20/07/2006, 17h48
  3. Réponses: 19
    Dernier message: 10/05/2006, 09h40
  4. Réponses: 4
    Dernier message: 08/01/2006, 04h30
  5. [tomcat] Création d'une application WEB
    Par bob33 dans le forum Tomcat et TomEE
    Réponses: 2
    Dernier message: 25/10/2004, 19h35

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo