Présentation de GraphicsJS, une bibliothèque graphique légère puissante

html5: la pierre angulaire des réseaux modernes. Aujourd'hui, SVG et Canvas sont souvent la technologie de choix lors de la création d'images interactives - Flash a été oublié, Silverlight est devenu une licorne rare au bord du réseau et peu de gens se souviennent des plugins tiers.

Les avantages et les inconvénients de chaque technique sont bien documentés, mais en bref, SVG est mieux adapté à la création et à la gestion des éléments interactifs. En effet, SVG est un format vectoriel basé sur XML qui, lorsqu'une image est chargée dans une page à l'aide de la balise <svg></svg>, chaque élément de celui-ci peut être utilisé dans le DOM SVG.

Dans cet article, je souhaite vous présenter GraphicsJS, une nouvelle et puissante bibliothèque de dessins JavaScript open source basée sur SVG (pour les versions IE plus anciennes, il a une alternative VML). Je vais commencer par introduire rapidement ses bases, puis présenter les capacités de la bibliothèque avec deux exemples courts et merveilleux: le premier exemple est entièrement sur l'art, et le deuxième exemple montre comment écrire un simple dans moins de 50 lignes de code Puzzle Art jeu.

points clés

• GraphicsJS est une nouvelle bibliothèque de dessins JavaScript puissante puissante basée sur SVG et fournit des alternatives VML pour les versions IE plus anciennes. Il est léger et flexible, avec de riches API JavaScript.
• Publié par AnyChart, la bibliothèque est rendue dans les produits propriétaires d'Anychart depuis au moins trois ans, garantissant sa robustesse. Contrairement à la galerie de dessins JavaScript d'Anychart, GraphicsJS est disponible gratuitement pour les projets commerciaux et à but non lucratif.
• GraphicsJS est la compatibilité entre les navigateurs et prend en charge Internet Explorer 6.0, Safari 3.0, Firefox 3.0 et Opera 9.5. Il est rendu dans VML dans des versions IE plus anciennes et en SVG dans tous les autres navigateurs.
• Cette bibliothèque permet la combinaison de graphiques et d'animations, y compris des feux de joie animés, des galaxies rotatives, des précipitations et des jeux de puzzle jouables. Il contient également une documentation détaillée et des références API complètes.
• La bibliothèque GraphicsJS peut être utilisée pour créer des applications Web interactives, y compris les couches, les gradients, les modèles, le traitement d'événements et l'optimisation des performances. Il prend également en charge des animations et des transformations complexes, ce qui en fait une option polyvalente pour les développeurs.

Pourquoi choisir GraphicsJS

Il existe de nombreuses bibliothèques qui aident les développeurs à utiliser SVG: Raphaël, Snap.Svg et Bonsaijs, pour ne nommer que quelques-unes des meilleures bibliothèques. Ces bibliothèques ont chacune leurs avantages et leurs inconvénients, mais une comparaison approfondie d'entre eux fera l'objet d'un autre article. Cet article concerne GraphicsJS, alors laissez-moi expliquer ce qu'il a et ce qu'il a.

Tout d'abord, GraphicsJS est léger et possède une API JavaScript très flexible. Il implémente de nombreuses fonctionnalités de texte riche, ainsi qu'un Dom virtuel distinct des implémentations HTML DOM spécifiques du navigateur.

