Arc-en-ciel : dessiner dans un Canvas et g�n�rer le code JavaScript

**vermine** · 15/03/2016, 20h52

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 : 9292
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 : 6644
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.

**melka one** · 15/03/2016, 23h00

jour

et �a marche comment ?

**vermine** · 16/03/2016, 08h01

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.

**SpaceFrog** · 16/03/2016, 08h19

...
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]

**vermine** · 16/03/2016, 08h26

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.

**SpaceFrog** · 16/03/2016, 08h38

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

**rambc** · 16/03/2016, 08h31

Bonjour.

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

Invit� · 21/03/2016, 19h31

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.

**vermine** · 26/03/2016, 16h53

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

Arc-en-ciel : dessiner dans un Canvas et g�n�rer le code JavaScript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager