Snap.Svg avancé

Nous avons vu, dans un post précédent, comment commencer avec Snap.Svg. Dans cet article, nous allons examiner de plus près les nouvelles fonctionnalités mentionnées dans le premier article.

Les plats clés

• SNAP.SVG Advanced permet de créer des masques, des gradients et des motifs complexes, permettant la création de graphiques uniques et dynamiques.
• snap.svg offre des capacités d'animation complètes, avec diverses méthodes pour animer des éléments à la fois indépendamment et synchrone.
• La gestion des événements dans Snap.SVG permet l'interaction de l'utilisateur, avec des méthodes pour gérer le clic, le double clic, le mouvement de la souris et les événements tactiles.
• snap.svg prend en charge la réutilisation du code SVG existant, permettant l'injection de code SVG en tant que chaîne ou la lecture d'un fichier existant.
• Les performances peuvent être améliorées lors de la manipulation du DOM à l'aide de DocumentFragments dans Snap.Svg, conduisant à des économies de performances significatives pour les grands dessins SVG.

masquage

Commençons par rappeler comment créer une surface de dessin, une forme simple, puis charger une image:

<span>var paper = <span>Snap</span>(800, 600),
</span>    img <span>= paper.image('bigImage.jpg', 10, 10, 300, 300),
</span>    bigCircle <span>= s.circle(150, 150, 100);</span>

Le cercle couvre le centre de l'image, pour l'instant.

C'est une sorte de dommage, cependant, que vous ne pouvez avoir que des images rectangulaires. Peut-être que votre designer a créé de beaux boutons circulaires ou des images. Bien sûr, il existe plusieurs solutions, mais elles vous laissent toutes avec un autre problème: le meilleur scénario, le concepteur peut vous donner une image avec l'extérieur correspondant à l'arrière-plan de la page, afin qu'il soit circulaire. Cependant, en supposant que vous avez un fond solide, si vous devez changer sa couleur, vous devrez modifier l'image. Vous pouvez utiliser la transparence, mais vous auriez soit besoin de formats plus lourds comme la PNG, soit une qualité lâche avec des GIF. Dans quelques années, peut-être que WebP sera entièrement pris en charge par tous les navigateurs, ce qui mettrait fin à l'énigme. Quoi qu'il en soit, si vous avez besoin d'interactivité pour votre image, vous serez coincé avec une forme rectangulaire répondant à des événements comme Mouseenter, Mouseout, Click, etc.

Ayant traité Flash pendant longtemps dans le passé, l'une des choses les plus frustrantes de SVG n'était pas de pouvoir utiliser des masques, introduits dans SVG 1.1). Dans Snap, appliquer un masque à n'importe quel élément, y compris les images, est assez facile:

bigCircle<span>.attr('fill', '#fff'); //This is IMPORTANT
</span>
img<span>.attr({
</span>    <span>mask: bigCircle
</span><span>});</span>

Fondamentalement, nous devons simplement affecter la propriété Mask à notre élément. Nous devons être prudents avec l'élément que nous utilisons comme masque réel. Étant donné que l'opacité de l'élément final sera proportionnelle au niveau de blanc dans l'élément de masque, nous devons remplir le cercle en blanc si nous voulons une opacité complète pour notre image. Bien qu'au début cela puisse sembler ennuyeux, cela ouvre beaucoup de possibilités pour des effets incroyables, comme nous le verrons dans les sections suivantes.

Vous pouvez évidemment composer différentes formes pour créer des masques complexes. Snap propose du sucre syntaxique pour vous aider:

<span>var paper = <span>Snap</span>(800, 600),
</span>    img <span>= paper.image('bigImage.jpg', 10, 10, 300, 300),
</span>    bigCircle <span>= s.circle(150, 150, 100);</span>

la méthode papier.mask () est équivalente à papier.g (), et en fait il peut être remplacé de manière transparente par elle.

Couper

Les chemins d'écrêtage restreignent la région à laquelle la peinture peut être appliquée, de sorte que toutes les parties du dessin à l'extérieur de la région délimitées par le chemin de découpage actuellement actif ne sont pas dessinées. Un chemin d'écrêtage peut être considéré comme un masque avec des zones visibles (dans le chemin d'écrêtage) a une valeur alpha de 1 et les zones cachées ont une valeur alpha de 0. La seule différence est que si les zones cachées par les masques répondront néanmoins aux événements , les zones coupées ne le feront pas.