Deuxièmement, il s'agit d'une nouvelle bibliothèque JavaScript open source publiée l'automne dernier par AnyChart, l'un des principaux développeurs de logiciels de visualisation de données interactifs au monde. AnyChart utilise GraphicsJS depuis au moins trois ans (depuis la sortie d'AnyChart 7.0) pour rendre les graphiques dans ses produits propriétaires, de sorte que GraphicsJS est entièrement testé au combat. (Avertissement: je suis le chef de la R&D chez AnyChart et le développeur principal chez GraphicsJS)

Troisièmement, contrairement à la bibliothèque de dessin JavaScript d'AnyChart, GraphicsJS est disponible gratuitement pour les projets commerciaux et à but non lucratif. Il est disponible sur GitHub sous la licence Apache.

Quatrièmement, GraphicsJS a la compatibilité entre les navigateurs et prend en charge Internet Explorer 6.0, Safari 3.0, Firefox 3.0 et Opera 9.5. Il est rendu dans VML dans des versions IE plus anciennes et en SVG dans tous les autres navigateurs.

Enfin, GraphicsJS vous permet de combiner parfaitement les graphiques et les animations. Découvrez sa galerie principale, y compris des feux de joie animés, des galaxies tournantes, des précipitations, des feuilles générées par procédure, 15 jeux de puzzle jouables et plus encore. GraphicsJS contient plus d'exemples dans sa documentation détaillée et sa référence API complète.

GraphicsJS Basics

Pour commencer avec GraphicsJS, vous devez référencer la bibliothèque et créer un élément HTML au niveau de bloc pour le dessin:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>GraphicsJS Basic Example</title>    
 </head>
 <body>
   <div id="stage-container" style="width: 400px; height: 375px;"></div>

   <🎜>
   <🎜>
 </body>
 </html>

Vous devez ensuite créer une étape et dessiner quelque chose dedans, comme un rectangle, un cercle ou une autre forme:

 // 创建舞台
 var stage = acgraph.create('stage-container');
 // 绘制矩形
 var stage.rect(25, 50, 350, 300);

Ce qui suit est un exemple sur Codepen où nous allons plus loin et dessinons le symbole des reliques de la mort.

Notre premier chef-d'œuvre

Remplir, tracer et modèle de modèle

Toute forme ou chemin peut être coloré à l'aide de paramètres de remplissage et de paramètres de course. Tout a un coup (bordure), mais seule la forme et les chemins fermés ont un rembourrage. Les réglages de remplissage et de course sont très riches et vous pouvez utiliser des gradients linéaires ou circulaires pour le remplissage et la course. De plus, les lignes peuvent être pointillées et de support l'image se remplit de plusieurs modes de carreaux. Mais ce sont toutes des choses assez standard que vous pouvez trouver dans presque toutes les bibliothèques. Ce qui rend GraphicsJS spécial, c'est sa fonction de remplissage de maillage et de modèle, qui non seulement vous permet d'utiliser directement 32 (!) Des modèles de remplissage de maillage disponibles directement, mais vous permet également de créer facilement des modèles personnalisés en formes ou en texte.

Maintenant, voyons ce qui peut être réalisé exactement! Je vais dessiner un dessin simple d'un homme debout près de la maison et le remplir avec différents motifs et couleurs pour l'améliorer. Pour plus de simplicité, faisons-en une peinture d'art enfantine (et essayez de ne pas impliquer la rugosité de l'art). C'est tout:

 // 创建舞台
 var stage = acgraph.create('stage-container');

 // 绘制框架
 var frame = stage.rect(25, 50, 350, 300);

 // 绘制房子
 var walls = stage.rect(50, 250, 200, 100);
 var roof  = stage.path()
   .moveTo(50, 250)
   .lineTo(150, 180)
   .lineTo(250, 250)
   .close();

 // 绘制一个人
 var head = stage.circle(330, 280, 10);
 var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
 var kilt = stage.triangleUp(330, 320, 20);
 var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
 var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);

Affichez les résultats sur Codepen.

Comme vous pouvez le voir, nous utilisons maintenant des variables - toutes les méthodes de dessin de contenu sur l'étape renvoient une référence à l'objet créé et ce lien peut être utilisé pour modifier ou supprimer l'objet.

Notez également comment les appels de chaîne (par exemple stage.path().moveTo(320, 330).lineTo(320, 340);) sont partout dans GraphicsJS, ce qui aide à raccourcir le code. Les appels enchaînés doivent être utilisés avec prudence, mais s'il est appliqué correctement, il rend le code plus compact et plus facile à lire.

Maintenant, remettez cette page à colorier à un enfant et laissez-les peindre. Parce que même les enfants peuvent maîtriser les techniques suivantes:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>GraphicsJS Basic Example</title>    
 </head>
 <body>
   <div id="stage-container" style="width: 400px; height: 375px;"></div>

   <🎜>
   <🎜>
 </body>
 </html>

C'est à quoi ressemble notre exemple maintenant.

Maintenant, nous avons une photo d'un Highlander debout à côté d'un kilt, debout près de son château de briques avec de la paille sur le toit. Nous pouvons même risquer de dire qu'il s'agit en effet d'une œuvre d'art que nous voulons obtenir le droit d'auteur. Faisons cela en utilisant des remplissages de motifs en fonction du texte personnalisé:

