Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Editeur de circuit de train sur un canvas Html5

791 vues

Publié le

Publié dans : Technologie
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Soyez le premier à aimer ceci

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

×