1. Un éditeur de circuit de train
sur un canvas Html5
François Crevola - Juin 2013http://geotrain.crevola.org/
2. Fonctionnalités
● Inspiré par des jouets existants : Geotrax® de
FisherPrice®
● Poser / prendre / déplacer / supprimer des rails sur
le circuit
● Déplacement du circuit vers le haut, le bas, la
gauche ou la droite (monde/carte virtuellement
infinie)
● Zoom avant et arrière
● Creation de nouveaux rails (fusion de rails existants)
● Import / export XML
François Crevolahttp://geotrain.crevola.org/
3. Avant
François Crevola
● Prises de photos des
circuits créés par mes
enfants.
● Papier à petits
carreaux 5mm x
5mm / stylo
http://geotrain.crevola.org/
4. Premiers essais
Drag'n drop d'images bitmap
François Crevola
Pours :
● Facile
ctx.drawImage(...)
Contres :
● Se cale pas très bien (ça
pourrait mais ça prendrait
du temps)
● Moche (Je suis
programmeur, pas artiste)
● Trop de travail pour
ajouter un nouveau type
de rail
● Zoom impossible
http://geotrain.crevola.org/
5. Fortuitude
● Un jour, juste pour s'amuser : recherche d'un implémentation en
javascript / canvas du language de programmation logo. S'amuser
avec la tortue. Dessiner « accidentellement » des rails ...
François Crevola
…. Eurêka ! Je vais utiliser des graphismes vectoriels !!
( http://www.calormen.com/logo/ )
cs repeat 4 [fd 20 rt 90 fd 20 rt 90 fd 20 rt -90]
http://geotrain.crevola.org/
7. Bénéfices
● Fusion : chaque rail est un polygone, donc il
suffit de faire l'union des polygones.
François Crevola
+ =
Facile !
(merci ClipperJs)
http://geotrain.crevola.org/
8. Optimisation
François Crevola
Utiliser 3 canvas (transparent)
au lieu d' 1 :
- arrière-plan
- circuit de train
- avant-plan (rail en train d'être
déplacé, sélection d'une zone
de fusion, ….)
Permet de bénéficier des
accélérations du GPU !
http://geotrain.crevola.org/
(idée venant de
http://www.html5rocks.com/en/tutorials/canvas/performance/ )