Comme vous pouvez le voir, cela est facile à faire: vous créez une instance d'un objet texte, puis formez un motif sur la scène et placez le texte dans le motif.

 // 创建舞台
 var stage = acgraph.create('stage-container');
 // 绘制矩形
 var stage.rect(25, 50, 350, 300);

Afficher la couleur des maisons protégées par les droits d'auteur / graphicsjs sur Codepen.

Créer un jeu d'art de puzzle en moins de 50 lignes de code

Dans la prochaine partie de cet article, je veux vous montrer comment créer un jeu de type Cookie Clicker en utilisant GraphicsJS en moins de 50 lignes de code.

Le nom de jeu est

"balayer les rues dans le vent"

, et le joueur joue le rôle d'un charognard et balaie les rues un après-midi venteux en automne. Le jeu utilise du code de l'exemple de feuille généré par le programme dans la galerie GraphicsJS. Vous pouvez afficher les jeux finis sur Codepen (ou la fin de l'article).

Couches, zindex et Dom virtuel

Nous créons d'abord une étape (comme mentionné précédemment), puis déclarons quelques variables initiales:

Pour ce jeu, nous utiliserons la couche - l'objet dans GraphicsJS utilisé pour regrouper les éléments. Si vous souhaitez appliquer des changements similaires aux éléments (tels que les transformations), vous devez regrouper les éléments. Vous pouvez modifier la couche en mode pause (plus à ce sujet plus tard), ce qui peut améliorer les performances et l'expérience utilisateur.

 // 创建舞台
 var stage = acgraph.create('stage-container');

 // 绘制框架
 var frame = stage.rect(25, 50, 350, 300);

 // 绘制房子
 var walls = stage.rect(50, 250, 200, 100);
 var roof  = stage.path()
   .moveTo(50, 250)
   .lineTo(150, 180)
   .lineTo(250, 250)
   .close();

 // 绘制一个人
 var head = stage.circle(330, 280, 10);
 var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
 var kilt = stage.triangleUp(330, 320, 20);
 var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
 var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);

Dans cette démo, nous utilisons la fonction de couche pour nous aider à regrouper les feuilles et à les éviter de couvrir l'étiquette (il nous indique combien de feuilles sont balayées). Pour ce faire, nous créons une balise et appelons la méthode

, qui crée la couche de liaison de scène. Nous définissons la propriété

de cette couche sur la propriété stage.layer sous l'étiquette. zIndex zIndex

Après cela, nous pouvons nous assurer qu'ils ne remplacent pas le texte, peu importe le nombre de feuilles que nous créons dans la couche.

 // 给图片着色
 // 精美的框架
 frame.stroke(["red", "green", "blue"], 2, "2 2 2");
 // 砖墙
 walls.fill(acgraph.hatchFill('horizontalbrick'));
 // 草屋顶
 roof.fill("#e4d96f");
 // 格子呢裙
 kilt.fill(acgraph.hatchFill('plaid'));

converti

Ensuite, ajoutons une fonction pour dessiner nos feuilles. Cela utilise l'API de transformation GraphicsJS pratique, qui vous permet de déplacer, d'échec, de rotation et de coupe des éléments et du groupe d'éléments. Il s'agit d'un outil très puissant lorsqu'il est combiné avec des couches et un DOM virtuel.

Vous verrez que chaque chemin est créé de la même manière, mais la conversion sera effectuée. Cela produira un très beau motif de feuilles aléatoires.

 // 169 是版权符号的字符代码
 var  text = acgraph.text().text(String.fromCharCode(169)).opacity(0.2);
 var  pattern_font = stage.pattern(text.getBounds());
 pattern_font.addChild(text);
 // 用图案填充整个图像
 frame.fill(pattern_font);

Événements de traitement

Tout objet, étape et calque dans GraphicsJS peut gérer les événements. Une liste complète des événements pris en charge peut être trouvé dans l'API EventType. Il y a quatre événements spéciaux sur scène pour contrôler le rendu.

