Reprise du projet MkDraw en SVG jour 2

Introduction
Dans le précedent billet, je vous indiquais avoir entrepris la migration du projet MkDraw de canvas à SVG.

Etat d’avancement
La migration s’est plutot bien passé, la majorité du code à migrer étant centralisé dans les classes javascript Canvas.js et Application.js
Pièce jointe 148737

Les gros changements canvas vers SVG
Si la migration a été rapide, je me retrouvais dans une situation peu propre, et surtout non satisfaisante:
En remplacant le code dessinant sur un objet canvas par le code SVG adéquat, je me retrouvais dans une situation, ou j’avais des div qui remplaçait mes canvas, je faisais comme pour l’application canvas, j’affichait ou cachait des calques en jouant sur l’attribut display de la div.
Mais cela ne donnait pas le resultat escompté: impossible d’interagir avec les objets sur l’espace de travail: en effet, chaque forme dessiné étant dans un div posé les uns aux dessus des autres il m’etait impossible d’user des avantages du format SVG.
J’ai donc repenser le mode de fonctionnement des calques pour qu’on arrive au final à générer un seul fichier SVG

Les avantages de cette version par rapport à MkDraw
Vous pouvez cliquer sur les objets sur l’espace de travail: chaque groupe contient un attribut onClick qui permet de passer l’objet en édition.
Vous pouvez donc cliquer sur un objet pour le sélectionner, puis cliquer à un autre endroit pour l’y déplacer.
Ensuite, lorsque vous souhaitez dessiner un nouvel objet, l’espace de travail passe en rouge, avec une opacité de 50%: en effet, lorsque vous dessiner une nouvelle figure, il me faut la créer en SVG, et je ne peux pas l’inclure dans le SVG global, car c’est une figure temporaire.
Par exemple quand vous créer un rectangle, vous cliquez une première fois pour debuter l’angle haut gauche, puis vous deplacer la souris pour definir les dimensions de celui-ci. Ce faisant, il faut à chaque déplacement de la souris modifier cet objet temporaire, et ce n’est qu’une fois le second clic effectué que la nouvelle figure sera ajoutée au calque sélectionnée:

Pièce jointe 148739

Il y a un attribut onMousemove permettant de dessiner « à la volée » le futur objet

Pièce jointe 148738

Pour permettre ceci, j’ai toujours un div « canvas_tmp » dont l’attribut display passe à bloc (avec une transparence de 50%) seulement lorsqu’on clique sur un objet à ajouter, sinon ça cacherait mon svg et annulerait les interactions des objets

Pour permettre ceci, j’ai toujours un div « canvas_tmp » dont l’attribut display passe à bloc (avec une transparence de 50%) seulement lorsqu’on clique sur un objet à ajouter, sinon ça cacherait mon svg et annulerait les interactions des objets :(

Projet Github
Le projet est toujours hebergé ici: https://github.com/imikado/mkdrawsvg

Le billet: http://blog.developpez.com/ducodeetd...-en-svg-jour-2

C'était courageux de ta part d'entamer cette migration à ce stade d'avancement, j'espère qu'elle sera profitable.

Concernant les objets temporaires, rien n'oblige à utiliser un élément SVG distinct. La manipulation d'éléments en SVG est très semblable à celui du DOM classique, les éléments peuvent être ajoutés et retirés à tout moment. Un avantage de l'aspect objet de SVG est que le passage de cet objet temporaire à l'objet définitif ne nécessite pas de supprimer et recréer un nouvel objet, on peut se contenter de garder le même objet et le ranger ailleurs. J'avais choisi cette approche pour le développement d'un éditeur d'image vectoriel en Java Swing, ce n'est pas le même langage mais la logique est la même.

Merci, je vous ai cité dans le précédent billet, mais
ne pouvant pas le remettre en actualité, j'ai du créé un nouveau topic.

oui pour le temporaire, je ne suis en effet pas obligé comme contrairement au canevas, je verrais si je change cela : j'aime bien ce fond semi transparent a la création ;)

Oui c'est déjà profitable, je vais voir pour améliorer l'édition de figure "à la volée"
Ou j'utiliserai encore cette div temporaire pour afficher des indicateurs de modification

Introduction
Pour le jour 2, on profite des avantages du SVG:

• on peut selectionner un objet en cliquant dessus sur le dessin
• on peut deplacer un objet par drag and drop
• on peut exporter l’image généré

Sélection d’objet sur le dessin
Lorsque l’on dessine un objet, on met en temporaire l’id de celui-ci,
Dans le fichier public/js/data.js

Code:

---

1 2 3 4

build:function(){ oApplication.dataIdDrawed=this.id; (...)

---

Et dans le fichier public/js/canvas.js

Code:

---

1 2 3 4 5

drawRect : function(x,y,ilargeur,ihauteur,lineWidth,strokeStyle,fillStyle){   //on ajoute la methode onMouseDown où l'on indique d'editer l'objet sSvg+='onMouseDown="oApplication.selectObject('+oApplication.dataIdDrawed+')" ';

---

Deplacement des objets en drag and drop
Ici la modification se fait en plusieurs endroits:
Dans public/js/canvas.js on active le drag and drop via l’event onMouseDown/onMouseUp

Code:

---

1 2 3 4 5 6 7 8 9

drawRect : function(x,y,ilargeur,ihauteur,lineWidth,strokeStyle,fillStyle){   //on ajoute la methode onMouseDown où l'on indique d'editer l'objet // + on indique que l'on demarre le drag and drop sSvg+=' onMouseDown="oApplication.startDrag('+oApplication.dataIdDrawed+');oApplication.selectObject('+oApplication.dataIdDrawed+')" ';   //on stope le drag and drop lorsque l'on l'ache la souris sSvg+=' onMouseUp="oApplication.endDrag()" ';

---

La suite dans le billet: http://blog.developpez.com/ducodeetd...-en-svg-jour-3