SNAP n'a pas de raccourcis pour l'écrêtage, mais vous pouvez définir les propriétés clip, path et clip et clip-routier de n'importe quel élément en utilisant la méthode ATR ().

gradients

SVG 1.1 permet à l'utilisation de gradients de remplir les formes. Bien sûr, si nous utilisons ces formes pour remplir un masque, nous pouvons tirer parti de la possibilité de spécifier le niveau alpha du dessin final en modifiant le remplissage du masque et créer des effets étonnants. SNAP fournit des raccourcis pour créer des gradients, qui peuvent plus tard être affectés à la propriété de remplissage d'autres éléments. Si nous modifions un peu le code précédent, par exemple:

bigCircle<span>.attr('fill', '#fff'); //This is IMPORTANT
</span>
img<span>.attr({
</span>    <span>mask: bigCircle
</span><span>});</span>

Si vous testez ce code, l'effet final ne sera pas exactement ce que vous attendez. C'est parce que nous avons utilisé le type de gradient radiant relatif, exprimé par le «R» en minuscules ci-dessus. Les gradients relatifs sont créés séparément pour chaque élément d'un groupe (comme masque composite). Si vous préférez avoir un seul gradient pour l'ensemble du groupe, vous pouvez utiliser la version absolue de la commande. 'R () # fff- # 000' est un gradient radiant absolu commençant par un remplissage blanc au centre et dégradant le noir aux bordures.

Nous pouvons obtenir le même résultat en spécifiant le gradient SVG pour la propriété de remplissage de tout élément:

<span>var smallRect = paper.rect(180, 30, 50, 40),
</span>    bigCircle <span>= paper.circle(150, 150, 100),
</span>    mask <span>= paper.mask(bigCircle, smallRect);
</span>
mask<span>.attr('fill', 'white');
</span>
img<span>.attr({
</span>    <span>mask: mask
</span><span>});</span>

Dans ce dernier exemple, nous avons montré un gradient plus complexe. Outre le type différent (linéaire absolu), ce gradient passe de (0, 0) à (300, 300), du noir à rouge à 25% au blanc.

La méthode Gradient () accepte une chaîne. De plus amples détails sont expliqués dans la documentation de SNAP.

Il est également possible d'utiliser les gradients existants à partir de n'importe quel élément SVG de la page:

<span>var gradient = paper.gradient('r()#fff-#000');
</span>mask<span>.attr('fill', gradient);</span>

mask<span>.attr('fill', 'L(0, 0, 300, 300)#000-#f00:25-#fff');</span>

Modèles

Les motifs

permettent de remplir des formes en répétant les occurrences d'une autre forme SVG, gradient ou image. Snap propose la méthode élément.topattern () (formellement, motif (), maintenant déprécié) qui crée un motif à partir de tout élément SNAP.

Créer un motif et remplir un élément avec lui est assez simple:

<span><span><span><svg> id<span>="svg-test"</span>></svg></span>
</span>    <span><span><span><defs>></defs></span>
</span>      <span><span><span><lineargradient> id<span>="MyGradient"</span>></lineargradient></span>
</span>        <span><span><span><stop> offset<span>="5%"</span> stop-color<span>="#F60"</span> /></stop></span>
</span>        <span><span><span><stop> offset<span>="95%"</span> stop-color<span>="#FF6"</span> /></stop></span>
</span>      <span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span></span></span></span></span></span></span>

Si, au lieu de cela, nous aimerions combiner les gradients et les modèles, c'est une autre histoire, et une histoire légèrement plus compliquée! Par exemple, voyons comment créer un masque qui combine un gradient rayonnant et un modèle similaire à celui ci-dessus:

<span>var paper = <span>Snap</span>(800, 600),
</span>    img <span>= paper.image('bigImage.jpg', 10, 10, 300, 300),
</span>    bigCircle <span>= s.circle(150, 150, 100);</span>

Nous devons essentiellement créer une carte à deux niveaux. La carte finale utilisée sur notre image, que nous remplissons d'un dégradé, a une carte elle-même remplie d'un dégradé. Le résultat est assez impressionnant! Il s'avère que c'était également une bonne occasion de vous présenter la méthode Clone (), qui fait ce que vous imaginez - crée une copie profonde de l'élément qui est appelé.

Animations

Les animations sont l'une des meilleures fonctionnalités de Snap.Svg. Il existe plusieurs façons de gérer les animations, avec des comportements légèrement différents.

element.animate ()

