Archives quotidiennes :

Reprise du projet MkDraw en SVG

Publié le par
Répondre

Introduction
Il y a quelques mois j’ai travaillé sur un projet d’application web permettant de dessiner des schémas en utilisant le canvas.
Un membre du forum « SylvainPV » (que je remercie au passage) m’avais demandé pourquoi je n’avais pas utilisé SVG à la place du canvas.
Le projet étant bien avancé (sans parler du fait que je connaissais plus canvas qu’SVG) je ne me voyais pas tout reprendre de zéro en changeant de technologie de dessin.

Mais suite à des retours sur l’application actuelle, j’ai remis les mains dans le code et analysé l’effort à faire pour modifier la méthode de dessin du canvas au SVG

Canvas VS SVG
Deux technologies qui ont leurs avantages et inconvénients, deux technologies différentes de dessin l’un dessine en bitmap (canvas) l’autre en vectoriel (SVG)
Les avantages dont je souhaite profiter en migrant cette application

  • Permettre de selectionner un objet sur le calque en cliquant dessus
  • Profiter du format vectoriel: on peut ainsi augmenter la taille du schéma sans perdre en qualité
  • Permettre d’ajouter des fenêtre contextuel + des liens sur les objets

Un des défauts de la version Canvas, c’est que l’on dessine sur une image, mais il est ensuite difficile de sélectionner sur l’espace de travail un objet pour pouvoir le déplacer, redimensionner ou autre. Pour pallier à ce problème j’ai ajouté des petits icones de crayons en utilisant des « div » avec un lien javascript.

L’objet de la migration
Pour migrer en SVG, il faut supprimer toute trace de canvas: on garde les div utilisés mais on ne dessine plus sur le canvas.
Pour dessiner en SVG on créé dans le DOM de la page HTML du code SVG.

Quelques exemples de migration
On modifie ici principalement le fichier public/js/canvas.js
On passe de ceci:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
drawRect : function(x,y,ilargeur,ihauteur,lineWidth,strokeStyle,fillStyle){
 
    this.ctx.beginPath();
 
    this.ctx.lineWidth=lineWidth;
    this.ctx.strokeStyle=strokeStyle;
    this.ctx.fillStyle=fillStyle;
 
    this.ctx.fillRect(x,y,ilargeur,ihauteur);
    this.ctx.strokeRect(x,y,ilargeur,ihauteur);
 
    this.ctx.closePath();
 
},

A ceci (note je ne peut pas mettre les chevrons inférieur et suppérieur remplacé ici par « [ » et « ] »)

1
2
3
4
5
6
7
drawRect : function(x,y,ilargeur,ihauteur,lineWidth,strokeStyle,fillStyle){
 
    var sSvg='[rect class="chartRect" id="rect'+x+''+y+'" x="'+x+'" y="'+y+'" width="'+ilargeur+'" height="'+ihauteur+'" style="fill:'+fillStyle+';stroke-width:'+lineWidth+';stroke:'+strokeStyle+'"][/rect]';
 
    this.addObject(sSvg);
 
},

Projet Github
Le projet est disponible sous licence LGPLv3 ici https://github.com/imikado/mkdrawsvg