begin process at 2010 03 20 15:53:46
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Graphique

 > DESSINER EN JS: LIGNES, FIGURES, ELLIPSES, ELLIPSES PLEINES,

DESSINER EN JS: LIGNES, FIGURES, ELLIPSES, ELLIPSES PLEINES,


 Information sur la source

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Classé sous :graphique, wwt, figure, schema, ellipses Niveau :Débutant Date de création :18/06/2007 Date de mise à jour :19/06/2007 14:47:58 Vu / téléchargé :6 406 / 706

Auteur : the_wwt

Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (3)
Ajouter un commentaire et/ou une note


 Description

La classe Graphic permet de dessiner en javascript.
Vous pouvez dessiner des rectangles, des lignes, des ellipses sur un element Html de manière simple.
Incluer les fichiers: prototype.js, utils.js, Figure.js, graphics.js et Graphic.js ( ou simplement WWTLoader.js et faire new WWTLoader(emplacement_wwt));
Un exemple avec la WWT est fournie.
Je trouve que ce n'est pas assez rapide, mais bon c'est un essai...
Si ça peut aider pour générer des graphiques ou des figures en javascript.
Marche sous IE/FF/Opéra/...
J'attends vos critiques...
Cordialement,
Pierrick HYMBERT

Source

  • var graphic = new Graphic();//Par defaut dessine sur le document.body
  • graphic.drawRectangle(10, 50, 200, 200);
  • graphic.drawRoundRectangle(10, 50, 200, 200, 80, 25);
  • graphic.drawOval(211, 151, 200, 100);
  • graphic.drawPolyline([ 410, 1, 410, 201, 610, 201, 410, 1 ]);
  • graphic.drawPolygon([ 415, 1, 615, 1, 615, 201]);
  • graphic.drawText("Hello world!\n Draw figures easier with javascript ;-)\nTry it now!", 10, 50);
  • graphic.setForegroundColor( new Color( 0, 0, 0) );
  • graphic.setBackgroundColor( new Color( 165, 165, 225) );
  • graphic.fillRectangle(10, 50, 200, 200);
  • graphic.fillOval(211, 111, 200, 60);
  • graphic.fillRoundRectangle(10, 50, 200, 200, 60, 60);
  • //etc...
var graphic = new Graphic();//Par defaut dessine sur le document.body
graphic.drawRectangle(10, 50, 200, 200);
graphic.drawRoundRectangle(10, 50, 200, 200, 80, 25);
graphic.drawOval(211, 151, 200, 100);
graphic.drawPolyline([ 410, 1, 410, 201, 610, 201, 410, 1 ]);
graphic.drawPolygon([ 415, 1, 615, 1, 615, 201]);
graphic.drawText("Hello world!\n Draw figures easier with javascript ;-)\nTry it now!", 10, 50);
graphic.setForegroundColor( new Color( 0, 0, 0) );	
graphic.setBackgroundColor( new Color( 165, 165, 225) );
graphic.fillRectangle(10, 50, 200, 200);
graphic.fillOval(211, 111, 200, 60);
graphic.fillRoundRectangle(10, 50, 200, 200, 60, 60);
//etc...
	


 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

19 juin 2007 14:47:58 :
Correction bug: dessin d'un shell. Mise à jour des démos dans test_xp.html Ajout d'autre pages de tests.

 Sources du même auteur