Dans cet exemple de jeu, nous utilisons un écouteur d'événements attaché à l'objet Leaf de sorte que lorsque l'utilisateur plane sur eux, ils disparaissent un par un. Pour ce faire, ajoutez le code suivant au bas de la fonction drawLeaves, avant l'instruction return:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>GraphicsJS Basic Example</title>    
 </head>
 <body>
   <div id="stage-container" style="width: 400px; height: 375px;"></div>

   <🎜>
   <🎜>
 </body>
 </html>

Ici, nous pouvons également voir que nous utilisons des couches pour calculer les feuilles.

 // 创建舞台
 var stage = acgraph.create('stage-container');
 // 绘制矩形
 var stage.rect(25, 50, 350, 300);

Veuillez noter que nous ne stockons pas réellement le nombre de feuilles ici. Puisque nous ajoutons des feuilles à une couche spécifique et en retirons les feuilles, cela nous permet de suivre le nombre d'éléments enfants que nous avons (et donc combien de feuilles reste).

GraphicsJS fournit un DOM virtuel qui est une implémentation SVG / VML spécifique au navigateur. Il est très utile pour faire beaucoup de grandes choses comme suivre tous les objets et les couches, appliquer des transformations aux groupes et optimiser le rendu avec aide nous permet de suivre et de contrôler le processus de rendu.

Optimisation des performances

Les gestionnaires de DOM et d'événements virtuels permettent aux utilisateurs de GraphicsJS de contrôler le rendu. Les articles de performance peuvent vous aider à comprendre la relation entre ces contenus.

Lors de la génération de feuilles dans le jeu, nous devons mettre en pause le rendu lors de l'ajout de nouvelles feuilles, et reprendre le rendu après toutes les modifications terminées:

 // 创建舞台
 var stage = acgraph.create('stage-container');

 // 绘制框架
 var frame = stage.rect(25, 50, 350, 300);

 // 绘制房子
 var walls = stage.rect(50, 250, 200, 100);
 var roof  = stage.path()
   .moveTo(50, 250)
   .lineTo(150, 180)
   .lineTo(250, 250)
   .close();

 // 绘制一个人
 var head = stage.circle(330, 280, 10);
 var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
 var kilt = stage.triangleUp(330, 320, 20);
 var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
 var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);

Cette méthode de traitement de nouveaux éléments fait apparaître de nouvelles feuilles presque immédiatement.

Enfin, commencez tout en appelant shakeTree().

 // 给图片着色
 // 精美的框架
 frame.stroke(["red", "green", "blue"], 2, "2 2 2");
 // 砖墙
 walls.fill(acgraph.hatchFill('horizontalbrick'));
 // 草屋顶
 roof.fill("#e4d96f");
 // 格子呢裙
 kilt.fill(acgraph.hatchFill('plaid'));

Résultat final

Afficher le nettoyant de rue / graphicsjs sur Codepen.

Conclusion

La transition vers HTML5 a changé le réseau. En ce qui concerne les applications Web modernes et même les sites Web simples, nous rencontrons souvent des tâches qui nécessitent un traitement d'image. S'il est impossible de trouver une solution qui fonctionne bien dans tous les cas, vous devriez considérer la bibliothèque GraphicsJS. Il est open source, robuste, avec un excellent support de navigateur et de nombreuses fonctionnalités qui le rendent amusant, pratique et bien sûr utile.

J'aimerais entendre vos commentaires sur les GrpHicsJ dans les commentaires ci-dessous. L'utilisez-vous déjà? Envisageriez-vous de l'utiliser pour un nouveau projet? J'adorerais savoir pourquoi ou pourquoi ne pas l'utiliser. J'écris également une liste de grandes bibliothèques et articles de dessin JavaScript qui les compareront et les compareront tous. N'hésitez pas à souligner les fonctionnalités que vous souhaitez y voir.

lien pour la lecture complémentaire

• Informations générales
  • svg
  • toile
  • SVG vs toile
• bibliothèque
  • GraphicsJS
  • Raphaël
  • snap.svg
  • bonsaijs
• GraphicsJS
  • GraphicsJs sur github
  • GraphicsJS Documentation
  • Référence de l'API GraphicsJS

Des questions fréquemment posées sur les graphicsjs

En quoi GraphicsJS est-il différent des autres bibliothèques graphiques JavaScript?