Nous allons commencer par la méthode d'animation la plus simple, élément.animate (). Cette méthode permet aux utilisateurs d'animer n'importe quel nombre de propriétés d'un élément, le tout en synchronisation. La valeur initiale de la propriété est, bien sûr, sa valeur actuelle, tandis que la dernière est spécifiée dans le premier argument pour animer (). Outre les propriétés à modifier, il est possible de passer la durée de l'animation, sa facilité et un rappel qui sera appelé une fois l'animation terminée.

Un exemple rendra tout plus clair:

bigCircle<span>.attr('fill', '#fff'); //This is IMPORTANT
</span>
img<span>.attr({
</span>    <span>mask: bigCircle
</span><span>});</span>

Cela réduira simplement le grand cercle de notre masque à un rayon plus petit sur deux secondes.

set.animate ()

Vous pouvez animer les éléments d'un groupe (set) indépendamment. Mais que se passe-t-il si vous voulez animer l'ensemble entier de manière synchrone? Facile! Vous pouvez utiliser set.animate (). Cela appliquera la même transformation à tous les éléments de l'ensemble, assurant la synchronicité entre les différentes animations et l'amélioration des performances en rassemblant tous les changements.

<span>var smallRect = paper.rect(180, 30, 50, 40),
</span>    bigCircle <span>= paper.circle(150, 150, 100),
</span>    mask <span>= paper.mask(bigCircle, smallRect);
</span>
mask<span>.attr('fill', 'white');
</span>
img<span>.attr({
</span>    <span>mask: mask
</span><span>});</span>

Vous pouvez également animer chaque élément d'un ensemble indépendamment, mais de manière synchrone. Set.animate () accepte un nombre variable d'arguments, afin que vous puissiez passer un tableau avec les arguments pour chaque sous-élément que vous devez animer:

<span>var gradient = paper.gradient('r()#fff-#000');
</span>mask<span>.attr('fill', gradient);</span>

En supposant que vous avez correctement suivi notre exemple de code jusqu'à présent (essayez-le sur Codepen), en exécutant le code ci-dessus dans la console de votre navigateur, vous verrez comment les trois éléments sont animés en synchronisation, mais indépendamment. Le code ci-dessus était également une chance d'introduire des ensembles (comme les résultats des méthodes Select () et SelectAll ()), et quelques méthodes utiles définies sur eux.

Une autre façon de créer un ensemble est de passer un tableau d'éléments à la méthode du constructeur SNAP:

mask<span>.attr('fill', 'L(0, 0, 300, 300)#000-#f00:25-#fff');</span>

snap.animate ()

Vous pouvez animer n'importe quelle propriété numérique, mais Animate () ne fonctionnera pas sur d'autres types, par exemple, il gâchera vos éléments de texte si vous essayez d'animer leur attribut de texte. Pourtant, il existe un autre moyen d'obtenir un tel effet, c'est-à-dire la troisième façon d'appeler Animate () dans Snap.

En appelant la méthode Animate de l'objet SNAP, il est possible de spécifier dans des détails supplémentaires les actions qui seront exécutées à chaque étape de l'animation. Cela aide à la fois à regrouper une animation complexe et à les exécuter en synchronisation (bien que la méthode set.animate () serait la bonne façon de faire face à ce problème), et d'animer les propriétés complexes et non numériques.

Par exemple, créons et animons un élément de texte:

<span>var paper = <span>Snap</span>(800, 600),
</span>    img <span>= paper.image('bigImage.jpg', 10, 10, 300, 300),
</span>    bigCircle <span>= s.circle(150, 150, 100);</span>

Gestion des événements

Revenant à la comparaison initiale entre les masques et les images, vous pouvez obtenir le même effet que nous avons montré dans la section précédente avec un GIF animé (en quelque sorte). Si, cependant, vous souhaitez reproduire ce comportement en réponse à l'interaction des utilisateurs, l'amélioration à l'aide de SVG est encore plus pertinente. Vous pouvez toujours trouver un moyen de le faire fonctionner en utilisant plusieurs GIF, mais, en plus de perdre la flexibilité, vous ne pourrez pas obtenir la même qualité avec autant d'effort:

bigCircle<span>.attr('fill', '#fff'); //This is IMPORTANT
</span>
img<span>.attr({
</span>    <span>mask: bigCircle
</span><span>});</span>

Cliquez sur les gestionnaires peuvent être supprimés ultérieurement à l'aide de la méthode élément.unclick ().

Parmi d'autres événements qui peuvent être gérés de la même manière, il existe DBLClick, Mousedown et Mouseup, Mousemove, Mouseout et Mouseover, et un certain nombre d'événements orientés mobiles, comme Touchstart et Touchend.

Pour ceux de nos lecteurs habitués aux interfaces jQuery ou D3, il y a dans la méthode NO ON () dans SNAP pour gérer manuellement d'autres événements. Si vous avez besoin d'un comportement personnalisé qui va au-delà des gestionnaires offerts par SNAP, vous pouvez récupérer la propriété de nœud pour n'importe quel élément, qui à son tour contient une référence à l'élément DOM associé, et (peut-être après l'emballer dans jQuery), vous pouvez ajouter des gestionnaires et les propriétés directement:

<span>var smallRect = paper.rect(180, 30, 50, 40),
</span>    bigCircle <span>= paper.circle(150, 150, 100),
</span>    mask <span>= paper.mask(bigCircle, smallRect);
</span>
mask<span>.attr('fill', 'white');
</span>
img<span>.attr({
</span>    <span>mask: mask
</span><span>});</span>

glisser et déposer

SNAP facilite l'activation de glisser-déposer et le dépôt pour tout élément, groupe ou défaut à l'aide de la méthode élément.drag (). Si vous n'avez pas besoin de comportement personnalisé, vous pouvez l'appeler sans aucun argument:

<span>var gradient = paper.gradient('r()#fff-#000');
</span>mask<span>.attr('fill', gradient);</span>

Cependant, si vous avez besoin d'un comportement spécial, vous pouvez transmettre des rappels et des contextes personnalisés pour les événements OnMove, Ondragstart, Ondragerd. Sachez que vous ne pouvez pas omettre le rappel OnMove si vous souhaitez passer les prochains.

L'ajout d'un gestionnaire de drag ne masquera pas l'événement de clic, qui sera licencié après celui de l'onDragend, sauf si c'est explicitement empêché.

Chargez le svg existant

L'un des points les plus forts de cette grande bibliothèque est qu'il prend en charge la réutilisation du code SVG existant. Vous pouvez «l'injecter» en tant que chaîne, ou même mieux, vous pouvez lire un fichier existant, puis le modifier.

Vous pouvez l'essayer vous-même. Téléchargez et enregistrez dans la racine de votre projet ce joli dessin SVG. Ensuite, chargez-le dans votre page, modifiez son style ou sa structure comme nous le souhaitons, avant même de l'ajouter à notre arbre DOM, d'ajouter des gestionnaires d'événements, etc.

mask<span>.attr('fill', 'L(0, 0, 300, 300)#000-#f00:25-#fff');</span>

Remarque : En raison de la stratégie d'origine homosexuelle dans les navigateurs, vous devrez exécuter l'exemple dans un serveur local pour tester la méthode de chargement.

Améliorations des performances

Une façon d'améliorer les performances lors de la manipulation du DOM utilise des Fragments documentaires. Les fragments sont des conteneurs minimaux pour les nœuds DOM. Introduits il y a quelques années, ils vous permettent de manipuler à peu de frais des sous-arbres entiers, puis de cloner et d'ajouter un sous-arbre entier avec n nœuds à notre page avec 2 appels de méthode au lieu de n. La différence réelle est expliquée en détail sur le blog de John Resig.

SNAP permet également d'utiliser les fragments natifs, avec deux méthodes:

1. snap.parse (svg) prend un seul argument, une chaîne avec du code SVG, l'analyse et renvoie un fragment qui peut être ajouté plus tard à n'importe quelle surface de dessin.

2. Snap.Fragment (Varargs) prend un nombre variable d'éléments ou de chaînes, et crée un seul fragment contenant tous les éléments fournis.

En particulier pour les grands dessins SVG, les fragments peuvent entraîner une énorme économie de performances, lorsqu'elle est utilisée de manière appropriée.

Conclusion

Ceci conclut notre article sur Advanced Snap.Svg. Maintenant, les lecteurs devraient avoir une idée claire de ce qu'ils peuvent faire avec cette bibliothèque et comment le faire. Si vous êtes intéressé à en apprendre un peu plus, la documentation SNAP est un bon point de départ.

quelques liens utiles:

• tutoriel snap.svg.
• Documentation Snap.Svg.

Des questions fréquemment posées sur Advanced Snap SVG

Qu'est-ce que SNAP SVG et pourquoi est-il important dans le développement Web?

SNAP SVG est une bibliothèque JavaScript puissante et flexible conçue spécifiquement pour travailler avec des graphiques vectoriels évolutifs (SVG). Les SVG font partie intégrante du développement Web car ils permettent la création de graphiques évolutifs de haute qualité qui maintiennent leur clarté, quelle que soit la taille ou la résolution de l'écran sur lequel ils sont affichés. SNAP SVG améliore cette fonctionnalité en fournissant un ensemble robuste d'outils pour manipuler et animer les SVG, ce qui permet aux développeurs de créer plus facilement des graphiques et des animations interactifs et dynamiques pour leurs sites Web.

En quoi Snap SVG diffère-t-il des autres bibliothèques SVG. ?

SNAP SVG ressort des autres bibliothèques SVG en raison de son ensemble de fonctionnalités et de sa facilité d'utilisation complètes. Il fournit une API simple et intuitive qui permet aux développeurs de créer, manipuler et animer rapidement les SVG. De plus, Snap SVG prend en charge une large gamme de fonctionnalités SVG, y compris les gradients, les modèles, l'écrêtage, le masquage, etc. ou des frameworks?

Oui, Snap SVG est conçu pour être compatible avec d'autres bibliothèques et frameworks JavaScript. Cela signifie que vous pouvez l'utiliser aux côtés d'outils tels que jQuery, React, Angular, et plus encore, vous permettant de tirer parti des forces de chaque outil pour créer des applications Web plus puissantes et interactives.

Comment puis-je commencer avec Snap Svg?

Pour commencer avec Snap SVG, vous devrez d'abord inclure la bibliothèque SNAP SVG dans votre projet. Cela peut être fait en téléchargeant la bibliothèque à partir du site Web Snap SVG et en l'incluant dans votre fichier HTML, ou en utilisant un gestionnaire de packages comme NPM pour l'installer. Une fois la bibliothèque incluse dans votre projet, vous pouvez commencer à l'utiliser pour créer et manipuler les SVG.

Quels sont les cas d'utilisation courants pour Snap SVG?

SNAP SVG est couramment utilisé pour créer des interactifs interactifs Graphiques et animations pour les sites Web. Cela peut inclure des choses comme des graphiques et des graphiques interactifs, des icônes animées, des cartes interactives, etc. De plus, parce que Snap SVG prend en charge une large gamme de fonctionnalités SVG, il peut également être utilisé pour des tâches plus complexes comme la création de filtres, masques et gradients SVG.

La compatibilité du navigateur de prise en charge SNAP est-elle SNAP?

Oui, Snap SVG est conçu pour être compatible avec tous les navigateurs modernes, notamment Chrome, Firefox, Safari et Internet Explorer 9 et plus. Cela signifie que vous pouvez l'utiliser pour créer des SVG qui s'affichent correctement sur une large gamme d'appareils et de navigateurs.

Comment puis-je animer les SVG avec SNAP SVG?

SNAP SVG fournit un certain nombre de méthodes pour l'animation de SVG. Cela inclut des méthodes de modification des attributs d'un élément SVG au fil du temps, de l'animation le long d'un chemin, et plus encore. De plus, Snap SVG prend en charge l'utilisation des fonctions de soulagement, qui vous permettent de contrôler la vitesse et le flux de vos animations.

Puis-je utiliser Snap SVG pour une conception réactive?

Oui, Snap SVG est Un excellent outil pour créer des conceptions réactives. Parce que les SVG sont basés sur des vecteurs, ils peuvent être étendus vers le haut ou vers le bas sans perdre de qualité, ce qui les rend idéaux pour une conception réactive. De plus, Snap SVG fournit des méthodes de manipulation et d'animation des SVG, vous permettant de créer des conceptions dynamiques et interactives qui s'adaptent à différentes tailles d'écran et résolutions.

Est-ce que Snap SVG est libre à utiliser?

Oui, Snap SVG est une bibliothèque open source, ce qui signifie qu'il est gratuit à utiliser et à modifier. Vous pouvez télécharger la bibliothèque à partir du site Web Snap SVG ou l'installer à l'aide d'un gestionnaire de packages comme NPM.

Où puis-je trouver plus de ressources pour en savoir plus sur Snap Svg?

Il existe de nombreuses ressources disponibles en ligne Pour vous aider à en savoir plus sur Snap SVG. Le site Web Snap SVG fournit un guide complet des fonctionnalités et des fonctionnalités de la bibliothèque, ainsi qu'un certain nombre de démos et d'exemples. De plus, il existe de nombreux tutoriels et articles disponibles sur des sites comme SitePoint, Dabbles et GitHub qui fournissent des informations approfondies et des exemples pratiques de la façon d'utiliser Snap Svg.

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!