Source avec une capture PROGRESS BAR WIDGET
Source avec Zip Source avec une capture TRI DE TABLEAU, ALGORITHME LES PLUS CONNUS IMPLÉMENTÉS (FUSI...
Source avec Zip Source avec une capture DÉMO TOOLTIPS AVEC LA WWT
Source avec Zip Source avec une capture BOXMANAGEMENT: COMME LA PAGE D'ACCUEIL PERSONALISÉE DE GOOGL...
Source avec Zip Source avec une capture THE WWT: WEB WIDGETS TOOLKIT

 Sources de la même categorie

Source avec Zip Source avec une capture STOCK/FOREX CANDLE CHART USING CANVAS API par BlackWizzard
MODIFIER SES FEUILLES DE STYLES .CSS À LA VOLÉE AVEC JAVASCR... par Phildepantin
Source avec Zip Source avec une capture FARMVILLE - HEURE ET COMBO LIST IMAGES par ym_trainz
Source avec Zip [-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47
Source avec Zip Source avec une capture OGG MEDIA PLAYER par kazma

 Sources en rapport avec celle ci

Source avec Zip [-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47
Source avec Zip Source avec une capture CALCULATRICE DE L'IPHONE ! par dlvains
Source avec Zip Source avec une capture INSTALLEZ UN CURSEUR GÉANT, SUPER GÉANT CURSEUR DE LA SOURIS... par abdelaziz_info
Source avec Zip Source avec une capture INTERFACE.CAPSULE , POUR DES BOITES ARRONDIS , 1ER ÉLÉMENTS ... par Kimjoa
Source avec Zip Source avec une capture DYNAMIQUE.JS POUR FAIRE DE JOLIE ANIMATION )) par Kimjoa

Commentaires et avis

Commentaire de yousfane le 18/06/2007 20:34:42

Salut
J'aime bien tes sources, mais ça ne marche pas sous IE7

Commentaire de oramos le 05/11/2009 16:45:45 10/10

Un super script qui mériterait d'être développé davantage afin d'obtenir un outil complet de dessin...

Commentaire de the_wwt le 05/11/2009 18:05:37

Salut,

merci ;-)

Cependant, il existe SVG et Canvas qui permettent de faire du dessin vectoriel.

Pour moi, c'est plus la peine d'utiliser une librairie en JS natif qui rame alors que la plupart des browser le supporte en natif.

De plus HTML5 approche à grand pas, on ne se posera plus de question là dessus d'ici peu.

D'où le manque d'interêt que je porte à présent sur ces sources.

Elle sont libre de droit, donc si tu souhaites les faire évoluer c'est avec plaisir, je pourrai même les intégrer sur cette page par la suite si tu veux.

Bien cordialement,

Pierrick

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

menu sur zone graphique ? [ par syldelph ] [8DBonjour, Comment combiner dans un html : <map><area> et <div><a>...</a><a>...</a>...</div> pour lan graphique en courbe [ par jeremy77 ] bonjour,Je cherche à réaliser un graphique en courbe ( en javascript ) comme ce que l'on retrouve dans les site de bourse.Quelqu'un aurai quelque chos graphique [ par KapS ] salut,juste une question comme ça, est il possible de creer un graphique avec 2 courbes, et ce, tout en langage html ou autre, manuellement??? et su o graphique camembert [ par bob ] bonsoir tout le monde je suis a la recherche d'un script qui me permettrait de faire un graphique camembert en forme de pourcentage d'aprés cert Graphique en javascript [ par g_barthe ] Bonjour, Je souhaite tracer des diagrammes genres courbes de fonction mathématiques(à 1 ou 2 variables avec des axes horizontaux, verticaux Listes déroulantes qui ont un lien entre elles [ par fa0007 ] Da hello ! Bon, je suis un gros débutant en javascript, voici pour ma présentation ^^. Et voici mon problème : J'aimerais fair interface graphique [ par amira2006 ] que veut dire JSlider en javaque veut dire JDesktopPanecomment associé un logo a une interface interface graphique [ par amira2006 ] que veut dire JSlider en javaque veut dire JDesktopPanecomment associé un logo a une interface center le code dans un kit graphique [ par speedylol ] bonjour voici le probléme que je rencontre , j ai trouver un superbe kit graphique imbriquer de plusieur jeux de cadre et j'aimerais centrer mes page pb avec une macro de maj Graphique [ par cricriminator ] C'est une macro qui via la cellule H9 (c'est un bouton)Me permet de selectionner une plage de saisie dans un graphique.exemple... je selectionne( H9 )


Nos sponsors


Sondage...

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,936 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales