+ Répondre à la discussion Actualité déjà publiée
  1. #1
    Responsable JavaScript & AJAX

    Avatar de vermine
    Profil pro
    Inscrit en
    mars 2008
    Messages
    5 958
    Détails du profil
    Informations personnelles :
    Âge : 32
    Localisation : Belgique

    Informations forums :
    Inscription : mars 2008
    Messages : 5 958
    Points : 67 160
    Points
    67 160

    Par défaut Arc-en-ciel : dessiner dans un Canvas et générer le code JavaScript

    Arc-en-ciel : dessiner dans un Canvas et générer le code JavaScript
    Grâce à cette nouvelle bibliothèque


    Arc-en-ciel, est une bibliothèque JavaScript permettant de dessiner sur l'élément Canvas d'une page HTML et de générer le code correspondant à ce qui a été réalisé pour faire du rapid prototyping de dessin et d'animation.

    Nom : arcenciel1.png
Affichages : 4681
Taille : 17,6 Ko

    Avec son interface, Arc-en-ciel permet de :

    • dessiner des rectangles, des cercles, des arcs, des lignes, des polygones, des courbes de Bézier quadriques ou cubiques et d'insérer du texte ;
    • modifier, déplacer, copier, effacer et changer la couleur des formes ;
    • dupliquer les formes avec des boucles ;
    • générer du code JavaScript ;
    • changer la couleur des éléments d'une page.


    C'est un outil toujours en création et qui est utile aux développeurs : ils dessinent rapidement le résultat voulu, puis récupèrent le code généré pour y glisser leurs variables et leur boucle de rendu afin de produire une petite animation.

    Nom : arcenciel2.png
