Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Editeur de circuit de train sur un canvas Html5

769 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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 ! )

×