GraphicsJs se distingue par sa nature puissante et légère. Il s'agit d'une bibliothèque puissante qui permet aux développeurs de dessiner et d'animer tous les graphiques avec une haute précision et des performances élevées. Contrairement à d'autres bibliothèques, GraphicsJS fournit un ensemble complet de fonctionnalités, y compris des couches, des gradients, des modèles, et plus encore sans affecter la vitesse ou l'efficacité. Il prend également en charge tous les navigateurs modernes, ce qui en fait une option polyvalente pour les développeurs.

Comment démarrer avec GraphicsJS?

Pour commencer avec GraphicsJS, vous devez inclure la bibliothèque GraphicsJS dans votre fichier HTML. Vous pouvez télécharger la bibliothèque à partir du site officiel ou utiliser CDN. Une fois la bibliothèque incluse, vous pouvez commencer à créer les graphiques en appelant les fonctions et méthodes appropriées fournies par la bibliothèque.

Puis-je créer des animations complexes à l'aide de GraphicsJS?

Oui, GraphicsJS est conçu pour gérer facilement les animations complexes. Il fournit un riche ensemble de fonctionnalités d'animation, y compris les paramètres de fonction d'assouplissement, de retard et de durée. Vous pouvez animer n'importe quel attribut d'un graphique, tel que sa position, sa taille, sa couleur, etc. Cela fait de GraphicsJS un outil puissant pour créer des graphiques interactifs et dynamiques.

GraphicsJS est-il compatible avec tous les navigateurs?

GraphicsJS est conçu pour être compatible avec tous les navigateurs modernes, y compris Chrome, Firefox, Safari et Internet Explorer. Il utilise SVG et VML pour le rendu, qui les soutiennent tous. Cela garantit que vos graphiques sont cohérents et fonctionnent bien sur différentes plates-formes et appareils.

Comment créer des gradients en utilisant GraphicsJS?

La création de gradients avec GraphicsJS est simple. Vous pouvez utiliser la méthode du gradient pour définir des gradients linéaires ou radiaux, spécifier les couleurs et les positions, puis appliquer des gradients à n'importe quelle forme. Cela vous permet de créer facilement des graphiques colorés.

Puis-je créer des graphiques interactifs à l'aide de GraphicsJS?

Oui, GraphicsJS fournit un ensemble de capacités de gestion des événements qui vous permettent de créer des graphiques interactifs. Vous pouvez joindre un écouteur d'événements à n'importe quel graphique, vous permettant de répondre aux actions des utilisateurs telles que des clics, des mouvements de souris, etc. Cela fait de GraphicsJS un excellent choix pour créer des applications Web interactives.

GraphicsJS prend-il en charge les couches?

Oui, GraphicsJS prend en charge les couches, vous permettant d'organiser des graphiques en groupes distincts. Chaque couche peut être utilisée indépendamment, ce qui facilite la gestion des graphiques complexes. Vous pouvez également contrôler la visibilité et l'ordre z de chaque couche, permettant un contrôle à grain fin des graphiques.

Comment optimiser mes graphiques à l'aide de GraphicsJS?

GraphicsJS fournit plusieurs fonctionnalités qui peuvent vous aider à optimiser vos graphiques. Par exemple, vous pouvez utiliser la méthode du recadrage pour masquer des parties des graphiques en dehors d'une zone spécifiée, réduisant ainsi la quantité de rendu requis. Vous pouvez également utiliser la méthode de cache pour stocker la sortie rendue des graphiques, améliorant ainsi les performances lorsque vous repeignez fréquemment les graphiques.

Puis-je créer des graphiques et des graphiques à l'aide de GraphicsJS?

Bien que GraphicsJS ne soit pas conçu spécifiquement pour la création de graphiques et de graphiques, ses puissantes capacités de dessin et d'animation lui permettent de créer tout type de graphiques, y compris les graphiques et les graphiques. Vous pouvez utiliser les méthodes de la bibliothèque pour dessiner des lignes, des courbes, des rectangles, des cercles et plus encore pour créer divers types de graphiques.

GraphicsJS est-il gratuit?

Oui, GraphicsJS est une bibliothèque open source gratuite. Vous pouvez l'utiliser gratuitement dans votre projet. La bibliothèque est également activement maintenue pour s'assurer qu'elle est synchronisée avec les dernières normes et technologies Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!