Affichages : 2917
Taille : 11,4 Ko

    Le site officiel.

    Un tutoriel de prise en main est en cours de rédaction et sera bientôt disponible ! En attendant, pour mettre l'outil en place, il suffit d'intégrer la bibliothèque à votre page Web et d'utiliser la méthode canvasInit() sur votre Canvas :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    shapes.canvasInit('canvas', 1) ; // id du Canvas, et notion de bordure en pixels

    L'auteur serait très heureux d'avoir vos retours d'expériences afin d'améliorer son outil. N'hésitez pas à faire vos commentaires.

  2. #2
    Membre éclairé
    Homme Profil pro
    chomeur
    Inscrit en
    avril 2015
    Messages
    384
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : chomeur
    Secteur : Distribution

    Informations forums :
    Inscription : avril 2015
    Messages : 384
    Points : 773
    Points
    773

    Par défaut

    jour

    et ça marche comment ?

  3. #3
    Responsable JavaScript & AJAX

    Avatar de vermine
    Profil pro
    Inscrit en
    mars 2008
    Messages
    5 958
    Détails du profil
    Informations personnelles :
    Âge : 32
    Localisation : Belgique

    Informations forums :
    Inscription : mars 2008
    Messages : 5 958
    Points : 67 160
    Points
    67 160

    Par défaut

    Voici une mise en place rapide en partant du principe que la page Web se trouve au même endroit que le fichier JavaScript :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <html>
       <head>
          <script src="arc-en-ciel-canvas.js"></script>
       </head>
       <body>
          <canvas id="id_canvas"></canvas>
       </body>
       <script>
       shapes.canvasInit("id_canvas", 1);
       </script>
    </html>

    Pour l'utilisation proprement dite, c'est avec les clics gauche et droit de la souris. Bien entendu, le tutoriel expliquera tout ça plus en détail.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    37 499
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 37 499
    Points : 63 864
    Points
    63 864
    Billets dans le blog
    1

    Par défaut

    ...
    Vivement le mode d'emploi, parce que pour l'instant l'ergonomie extraterrestre de ce truc me dépasse (pourtant je devrais être habitué)

    Mais pas moyen de tracer un simple cercle,
    pas moyen de définir un rayon une position ...

    Je vois bien le menus contextuels, mais la prise en main n'est pas aisée ...

    Je vois bien le code généré ... mais à aucun moment le cercle !!

    Il faut copier le code puis l'intégrer dans le source ???

    Bref sans mode d'emploi l'ergonomie de cet outil reste très mystérieuse ...


    [edit]
    Je viens par hasard de réussir à modifier la couleur de fond...
    Mais je suis incapable de le reproduire
    Il y a vraiment un souci d'ergonomie, les commandes ne sont ni claire, ni explicites, ni logiques, et c'est vraiment dommage car au vu du contenu des menu cela à l'air prometteur
    [/edit]
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.com|www.saftair.com| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  5. #5
    Responsable JavaScript & AJAX

    Avatar de vermine
    Profil pro
    Inscrit en
    mars 2008
    Messages
    5 958
    Détails du profil
    Informations personnelles :
    Âge : 32
    Localisation : Belgique

    Informations forums :
    Inscription : mars 2008
    Messages : 5 958
    Points : 67 160
    Points
    67 160

    Par défaut

    Il faut choisir sa forme, cliquer sur ok, aller sur le canvas, cliquer et alors la forme commence à se dessiner. On reclique pour terminer sa forme.

  6. #6
    Membre expérimenté

    Profil pro
    Inscrit en
    décembre 2006
    Messages
    2 292
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : décembre 2006
    Messages : 2 292
    Points : 1 504
    Points
    1 504

    Par défaut

    Bonjour.

    Sympa come idée. Un dépôt sur github ou autre serait pratique.

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    37 499
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 37 499
    Points : 63 864
    Points
    63 864
    Billets dans le blog
    1

    Par défaut

    Je vois les dimensions de la forme qui changent au mouvement de souris, mais c'est tout ...

    On ne sait à aucun moment dans quel mode on se trouve ... c'est ... déroutant et frustrant !

    Les boutons de la fenêtre de menu n'ont pas l'air de faire grand chose ...
    ex couleur, on s'attend a avoir un choix de couleur ...

    En gros je pense qu'il faut a chaque fois sélectionner un mode ou un type d'opération, mais à aucun moment on ne sait dans quel mode on se trouve et le type d'opération a effectuer.

    Attention, je ne remets absolument pas en cause le coté technique de l'outil qui m'a l'air vraiment puissant et sympa,
    mais niveau ergonomie ça pèche cruellement, pour moi là on dirait un tableau de bord de fusée en braille ...

    Viiiiiiiiiiiiiiiite le mode d'emploi !!!!
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.com|www.saftair.com| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  8. #8
    Responsable JavaScript & AJAX

    Avatar de vermine
    Profil pro
    Inscrit en
    mars 2008
    Messages
    5 958
    Détails du profil
    Informations personnelles :
    Âge : 32
    Localisation : Belgique

    Informations forums :
    Inscription : mars 2008
    Messages : 5 958
    Points : 67 160
    Points
    67 160

    Par défaut

    C'est pour ça que je préférais annoncer l'outil sans tutoriel, plutôt que de donner un tutoriel d'outil non annoncé. Contrairement au désir de Jack-Uzi, je l'avoue. Effectivement, un outil graphique devrait être le plus intuitif possible. Si tu avais lu le tutoriel, tu n'aurais peut-être pas fait les mêmes remarques comme celle de savoir dans quel mode on se trouve. Or, Jack-Uzi a besoin d'un maximum de retour pour améliorer son outil.

  9. #9
    Invité
    Invité(e)

    Par défaut

    Bonjour,

    Les contraintes techniques que j'ai rencontrées et le souhait de vouloir une interface compacte, m'ont amené à développer ainsi.

    L'outil tel qu'il est actuellement sert essentiellement à présenter le concept et vu les retours, je pense qu'il connaîtra des évolutions.

  10. #10
    Responsable JavaScript & AJAX

    Avatar de vermine
    Profil pro
    Inscrit en
    mars 2008
    Messages
    5 958
    Détails du profil
    Informations personnelles :
    Âge : 32
    Localisation : Belgique

    Informations forums :
    Inscription : mars 2008
    Messages : 5 958
    Points : 67 160
    Points
    67 160

    Par défaut

    Bonjour,


    Jack-Uzi a rédigé un tutoriel pour vous apprendre à utiliser Arc-en-ciel, sa bibliothèque JavaScript permettant de dessiner sur l'élément Canvas d'une page HTML et de générer le code correspondant à ce qui a été réalisé pour faire du rapid prototyping de dessin et d'animation.

    Ce tutoriel vous apprendra notamment à :

    • colorer vos textes et vos dessins ;
    • dessiner des formes sur le Canvas ;
    • dupliquer les formes et utiliser la rotation ;
    • créer des animations ;
    • etc.


    Dessiner votre canvas et générer du code JavaScript avec Arc-en-ciel

Discussions similaires

  1. WPF C# Masquer des dessins dans un canvas
    Par Towandaa dans le forum Windows Presentation Foundation
    Réponses: 1
    Dernier message: 05/03/2012, 15h31
  2. Binding et dessin dans un Canvas
    Par MiniCesc dans le forum Windows Presentation Foundation
    Réponses: 1
    Dernier message: 20/01/2011, 12h22
  3. Mettre un event sur un objet dessiné dans un Canvas
    Par calogerogigante dans le forum Tkinter
    Réponses: 11
    Dernier message: 30/01/2010, 09h05
  4. Réponses: 1
    Dernier message: 19/06/2009, 11h26
  5. Comment effacer le dessin dans un Canvas ?
    Par RoM_CoOl dans le forum Langage
    Réponses: 11
    Dernier message: 29/11/2007, 16h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo