Transcription
1. Plonger dans: Salut là, Cable ici et bienvenue à ce cours sur SVGs comme Code. Avec la montée du web responsive, les SVG sont devenus très populaires. Pour une bonne raison, ce sont des images vectorielles, qui signifie que cela s'améliore parfaitement avec la taille de l'écran. Cependant, il y a une raison encore plus importante pour laquelle les SVG sont si puissants. SVG sont du code tout comme HTML. Cela signifie que nous pouvons les manipuler avec les mêmes outils avec CSS et avec JavaScript. Dans ce cours, nous allons plonger dans ce que cela signifie. Nous allons jeter un oeil aux SVG. Quel est ce code ? A quoi ça ressemble ? Nous allons commencer à jouer avec la façon dont nous
appliquons CSS pour les rendre un peu interactifs, changer de couleur en fonction du vol stationnaire ou en appliquant une classe CSS. Ensuite, nous allons plonger dans certaines des fonctionnalités les plus avancées des SVG, comment nous pouvons utiliser des filtres pour mettre des images, puis changer leur coloration, ajouter du flou, masquer des morceaux que nous ne voulons pas, tout ce qui est amusant. Nous utiliserons JavaScript pour rendre cet outil interactif afin qu'à la fin du cours, vous construisiez un éditeur de photos comme vous pourriez le trouver dans Instagram ou Snapchat, où vous pouvez mettre une photo, appliquer des filtres personnalisés, , puis téléchargez cette image pour l'utiliser où vous le souhaitez. J' espère que tu es aussi excitée que moi. Rejoignez-moi dans la prochaine vidéo.
2. SVG en tant que code: Plongons dans ce qui constitue un SVG. Pour rendre cela facile, j'ai créé un SVG un peu simple. Je viens de rassembler ce petit visage en utilisant Sketch. Vous pouvez voir que je ne suis pas beaucoup un artiste, mais cela utilise un tas d'éléments différents dans SVG qui nous
permettront d'explorer ce que sont ces choses et comment elles sont disponibles pour nous. Si vous suivez le long à la maison, cliquez sur le stylo, cliquez simplement sur Fourchette, vous pouvez bricoler avec vous-même, et vous pouvez voir ce que nous obtenons tout de suite est un coup d'oeil dans. Voici notre image, et voici le code qui génère cette image. Plongons dans ce que sont ces pièces. Vous pouvez voir qu'il est structuré assez similaire au HTML. Vous avez un élément externe qui, au lieu de dire que HTML est SVG, nous pouvons ignorer cette version XML. En fait, cela n'a pas d'importance dans le but de cela. C' est juste donner une note de haut niveau sur la façon dont cela est structuré. L' élément SVG a quelques choses qui sont différentes du HTML en ce que vous voyez qu'il a une largeur et une hauteur et une zone de vue, qui est quelles parties de l'image sont visibles sont à l'intérieur de l'image qui est affichée. Vous pouvez avoir des SVG qui s'affichent hors écran et à l'écran dans la zone de vue. Il y a des méta-informations, un titre, ceci est notre visage simple, quelques profondeurs qui n'utilisaient pas en ce moment, et puis nous entrons dans les éléments réels. Ce sont tout comme un HTML, vos divs ou spans, vos balises de paragraphe, sauf ici ce sont des éléments graphiques. Nous avons g, qui est une balise de groupe. Ce groupe est notre visage entier, le visage simple. On peut voir qu'il y a un cercle, des ellipses, un polygone de chemin, des ellipses, d'autres chemins, des ellipses. Les cercles et les ellipses sont assez simples. Ce premier est notre visage. Vous pouvez voir qu'il y a quelques valeurs différentes à ce sujet que nous pouvons changer. On pourrait changer la couleur du trait. Si nous voulions changer la ligne qui est la partie externe du cercle de noir à, disons un gris, nous pouvons le faire et nous pouvons voir qu'elle change ici du noir au gris. Nous avons la largeur de trait, qui est la largeur de la ligne à l'extérieur. Si nous changeons cela jusqu'à cinq, par exemple, nous pouvons voir qu'il devient beaucoup plus gros et plus gros. Remettez-le à deux, et nous avons le remplissage, qui est ce qui est interne à cela. Maintenant ces traits, largeur de trait rempli, ceux-ci sont disponibles pour la plupart de nos éléments. Vous pouvez voir qu'il y a aussi quelques éléments de positionnement. Nous avons Cx, Cy, c'est là
que cela est positionné dans les sont filtrés pour le centre. C' est le centre x, le centre y donné r, qui a un rayon. Si on a ramené ça à 17, on peut voir que ce cercle est devenu beaucoup plus petit. Nous pouvons voir que ceux-ci sont largement écho pour chacun de ces différents types d'éléments, ellipse, cercles, etc. chemins, vous verrez qu'il y a cette autre chose funky, d égal et puis un ensemble de ce qui
ressemble essentiellement chiffres et quelques lettres funky jointes. Nous n'allons pas plonger profondément dans ce format en ce moment, mais cela décrit une route arbitraire dans l'espace. La façon dont j'ai créé ceci et la façon dont la plupart des gens créent des annonces comme celle-ci ou créent des choses arbitraires au sein de SVG, c'est qu'ils utiliseront un outil graphique. J' ai utilisé le croquis. Je viens de rassembler cela en utilisant l'outil vectoriel de croquis. Je n'ai pas exporté ces chemins pour moi. Maintenant qu'ils sont là, je peux les modifier et les manipuler. Mais je ne pense pas que personne n'est des
chemins d'écriture pour leurs vecteurs à moins qu'ils ne le fassent depuis très longtemps, ils utilisent généralement un outil pour le faire. Vous pouvez les écrire dans Scatchard, Illustrator commencer quelque chose, puis l'exporter et vous obtiendrez ces pads immédiatement. Dans notre prochaine leçon, nous allons examiner comment nous pouvons les manipuler de
manière plus systématique et comment nous pouvons commencer à utiliser CSS pour bricoler et jouer avec. Je te verrai là-bas.
3. Manipulation et remplissage avec CSS: Dans cette vidéo, nous allons regarder prendre le même SVG que nous avons utilisé dans la dernière vidéo et maintenant le styliser non seulement en fonction de la modification de notre tracé ou de notre remplissage en ligne, mais avec CSS. Ceci comme vous pouvez le voir, est le même SVG, le même visage simple que nous avons créé, mais j'ai ajouté un peu, j'ai ajouté le nom de la classe. J' ai ajouté une classe de visage pour cet ovale extérieur. J' ai étiqueté mes yeux, mon nez, etc. Si vous suivez le long à la maison, cliquez à travers le stylo, appuyez sur Fork, et nous pouvons commencer à bricoler avec cela en utilisant CSS. Laissez-moi ouvrir l'onglet CSS ici. Maintenant, j'utilise le préprocesseur Sass qui me permet d'utiliser des variables ici, nommées variables. C' est juste pour que je puisse le faire un peu plus sémantiquement. Maintenant, vous pouvez voir que j'ai pris ces cours et j'ai commencé à les
cibler et à mettre ces propriétés dans. Ça veut dire deux choses. Premièrement, cela signifie que je peux supprimer les propriétés dans le SVG d'origine. Si je prends le visage, je pourrais lui dire : « Ne pas avoir de valeurs par défaut. » C' est assez bon et il est resté le même ici, mais si je devais me débarrasser de ceux-ci, il deviendrait noir, ce qui est la valeur par défaut si ce n'est pas défini. Je veux réellement garder ces valeurs par défaut, mais ce que je vais faire place est commencer à les remplacer avec CSS. Disons, par exemple, que
j'ai ma couleur pour les yeux, qui est maintenant ce bleu et que je veux rendre ma couleur noire. Je vais aller complètement aux yeux. On peut voir que l'œil en ce moment utilise juste un remplissage de couleur des yeux. Je vais changer la couleur des yeux ici et le prendre au noir. Cela remplace mes valeurs par défaut et vous pouvez voir avec mes yeux ici, juste devenir totalement noir. Vous pouvez le faire de plusieurs façons différentes. Ce que cela ouvre est la possibilité d'utiliser CSS de toutes les façons que vous ne feriez pas HTML, pour créer des interactions et toutes sortes d'autres choses. Dites que mon visage est aussi beau, brun
sain en ce moment, mais j'ai vraiment peur quand vous passez la souris sur moi, donc je vais ajouter un effet de vol stationnaire simplement en ajoutant du CSS, une pseudo cible pour le vol stationnaire. Je vais changer mon remplissage en blanc pâteux quand tu pointes sur moi. On fait ça, on arrive et soudain je suis un blanc pâteux quand je survole. Cela nous permettra de faire toutes sortes d'interactions amusantes et dans une prochaine vidéo, nous allons vous parler de la façon dont vous pouvez le faire pour créer des effets interactifs sur toutes vos icônes. Vous pouvez créer une barre de menus interactive à l'aide de SVG. Il y a une mise en garde qui a à voir avec façon dont votre SVG doit être inclus dans la page pour que CSS le cible, et nous allons aborder cela dans la prochaine vidéo. Je te verrai là-bas.
4. SVG « Utilisation » et la Ombrage DOM: Dans cette vidéo, nous allons parler de différentes façons d' inclure les SVG dans votre page. Celui que vous avez probablement rencontré le plus est celui-ci. Vous pouvez déposer un SVG en tant que source vers l'image. Malgré le code, les SVG ne sont que des images et ils jouent bien avec les balises d'image. Une autre façon de le faire est d'utiliser la balise object. C' est une façon plus ancienne de référencer du contenu
externe utilisé pour les lecteurs flash et des choses comme ça. Il reconnaît les SVG, mais cela n'est généralement pas recommandé. Vous pouvez également utiliser un SVG qui fait référence à un autre. Vous pouvez définir une image en tant que symbole et juste un exemple réutilisable, puis la référencer dans SVG. Dans ce cas, je fais référence à ce symbole que j'ai défini ici dans un SVG vide, un SVG qui ne s'affiche pas du tout dans la page mais définit
juste mon symbole. Je peux y faire référence. Vous pouvez référencer des images tierces externes, choses qui ne sont pas dans la même page mais qui doivent être sur votre même domaine. Ensuite, la dernière façon que vous pouvez mettre un SVG dans votre page est avec du code en ligne. C' est exactement le même SVG avec lequel nous jouons depuis le début. Lorsque vous utilisez ces différents mécanismes, vous avez des limitations différentes. laisser tomber en tant que sources aux images est génial , mais vous ne pouvez pas réellement manipuler ces SVG avec CSS. En fait, vous verrez si vous regardez mes visages en bas, deux d'entre eux ont quelque chose de légèrement différent. J' ai pris notre CSS et changé le remplissage pour le nez, donc je l'ai changé pour être blanc. Mais cela n'a affecté que deux de nos versions. Cela a eu un impact sur le SVG qui utilise le symbole et le SVG qui est totalement en ligne. Si vous utilisez des données de référence de source d'image ou d'objet, vous ne pouvez pas toucher ces SVG avec CSS. Si vous utilisez ceci, l'utilisation que vous finissez avec quelque chose comme le DOM de l'ombre qui place quelques limitations subtiles sur ce que vous êtes en mesure d'accéder. Nous allons trop plonger dans ces choses parce que nous allons nous
concentrer sur cette dernière version, le SVG en ligne. C' est la façon la plus puissante d'utiliser les SVG. Tu as mis tout ton code dedans. Le problème avec cela est, que se passe-t-il si vous obtenez vos SVG d'une source tierce ? Vous les avez comme des fichiers image, vous voulez simplement les traiter comme des images. Pour cela, nous allons faire quelque chose appelé inlining. Nous allons utiliser un outil qui attire ces images et les dépose dans votre page. Nous allons couvrir l'inlining dans la prochaine vidéo. On se voit là-bas.
5. Inlining SVG: Bienvenue et parlons de l'injection SVG. L' injection SVG est tout simplement en utilisant JavaScript pour regarder les images qui ont une source SVG, tirer cette source et la vider directement dans la page qui est SVG en ligne. Vous pouvez le faire manuellement bien sûr, mais non seulement c'est une grande douleur dans le cul, mais vous ne pouvez pas non plus profiter de la mise en cache du navigateur disponible pour les images. Cependant, cette bibliothèque qu'un groupe appelé Iconic release appelé SVG injector, nous
permet de le faire automatiquement avec JavaScript et encore tirer parti de la mise en cache du navigateur. Ce que cela nous permet de faire est de prendre toutes nos balises d'image qui font référence aux SVG, sortir
automatiquement cette source SVG et de la vider en place. Regardons à quoi ça ressemble. Ici, j'ai mon visage standard que nous avons utilisé jusqu'à présent et il est référencé comme une balise d'image mais je vais faire quelque chose de plus avec elle. J' ai ajouté une classe afin de pouvoir la référencer en JavaScript et j'ai ajouté l'injecteur SVG JavaScript. Maintenant, j'ai fait cela en référençant simplement CDNJS, ce qui me permet de le tirer dans ma page. Tu peux le faire ici. Vous pouvez l'installer avec un paquet NPM si vous faites quelque chose localement, comme vous le souhaitez. Mais dans CodePen, c'est le plus facile. Quand je cours ma page, j'ai ce petit peu de JavaScript qui recherche n'importe quelle balise d'image qui a une classe d'injection, les
transmet dans l'injecteur SVG et soudainement ce n'est plus une image. C' est en fait un SVG en ligne. On peut le voir en l'inspectant. Il a mis tout ce SVG directement en place. C'est aussi simple que ça. Cela nous permet de commencer à tirer parti de toute la magie des SVG en
ligne tout en gardant notre code agréable et simple avec des images simples.
6. Fontawesome 5 et svg-with-js: Jouer avec notre visage a été beaucoup de plaisir, mais passons à quelques utilisations plus professionnelles des SVG. Le premier endroit où nous allons commencer est avec des icônes. Maintenant, si vous n'êtes pas familier, Font Awesome est une source d'icônes incroyable avec des centaines icônes de niveau
professionnel disponibles gratuitement et encore plus disponible si vous êtes prêt à payer pour un peu de licence. Dans Font Awesome 5, la version la plus récente, ils ont fait quelque chose de vraiment cool. Ce qu'ils ont fait, c'est qu'ils ont publié leur mécanisme par défaut pour déployer ces icônes est en utilisant des SVG avec JavaScript les injectant. Vous incluez simplement un simple fichier JavaScript qui gère tout, vous incluez vos icônes Font Awesome en utilisant seulement quelques classes sur un ETag, et il les injectera automatiquement en tant que SVG en ligne nous donnant accès à toute la puissance que nous J'ai parlé de SVG en ligne. C' est super simple de le faire. Si nous regardons rapidement, j'ai mis en place un CodePen de base. Je viens de mettre quelques versions rapides des icônes Font Awesome là-dedans. Tout ce que j'ai à faire est d'ajouter une référence à leur JavaScript, et soudainement, ces icônes apparaissent et elles apparaissent en tant que SVG en
ligne avec lesquels nous serons en mesure de faire des choses amusantes. Donc, dans notre prochaine vidéo, nous allons commencer à plonger dans l'utilisation réelle de ceci dans pour créer une barre de menu pour ce qui sera éventuellement notre éditeur d'images. Mais c'est tout pour l'instant. Police impressionnante. Si vous ne l'avez pas vérifié avant, vérifiez, vous serez époustouflé.
7. Créer un bar de menu: Maintenant, nous allons commencer dans les premières étapes de la construction de ce qui sera notre projet de cours. Dans cette vidéo, ce que nous allons faire est de commencer à créer une barre de menus pour nous permettre de jouer. Si vous suivez dessus, accueil, cliquez sur fork, pour fork un nouveau CodePen à partir du lien. Ce que j'ai commencé ici, c'est juste un espace très simple pour nous permettre de créer notre éditeur de photos ici. J' ai donc un conteneur d'éditeur div, j'ai une barre de menu avec laquelle nous allons faire des choses, et j'ai commencé à mettre des icônes dans la barre de menu. Au fur et à mesure que nous avançons, nous allons faire plus de choses fantaisie, mais nous utilisons la police génial. Si vous n'êtes pas familier avec la façon dont fonctionne la police génial, vous pouvez faire FA, puis le tiret FA, quel que soit le nom de la classe. Il y a parfois des versions alternatives, donc FAR si je change ce que c'est R, juste FA carré va être un carré rempli. Alors que si je fais le R, c'est juste un aperçu. Ensuite, j'ai mis du CSS simple ici, donc je limite juste la taille de l'éditeur avec la largeur, le
centrant, le compensant un peu. Mettez la barre de menu, lui donner une belle petite bordure, flex d'affichage afin que les choses une mise en page correctement rembourrage sur elle et commencer à remplir les choses. Maintenant, une chose à noter est que je coiffe les SVG ici, pas les itags. En fait, si je mets des itags qui correspondent à ce que j'ai écrit sur la source, cela ne fonctionne pas. C' est parce que, nous avons inclus la police génial ici et il est en train de transformer automatiquement ces Itags, à SVG. Quelque chose à garder à l'esprit si vous utilisez la police génial de cette façon est, ceux-ci sont transformés en SVG. On ne peut pas compter sur eux pour rester de la même façon. Je viens de commencer avec trois icônes différentes je pense que vous voudrez pouvoir télécharger notre image, prendre une photo pour y mettre quelque chose, dessiner un carré dessus, peut-être que nous voulons faire un cercle ou quelque chose comme ça. Mettons un cercle ici. Vous pouvez faire toutes sortes de choses si vous voulez simplement explorer ce que toutes les différentes options sont disponibles pour vous, les icônes de police impressionnantes. Vous allez sur la police awesome.com, cliquez sur les icônes. Nous utilisons les versions gratuites, mais il y a encore près de 1000 icônes que nous pourrions y mettre. Allez en ville, pensez à ce que sont les différentes choses que vous pourriez vouloir votre éditeur de photos soit en mesure de faire et juste commencer à jouer avec l'utilisation de cette police génial. Si vous êtes excité, vous pouvez commencer à jouer avec le style du SVG, chacun d'entre eux est composé d'un chemin que vous pouvez manipuler qui a un remplissage et une couleur. Nous commencerons à en parler un peu plus dans la prochaine vidéo. Obtenez un ensemble de barre de menu de base, ce sera la base sur laquelle nous construisons à l'avenir.
8. Rendez notre bar de menu interactif: Dans cette vidéo, nous allons regarder cette barre de menu que nous venons de mettre ensemble dans la dernière vidéo et commencer à rendre interactive en utilisant CSS, pseudo éléments ou pseudo propriétés afin que nous puissions la faire interagir en fonction du vol stationnaire ou en appliquant qui nous permettent ensuite d'interagir avec elle, avec JavaScript et de changer son état. Ce que nous allons commencer, c'est avec la même barre de menus que nous avons, sauf que j'ai fait une modification. J' ai enveloppé chacune de ces icônes avec la petite portée qui me permet de le contenir et de faire des choses avec elle. Nous allons comprendre pourquoi je fais ça une fois que nous aurons passé au JavaScript. Maintenant en regardant le CSS, je viens de mettre en place quelques variables SAS pour nous afin que nous puissions représenter sémantiquement la couleur pendant que nous jouons avec cela. Si nous voulons manipuler ces SVG, nous devrions savoir un peu à quoi ils ressemblent. Si nous inspectons cela avec l'inspecteur, nous pouvons voir que chacune de ces icônes se compose d'un seul chemin, qui dessine cette forme quelle que soit l'icône et il a une valeur de remplissage de la couleur actuelle. Maintenant, la couleur actuelle est une propriété CSS spéciale qui dit fondamentalement, quelle que soit la couleur est pour cet article, utilisez cela ici, de sorte que ce n'est pas amusant souvent cas. Il lui permet d'hériter quelle que soit la couleur
du conteneur et de l'écriture, et dans son cas. Si nous définissons simplement une couleur à la barre de menu pour être notre bleu clair, cette couleur est en fait héritée. Si nous voulions le faire sans l'approche de couleur actuelle, nous devrions réellement définir le remplissage. On doit savoir, ok, cette chose a un chemin dedans et on doit manipuler le remplissage pour qu'il soit bleu clair. Cela fonctionne tout aussi bien. L' astuce de couleur actuelle est vraiment pratique lorsque vous utilisez ces dans des blocs de textes et des choses comme ça parce qu' il ramasse juste quelle que soit la couleur environnante. Mais nous ne nous en soucions pas autant parce que ce que nous allons
faire est de changer cela en fonction de l'état de vol stationnaire. Si on fait défiler un peu vers le bas, j'ai un bloc ici pour planer. Cela dit, chaque fois que vous passez le curseur sur le SVG, changez la couleur de la bordure et changez la couleur. Nous pouvons voir maintenant que nous survolons, ces choses se sont transformées en bleu clair quand nous les survolons, et ce que cela fait, c'est qu'elles se sentent interactives. Il donne à l'utilisateur un indice, hey, je peux probablement cliquer dessus et ça va faire quelque chose. Mettons-en œuvre cela. Si nous voulions faire quelque chose en fonction d'un clic, ce que nous devons faire est d'utiliser JavaScript pour surveiller ce clic et ensuite appliquer quelque chose. Maintenant, une norme pour cela lorsque vous appliquez une classe, puis vous avez les changements de style que vous voulez modifier en fonction de cette classe. C' est une façon de gérer l'affichage en fonction de l'état. Maintenant, on va comprendre pourquoi j'ai mis ces enveloppes autour. Ce que je fais avec le JavaScript pour que cela se produise c'est que je vais faire un délai d'attente défini autour de lui et c'est juste en s'assurant que, hey, nous avons déjà ces choses dans la page Font Awesome a eu le temps de l'analyser et d'utiliser son JavaScript . Ensuite, je trouve tous les éléments de document qui sont nommés action. C' est ce qu'on appelle ces rappeurs et à chaque fois qu'il y a un clic sur eux, je vais juste basculer si elle a une classe active ou non. C' est une classe d'état qui me permet de chercher cela dans mon CSS. J' aurais pu en théorie faire cela sur tous
les SVG directement plutôt que de les envelopper avec des travées. Mais cela arrive à un rapide obtenu que je veux mettre en évidence pour vous, qui est quand vous utilisez Font Awesome, c'est JavaScript regarde en fait tous ces SVG. Si vous les manipulez, il les rendra à nouveau dans la page juste pour vous assurer que, si par exemple, vous changez la classe, il a toujours la bonne icône qui peut gâcher d'autres choses dans notre JavaScript. Si vous voulez manipuler les états de ceux-ci sans les forcer à re-rendre, vous aurez probablement besoin de les envelopper dans une classe ou dans un élément comme je l'ai fait ici. Qu'est-ce qu'on va faire ? Chaque fois que je clique dessus, nous allons basculer si ce conteneur, cette action a une classe active. Ensuite, nous pouvons utiliser CSS pour représenter visuellement cela. Chaque fois que c'est actif, ça va devenir bleu foncé. La même chose s'applique à chacun d'entre eux, puis puisque nous utilisons toggle, nous pouvons réellement le débasculer. Cela nous donne une indication visuelle du comportement. Une fois que nous commençons à ajouter plus d'éléments à un éditeur de photos, cela ajoutera non seulement un élément visuel, mais cela changera réellement le comportement que nous avons eu. Nous aborderons cela et commencerons à parler de la façon dont nous intégrons les photos dans nos SVG, dans notre prochaine vidéo. Je te verrai là-bas.
9. Intégrer des photos dans les SVGs: Nous avons passé tout ce temps à parler des SVG, qui sont des images vectorielles, des images qui sont définies comme des descriptions de ce qu'elles sont qui disent ok, ceci du point a au point b, ou ceci est un carré, des choses comme ça. Mais il y a une tonne d'images sur le web, comme toutes ces magnifiques photos de chat que nous trouvons partout qui ne tombent pas dans la catégorie des images vectorielles. Ils sont ce qu'on appelle des images raster, ce qui signifie essentiellement qu'ils sont la description de points de couleur. C' est ce qui sort de vos caméras. C' est tout ce qui est un PNG ou un JPEG ou l'un de ces formats d'image sont, et ceux-ci sont vraiment importants. Il y a beaucoup de choses importantes en eux. Cependant, nous pouvons incorporer ceux directement à l'intérieur des SVG et faire des choses amusantes avec eux. Nous allons commencer à le faire avec un tas de retouche d'image, floue, faire toutes sortes de trucs cool dans les prochaines vidéos. Mais pour commencer, nous avons juste besoin de savoir comment les mettre dans. J' ai attrapé une image d'un ensemble de chatons parce que l'Internet est pour les chats. J' ai eu ça d'un utilisateur de Flickr. Si vous ne le saviez pas, vous pouvez aller sur Flickr et demander des images avec des licences communes créatives
ou des licences pour lesquelles vous pouvez l'utiliser publiquement. Je peux l'utiliser publiquement tant que je crédite notre utilisateur de Flickr, ou que l'utilisateur de Flickr est Casey XD, et vous pouvez trouver des images pour votre propre usage de cette façon. Il suffit d'aller sur Flickr et de rechercher, puis de trier par type de licence. Ce que nous allons faire est de mettre ça à l'intérieur d' un SVG pour que nous puissions commencer à le manipuler à l'avenir. Ce que nous avons fait, j'ai ce qui serait, nous aurions notre barre de menu ici comme nous l'avions précédemment, mais je l'ai retiré pour l'instant afin que nous puissions nous concentrer juste sur l'image et la mettre à l'intérieur d' une scène et ensuite j'ai mon SVG en ce moment comme un autour d'une balise d'image. Une balise image est essentiellement une référence à tout autre type d'image. Vous pouvez incorporer votre image raster dans un SVG en plaçant simplement une balise image, en plaçant le lien vers l'endroit où elle vit et en spécifiant une dimension. Ici nous disons, nous allons commencer à zéro dans le SVG, à zéro et zéro, x et y. Nous allons avoir cette chose prendre 500 pixels de largeur. Cela nous a permis de dimensionner la hauteur. Voici notre image vivant à l'intérieur de notre SVG. Si on l'inspecte, c'est dans le SVG. Dans notre prochaine vidéo, nous allons commencer à parler, maintenant que nous l'avons dans notre SVG, que pouvons-nous en faire ? Nous allons commencer à regarder les filtres et le flou. Joignez-vous à moi là-bas.
10. Votre premier filtre SVG - Blou: Maintenant, nous arrivons à plonger dans la viande de ce qui sera notre projet, l'édition réelle des photos. Pour ce faire, nous allons utiliser un outil appelé filtre de SVG. Maintenant, les filtres sont essentiellement des ensembles de transformations d'image qui sont définies et peuvent ensuite être appliquées réutilisables sur n'importe quel type d'image. Vous pouvez les utiliser pour appliquer aux composants SVG natifs, donc vous pourriez dire, je veux prendre ce composant SVG et je veux le flouter, ou je veux changer les couleurs, ou je veux le faire pivoter, ou des choses comme ça, vous pouvez le faire avec un filtre, ou vous pouvez le faire pour raster des images comme notre photo chatons. Les filtres peuvent être combinés. Il y a toutes sortes de façons de créer un filtre qui a un ensemble de primitives
différentes qu'il fait, mais nous allons
commencer avec les filtres les plus basiques. On va commencer par un flou. Dans ce cas, nous allons utiliser un flou gaussien, et la façon dont cela ressemble dans SVG est, vous définissez un filtre avec un certain ID, c'est ce
qui va vous donner la possibilité de l'appliquer à des choses et ensuite vous utilisez un ensemble de filtres primitives à l'intérieur de celui-ci. Nous avons notre filtre, que nous allons juste appeler Blur Me et il contient une seule primitive un FegaussianBlur. Gaussien signifie que nous allons distribuer les choses le long d'une courbe et vous devrez définir la source de ce flou. Dans ce cas, nous allons utiliser une clé qui est le graphique source, qui dit fondamentalement tout ce que vous appliquez ce filtre, c'est ce
que je veux que vous flouez. Il y a quelques autres mots-clés que vous pouvez appliquer à l'alpha, ce qui est juste la transparence du graphique, il y a quelques autres choses. Pour toutes nos fins de retouche d'image, je pense que nous allons vouloir utiliser le graphique source. Ensuite, il y a un écart-type qui s'applique à la façon dont est étalé ce flou. Si nous prenons l'original et le distribuons sur une vague, quelle est la largeur ou quelle est l'étroitesse ? Ensuite, vous l'appliquez à une image. Nous ajoutons simplement cette propriété de filtre qui pointe vers le filtre que nous avons défini. Pour voir, nous l'avons appliqué à notre chat, notre chat est très floue. Si nous mettons cet écart-type à 0, c'est comme si nous n'avions aucun flou du tout. On le change à 1, ça commence à devenir un peu plus floue, 2, 3, et ça devient de plus en plus floue et floue. Appliquer ceci à l'ensemble de l'image peut ne pas être aussi
excitant, mais à mesure que nous descendons et que nous commençons à chercher à combiner cela avec de la masse, vous serez en mesure de flouter certaines parties de
votre image de manière sélective et d'augmenter la concentration sur les autres. Ce sera un outil super puissant dans notre boîte à outils et c'est l'
un des filtres les plus simples pour commencer. D'accord. Dans notre prochaine vidéo, nous allons parler d'un autre filtre que nous pouvons utiliser pour transformer nos images et les rendre rétro ou teintées de différentes manières. Joignez-vous à moi là-bas.
11. Filtre de transformation des couleurs: Bienvenue sur notre deuxième vidéo sur les filtres en SVG. Dans cette vidéo, nous allons regarder un autre type de filtre. Nous allons chercher à manipuler les couleurs de nos images. Vous pouvez voir que j'ai notre même photo de chaton, mais ça a l'air un peu différent, ça ressemble à une photo de la vieille école. C' est un peu rétro, un peu teinté de rouge. La façon dont nous faisons cela est d'utiliser une autre des primitives de filtre disponibles dans SVG, celle-ci appelée un FecomponentTransfer. Ce que cela fait est, il nous permet de définir une fonction qui s' applique à chaque pixel dans l'image et la transforme. Ce que nous faisons ici, nous avons une fonction pour le facteur rouge, une fonction pour le vert, un facteur pour le bleu. Cela va prendre la valeur RVB de chaque pixel de
cette image et la transformer en base sur la formule que nous définissons. Pour ce filtre, c'est celui que j'applique en ce moment. Je l'appelle Redshift. Ce que nous faisons, nous avons deux facteurs avec lesquels nous pouvons jouer. Nous pouvons jouer avec la pente de la fonction. Ce que cela signifie essentiellement, c' est que
si la pente est celle qui dit que c'est l'intensité du R, du G ou du B. Si c'est un, ce sera la même intensité que sur la photo originale. Ici, nous l'avons mis en deux, donc nous augmentons l'intensité
de tous nos pixels, mais nous pouvons aussi déplacer l'interception. C' est là que commence la valeur. Intercept zéro dit de le laisser tranquille. Intercepter les valeurs négatives dit ramper vers le bas, le rendre moins. Dans ce que nous disons, rendre le nôtre un peu plus extrême, mais commencer au même endroit. Rendez nos verts un peu plus extrêmes, mais commencez plus bas et rempart bleuit encore plus loin. Si nous voulions changer et mettre l'accent sur une autre composante, ce que nous pouvons faire c'est faire la même chose, mais ramasser nos rouges et nos verts un peu, puis supprimer le blues et changer. Si nous regardons à quoi cela ressemble au lieu d'un redshift, nous pouvons voir qui teint réellement tout avec une couleur bleue. Vous pouvez jouer avec cela de plusieurs façons différentes. Nous pouvons regarder à quoi cela ressemblerait si nous n'avons pas changé la pente du tout, mais quand même changé l'interception et qui a toujours cette teinte rouge, mais il semble très terne, il n'est pas très vivant en ajoutant une pente supplémentaire. Même si nous enlevons certaines des couleurs, certains verts, un peu de bleu, il se sent toujours vivant. Nous pouvons également regarder ce qui se passerait si nous déplaçons cela vers l'avant au lieu de négatif, donc nous avons changé le rouge et vraiment l'accentuer et cela nous donne une teinte très rouge de mise au point. Nous ajoutons du rouge plutôt que de simplement mettre l'accent sur ce qui est déjà là en éliminant certains des autres. Ce sera un autre de nos effets de filtre permanents que nous allons appliquer. Il y a une tonne d'effets de filtre différents. Vous pouvez en fait aller à la documentation W3 et regarder à travers toutes les différentes primitives de filtre. Beaucoup d'entre eux ont eu à voir avec la lumière et comment la lumière fait les choses. Nous n'allons pas couvrir tous ces aspects dans le cours, mais c'est un endroit amusant pour vous d'aller étudier et explorer et comprendre comment vous pouvez étendre les types d'effets que vous voulez appliquer à vos SVG. Dans notre prochaine vidéo, nous allons parler de masques, ce qui nous permet d'appliquer des choses à des sous-sections de nos images, alors rejoignez-moi là-bas.
12. Masques: Maintenant, on va parler de masques. Les masques nous donnent la possibilité de montrer sélectivement des morceaux de nos images et de cacher le reste. Fondamentalement, ce que vous faites lorsque vous définissez un masque, c'est que vous créez une forme et que lorsque vous l'appliquez en tant que masque à autre chose, il ne montre que les éléments qui s'intègrent à cette forme. Ce que j'ai fait ici dans nos exemples, j'ai pris notre photo de chaton et c'est la même photo même si vous ne voyez qu'une partie de celle-ci. Ce que j'ai fait, c'est que j'ai créé un masque rectangulaire. Je l'ai appelé mon masque de chaton et je l'ai donné, ce masque contient des choses à l'intérieur, contient un rectangle et je lui ai donné une certaine dimension. J' ai commencé à, X 50, lui donner une largeur de 250 et une hauteur de 500 et ce que cela fait est quand je l'applique en utilisant cet attribut de masque à mon image, il montre sélectivement seulement les choses qui sont couvertes par ce rectangle. Je peux changer ce qui montre en changeant la taille du rectangle, donc si je change la largeur, il devient un peu plus large, je vois un peu plus de mes chatons. Si je change où ça commence, disons au lieu de commencer à 50, j'ai commencé à 250. Je montre l'autre côté de cette image maintenant, et je pourrais changer le remplissage, aussi. Ça devient un peu délicat. Ce que cela fera essentiellement est de montrer n'importe quoi où le masque est opaque. En ce moment, le masque a un remplissage, il est complètement opaque, donc il va tout montrer. Si je me débarrassais entièrement de ce remplissage, rien ne se montrerait parce que mon remplissage n'est pas là. Si vous mettez quelque chose comme votre remplissage qui est translucide, vous pouvez en fait obtenir partiellement spectacle, sorte que vous obtenez à montrer translucide. En marquant avec l'alpha, vous pouvez faire des trucs amusants. Nous n'allons pas plonger là-dedans dans les moindres détails, mais cela vous donne une idée de la flexibilité des masques. Dans notre prochaine vidéo, nous allons commencer à voir certaines des utilisations de ceci, afin que nous puissions prendre notre masque, l'
utiliser pour montrer sélectivement les choses et ensuite combiner cela avec un filtre pour que nous puissions sélectivement flou, sélectivement modifier la couleur, faire toutes sortes de choses amusantes. Je te verrai là-bas.
13. Manipulation Programmatic de SVG: D' accord. Parlons de la manipulation programmatique des SVG. Comme tout ce qui est en HTML, les éléments SVG, surtout une fois qu'ils sont en ligne, peuvent être manipulés avec JavaScript. Ce que cela signifie, c'est que tous ces outils que nous avons appris, filtres, masques, etc peuvent être modifiés et appliqués avec JavaScript. Donc ce que j'ai fait pour démontrer que j'ai pris notre chaton, et j'ai le masque que nous avons fait dans notre dernière vidéo, et j'ai juste mis trois petits liens ensemble. Pas de masque, petit masque, et grand masque et je leur ai donné des ID pour que nous puissions les accrocher et les saisir avec JavaScript. J' ai également ajouté un identifiant à mon image afin que je puisse faire
référence un peu et donc ce que nous voulons faire, c'est avoir pas de masque, se débarrasser du masque, petit masque, mettre un petit masque là-dessus et une grande masse, mettre un gros masque là-dessus. Pour ce faire, nous utilisons simplement du JavaScript simple. Ce que j'ai ici, c'est que j'ai attrapé ces différents objets par leurs identifiants. Donc j'ai le masque, la chose que nous allons vraiment vouloir changer, si nous changeons le masque, c'est le rectangle à l'intérieur, les dimensions de ça. Si nous changeons les dimensions, et la mascotte, élément lui-même, cela ne va pas aider quoi que ce soit, parce que, il doit être quel est l'objet qui fait le masque ? Puis une image, oups, nous avons quelques points-virgules supplémentaires là-bas. C' est l'image que nous avons. Puis j'ai créé, des écouteurs d'événements. Donc, pour aucun masque, tout ce que nous voulons faire, est de définir l'attribut sur l'image du masque, ne devrait pas être là. Pour une petite masse, nous voulons qu'il soit là et nous voulons définir ce masque pour avoir une petite largeur, et pour le gros masque, nous voulons le définir pour avoir une plus grande largeur. C'est ça. C' est juste du JavaScript vanille. C' est comme, manipuler autre chose. Mais parce que, nous pouvons manipuler ces masques, et ces filtres, nous pouvons appliquer ces effets, d'une
manière vraiment amusante. Jetons juste un coup d'oeil à quoi ça ressemble, pas de masque, il y a notre image originale, petit masque. Ce qu'on a, un gros masque, il se propage partout. Si vous voulez jouer avec cela plus, vous pouvez essayer d'utiliser ceci pour appliquer des filtres, et d'autres choses que vous pourriez avancer parce que nous allons couvrir cela, dans les prochaines vidéos. A bientôt.
14. Combiner masques et les filtres: Bienvenue de retour. Nous allons nous attaquer à la combinaison de filtres et de masques. Ce que nous voulons faire, nous avons notre photo de chaton ici, et nous voulons mettre en évidence l'une d'entre elles. Choisissons ce chaton ici, celui-là à gauche. Nous allons brouiller l'arrière-plan et notre autre chaton et laisser ce chaton ici. Si vous vous souvenez, notre masque mis en évidence juste que chaton et sont flou filtre ce floue. Nous devrions être en mesure de combiner ces deux-là pour obtenir exactement l'effet que vous voulez. Dans notre SVG, j'ai notre masque défini ici, j'ai le filtre que le filtre de flou défini. Ce sont les mêmes choses que nous avons abordées dans les vidéos précédentes. Regardons comment nous pourrions appliquer cela à notre image. Vous pourriez penser qu'on pourrait les appliquer tous les deux à la même image. Cela aurait un sens intuitif. Mais si nous essayons cela, si nous disons masque égale URL, masque
chaton, et nous appliquons ensuite aussi bien le filtre. Ce qui se passe, c'est qu'ils s'appliquent tous les deux, mais pas dans la combinaison que nous voulions. On s'est masqué à notre chaton étoilé, mais on a floue le même. Si nous voulons combiner les effets d'une manière différente, où nous voulons avoir ce chaton être mis en évidence. Ce que nous devons faire est en fait de couches sur ces effets plutôt que de les combiner. On va s'enfoncer, d'abord le flou. Ensuite, nous allons prendre une autre copie de l'image et ajouter le masque. Si je prends cette image et que je la copie avant de faire quoi que ce soit, alors copiez-la. Maintenant, j'ai deux copies de l'image. Ils ne sont pas en cascade comme ils le feraient HTML parce que SVG, nous positionnons absolument. Nous définissons les mêmes coordonnées x et y, donc elles sont en fait au-dessus les unes des autres. Maintenant, ce que nous voulons faire est de brouiller le dos et de masquer le devant. Mettons le masque ici, masque comme masque de chaton URL. Nous ne voyons pas d'effet tout de suite, mais nous pouvons savoir si nous supprimons l'autre. C' est ce à quoi on se cache. Maintenant, nous allons flotter l'arrière-plan. Celui qui vient en premier sera celui qui est en dessous. Essayons de filtrer est égal à l'URL. Là, nous l'avons. Vous pouvez voir que nous avons maintenant un point culminant autour de ce chaton et tout le reste en arrière-plan est floue. Vous pouvez commencer à voir comment en créant des masques prudents, vous pouvez mettre en évidence certaines parties d'une photo. Maintenant, c'est un peu gênant. Nous répétons exactement la même image encore et encore. Nous ne voulons peut-être pas le faire, surtout si cette image, plutôt que d'être un lien, était un blob que nous avons téléchargé ou des choses comme ça. Nous pouvons en fait profiter d'une autre caractéristique SVG, en fait, celle que nous avons couverte plus tôt, le fait que vous pouvez définir des symboles et les utiliser. Si je permute sur ce stylo de code, j'ai défini un symbole qui est la photo qui a ce lien. En bas, où je veux faire mes flou et mes masques en couches, je dois juste faire référence à cette photo que j'utilise et mettre ça là dedans. Cela nous permettra, dans nos prochaines vidéos, accéder à une image que nous avons téléchargée en un seul endroit et de commencer à superposer les effets au fur et à mesure que nous allons. Je suis excité d'entrer dans les trucs de l'éditeur et nous
allons commencer avec ça dans la prochaine vidéo, alors rejoignez-moi là-bas.
15. Appliquer des filtres Programmatically: Maintenant, nous arrivons à entrer dans le truc amusant de faire notre éditeur. Nous allons configurer les choses pour appliquer un filtre sur le clic d'une de nos icônes. Ce que j'ai fait ici dans ce Code Pen, et si vous suivez à la maison, vous pouvez juste fourcher ça et aller jouer avec. J' ai mis nos deux pièces ensemble dans le même stylo. Nous avons notre barre de menu, et j'ai notre scène ici. Notre scène a la photo. J' utilise l'approche des symboles parce que nous allons plus loin, nous allons vouloir le faire pour nous donner la flexibilité d'avoir de plus en plus de versions pour obtenir cet effet de superposition que nous avons fait dans la dernière vidéo. Mais oui, j'ai notre barre de menu, le
mets et c'est juste tiré. J' ai notre scène ici. Pour mes besoins dans la vidéo, ce que je vais faire est d'appliquer ce petit filtre de décalage rouge à l'image. Donc j'ai mis ce filtre en place et en pensant à ce qu'Icône représenterait ça, eh bien, il semble que ce genre de chose que vous pourriez faire sur Instagram. J' ai donc mis une icône Instagram et je vais l'utiliser. En regardant comment nous allons appliquer ces choses, si nous voulons le faire avec JavaScript, nous devons faire est de donner une sorte de crochet pour expliquer quoi faire. Je vais utiliser une pratique d'utiliser un attribut de données pour communiquer avec le JavaScript. C' est quelque chose qui généralement pour un JavaScript générique. Lorsque vous n'utilisez pas de frameworks fantaisie comme Reactor, des choses comme
ça, c'est une politique que je recommande que nous utilisons des classes pour communiquer, styliser. Nous utilisons des données, des attributs et des ID pour travailler avec le JavaScript afin que vous gardiez une belle séparation des préoccupations là. Je vais ajouter un point de filtre de données à Redshift, qui est juste l'ID de notre filtre Redshift ici. Puis sur le côté JavaScript. Pour que ça marche, je vais faire une chose. La première chose que je vais faire, c'est le même code que nous avions pour notre truc de couleur d'état. On l'a fait dans une vidéo à quelques reprises. Mais je vais ajouter une couche de plus à cela. D' abord, je vais capturer quand je bascule ceci, est-ce actif ou non ? Ainsi, le bascule sans classe retournera true ou false selon qu'il a ajouté la classe ou l'a supprimée. Ensuite, je vais appeler une fonction d'impact à bascule. Nous allons nous appuyer sur cela au fur et à mesure que nous allons de l'avant et continuons. Mais c'est là qu'il sera nécessaire d'appliquer cet effet. En descendant pour basculer l'effet, ce que je vais faire, c'est que je vais attraper l'élément. Il faut deux paramètres, l'élément lui-même et si vous l'appliquez est actif ou non, puisque nous avons cela à partir d'ici. On va basculer en effet. Je vais construire essentiellement un ensemble de vérifications ici, que nous pourrions alors potentiellement appeler dans des fonctions séparées. Mais pour cela, nous allons juste en faire un où je dis, Ok, quel est l'attribut de données que nous avons ? C'est un filtre ? Ou peut-être que ce sera un masque ou peut-être qu'il nous dira,
« Hé, nous voulions, c'est en fait un téléchargement ou un téléchargement ou qu'est-ce que vous avez ? » C' est ce qui déclenche notre comportement. Ce que nous allons faire alors, c'est si c'est un filtre, alors nous allons à l'une des deux choses. En fait, nous allons appliquer le filtre à la photo, ou nous allons le supprimer comme si elle n'était pas là. C' est vraiment aussi simple que ça, vous savez, comme vous l'avez appris dans les précédents pour appliquer ces filtres, tout ce que nous faisons est de définir un attribut de filtre sur cette photo elle-même. Quand je clique sur mon Instagram, soudainement mes filtres s'appliquent. Si je clique dessus, c'est vraiment ce qui va nous donner la possibilité d'appliquer ces différents filtres. Je vous encourage à aller fort avec ça et à jouer avec. Ne vous arrêtez pas simplement avec ce filtre Redshift, mais essayez de l'étendre. Ajoutez quelques filtres supplémentaires. Si vous aimez vraiment le filtre de flou ou quelque chose comme ça, ajoutez une autre icône et configurez un filtre de flou, faites-le fonctionner. Ensuite, bientôt, nous allons regarder réellement ajouter masques pro-grammaticalement et être capable de faire du glisser-déposer et des trucs amusants comme ça. Alors rejoignez-moi dans la prochaine vidéo pour en parler.
16. Événements et coordonnées de la souris dans JavaScript: D' accord. Avant de plonger pleinement dans la création de masques par programme, détonnons légèrement pour voir comment nous faisons des choses qui interagissent avec les événements de souris. Parce que ce que nous allons vouloir faire avec un masque interactif est de pouvoir cliquer et faire glisser une partie de l'image et créer un calque de masque. Mais pour ce faire, nous devons comprendre comment le clic et le glisser fonctionne. Ce que j'ai mis en place ici, c'est notre étape de base, comme nous l'avons fait en général. J' ai ajouté un petit pointeur de cercle que nous pouvons utiliser pour suivre notre souris et donc nous comprenons. Ensuite, ce que nous allons faire est de regarder comment fonctionnent les événements de souris et ce que nous voulons faire. Si nous regardons le JavaScript, il y a trois événements différents qui sont importants si vous créez un clic et glisser. Il y a la souris vers le bas, déplacer la souris et la souris vers le haut. Ceux-ci décomposent les trois différents morceaux de ce que vous pourriez autrement appeler un clic, la
souris vers le bas est lorsque vous cliquez d'abord vers le bas, le déplacement de
la souris se produit chaque fois que vous déplacez la souris. Donc mousemove se passe réellement si je n'ai pas cliqué du tout, mais je bouge ça et mouseup est à chaque fois que vous cliquez dessus. Si vous voulez faire un gestionnaire de glissement, quelque chose qui se produit lorsque vous cliquez et faites glisser, vous devez implémenter un écouteur pour le bas, activer votre écouteur de déplacement seulement après que vous le faites vers le bas, puis le désactiver à nouveau lorsque vous faites mouseup. C' est la base de ce que nous avons ici, nous mettons un auditeur mousedown sur scène. Si l'auditeur se déclenche, nous faisons quelques informations dont nous parlerons dans une seconde, mais nous ajoutons ces auditeurs supplémentaires pour que nous
regardions nos drags et que nous regardions notre mouseup. Nous ajoutons effectivement ces écouteurs sur l'ensemble du document et pas seulement sur la scène parce que sinon vous pouvez obtenir dans un état bizarre lorsque vous ajoutez ces écouteurs, les mettre sur l'ensemble du document. Pour jeter un oeil à ce qui est disponible pour nous dans l'événement, nous allons réellement fourcher ce vrai rapide et mettre un débogueur là dedans. Je vais juste déposer un débogueur dans ma souris sur le bas. Ouvrons cela en mode de débogage pour qu'il soit facile de le faire. Quand je fais mousedown sur la scène, je devrais obtenir un débogueur, ici si je clique sur le côté, juste ne fait rien. Mais si je clique ici, je reçois la souris et je peux voir quel est cet événement et quelles données il s'agit. Déconnectons-le dans la console. Notre événement a toute une série de données différentes, y compris les données de position. Il y a ce ClientX, ClientY, LayerX, Layery, offset X, OffSety, PageX, PageY. Qu' est-ce que toutes ces choses et qu'allons-nous en faire ? Ils signifient tous des choses légèrement différentes. Le client est décalé dans votre fenêtre d'affichage. La page est décalée par rapport à la page entière. Ce sont les deux que j'utilise la plupart du temps, je ne fais pas autant d'attention au reste d'entre eux. Mais nous pouvons utiliser ces dimensions pour savoir où se trouve la souris et utiliser cela dans ce cas, déplacer notre petit point rouge. Dans la vidéo suivante, créez un masque lorsque nous le faisons. En revenant dans notre code, ce que nous voulons faire est que nous voulons capturer où nous
sommes et l'utiliser comme nous le déplacons pour mettre à jour notre pointeur. Maintenant, si vous regardez le code de capture que j'ai ici, il y a autre chose qui se passe. Je ne fais pas seulement un PageX, mais j'applique un décalage. Pourquoi c'est ça ? C' est parce que je veux savoir où je suis dans le SVG, pas seulement où je suis dans la page. Si je n'ai pas ce décalage, alors débarrassons-nous du décalage très rapidement et jetez
un oeil à ce qui fonctionne avec notre petit point rouge. Si je ne l'ai pas, mon point n'apparaît nulle part, ce n'est pas du tout évident où il est ou devrait être. C' est parce que les choses que nous manipulons sont à l'intérieur du SVG et qu'elles sont donc décalées par rapport à l'endroit où le SVG commence. Mais ce sont des événements, les données sont globales, elles sont basées sur la page. Ce que nous faisons, c'est que nous captuons le décalage pour la scène, puis nous appliquons ce décalage chaque fois que nous changeons de position. On va dire où suis-je dans la page ? Soustraire de cela mon décalage. Si nous remettons ça et que vous pouvez voir que lorsque je clique et fais glisser chaque fois qu'il le capture, ça change ce qu'
il pense qu'il devrait être, puis met à jour ces Cx et Cy. Cela va nous permettre de créer des masques programmatiques où nous pouvons cliquer et faire glisser pour sélectionner des parties de notre image et mettre un masque sur cela. Une dernière chose à noter, donc j'ai mentionné ClientX et ClientY, PageX et PageY. Si nous changeons rapidement nos PageX et PageY en ClientX et ClientY, regardons quelle est la différence. Si je devais faire ça et courir, on dirait que ça fait la même chose. Cela fonctionne aussi bien jusqu'à ce que je fasse défiler et vous pouvez voir qu'il y a effectivement un décalage par rapport à l'endroit où je suis parce que le clientX est relatif à cette fenêtre, pas à la page entière. Mais notre décalage de la SVG que nous calculons par rapport à la page. Je l'ai seulement mentionné parce qu'il y a des moments où vous allez vouloir
positionner quelque chose non par rapport à la page, mais par rapport au client ici. Si vous positionnez quelque chose qui ne fait pas partie de votre SVG, mais qu'il est au-dessus du dessus, des choses comme ça vous voudrez peut-être comprendre cette distance. est ainsi que nous pouvons utiliser les événements de souris pour manipuler quelque chose. Vous retirez les dimensions ou la position de l'événement et vous l'utilisez pour modifier certains attributs de l'élément. Dans notre prochaine vidéo, nous allons plonger dans l'utilisation de ce pour créer un masque personnalisé. Alors rejoignez-moi là-bas.
17. Créer un masque avec le clic: D' accord. Maintenant, nous allons utiliser ce que nous avons appris dans notre dernière vidéo sur les événements de la souris pour créer un masque de clic et de glissement, afin que nous puissions masquer n'importe quelle partie de notre image. Ce qu'on a ici, on a notre scène. J' ai mis en place un masque, j'ai mis en place un filtre, j'ai mis en place la même configuration que celle que nous devions montrer combinant filtres et masques. Mais maintenant, nous allons rendre ce masque capable d'être un espace personnalisé. Ce que ça va finir par ressembler, c'est je vais cliquer quelque part et dessiner et ce sera mon masque pour que je puisse déplacer mon masque, le mettre où je veux. La façon dont nous allons le faire est de capturer ces mêmes événements de souris. Mais maintenant on va faire des trucs amusants avec ça. Au lieu de simplement déplacer un petit point rouge, nous allons mettre à jour notre masque. Pour ce faire, nous voulons que l'objet masque soit saisi. On va attraper le masque de chaton. Je fais référence à son premier enfant parce la chose que je vais changer n'est pas l'objet masque lui-même, mais le rectangle à l'intérieur. Donc je vais attraper ce masque, je vais faire la même chose que nous avons fait pour mettre en place décalage et la scène et des choses comme ça pour que nous sachions où sont nos points, et maintenant dans nos gestionnaires, nous devons garder une trace des deux où nous commençons, où était ce clic initial, sorte que nous ayons ce coin de départ et où la souris finit. Donc, un cash sont à la fois un début et un courant quand on masque vers le bas. Au fur et à mesure que nous faisons glisser, nous mettons à jour les choses, puis mettons à jour le masque au fur et à mesure que nous allons, puis la souris distribue les gestionnaires à nouveau. Mise à jour du masque. Ce qu'on fait, c'est qu'on crée un nouveau rectangle. Nous définissons un nouveau x, un nouveau y, et une nouvelle largeur et une nouvelle hauteur. Pour ce faire, nous devons être conscients des dimensions et de la façon dont cela fonctionne afin que notre x, y soit toujours notre coin supérieur gauche et la
largeur et la hauteur, ils seront à quel point la largeur. Si vous commencez à gauche et allez à droite, la première place que vous commencez sera le x, alors que si vous commencez à droite et allez à gauche, la seconde. Pour ce faire, nous utilisons ce math.min pour dire. D' accord ? Celui qui reste plus loin, utilisez-la ou celle qui est plus loin vers le haut, utilisez-la. C'est tout ce que c'est. Vous mettez cela en place et nous pouvons mettre à jour ce masque afin que vous puissiez voir comment, maintenant avec cette approche, créer des masques personnalisés où vous voulez et que vous créez des choses. Si vous vouliez aller plus loin et dire, « Hé, je veux appliquer plusieurs masques. » Donc, je veux effacer à la fois celui-là et celui-là. Vous pouvez créer un nouveau masque et créer un nouveau calque dans notre image lorsque vous allez. Mais je vais laisser ça comme un exercice pour toi. D'accord. On y est presque. Dans la vidéo suivante, nous allons parler de la façon dont nous obtenons une image personnalisée ici pour que nous puissions faire quelque chose, puis nous allons faire le téléchargement et ensuite nous aurons fini. Je suis excité, allons-y.
18. Télécharger une image personnalisée: Donc, afin de rendre cela utile, nous devons le faire afin que nous puissions réellement télécharger une photo personnalisée. Non pas que nous n'aimons pas nos chatons, mais si nous voulons un éditeur de photos, nous devons nous laisser mettre une photo. Ce que nous allons faire est d'abord, juste mettre une entrée de fichier. Regardons ce qu'est le code, j'ai mis une entrée de fichier et je ne veux pas connaître l'entrée de fichier par défaut, je veux quelque chose qui est stylé de la même façon que nos boutons sont. J' ai mis l'icône de téléchargement et j'utilise un truc pour créer des entrées stylisées, qui est que je cache cette entrée avec CSS et mets cette image et mettre le téléchargement à l'affichage, mais je l'enroule dans une étiquette. En cliquant dessus, agira comme s'il avait cliqué sur l'entrée. Si je clique, voici mon entrée de fichier. Ensuite, je veux utiliser JavaScripts pour saisir n'importe quelle image que j'
y télécharge et la mettre dans mon image source ici. Il y a quelques choses qui rendent cela possible. Lorsque nous obtenons ce fichier, nous l'obtiendrons en fait comme un objet de fichier que nous pouvons soit convertir en ce qu'on appelle un blob, qui est opaque pour nous. Nous ne pouvons rien faire avec, mais c'est dans la page que nous pouvons faire ou nous pouvons réellement le rendre comme un objet de base 64, qui est une grande chaîne d'octets qui est traduit dans le binaire de cette image. La bonne chose à ce sujet, c'est que si nous téléchargeons
cela, ce n'est pas spécifique à cette page, nous pouvons l'utiliser où nous le voulons. Nous allons utiliser cette approche. La façon dont nous le faisons, nous saisissons l'entrée du fichier, ajoutons un écouteur d'événement dessus afin
que chaque fois que l'entrée change, nous allons exécuter cette fonction. A l'intérieur, on prend les dossiers. Cette fonctionnalité ici en utilisant un FileReader et ReadAsDataURL, c'est
ce qui va nous laisser mettre cette chose comme un blob ou désolé, comme une chaîne binaire que nous pouvons ensuite télécharger. Nous mettons ça, exécutons le fichier là, puis quand il est en téléchargement, nous définissons l'attribut de notre image ici pour avoir une source de cette image. Si nous regardons ce que c'est, je télécharge cette photo et soudainement c'est là-dedans. Si je regarde la source ici, nous pouvons voir que c'est, oups, revenons à l'image, juste en ligne en remplaçant notre référence externe et cela fonctionne comme vous vous attendiez. Maintenant, nous pouvons appliquer nos filtres à cela. Nous pouvons filtrer cela de la même façon que nous avons fait notre photo de chaton, nous pouvons mettre n'importe quelle image que nous voulons ici. Cela nous donne la possibilité de créer un éditeur de photos à usage général où nous mettons une photo. Prochaine vidéo, nous allons voir comment on peut ensuite tirer ça vers le bas pour pouvoir le réutiliser ailleurs. On se voit là-bas.
19. Enregistrement de votre SVG: Bienvenue de retour. Regardons la dernière chose dont nous avons besoin pour faire un éditeur de photos incroyable. Nous avons déjà notre code qui est configuré pour télécharger de nouvelles images, appliquer des filtres, faire toutes sortes de choses amusantes. Nous avons besoin d'un moyen de retirer l'image une fois que nous avons fini. Nous allons implémenter une fonction de téléchargement et ensuite nous aurons tout ce dont nous avons besoin pour faire de cet éditeur de photos génial. Ce que nous allons faire du point de vue du balisage, la seule chose que nous allons changer est que nous allons ajouter un ID sur l'icône de téléchargement afin que nous puissions capturer les clics et faire quelque chose avec. Tout le reste ici est le même que nous avons construit. Nous avons toujours le filtre Redshift. Nous avons toujours la possibilité de télécharger nos propres photos, des choses comme ça, mais nous allons mettre quelques fonctionnalités sur ce téléchargement. Nous mettons un ID, et plus dans notre JavaScript, nous allons saisir ce bouton et ajouter un gestionnaire de clic. Ce gestionnaire de clics va télécharger le SVG. C' est tout simplement tout ce qu'il a à faire est de saisir notre code SVG que nous avons créé et que nous avons modifié en utilisant ces boutons de filtre et des choses comme ça. Prenez le contenu de ça. Nous saisissons notre SVG, saisissons le HTML externe, ce qui signifie essentiellement saisir le symbole SVG, tout le reste, puis mettre cela dans un fichier. Dans ce cas, nous allons le faire, créer un lien qui a cette information comme attribut de données. C' est un moyen de créer un fichier à la volée. Définissez l'attribut à télécharger, sorte que votre navigateur le télécharge, puis cliquez sur. C' est tout ce qui va arriver. Lorsque je clique dessus, il va télécharger une image. Il y a une mise en garde, quelque chose à mettre là. Nous devions un peu bâclée dans nos SVG. Nous venons d'avoir les informations de version de la boîte de vue SVG. Pour que cela soit rendu correctement dans un navigateur après l'avoir téléchargé, nous devons le lier à xlink et SVG afin que si cela indique essentiellement au navigateur, s'il regarde cet automne seul, traitez cela comme une image. On avait aussi une pièce d'identité pour pouvoir l'attraper ici. Mais ce que nous pouvons faire maintenant est de dire que je télécharge une photo personnalisée, je vais télécharger mon aigle. Voilà mon aigle. J' applique Redshift filtre, à la recherche super rétro. Maintenant, lorsque je le télécharge, je reçois un fichier qui a enregistré toutes mes modifications afin de pouvoir les utiliser où je veux. Avec cela, vous avez tout ce dont vous avez besoin pour construire un éditeur de fichiers impressionnant et
votre défi, votre projet de cours est d'aller et de l'aller plus loin. Nous avons regardé les filtres, nous avons regardé la masse, construire votre éditeur pour les combiner. Regardez quelques-unes des autres choses SVG qui sont là pour vous, certains des autres filtres disponibles, certains des autres outils, peut-être que vous pouvez faire un peu de redimensionnement, faire d'autres choses amusantes. Je suis excité de voir ce que vous venez avec, et nous avons encore une vidéo où nous parlons un peu des possibilités d'où vous pouvez prendre cela, mais vous avez fait beaucoup de chemin et maintenant vous êtes prêt à terminer vos projets de cours. J' ai hâte de les voir.
20. Étape finale: Alors que nous terminons ce cours, je veux vous laisser une idée des possibilités qui s'offrent à vous avec les SVG. Nous avons regardé un peu ce qui est possible. Nous avons examiné la structure du code SVG. Nous avons appris à le manipuler avec CSS et nous avons commencé à
jouer avec certaines des technologies de filtrage avancées qui y sont disponibles. SVG. Cependant, c'est un langage entier qu'il dit riche d'un langage pour créer des images comme HTML est pour créer des documents. Il y a tellement plus que ce que nous pouvons couvrir dans ce cours. Il est ouvert à vous à peine personne ne profite de la puissance offerte par SVG. Mais si vous regardez autour de vous et que vous pouvez voir des gens créer images animées interactives
incroyablement complexes, vous pouvez voir les gens tenir des jeux en créant SVG avec des frameworks JavaScript avancés comme React. Les possibilités sont infinies et c'est ouvert à vous. Ne prenons pas ce cours comme un produit fini, mais plutôt comme quelque chose qui vous inspire à creuser plus. Allez simplement dans Code Pen et commencez à chercher des exemples d'animation SVG, regardez autour des jeux SVG. Il y a tellement de possibilités. Si vous voulez en savoir plus sur moi et ce que je fais et d'autres choses que j'enseigne. Vous pouvez me trouver sur mon site, Zendev.com z-e-n-d-e-v.com. J' espère vous voir plus à l'avenir. Très bien, c'est la connexion par câble.