Un éditeur de circuit de train
sur un canvas Html5
François Crevola - Juin 2013http://geotrain.crevola.org/
Fonctionnalités
● Inspiré par des jouets existants : Geotrax® de
FisherPrice®
● Poser / prendre / déplacer / supprimer des...
Avant
François Crevola
● Prises de photos des
circuits créés par mes
enfants.
● Papier à petits
carreaux  5mm x
5mm / styl...
Premiers essais
Drag'n drop d'images bitmap
François Crevola
Pours :
● Facile
ctx.drawImage(...)
Contres :
● Se cale pas t...
Fortuitude
● Un jour, juste pour s'amuser : recherche d'un implémentation en
javascript / canvas du language de programmat...
Bénéfices
● Rotation, symétrie, ...
● Zoom (tous niveaux)
François Crevolahttp://geotrain.crevola.org/
Bénéfices
● Fusion : chaque rail est un polygone, donc il
suffit de faire l'union des polygones.
François Crevola
+ =
Faci...
Optimisation
François Crevola
Utiliser 3 canvas (transparent)
au lieu d' 1 :
- arrière-plan
- circuit de train
- avant-pla...
Optimisation
François Crevolahttp://geotrain.crevola.org/
(en utilisant Chrome. Plus lent sous Firefox. IE est le pire ! )
Prochain SlideShare
Chargement dans…5
×

Editeur de circuit de train sur un canvas Html5

632 vues

Publié le

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
632
Sur SlideShare
0
Issues des intégrations
0
Intégrations
11
Actions
Partages
0
Téléchargements
2
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Editeur de circuit de train sur un canvas Html5

  1. 1. Un éditeur de circuit de train sur un canvas Html5 François Crevola - Juin 2013http://geotrain.crevola.org/
  2. 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. 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. 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. 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/
  6. 6. Bénéfices ● Rotation, symétrie, ... ● Zoom (tous niveaux) François Crevolahttp://geotrain.crevola.org/
  7. 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. 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/ )
  9. 9. Optimisation François Crevolahttp://geotrain.crevola.org/ (en utilisant Chrome. Plus lent sous Firefox. IE est le pire ! )

×