Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Editeur de circuit de train sur un canvas Html5

783 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×