SVGs als Code: Interaktive Symbole und einfache Bildbearbeitung

1. Eintauche: Hallo da, Cable hier und willkommen zu diesem Kurs auf SVGs als Code. Mit dem Aufstieg des Responsive Web SVGs sehr populär geworden. Aus gutem Grund sind es Vektorbilder, was bedeutet, dass dies mit der Bildschirmgröße perfekt nach oben oder unten kommt. Es gibt jedoch einen noch wichtigeren Grund, warum SVGs so mächtig sind. SVGs sind Code genau wie HTML. Das bedeutet, dass wir sie mit den gleichen Werkzeugen mit CSS und mit JavaScript manipulieren können. In diesem Kurs werden wir eintauchen, was das bedeutet. Wir werden einen Blick auf SVGs werfen. Was ist das für ein Code? Wie sieht es aus? Wir werden anfangen zu spielen, wie wir CSS anwenden, um sie ein wenig interaktiv zu machen, Farbe basierend auf Hover zu ändern oder eine CSS-Klasse anzuwenden. Dann werden wir in einige der fortgeschritteneren Funktionen von SVGs eintauchen, wie wir Filter verwenden können, um Bilder zu setzen und dann ihre Färbung zu ändern, Unschärfe hinzuzufügen, Teile zu maskieren, die wir nicht wollen, alles lustige Sachen. Wir verwenden JavaScript, um dies interaktiv zu machen, so dass Sie am Ende des Kurses einen Bildbearbeitungsprogramm erstellen, genau wie Sie es in Instagram oder Snapchat finden könnten, wo Sie ein Foto einfügen, es benutzerdefinierte Filter anwenden können , und laden Sie dieses Bild herunter, um es dort zu verwenden, wo immer Sie möchten. Ich hoffe, du bist genauso aufgeregt wie ich. Begleiten Sie mich im nächsten Video. 2. SVG als Code: Lassen Sie uns in das eintauchen, was ein SVG ausmacht. Um dies zu erleichtern, habe ich ein wenig einfaches SVG erstellt. Ich habe gerade dieses kleine Gesicht mit Sketch zusammengestellt. Sie können sehen, dass ich kein großer Künstler bin, aber das verwendet eine Reihe verschiedener Elemente innerhalb von SVG, die uns untersuchen lassen, was diese Dinge sind und wie sie uns zur Verfügung stehen. Wenn Sie entlang zu Hause folgen, klicken Sie durch zum Stift, klicken Sie einfach auf Fork, Sie können mit ihm selbst basteln, und Sie können sehen, was wir sofort bekommen ist ein Blick in. Hier ist unser Bild, und hier ist der Code, der dieses Bild erzeugt. Lasst uns in das eintauchen, was diese Stücke sind. Sie können sehen, dass es ziemlich ähnlich wie HTML strukturiert ist. Sie haben ein äußeres Element, das anstelle von HTML SVG zu sagen, können wir diese XML-Version ignorieren. In der Tat spielt das für diesen Zweck keine Rolle. Das gibt nur eine High-Level-Notiz, wie dies strukturiert ist. Das SVG-Element hat ein paar Dinge, die sich von HTML unterscheiden, Sie sehen, dass es eine Breite und eine Höhe und ein Ansichtsfeld hat, wobei Teile des Bildes sichtbar sind, sich innerhalb des Bildes befinden, das angezeigt wird. Sie können tatsächlich SVGs haben, die innerhalb des Ansichtsfelds vom Bildschirm und auf dem Bildschirm ausgehen. Es gibt einige Meta-Informationen, einen Titel, das ist unser einfaches Gesicht, einige Tiefen, die gerade nicht verwendet wurden, und dann kommen wir in die eigentlichen Elemente. Dies sind genau wie ein HTML, Ihre divs oder Spannen, Ihre Absatz-Tags, außer hier sind sie grafische Elemente. Wir haben g, das ist ein Gruppen-Tag. Diese Gruppe ist unser ganzes Gesicht, das einfache Gesicht. Wir können sehen, dass es einen Kreis, einige Ellipsen, ein Pfadpolygon, einige weitere Ellipsen, einige weitere Pfade, einige weitere Ellipsen gibt. Kreise und Ellipsen sind ziemlich unkompliziert. Das erste ist unser Gesicht. Sie können sehen, dass es ein paar verschiedene Werte mit darüber gibt, die wir ändern können. Wir könnten die Strichfarbe ändern. Wenn wir die Linie, die der äußere Teil des Kreises ist, von schwarz zu ändern wollten, sagen wir ein Grau, wir können das tun und wir können sehen, dass es hier unten von schwarz zu grau ändert. Wir haben die Strichbreite, die die Breite der Linie auf der Außenseite ist. Wenn wir das zum Beispiel bis zu fünf ändern, können wir sehen, dass es viel größer und dicker wird. Ändern Sie es zurück zu zwei, und wir haben die Füllung, die ist, was intern ist. Jetzt sind diese Strich, Strichbreite gefüllt, diese sind für die meisten unserer Elemente verfügbar. Sie können sehen, dass es auch einige Positionierungselemente gibt. Wir haben cx, cy, das ist, wo dies innerhalb der positioniert sind für das Zentrum abgeschirmt. Dies ist die Mitte x, die Mitte y gegeben r, die einen Radius hat. Wenn wir das auf 17 fallen lassen, können wir sehen, dass der Kreis viel kleiner wurde. Wir können sehen, dass diese für jede dieser verschiedenen Arten von Elementen, Ellipse, Kreise, etc. weitgehend widerhallt werden. Pfade, Sie werden sehen, dass es diese andere funky Sache, d gleich und dann eine Reihe von dem, was im Wesentlichen aussieht Zahlen und einige funky Buchstaben beigefügt. Wir werden jetzt nicht tief in dieses Format eintauchen, aber das beschreibt eine willkürliche Route durch den Weltraum. Die Art und Weise, wie ich dies erstellt habe und wie die meisten Menschen Anzeigen wie diese erstellen oder Dinge in SVG erstellen, die willkürlich sind, ist, dass sie ein grafisches Tool verwenden. Ich habe Skizze benutzt. Ich habe das gerade mit dem Skizzenvektorwerkzeug zusammengesetzt. Ich habe diese Pfade nicht für mich exportiert. Jetzt, wo sie hier sind, kann ich sie optimieren und manipulieren. Aber ich glaube nicht, dass jemand Pfade für seine Vektoren handschreibt , es sei denn, sie tun dies seit sehr langer Zeit, sie verwenden normalerweise ein Werkzeug, um es zu tun. Sie können diese in Scatchard schreiben, Illustrator, um etwas zu beginnen, und dann exportieren und Sie werden diese Pads sofort heraus bekommen. In unserer nächsten Lektion werden wir einen Blick darauf werfen, wie wir diese systematischer manipulieren können und wie wir anfangen können, CSS zu verwenden , um damit zu basteln und zu spielen. Ich seh dich dort. 3. Strich und Füllung mit CSS: In diesem Video werden wir die gleiche SVG betrachten, die wir im letzten Video verwendet haben, und jetzt Styling es nicht nur inline mit der Änderung unseres Strichs oder unserer Füllung Inline, sondern mit CSS. Dies, wie Sie sehen können, ist das gleiche SVG, das gleiche einfache Gesicht, das wir erstellt haben, aber ich habe ein wenig hinzugefügt, ich habe Klassennamen hinzugefügt. Ich habe eine Gesichtsklasse für dieses äußere Oval hinzugefügt. Ich habe meine Augen, meine Nase usw. beschriftet Wenn Sie zu Hause folgen, klicken Sie durch den Stift, drücken Sie Fork, und wir können anfangen, mit diesem mit CSS herumzubasteln. Lassen Sie mich die CSS-Registerkarte hier öffnen. Jetzt verwende ich den Sass-Präprozessor, mit dem ich hier Variablen verwenden kann, benannte Variablen. Das ist nur so, dass ich das etwas semantischer machen kann. Jetzt können Sie sehen, dass ich diese Klassen genommen habe und ich angefangen habe, sie anzusprechen und diese Eigenschaften einzufügen. Das bedeutet zwei Dinge. Erstens, es bedeutet, dass ich die Eigenschaften in der ursprünglichen SVG löschen kann. Wenn ich das Gesicht nehme, könnte ich sagen: „Ich habe keine Standardwerte.“ Das ist ziemlich gut und es blieb hier gleich, aber wenn ich diese loswerden würde, würde es zu schwarz werden, was der Standard ist, wenn es nicht definiert ist. Ich möchte diese Standardwerte tatsächlich beibehalten, aber was ich stattdessen tun werde , ist, sie mit CSS zu überschreiben. Nehmen wir an, zum Beispiel, ich habe meine Augenfarbe, die gerade jetzt so blau ist und ich möchte meine Augenfarbe schwarz machen. Ich werde ganz in die Augen gehen. Wir können sehen, dass das Auge gerade jetzt nur eine Fülle von Augenfarbe verwendet. Ich werde hier die Augenfarbe ändern und es einfach zu schwarz bringen. Das überschreibt meine Standardwerte und du kannst mit meinen Augen hier unten sehen, einfach total schwarz werden. Sie können dies auf verschiedene Arten tun. Was dies eröffnet, ist die Fähigkeit, CSS auf alle Arten zu verwenden, die Sie nicht HTML, um Interaktionen und alle möglichen anderen Dinge zu erstellen. Sagen Sie, mein Gesicht ist gerade dieses schöne , gesunde Braun, aber ich habe wirklich Angst, wenn Sie über mich schweben, also werde ich einen Hover-Effekt hinzufügen, indem Sie einfach etwas CSS hinzufügen, ein Pseudoziel für Hover. Ich werde meine Füllung in ein pastöses Weiß wechseln, wenn du auf mir schwebst. Wir machen das, wir kommen rüber und plötzlich bin ich immer ein pastöses Weiß, wenn ich schwebe. Dies ermöglicht es uns, alle möglichen lustigen Interaktionen zu machen und in einem zukünftigen Video werden wir darüber sprechen, wie Sie dies tun können, um interaktive Effekte auf all Ihre Symbole zu erstellen. Sie können eine interaktive Menüleiste mit SVGs erstellen. Es gibt einen Vorbehalt, der damit zu tun hat wie Ihr SVG in die Seite aufgenommen werden muss, damit CSS darauf abzielt, und wir werden das im nächsten Video ansprechen. Ich seh dich dort. 4. SVG „Verwendung“ und der 'Use': In diesem Video werden wir über verschiedene Möglichkeiten sprechen, wie Sie SVGs in Ihre Seite aufnehmen können. Die, die Ihnen wahrscheinlich am meisten begegnet ist, ist diese. Sie können eine SVG als Quelle zum Bild ablegen. Obwohl sie Code sind, sind SVGs auch nur Bilder und sie spielen gut mit Bild-Tags. Eine andere Möglichkeit, dies zu tun, ist mit dem Objekt-Tag. Dies ist eine ältere Möglichkeit, externe Inhalte zu referenzieren , die für Flash-Player und solche Dinge verwendet werden. Es erkennt SVGs, aber dies wird im Allgemeinen nicht empfohlen. Sie können auch eine SVG verwenden, die auf eine andere verweist. Sie können ein Bild als Symbol und nur ein wiederverwendbares Beispiel definieren und es dann in SVG referenzieren. In diesem Fall verweise ich auf dieses Symbol, das ich hier in einem leeren SVG definiert habe, ein SVG, das überhaupt nicht auf der Seite angezeigt wird, sondern nur mein Symbol definiert. Ich kann es in referenzieren. Sie können auf dritte externe Bilder verweisen, Dinge, die sich nicht auf derselben Seite befinden, aber sie müssen sich auf derselben Domain befinden. Dann ist der letzte Weg, wie Sie eine SVG in Ihre Seite einfügen können, mit Inline-Code. Das ist genau das gleiche SVG, mit dem wir die ganze Zeit gespielt haben. Wenn Sie diese verschiedenen Mechanismen verwenden, haben Sie unterschiedliche Einschränkungen. Sie als Quellen für Bilder zu speichern ist großartig aber Sie können diese SVGs nicht mit CSS manipulieren. In der Tat werden Sie sehen, wenn Sie hier unten auf meine Gesichter schauen, zwei von ihnen haben etwas anderes. Ich habe unser CSS genommen und die Füllung für die Nase geändert, also habe ich es in weiß geändert. Aber das wirkte nur auf zwei unserer Versionen aus. Es beeinflusste die SVG, die das Symbol verwendet, und die SVG, die völlig inline ist. Wenn Sie Bildquellen- oder Objektreferenzierungsdaten verwenden, können Sie diese SVGs nicht mit CSS berühren. Wenn Sie dies verwenden, endet die Verwendung mit etwas wie dem Schatten-DOM, das einige subtile Einschränkungen für das, auf das Sie zugreifen können, setzt. Wir werden zu viel in diese eintauchen, weil wir uns auf diese letzte Version konzentrieren, die Inline-SVG. Dies ist der leistungsfähigste Weg, SVGs zu verwenden. Du steckst deinen ganzen Code ein. Das Problem dabei ist, was passiert, wenn Sie Ihre SVGs von einer Drittanbieter-Quelle erhalten? Sie haben sie als Bilddateien bekommen, Sie wollen nur mit ihnen als Bilder umgehen. Dafür werden wir etwas tun, das Inlining genannt wird. Wir werden ein Tool verwenden, das diese Bilder einzieht und auf Ihre Seite ablegt. Wir werden das Inlining im nächsten Video abdecken. Wir sehen uns dort. 5. SVG integrieren: Willkommen zurück und lassen Sie uns über SVG-Injektion sprechen. SVG-Injektion verwendet einfach JavaScript, um Bilder zu betrachten, die eine SVG-Quelle haben, diese Quelle herausziehen und sie direkt in die Seite abgeben, die inline SVG ist. Sie könnten das natürlich manuell tun, aber nicht nur ist, dass ein großer Schmerz im Hintern, aber Sie können auch nicht die Vorteile der Browser-Caching für Bilder zu nutzen. Jedoch, diese Bibliothek, die eine Gruppe namens Iconic Release namens SVG Injector, ermöglicht es uns, es automatisch mit JavaScript zu tun und immer noch Browser-Caching nutzen. Was uns das ermöglicht, ist, alle unsere Bild-Tags zu nehmen, die SVGs referenzieren, automatisch zu gehen und diese SVG-Quelle herausziehen und sie an Ort und Stelle ablegen. Schauen wir uns an, wie das aussieht. Hier habe ich mein Standardgesicht, das wir bis zu diesem Punkt verwendet haben und es wird als Bild-Tag referenziert, aber ich werde etwas mehr damit machen. Ich habe eine Klasse hinzugefügt, damit ich sie in JavaScript referenzieren kann, und ich habe den SVG-Injektor JavaScript hinzugefügt. Jetzt habe ich das nur auf CDNJS verwiesen, wodurch ich es in meine Seite ziehen kann. Sie können es hier tun. Sie können es mit einem NPM-Paket installieren, wenn Sie etwas lokal tun, wie Sie es tun möchten. Aber in CodePen ist das am einfachsten. Wenn ich meine Seite ausführe, habe ich dieses kleine bisschen JavaScript, das nach jedem Bild-Tag sucht , das eine injizierte Klasse hat, diese in den SVG-Injektor übergibt und plötzlich ist dies kein Bild mehr. Es ist eigentlich ein Inline-SVG. Wir können das sehen, indem wir es untersuchen. Es hat all das SVG direkt an Ort und Stelle gebracht. Es ist so einfach wie das. Das erlaubt uns, die ganze Magie von Inline-SVGs zu nutzen , während wir unseren Code immer noch schön und einfach mit einfachen Bildern halten. 6. Fontawesome 5 und svg-with-js: Mit unserem Gesicht zu spielen hat sehr viel Spaß gemacht, aber lassen Sie uns zu einigen professionelleren Anwendungen von SVGs übergehen. Der erste Ort, an dem wir anfangen werden, ist mit Symbolen. Nun, wenn Sie nicht vertraut sind, Font Awesome ist eine unglaubliche Symbolquelle mit Hunderten von professionellen Level-Symbolen kostenlos und noch mehr verfügbar, wenn Sie bereit sind, für eine kleine Lizenz zu bezahlen. In Font Awesome 5, der letzten Veröffentlichung, haben sie etwas getan, das wirklich cool ist. Was sie taten, ist, dass sie ihren Standardmechanismus für die Bereitstellung dieser Symbole freigegeben haben, indem sie SVGs mit JavaScript injiziert. Sie fügen nur eine einfache JavaScript-Datei hinzu, die alles verwaltet, Sie fügen Ihre Font Awesome Symbole mit nur ein paar Klassen auf einem ETag, und es wird sie automatisch als Inline-SVGs injizieren, die uns Zugriff auf alle Macht, die wir habe von Inline-SVGs gesprochen. Es ist super einfach, es zu tun. Wenn wir schnell hinschauen, habe ich einen grundlegenden CodePen eingerichtet. Ich habe gerade ein paar schnelle Versionen von Font Awesome Icons drin. Alles, was ich tun muss, ist einen Verweis auf ihr JavaScript hinzuzufügen, und plötzlich erscheinen diese Symbole und sie erscheinen als Inline-SVGs, mit denen wir lustige Dinge machen können. Also in unserem nächsten Video, werden wir beginnen, in die tatsächliche Verwendung dieses in tauchen , um eine Menüleiste für das, was schließlich unser Bild-Editor sein wird, zu erstellen. Aber das war's vorerst. Schriftart Awesome. Wenn du es noch nicht ausgecheckt hast, schau es dir an, du wirst weggeblasen. 7. Eine Menüleiste erstellen: Jetzt beginnen wir mit den ersten Schritten des Aufbaus, was unser Kursprojekt sein wird. In diesem Video werden wir anfangen, eine Menüleiste zu erstellen, mit der wir spielen können. Wenn Sie darauf folgen, Home, klicken Sie auf Fork, um einen neuen CodePen über den Link zu forken. Was ich hier angefangen habe, ist, einen sehr einfachen Raum für uns zusammenzustellen , um unseren Foto-Editor hier zu erstellen. Also habe ich ein Editor-Container-Div, ich habe Menüleiste, mit der wir Dinge machen werden, und ich habe begonnen, einige Symbole in die Menüleiste zu setzen. Wenn wir vorwärts gehen, werden wir mehr ausgefallene Dinge tun, aber wir verwenden Schriftart genial. Wenn Sie nicht mit der Art und Weise, wie Schriftart genial funktioniert, vertraut sind, können Sie FA und dann den FA-Strich tun, was auch immer der Klassenname ist. Es gibt manchmal alternative Versionen, also FAR, wenn ich ändere, was dieses R ist, wird nur FA Quadrat ein gefülltes Quadrat sein. Während, wenn ich das R mache, ist es nur eine Gliederung. Dann habe ich hier ein einfaches CSS eingefügt, also begrenze ich einfach die Größe des Editors mit der Breite, zentriere es und versetze es ein wenig. Setzen Sie die Menüleiste, geben Sie ihm einen schönen kleinen Rand, einige zeigen Flex an, so dass die Dinge ein Layout richtig auffüllen und Dinge auffüllen. Nun, eine Sache zu beachten ist, ich hier drin SVGs style, nicht Itags. In der Tat, wenn ich itags, die mit dem übereinstimmt, was ich auf der Quelle geschrieben habe, funktioniert es nicht. Das liegt daran, dass wir Schriftart genial hier aufgenommen haben und es diese Itags automatisch bei SVG transformiert. Etwas, das Sie beachten sollten, wenn Sie auf diese Weise Schriftart genial verwenden, ist, dass diese in SVGs umgewandelt werden. Wir können uns nicht darauf verlassen, dass sie auf die gleiche Weise bleiben. Also habe ich gerade mit drei verschiedenen Icons angefangen ich denke, du wirst in der Lage sein, unser Bild herunterzuladen, ein Bild zu machen, um etwas hinein zu setzen, ein Quadrat darauf zu zeichnen, vielleicht wollen wir einen Kreis machen oder so etwas wie das. Lasst uns hier einen Kreis setzen. Sie könnten alle möglichen Dinge tun, wenn Sie nur erkunden möchten, was all die verschiedenen Optionen für Sie zur Verfügung stehen, Schriftart genial Symbole. Sie gehen über zu font awesome.com, klicken Sie auf Symbole. Wir verwenden die kostenlosen Versionen, aber es gibt immer noch fast 1000 Symbole, die wir dort einfügen könnten. Gehen Sie in die Stadt, denken Sie darüber nach, was sind die verschiedenen Dinge, die Sie vielleicht möchten, dass Ihr Foto-Editor in der Lage sein, zu tun und einfach anfangen zu spielen mit dieser Schriftart genial. Wenn Sie aufgeregt sind, können Sie mit dem Styling der SVG beginnen, jeder von ihnen besteht aus einem Pfad, den Sie manipulieren können, der eine Füllung und Farbe hat. Wir werden im nächsten Video ein wenig mehr darauf eingehen. Holen Sie sich ein grundlegendes Menüleisten-Set, dies wird die Grundlage sein, auf der wir zukünftig aufbauen. 8. Unsere Menüleiste interaktiv machen: In diesem Video schauen wir uns die Menüleiste an, die wir gerade im letzten Video zusammengestellt haben, und beginnen interaktiv zu machen, indem wir CSS, Pseudo-Elemente oder Pseudo-Eigenschaften verwenden , so dass wir es interagieren können , basierend auf Hover oder Anwenden Klassen, die uns dann mit ihr interagieren lassen, mit JavaScript und ändern ihren Zustand. Was wir anfangen werden, ist mit der gleichen Menüleiste, die wir haben, außer ich habe eine Änderung vorgenommen. Ich habe jedes dieser Icons mit der kleinen Spannweite umwickelt , die es mir erlaubt, es einzudämmen und damit Sachen zu machen. Wir werden darauf eingehen, warum ich das mache, sobald wir zu JavaScript gekommen sind. Jetzt, wenn ich mir das CSS anschaue, habe ich gerade ein paar SAS-Variablen für uns eingerichtet , damit wir Farbe semantisch darstellen können, während wir damit herumspielen. Wenn wir diese SVGs manipulieren wollen, sollten wir ein wenig darüber wissen, wie sie aussehen. Wenn wir dies mit dem Inspektor überprüfen, können wir sehen, dass jedes dieser Symbole aus nur einem einzigen Pfad besteht, der diese Form zeichnet, was auch immer das Symbol ist, und es hat einen Füllwert der aktuellen Farbe. Jetzt ist die aktuelle Farbe eine spezielle CSS-Eigenschaft, die im Grunde sagt, was auch immer die Farbe für diesen Artikel ist, verwenden Sie das hier, so dass nicht oft Fälle Spaß macht. Es lässt es erben, was auch immer die Farbe des Behälters und des Schreibens ist , und in seinem Fall. Wenn wir nur eine Farbe auf die Menüleiste setzen, um unser Hellblau zu sein, wird diese Farbe tatsächlich vererbt. Wenn wir dies ohne den aktuellen Farbansatz tun wollten, müssten wir die Füllung tatsächlich einstellen. Wir müssten wissen, okay, dieses Ding hat einen Pfad und wir müssen die Füllung so manipulieren, dass sie hellblau ist. Das funktioniert genauso gut. Der aktuelle Farbtrick ist wirklich praktisch, wenn Sie diese innerhalb von Blöcken von Texten und solchen Dingen verwenden , weil er einfach aufnimmt, was die umgebende Farbe ist. Aber das ist uns nicht so sehr wichtig, denn was wir tun werden, ist, dies basierend auf dem Hover-Zustand zu ändern. Wenn wir ein wenig nach unten scrollen, habe ich hier einen Block zum Hover. Dies sagt, wenn Sie den Mauszeiger über die SVG bewegen, ändern Sie die Farbe des Rahmens und ändern Sie die Farbe. Wir können jetzt sehen, wenn wir schweben, diese Dinge wurden in hellblau, wenn wir sie schweben, und was das tut, ist es, dass sie sich interaktiv fühlen. Es gibt dem Benutzer einen Hinweis, hey, ich kann wahrscheinlich darauf klicken und es wird etwas tun. Lassen Sie uns das tatsächlich umsetzen. Wenn wir etwas basierend auf einem Klick tun wollten, müssen wir JavaScript verwenden, um auf diesen Klick zu achten und dann etwas anzuwenden. Jetzt ein Standard dafür, wie Sie eine Klasse anwenden, und dann haben Sie die Stylingänderungen, die Sie basierend auf dieser Klasse ändern möchten. diese Weise können Sie die Anzeige basierend auf dem Status verwalten. Jetzt kommen wir zu dem Grund, warum ich diese Wrapper um sie gelegt habe. Was ich mit dem JavaScript mache, um dies zu ist, dass ich ein festgelegtes Timeout um es herum mache und das ist nur sicherzustellen, dass, hey, wir haben diese Dinge bereits der Seite, die Font Awesome Zeit hatte, es zu analysieren und sein JavaScript zu verwenden . Dann finde ich alle Dokumentelemente, die Aktion genannt werden. Das ist, was diese Rapper genannt werden und jedes Mal, wenn es einen Klick auf sie gibt, werde ich einfach umschalten, ob es eine aktive Klasse hat oder nicht. Das ist eine Zustandsklasse, mit der ich das in meinem CSS suchen kann. Ich hätte das theoretisch auf allen SVGs direkt machen können, anstatt sie mit Spannweiten zu umhüllen. Aber das kommt zu einer schnellen bekommen, die ich für Sie markieren möchte, was ist, wenn Sie Font Awesome verwenden, es ist JavaScript tatsächlich alle diese SVG beobachtet. Wenn Sie sie manipulieren, wird es sie auf der Seite erneut rendern, nur um sicherzustellen, dass, wenn Sie zum Beispiel die Klasse ändern, sie immer noch das richtige Symbol hat, das sich mit anderen Dingen in unserem JavaScript verwirren kann. Wenn Sie die Zustände dieser manipulieren möchten, ohne sie zum erneuten Rendern zu zwingen, müssen Sie sie wahrscheinlich in eine Klasse oder in ein Element einschließen , wie ich es hier getan habe. Was werden wir tun? Jedes Mal, wenn ich darauf klicke, werden wir umschalten, ob dieser Container, diese Aktion eine aktive Klasse hat. Dann können wir CSS verwenden, um das visuell darzustellen. Jedes Mal, wenn das aktiv ist, wird es dunkelblau werden. Dasselbe gilt für jeden von diesen und da wir Toggle verwenden, können wir es tatsächlich aufheben. Das gibt uns einen visuellen Hinweis auf Verhalten. Sobald wir mit dem Hinzufügen weiterer Elemente zu einem Bildbearbeitungsprogramm beginnen, wird dies nicht nur ein visuelles Element hinzufügen, sondern es wird tatsächlich ändern, welches Verhalten wir passiert haben. Wir werden darauf eingehen und anfangen, in unserem nächsten Video darüber zu sprechen, wie wir Fotos in unsere SVGs integrieren . Ich seh dich dort. 9. Fotos in SVGs einbetten: Wir haben die ganze Zeit damit verbracht, über SVGs zu sprechen, die Vektorbilder sind, Bilder, die als Beschreibungen dessen definiert sind, was sie sind, die okay sagen, dies von Punkt a nach Punkt b, oder das ist ein Quadrat, Dinge wie diese. Aber es gibt eine ganze Menge Bilder im Internet, wie all diese wunderbaren Katzenfotos, die wir überall finden , die nicht in die Kategorie der Vektorbilder fallen. Sie sind so genannte Rasterbilder, was im Grunde bedeutet, dass sie eine Beschreibung von Farbpunkten sind. Das kommt aus deinen Kameras heraus. Dies ist alles, was ein PNG oder ein JPEG oder eines dieser Bildformate ist, und das sind wirklich wichtig. Es gibt viele wichtige Dinge in ihnen. Allerdings können wir diese direkt in SVGs integrieren und lustige Dinge mit ihnen machen. Wir werden anfangen, das mit einer Reihe von Bildbearbeitung zu tun, Unschärfen, tun alle möglichen coole Sachen in den nächsten paar Videos. Aber zunächst müssen wir nur wissen, wie wir sie hineinbringen. Ich habe ein Bild von einer Reihe von Kätzchen geschnappt, weil das Internet für Katzen ist. Ich habe das von einem Flickr-Benutzer bekommen. Wenn Sie es nicht wussten, können Sie zu Flickr gehen und nach Bildern fragen , die kreative gemeinsame Lizenzen haben, oder Lizenzen, in denen Sie diese öffentlich nutzen können. Ich kann dies öffentlich verwenden, solange ich unseren Flickr-Benutzer gutschreiben, oder Flickr-Benutzer Casey XD ist, und Sie können Bilder für Ihren eigenen Gebrauch auf diese Weise finden. Gehen Sie einfach zu Flickr und suchen Sie und sortieren Sie dann nach lizenziertem Typ. Was wir tun werden, ist, dass in eine SVG zu setzen , so dass wir anfangen können, es in Zukunft zu manipulieren. Was wir getan haben, ich habe was sein würde, wir würden unsere Menüleiste hier oben haben, wie wir zuvor hatten, aber ich habe das jetzt herausgenommen, damit wir uns nur auf das Bild konzentrieren und es in eine Bühne setzen können und dann habe ich meine SVG gerade jetzt nur als Wrapper um ein Bild-Tag. Ein Bild-Tag ist im Grunde ein Verweis auf jede andere Art von Bild. Sie können Ihr Rasterbild in eine SVG einbetten, indem Sie einfach ein Bild-Tag einfügen, den Link zu dem Speicherort des Bildes und eine Dimension angeben. Hier sagen wir, wir werden bei Null in der SVG beginnen , bei Null und Null, x und y. Es erlaubte uns, die Höhe zu vergrößern. Hier ist unser Bild, das direkt in unserem SVG lebt. Wenn wir es untersuchen, ist es da drin im SVG. In unserem nächsten Video werden wir anfangen zu reden, jetzt, wo wir es in unserem SVG haben, was können wir damit machen? Wir werden anfangen, Filter und Unschärfe zu betrachten. Begleiten Sie mich dort. 10. Dein erster SVG-Filter – Unschärfe: Jetzt bekommen wir in das Fleisch von dem, was unser Projekt sein wird, die eigentliche Bearbeitung von Fotos zu tauchen . Um dies zu tun, was wir tun werden, ist, dass wir ein Tool verwenden, das einen Filter von SVG genannt wird. Jetzt sind Filter im Wesentlichen Sätze von Bildtransformationen , die definiert sind und dann wiederverwendbar auf jede Art von Bild angewendet werden können. Sie können diese verwenden, um auf native SVG-Komponenten anzuwenden, also könnten Sie sagen, ich möchte diese SVG-Komponente nehmen und ich möchte sie verwischen, oder ich möchte die Farben ändern, oder ich möchte sie drehen, oder Dinge wie das, Sie könnten das tun mit einem Filter, oder Sie können es tun, um Bilder wie unsere Kätzchen Foto zu rastern. Filter können kombiniert werden. Es gibt alle Arten von Möglichkeiten, einen Filter zu erstellen, der eine Reihe von verschiedenen Primitiven hat , die es tut, aber wir werden mit den grundlegendsten Filtern beginnen. Wir fangen mit einer Unschärfe an. In diesem Fall verwenden wir eine Gaußsche Unschärfe, und die Art und Weise, wie dies in SVG aussieht, ist, Sie einen Filter mit einer ID definieren, dass Sie einen Filter mit einer ID definieren,das wird Ihnen die Möglichkeit geben, es auf Dinge anzuwenden und dann verwenden Sie eine Reihe von Filtern Primitive in ihm. Wir haben unseren Filter, den wir gerade Blur Me nennen werden und er enthält einen einzigen primitiven FegaussianBlur. Gaußisch bedeutet im Grunde, dass wir Dinge entlang einer Kurve verteilen werden, und Sie müssen definieren, was die Quelle für diese Unschärfe ist. In diesem Fall verwenden wir einen Schlüssel, der die Quellgrafik ist, die im Grunde sagt, was auch immer Sie diesen Filter anwenden, das ist, was ich möchte, dass Sie verwischen. Es gibt ein paar andere Schlüsselwörter, die Sie auf das Alpha anwenden können, das ist nur die Transparenz der Grafik, es gibt ein paar andere Dinge. Für alle unsere Bildbearbeitungszwecke, denke ich, dass wir die Quellgrafik verwenden wollen. Dann gibt es eine Standardabweichung, die darauf zutrifft, wie ausgebreitet diese Unschärfe ist. Wenn wir das Original nehmen und es über eine Welle verteilen, wie breit ist das oder wie eng ist das? Dann wenden Sie es auf ein Bild an. Wir fügen nur diese Filtereigenschaft hinzu, die auf den Filter verweist, den wir definiert haben. Um zu sehen, wir haben es auf unsere Katze angewendet, unsere Katze ist sehr verschwommen. Wenn wir diese Standardabweichung auf 0 setzen, ist es, als hätten wir überhaupt keine Unschärfe. Wir ändern es bis zu 1, es beginnt ein wenig unscharfer zu werden, 2, 3, und es wird immer unscharfer und verschwommener. Anwendung auf das gesamte Bild ist vielleicht nicht so aufregend, aber wenn wir runter kommen und wir anfangen, dies mit Masse zu kombinieren , können Sie Teile Ihres Bildes selektiv verwischen und den Fokus auf andere erhöhen. Dies wird ein super leistungsfähiges Werkzeug in unserem Toolkit sein und es ist einer der einfachsten Filter, mit denen man loslegen kann. In Ordnung. In unserem nächsten Video werden wir über einen anderen Filter sprechen, den wir verwenden können, um unsere Bilder zu transformieren und sie Retro- oder Farbtönung dort auf verschiedene Arten zu machen . Begleiten Sie mich dort. 11. Color: Willkommen zurück und zu unserem zweiten Video über Filter in SVG. In diesem Video werden wir uns eine andere Art von Filter ansehen. Wir werden versuchen, die Farben in unseren Bildern zu manipulieren. Sie können sehen, dass ich das gleiche Kätzchen Foto habe, aber es sieht ein wenig anders aus, es sieht aus wie ein Old-School-Foto. Es hat ein wenig Retro, es ist ein wenig rot gefärbt. Die Art und Weise, wie wir dies tun, ist die Verwendung eines anderen der Filterprimitive, die in SVG verfügbar sind, dieses eine FeComponentTransfer genannt. Was dies tut, ist, es lässt uns eine Funktion definieren, die auf jedes Pixel innerhalb des Bildes angewendet wird und es transformiert. Was wir hier tun, haben wir eine Funktion für den roten Faktor, eine Funktion für das Grün, einen Faktor für das Blau. Dies wird den RGB-Wert jedes Pixels in diesem Bild nehmen und es basierend auf der Formel, die wir definieren, transformieren. Für diesen Filter ist dies derjenige, den ich gerade bewerbe. Ich nenne es Rotverschiebung. Was wir tun, haben wir zwei Faktoren, mit denen wir spielen können. Wir können mit der Neigung der Funktion spielen. Was das im Grunde bedeutet, ist, wenn die Steigung eine ist, die besagt, dass das die Intensität des R, des G oder des B ist. Wenn es eins ist, wird es die gleiche Intensität wie auf dem Originalfoto sein. Hier haben wir es in zwei Teile gesetzt, so dass wir die Intensitäten aller unserer Pixel erhöhen, aber dann können wir auch den Abfang verschieben. Dort beginnt der Wert. Abfangen Null sagt, lassen Sie es in Ruhe. Negative Werte abfangen sagt, rampen Sie es nach unten, machen Sie es weniger. In diesem sagen wir, machen Sie unsere ein bisschen extremer, aber beginnen Sie an der gleichen Stelle. Machen Sie unsere Grüns ein wenig extremer, aber beginnen Sie tiefer und rampart blues noch weiter runter. Wenn wir eine andere Komponente verschieben und betonen wollen, was wir tun können, ist das gleiche tun, aber rampen unsere roten und unser Grün ist ein wenig und löschen Sie dann den Blues und ändern Sie. Wenn wir uns ansehen, wie das aussieht, anstatt eine Rotverschiebung, können wir sehen, dass tatsächlich alles mit einer blauen Farbe tötet. Sie können damit auf eine Reihe von verschiedenen Arten spielen. Wir können uns ansehen, wie es aussehen würde, wenn wir die Steigung überhaupt nicht ändern würden, aber immer noch den Schnittpunkt geändert haben und das hat immer noch diesen roten Farbton, aber es fühlt sich sehr langweilig an, es ist nicht sehr lebendig, indem man eine zusätzliche Steigung hinzufügt. Selbst wenn wir einige der Farben wegnehmen, einige der Grüns, einige der blauen, fühlt es sich immer noch lebendig an. Wir können auch schauen, was passieren würde, wenn wir dies vorwärts anstatt negativ verschieben, also änderten wir das Rot und betonen es wirklich und das gibt uns sehr roten Fokus Tönung. Wir fügen Rot hinzu, anstatt nur zu betonen was bereits da ist, indem wir einige der anderen herausnehmen. Dies wird ein weiterer unserer permanenten Filtereffekte sein, die wir anwenden werden. Es gibt eine Menge verschiedener Filtereffekte. Sie können tatsächlich zur W3-Dokumentation gehen und alle verschiedenen Filterprimitive durchschauen. Viele von ihnen hatten mit Licht zu tun und wie Licht die Sache macht. Wir werden nicht alle diese im Kurs behandeln, aber das ist ein lustiger Ort für Sie, um zu studieren und zu erkunden und herauszufinden, wie Sie erweitern können, welche Arten von Effekten Sie auf Ihre SVGs anwenden möchten. In unserem nächsten Video werden wir über Masken sprechen, denen wir Dinge auf Unterabschnitte unserer Bilder anwenden können, also kommen Sie zu mir. 12. Masken: Jetzt werden wir über Masken reden. Masken geben uns die Möglichkeit, selektiv Teile unserer Bilder zu zeigen und den Rest zu verbergen. Im Grunde, was Sie tun, wenn Sie eine Maske definieren, ist, dass Sie eine Form erstellen und dann, wenn Sie diese als Maske auf etwas anderes anwenden, zeigt es nur Dinge an, die in diese Form passen. Was ich hier in unseren Beispielen gemacht habe, habe ich unser Kätzchen Foto gemacht und es ist genau das gleiche Foto, obwohl Sie nur einen Teil davon sehen. Was ich getan habe, ist, dass ich eine rechteckige Maske erstellt habe. Ich nannte es meine Kätzchenmaske und ich gab es, diese Maske enthält einige Dinge darin, enthält ein Rechteck und ich gab ihm eine gewisse Dimension. Ich begann bei, X 50, gebe ihm eine Breite von 250 und eine Höhe von 500 und was das tut, ist, wenn ich es mit diesem Maskenattribut auf mein Bild anwende, es zeigt selektiv nur die Dinge an, die von diesem Rechteck abgedeckt sind. Ich kann ändern, was angezeigt wird, indem ich die Größe des Rechtecks ändere Wenn ich also die Breite ändere, wird es etwas breiter, ich sehe ein wenig mehr von meinen Kätzchen. Wenn ich ändere, wo es anfängt, sagen wir, anstatt bei 50 zu beginnen, begann ich bei 250. Ich zeige jetzt die andere Seite des Bildes, und ich könnte auch die Füllung ändern . Das wird ein bisschen knifflig. Was dies im Wesentlichen tun wird, ist alles zu zeigen, wo die Maske undurchsichtig ist. Im Moment hat die Maske eine Füllung, sie ist völlig undurchsichtig, also wird sie alles zeigen. Wenn ich diese Füllung vollständig loswerden würde, würde nichts zeigen, weil meine Füllung nicht da ist. Wenn Sie etwas als Ihre Füllung setzen, die durchscheinend ist, können Sie tatsächlich teilweise Show bekommen, so dass Sie es durchscheinend zeigen. Indem Sie mit dem Alpha herum markieren, können Sie das lustige Zeug machen. Darin werden wir nicht sehr detailliert eintauchen, aber das gibt Ihnen einen Eindruck davon, wie flexibel Masken sind. In unserem nächsten Video werden wir einige Verwendungen davon sehen, so dass wir unsere Maske nehmen können, diese verwenden,um so dass wir unsere Maske nehmen können, diese verwenden, Dinge selektiv zu zeigen und dann mit einem Filter zu kombinieren, so dass wir selektiv verwischen können, selektiv Farbe ändern, tun alle Arten von Spaß Zeug. Ich seh dich dort. 13. Programmierbare Manipulation von SVG: Ok. Lassen Sie uns über programmatische Manipulation von SVGs sprechen. Genau wie alles in HTML können SVG-Elemente, besonders wenn sie inline sind, besonders wenn sie inline sind,mit JavaScript manipuliert werden. Was das bedeutet, ist, dass all diese Tools, über die wir gelernt haben, Filter, Masken, etc. können geändert und mit JavaScript angewendet werden. Also, was ich getan habe, um zu zeigen, dass ich unser Kätzchen genommen habe, und ich habe die Maske, die wir in unserem letzten Video gemacht haben, und ich habe nur drei kleine Links zusammengesetzt. Keine Maske, kleine Maske und große Maske und ich gab ihnen IDs , damit wir sie einhaken und sie mit JavaScript packen können. Ich habe auch eine ID zu meinem Bild hinzugefügt, damit ich darauf verweisen kann und was wir diese machen wollen, ist keine Maske haben, die Maske loswerden, kleine Maske, eine kleine Maske darauf legen und eine große Masse legen, eine große Maske darauf legen. Um das zu tun, verwenden wir einfach ein einfaches, JavaScript. Was ich hier habe, ist, dass ich diese verschiedenen Objekte nach ihren Ausweisen geschnappt habe. Also habe ich die Maske, die Sache, die wir tatsächlich ändern wollen, wenn wir die Maske ändern, ist das Rechteck darin, die Dimensionen davon. Wenn wir die Dimensionen ändern, und das Maskottchen, Element selbst, es wird nichts helfen, denn, es muss sein, was ist das Objekt, das die Maske tut? Dann ein Bild, Hoppla, wir haben ein paar zusätzliche Semikolons da. Das ist das Bild, das wir haben. Dann habe ich einige Ereignis-Listener erstellt. Also für keine Maske, alles, was wir tun wollen, ist das Attribut auf dem Bild der Maske gesetzt, sollte nicht da sein. Für kleine Masse wollen wir, dass es da ist und wir wollen , dass diese Maske eine kleine Breite hat, und für große Maske wollen wir sie auf eine größere Breite einstellen. Das war's. Es ist nur einfaches Vanille-JavaScript. Es ist wie, irgendetwas anderes zu manipulieren. Aber weil wir diese Masken manipulieren können, und diese Filter, können wir diese Effekte anwenden, eine wirklich lustige Art und Weise. Werfen wir einfach einen Blick, wie es aussieht, keine Maske, es gibt unser Originalbild, kleine Maske. Was wir haben, große Maske, sie breitet sich aus. Wenn Sie mit diesem mehr spielen möchten, können Sie versuchen, dies zu verwenden, um Filter anzuwenden, und andere Dinge, die Sie möglicherweise vorangehen, weil wir das in den nächsten Videos behandeln werden. Wir sehen uns bald. 14. Masken mit Filtern kombinieren: Willkommen zurück. Wir werden uns mit der Kombination von Filtern und Masken befassen. Was wir machen wollen, haben wir hier unser Kätzchen Foto, und wir wollen eines davon hervorheben. Lasst uns einfach dieses Kätzchen hier aussuchen, das links. Wir werden den Hintergrund und unser anderes Kätzchen verwischen und nur dieses Kätzchen hier lassen. Wenn Sie sich erinnern, unsere Maske hervorgehoben nur, dass Kätzchen und sind Unschärfefilter verschwommen diese. Wir sollten in der Lage sein, diese beiden zu kombinieren, um genau den Effekt zu erzielen, den Sie wollen. In unserem SVG habe ich unsere Maske hier definiert, ich habe den Filter, der Weichzeichnungsfilter definiert. sind genau die gleichen Dinge, die wir in früheren Videos behandelt haben. Schauen wir uns an, wie wir das auf unser Bild anwenden können. Sie könnten denken, wir könnten sie beide auf das gleiche Bild anwenden. Das würde intuitiv sinnvoll sein. Aber wenn wir versuchen, dass, wenn wir sagen, Maske gleich URL, Kätzchen Maske, und wir dann auch den Filter anwenden. Was passiert, ist, dass sie beide angewendet werden, aber nicht in der Kombination, die wir wollten. Wir haben uns zu unserem Stern-Kätzchen vermaskiert, aber dann haben wir dasselbe verschwommen. Wenn wir die Effekte auf eine andere Weise kombinieren wollen, wo wir wollen, dass dieses Kätzchen hervorgehoben werden. Was wir tun müssen, ist tatsächlich auf diese Effekte zu schichten, anstatt sie zu kombinieren. Wir werden die Schicht auf, zuerst die Unschärfe. Dann nehmen wir eine weitere Kopie des Bildes und fügen Sie die Maske hinzu. Wenn ich dieses Bild nehme und es kopiere, bevor ich etwas mache, kopieren Sie es. Jetzt habe ich zwei Kopien des Bildes. Sie kaskadieren nicht so, wie sie HTML würden , weil SVG, wir sind absolut positionieren. Wir setzen die gleichen x- und y-Koordinaten, also sind diese tatsächlich übereinander. Jetzt wollen wir den hinteren verwischen und den vorderen maskieren. Lassen Sie uns die Maske auf hier setzen, Maske als URL Kätzchen Maske. Wir sehen nicht sofort einen Effekt, aber wir können wissen, ob wir den anderen löschen. Das ist es, worauf wir uns verbergen. Lassen Sie uns nun den Hintergrund verwischen. Derjenige, der zuerst kommt, wird derjenige sein, der darunter ist. Lassen Sie uns versuchen, Filter gleich URL. Da haben wir es. Sie können sehen, dass wir nun ein Highlight um dieses Kätzchen herum haben und alles andere im Hintergrund verschwommen ist. Sie können beginnen zu sehen, wie durch Erstellen sorgfältiger Masken, können Sie bestimmte Teile eines Fotos hervorheben. Nun, das ist etwas peinlich. Wir wiederholen genau das gleiche Bild immer und immer wieder. Wir wollen das vielleicht nicht tun, vor allem, wenn dieses Bild, anstatt ein Link zu sein, ein Blob war, den wir hochgeladen haben oder solche Dinge. Wir können tatsächlich eine andere SVG-Eigenschaft nutzen, in der Tat, eine, die wir früher behandelt haben, die Tatsache, dass Sie Symbole definieren und sie verwenden können. Wenn ich zu diesem Codestift tausche, habe ich ein Symbol definiert, das das Foto ist, das meinen Link hat. Unten unten, wo ich meine mehrschichtigen Unschärfen und Masken machen möchte, muss ich nur auf das Foto verweisen, das ich benutze und es dort hineinlegen. Auf diese Weise können wir in unseren nächsten Videos auf ein Bild zugreifen, das wir an einem Ort hochgeladen haben, und damit beginnen, die Effekte zu überlagern. Ich freue mich darauf, in die eigentlichen Editor-Sachen zu kommen und wir werden damit im nächsten Video beginnen, also kommen Sie zu mir. 15. Filter programmiert und programmiert werden: Jetzt kommen wir in das lustige Zeug der Herstellung unseres Redakteurs. Wir werden Dinge einrichten, um einen Filter auf einem Klick auf eines unserer Symbole anzuwenden. Was ich hier in diesem Code Pen getan habe, und wenn Sie zu Hause mitverfolgen, können Sie das einfach verzweigen und losgehen und damit spielen. Ich habe unsere zwei Stücke zusammen in den gleichen Stift gelegt. Wir haben unsere Menüleiste, und ich habe unsere Bühne hier. Unsere Bühne hat das Foto. Ich verwende den Symbolansatz, denn wenn wir weiter gehen, werden wir das tun wollen, um uns Flexibilität zu geben, mehr und mehr Versionen dazu zu haben , um den Schichteffekt zu erhalten, den wir im letzten Video gemacht haben. Aber ja, ich habe unsere Menüleiste, setze sie und das ist einfach eingezogen. Ich habe unsere Bühne hier. Für meine Zwecke im Video, was ich tun werde, ist, dass ich diesen kleinen roten Verschiebungsfilter auf das Bild anwenden werde. Also habe ich diesen Filter eingerichtet und darüber nachgedacht, was Icon dafür stehen würde, nun, es scheint wie die Art von Rechead Sache, die Sie auf Instagram tun könnten. Also habe ich ein Instagram-Symbol in und ich werde das verwenden. wir uns ansehen, wie wir diese Dinge anwenden werden, wenn wir es mit JavaScript tun wollen, müssen wir eine Art Haken geben, um zu erklären, was zu tun ist. Ich werde eine Praxis verwenden, ein Datenattribut zu verwenden, um mit dem JavaScript zu kommunizieren. Dies ist etwas, das im Allgemeinen für ein generisches JavaScript. Wenn Sie keine ausgefallenen Frameworks wie Reactor verwenden, Dinge wie diese, ist dies eine Richtlinie, die ich empfehle, wir verwenden Klassen zu kommunizieren, Styling. Wir verwenden Daten, Attribute und IDs, um mit dem JavaScript zu arbeiten , so dass Sie eine nette Trennung von Bedenken dort halten. Ich werde einen Datenfilterpunkt zu Redshift hinzufügen, was nur die ID unseres Redshift-Filters hier ist. Dann auf der JavaScript-Seite. Um das zum Laufen zu bringen, werde ich eine Sache tun. Das erste, was ich tun werde, ist das der gleiche Code, den wir für unsere State Color Zeug hatten. Wir haben das in einem Video ein paar zurück gemacht. Aber ich werde dazu eine weitere Ebene hinzufügen. Zuerst werde ich erfassen, wenn ich das umschalten, ist es aktiv oder nicht? Der klassenlose Umschalter gibt also true oder false zurück , je nachdem, ob er die Klasse hinzugefügt oder entfernt hat. Dann werde ich eine Toggle-Affekt-Funktion aufrufen. Wir werden darauf aufbauen, während wir weitergehen und weitermachen. Aber hier wird das Bedürfnis sein, diesen Effekt anzuwenden. herabkomme, um Affekt umzuschalten ichherabkomme, um Affekt umzuschalten, werde ich das Element greifen. Es braucht zwei Parameter, das Element selbst und ob Sie es anwenden, ist aktiv oder nicht, da wir das von hier bekommen haben. Wir werden in der Tat umschalten. Ich werde hier im Wesentlichen eine Reihe von Überprüfungen erstellen, die wir dann potenziell in separate Funktionen aufrufen könnten. Aber dafür werden wir nur eins machen, wo ich sage: Okay, was ist das Datenattribut, das wir haben? Ist es ein Filter? Oder vielleicht wird es eine Maske sein, oder vielleicht wird es uns sagen „Hey, wir wollten, das ist eigentlich ein Upload oder Download oder was hast du?“ Das wird unser Verhalten auslösen. Was wir dann tun werden, ist, wenn es ein Filter ist, dann gehen wir zu einem von zwei Dingen. Wir werden den Filter tatsächlich auf das Foto anwenden, oder wir werden es entfernen, als ob es nicht da ist. Es ist wirklich so einfach wie das, wissen Sie, wie Sie in früheren gelernt haben, diese Filter anzuwenden, alles, was wir tun, ist, ein Filterattribut für dieses Foto selbst zu setzen. Wenn ich auf mein Instagram klicke, plötzlich meine Filter angewendet. Wenn ich es abklicke, ist das wirklich was uns die Möglichkeit geben wird, diese verschiedenen Filter anzuwenden. Ich ermutige dich, damit zu forten und damit zu spielen. Stoppen Sie nicht einfach mit diesem einen Redshift-Filter, sondern versuchen Sie es zu erweitern. Fügen Sie noch ein paar Filter hinzu. Wenn Sie den Weichzeichnungsfilter oder so etwas wirklich mögen, fügen Sie ein weiteres Symbol hinzu und richten Sie einen Weichzeichnungsfilter ein, damit es funktioniert. Dann kommen wir bald auf das Hinzufügen von Masken pro-grammatisch und in der Lage sein, Drag & Drop und lustige Sachen wie das zu tun. Begleiten Sie mich im nächsten Video, um darüber zu reden. 16. Maus der Familie von Veranstaltungen und Koordinaten in JavaScript: Ok. Bevor wir voll auf die Erstellung von Masken programmgesteuert eintauchen, lassen Sie uns einen kleinen Umweg, um zu sehen, wie wir Dinge machen, die mit Mausereignissen interagieren. Denn was wir mit einer interaktiven Maske machen wollen , ist in der Lage zu sein, klicken und ziehen und einen Teil des Bildes und erstellen Sie eine Maskenebene. Aber tun Sie das, wir müssen verstehen, wie Click and Drag funktioniert. Was ich hier eingerichtet habe, ist unsere Grundstufe, genau wie wir es generell haben. Ich habe einen kleinen Kreiszeiger hinzugefügt, den wir verwenden können , um unsere Maus zu verfolgen und so verstehen wir. Dann schauen wir uns an, wie Mausereignisse funktionieren und was wir tun wollen. Wenn wir uns das JavaScript ansehen, gibt es drei verschiedene Ereignisse, die wichtig sind, wenn Sie einen Klick erstellen und ziehen. Es gibt Maus nach unten, Maus bewegen und Maus nach oben. Diese brechen die drei verschiedenen Stücke von dem, was Sie sonst einen Klick nennen könnten, ist die Maus nach unten, wenn Sie zum ersten Mal nach unten klicken, passiert die Maus bewegen, wenn Sie die Maus bewegen. Also passiert mousemove tatsächlich, wenn ich überhaupt nicht geklickt habe, aber ich bewege das und Mouseup ist jedes Mal, wenn Sie nach oben klicken. Wenn Sie einen Drag-Handler ausführen möchten, was passiert, wenn Sie klicken und ziehen, müssen Sie einen Listener für „down“ implementieren, Move-Listener erst aktivieren, nachdem Sie heruntergefahren haben und ihn dann wieder ausschalten, wenn Sie dies tun Mouseup. Das sind die Grundlagen dessen, was wir hier haben, wir setzen einen Mousedown-Zuhörer auf die Bühne. Wenn der Hörer feuert, machen wir einige Informationen, über die wir in einer Sekunde sprechen werden, aber dann fügen wir diese zusätzlichen Zuhörer hinzu, so dass wir unsere Drags beobachten und wir unsere Mouseup beobachten. Wir fügen diese Listener tatsächlich auf dem gesamten Dokument und nicht nur auf der Bühne da Sie sonst in einen seltsamen Zustand gelangen können , wenn Sie diese Zuhörer hinzufügen, sie auf das gesamte Dokument legen. Um einen Blick auf das zu werfen, was für uns im Fall verfügbar ist, lassen Sie wirklich schnell verzweigen und einen Debugger dort hineinlegen. Ich werde einfach einen Debugger in meine Maus fallen lassen. Lassen Sie uns dies in einem Debug-Modus öffnen, so dass es einfach ist, es zu tun. Wenn ich Mousedown auf der Bühne mache, sollte ich einen Debugger bekommen, hier drüben, wenn ich auf die Seite klicke, macht einfach nichts. Aber wenn ich hier reinklicke, bekomme ich einen Mousedown und ich kann sehen, was dieses Ereignis ist und welche Daten es sind. Lassen Sie uns das einfach in der Konsole ausloggen. Unsere Veranstaltung hat eine ganze Reihe von verschiedenen Daten, einschließlich Positionsdaten. Es hat diese ClientX, ClientY, LayerX, Layery, Offset X, OffsetY, PageX, PageY. Was sind all diese Dinge und was machen wir mit ihnen? Sie alle bedeuten etwas andere Dinge. Der Client ist innerhalb des Ansichtsfensters versetzt. Die Seite ist relativ zur gesamten Seite versetzt. Das sind die beiden, die ich meistens benutze, ich schenke nicht so viel Aufmerksamkeit auf den Rest von ihnen. Aber wir können diese Dimensionen verwenden, um zu wissen, wo die Maus ist, und nutzen, dass in diesem Fall, bewegen Sie unseren kleinen roten Punkt. im nächsten Video eine Maske, Erstellen Sieim nächsten Video eine Maske,wenn wir es tun. zurück in unseren Code kommen, wollen wir erfassen, wo wir sind und das verwenden, wenn wir diesen bewegen, um unseren Zeiger zu aktualisieren. Nun, wenn Sie sich den Capture-Code ansehen, den ich hier habe, gibt es noch etwas, das los ist. Ich mache nicht nur eine PageX, sondern wende einen Offset an. Warum ist das so? Das liegt daran, dass ich wissen möchte, wo ich innerhalb des SVG bin, nicht nur wo ich mich auf der Seite befinde. Wenn ich diesen Offset nicht habe, lassen Sie uns den Offset schnell loswerden und schauen Sie sich einfach an, was mit unserem kleinen roten Punkt funktioniert. Wenn ich das nicht habe, taucht mein Punkt nirgendwo auf, es ist überhaupt nicht offensichtlich, wo er ist oder sein sollte. Das liegt daran, dass die Dinge, die wir manipulieren, innerhalb der SVG sind und daher im Verhältnis zu dem Ort, an dem die SVG beginnt, versetzt werden. Aber sind Ereignisse, die Daten sind global, es basiert auf der Seite. Was wir tun, ist, dass wir den Offset für die Bühne erfassen und dann den Offset anwenden, wenn wir unsere Position ändern. Wir werden sagen, wo bin ich auf der Seite? Subtrahieren Sie davon meinen Offset. Wenn wir das wieder einlegen und Sie sehen können, dass, wenn ich jedes Mal klicke und ziehe, wenn es es erfasst, es ändert, was es sein sollte und dann aktualisiert, dass Cx und Cy. Damit können wir programmatische Masken erstellen, in denen wir klicken und ziehen können , um Teile unseres Bildes auszuwählen und eine Maske darüber zu legen. Eine letzte Sache zu beachten, also habe ich ClientX und ClientY, PageX und PageY erwähnt. Wenn wir unsere PageX und PageY schnell auf ClientX und ClientY ändern, schauen wir uns an, was der Unterschied ist. Wenn ich das tun und rennen würde, sieht es tatsächlich so aus, als würde es dasselbe tun. Es funktioniert genauso gut, bis ich scrolle und dann können Sie sehen, dass es tatsächlich einen Offset relativ zu dem gibt , wo ich bin, weil der ClientX relativ zu diesem Fenster ist, nicht der gesamten Seite. Aber unser Offset der SVG berechnen wir relativ zur Seite. Ich habe das nur erwähnt, weil es Zeiten gibt, in denen Sieetwas nicht relativ zur Seite, sondern relativ zum Client hier positionierenmöchten etwas nicht relativ zur Seite, sondern relativ zum Client hier positionieren . Wenn Sie etwas positionieren, das nicht Teil Ihres SVG ist, aber es über der Spitze ist, sollten Sie diese Entfernung vielleicht verstehen. So können wir Mausereignisse verwenden, um etwas zu manipulieren. Sie greifen die Dimensionen oder die Position des Ereignisses ab und verwenden es, um einige Attribute für das Element zu ändern. In unserem nächsten Video werden wir eintauchen, um eine benutzerdefinierte Maske zu erstellen. Dann begleite mich dort. 17. Eine Maske mit Klick und Ziehen erstellen: Ok. Jetzt werden wir das, was wir in unserem letzten Video über Mausereignisse gelernt haben, verwenden, um eine Klick- und Ziehmaske zu erstellen, so dass wir über einen bestimmten Teil unseres Bildes maskieren können. Was wir hier haben, haben wir unsere Bühne. Ich habe eine Maske eingerichtet, ich habe einen Filter eingerichtet, ich habe das gleiche Setup eingerichtet, das wir zeigen mussten, indem wir Filter und Masken kombinieren. Aber jetzt werden wir diese Maske in der Lage machen, benutzerdefinierten Raum zu sein. Was es am Ende aussehen wird, ist, ich werde irgendwo klicken und zeichnen und das wird meine Maske sein, damit ich meine Maske bewegen kann, wo immer ich will. Die Art und Weise, wie wir dies tun werden, ist, die gleichen Mausereignisse zu erfassen. Aber jetzt werden wir ein paar lustige Sachen damit machen. Anstatt nur einen kleinen roten Punkt herum zu bewegen, werden wir unsere Maske aktualisieren. Um dies zu tun, wollen wir das Maskenobjekt greifen lassen. Wir schnappen uns die Kätzchenmaske. Ich referenziere tatsächlich auf sein erstes Kind, weil die Sache, die ich ändern werde, nicht das Maskenobjekt selbst, sondern das Rechteck darin ist. Also werde ich diese Maske packen, ich werde das gleiche tun, was wir getan haben, um Offset und Bühne und Dinge wie das einzurichten , damit wir wissen, wo unsere Punkte sind, und jetzt in unseren Handlern müssen wir beide im Auge behalten wo wir anfangen, wo dieser erste Klick war, so dass wir die Startecke haben und wo die Maus landet. Also ein Bargeld sind sowohl ein Start als auch ein Strom, wenn auf Maske nach unten. Während wir ziehen, aktualisieren wir einfach Dinge und aktualisieren dann die Maske, wie wir gehen und dann die Maus nach oben verteilt die Handler wieder. Maske wird aktualisiert. Was wir tun, ist, dass wir im Grunde ein neues Rechteck erstellen. Wir setzen ein neues x, ein neues y und eine neue Breite und eine neue Höhe. Um dies zu tun, müssen wir die Dimensionen und die Art und Weise kennen, wie es funktioniert, so dass unser x, y immer unsere obere linke Ecke sein wird, und Breite und Höhe werden sie wie breit sein. Wenn Sie auf der linken Seite beginnen und nach rechts gehen, wird der erste Ort, an dem Sie beginnen, das x sein, während, wenn Sie auf der rechten Seite beginnen und nach links gehen, der zweite. Um das zu tun, verwenden wir diese math.min, um zu sagen. Ok? Unabhängig davon, welches weiter übrig ist, benutze das eine oder was auch immer weiter oben ist, benutze dieses. Das ist alles, was es ist. Sie setzen das auf und wir können diese Maske aktualisieren, damit Sie sehen können, wie Sie jetzt mit diesem Ansatz benutzerdefinierte Masken erstellen können, wo immer Sie wollen und Sie Dinge erstellen. Wenn Sie einen Schritt weiter gehen und sagen wollten „Hey, ich möchte mehrere Masken anwenden.“ Also möchte ich sowohl dieses als auch jenes klären. Sie könnten damit eine neue Maske erstellen und eine neue Ebene in unserem Bild erstellen, wenn Sie gehen. Aber ich überlasse das als Übung für dich. In Ordnung. Wir sind beinahe da. Im nächsten Video werden wir darüber sprechen, wie wir hier ein benutzerdefiniertes Bild bekommen , damit wir etwas tun können, und dann werden wir das Herunterladen machen und dann sind wir fertig. Ich bin aufgeregt, gehen wir. 18. Benutzerdefinierte Bild hochladen: Um dies nützlich zu machen, müssen wir es so machen, dass wir tatsächlich ein benutzerdefiniertes Foto hochladen können. Nicht, dass wir unsere Kätzchen nicht lieben, aber wenn wir einen Fotoeditor wollen, müssen wir uns ein Foto machen lassen. Was wir tun werden, ist zuerst, einfach eine Dateieingabe zu setzen. Schauen wir uns an, was der Code ist, ich habe eine Dateieingabe eingefügt und ich möchte keine Standarddateieingabe wissen, ich möchte etwas, das genauso gestaltet ist wie unsere Schaltflächen. Ich habe das Upload-Symbol gesetzt und ich benutze einen Trick zum Erstellen von formatierten Eingaben, was ist, dass ich diese Eingabe mit CSS verberge und dieses Bild setze und den Upload zur Anzeige auf, aber ich wickle es in ein Label. Wenn Sie darauf klicken, handelt es sich so, als ob es auf die Eingabe geklickt hätte. Wenn ich klicke, hier ist meine Dateieingabe. Als nächstes möchte ich JavaScripts verwenden, um das Bild zu greifen, das ich dort hochlade , und es in mein Quellbild hier einfügen. Es gibt ein paar Dinge, die das möglich machen. Wenn wir diese Datei erhalten, werden wir sie tatsächlich als Dateiobjekt erhalten , das wir entweder in ein sogenanntes Blob konvertieren können, das für uns undurchsichtig ist. Wir können nichts damit machen, aber es ist auf der Seite, die wir tun können, oder wir können es tatsächlich als Basis 64-Objekt rendern, das eine große Zeichenfolge von Bytes ist, die in die Binärdatei dieses Bildes übersetzt wird. Das Schöne daran ist, dass, wenn wir das herunterladen, es ist nicht spezifisch für diese Seite, wir können es überall verwenden, wo wir wollen. Wir werden diesen Ansatz verwenden. So wie wir es tun, greifen wir die Dateieingabe, fügen einen Ereignis-Listener darauf hinzu, so dass jedes Mal , wenn sich die Eingabe ändert, wir werden diese Funktion ausführen. Drinnen schnappen wir uns einfach die Akten. Diese Funktionalität hier mit einem FileReader und ReadAsDataUrl, das ist, was wird uns dieses Ding als Blob oder sorry setzen lassen, als eine binäre Zeichenfolge, die wir dann herunterladen können. Wir setzen das ein, führen die Datei dort aus, und wenn sie heruntergeladen wird, setzen wir das Attribut unseres Bildes hier auf eine Quelle dieses Bildes. Wenn wir einen Blick darauf werfen, was das ist, lade ich dieses Foto hoch und plötzlich ist das da drin. Wenn ich in die Quelle hier schaue, können wir sehen, dass es, Hopps, gehen wir zurück nach unten auf das Bild, direkt in der Zeile ersetzt unsere externe Referenz und es funktioniert genau wie Sie es erwarten würden. Jetzt können wir unsere Filter darauf anwenden. Wir können das genau so filtern, wie wir unser Kätzchen Foto gemacht haben, wir können das Bild, das wir wollen, hier einfügen. Dies gibt uns die Möglichkeit, einen allgemeinen Foto-Editor zu erstellen , in dem wir ein Foto aufstellen. Nächstes Video werden wir uns ansehen, wie wir das dann runterziehen, damit wir es woanders wiederverwenden können. Wir sehen uns dort. 19. Dein SVG speichern: Willkommen zurück. Schauen wir uns das Letzte an, was wir brauchen, um einen unglaublichen Foto-Editor zu erstellen. Wir haben bereits unseren Code, der eingerichtet ist, um neue Bilder hochzuladen, Filter anzuwenden, alle möglichen lustigen Sachen zu erledigen. Wir brauchen einen Weg, um das Bild wieder runter zu ziehen, nachdem wir fertig sind. Wir werden eine Download-Funktion implementieren und dann haben wir alles, was wir brauchen, um diesen tollen Foto-Editor zu machen. Was wir von einem Markup Standpunkt aus tun werden, das einzige, was wir ändern werden, ist, dass wir eine ID auf dem Download-Symbol hinzufügen , so dass wir Klicks erfassen und etwas damit tun können. Alles andere hier ist das Gleiche, was wir aufgebaut haben. Wir haben immer noch den Redshift-Filter. Wir haben immer noch die Möglichkeit, unsere eigenen Fotos hochzuladen, Dinge wie diese, aber wir werden einige Funktionen auf diesen Download setzen. Wir setzen eine ID, und über in unserem JavaScript werden wir diese Schaltfläche greifen und einen Klick-Handler hinzufügen. Dieser Klick-Handler wird die SVG herunterladen. Dies ist ganz einfach alles, was es tun muss, ist unseren SVG-Code zu greifen , den wir erstellt haben und wir haben mit diesen Filterschaltflächen und solchen Dingen modifiziert. Schnappen Sie sich den Inhalt davon. Wir greifen unsere SVG, greifen den äußeren HTML, was im Grunde bedeutet, greifen Sie das SVG-Symbol, alles andere, und fügen Sie das dann in eine Datei. In diesem Fall werden wir es tun, erstellen Sie einen Link, der diese Informationen als Datenattribut hat. Dies ist eine Möglichkeit, eine Datei im laufenden Betrieb zu erstellen. Legen Sie das Attribut fest, das heruntergeladen werden soll, damit Ihr Browser es herunterladen und klicken Sie dann auf. Das ist alles, was passieren wird. Wenn ich darauf klicke, wird es ein Bild herunterladen. Da gibt es einen Vorbehalt, etwas zu setzen. Wir wurden ein wenig schlampig in unseren SVGs. Wir hatten gerade die SVG View Box Versionsinformationen. Um dies in einem Browser richtig zu rendern, nachdem wir es heruntergeladen haben, müssen wir es mit xlink und SVG verknüpfen, so dass, wenn dies dem Browser im Grunde sagt, wenn er diesen Fall alleine betrachtet, behandeln Sie dies wie ein Bild. Wir hatten auch einen Ausweis, damit wir ihn hier aufgreifen können. Aber was das uns jetzt tun lässt, ist zu sagen, ich lade ein benutzerdefiniertes Foto hoch, ich werde meinen Adler hochladen. Da ist mein Adler. Ich bewerbe Redshift Filter, suchen super retro. Jetzt, wenn ich es herunterlade, bekomme ich eine Datei, die alle meine Änderungen gespeichert hat, damit sie überall dort verwendet werden kann, wo ich will. Damit haben Sie alles, was Sie brauchen, um einen tollen Dateieditor und Ihre Herausforderung zu erstellen, Ihr Kursprojekt ist es, dies zu gehen und es weiter zu nehmen. Wir haben uns Filter angesehen, wir haben uns die Masse angesehen, bauen Ihren Editor, um sie zu kombinieren. Schauen Sie sich einige der anderen SVG-Dinge an, die für Sie da sind, einige der anderen verfügbaren Filter, einige der anderen Werkzeuge, vielleicht können Sie etwas ändern, einige andere lustige Sachen machen. Ich freue mich, zu sehen, was du dir einfällt, und wir haben ein weiteres Video, in dem wir ein wenig über die Möglichkeiten sprechen, wo du das machen kannst, aber du bist weit gekommen und jetzt bist du bereit, deine Kursprojekte abzuschließen. Ich freue mich darauf, sie zu sehen. 20. Endgültiger Schritt: Während wir diesen Kurs abschließen, möchte ich Ihnen ein Gefühl für die Möglichkeiten geben, die Ihnen mit SVGs offen stehen. Wir haben uns ein wenig angeschaut, was möglich ist. Wir haben uns die Struktur des SVG-Codes angesehen. Wir haben gelernt, wie man es mit CSS manipuliert, und wir haben angefangen, mit einigen der fortschrittlichen Filtertechnologien herumzuspielen , die darin verfügbar sind. SVG. Dies ist jedoch eine ganze Sprache, reich an einer Sprache zum Erstellen von Bildern sagt, da HTML für die Erstellung von Dokumenten ist. Es gibt so viel mehr, als wir in diesem Kurs abdecken können. Es ist weit offen für Sie, kaum jemand nutzt die Macht, die SVG bietet. Aber wenn Sie sich umschauen und Sie sehen können, wie Menschen unglaublich komplizierte interaktive animierte Bilder erstellen , können Sie sehen, wie Leute Spiele halten, indem Sie SVGs mit erweiterten JavaScript-Frameworks wie React erstellen . Die Möglichkeiten sind endlos und es ist offen für Sie. Nehmen wir diesen Kurs nicht als fertiges Produkt, sondern als etwas, das Sie dazu inspiriert, mehr einzugraben. Gehen Sie einfach zu Code Pen und suchen Sie nach SVG-Animationsbeispielen, schauen Sie sich nach SVG-Spielen um. Es gibt so viele Möglichkeiten. Wenn du mehr über mich erfahren willst und was ich tue und andere Dinge, die ich lehre. Sie finden mich auf meiner Website, Zendev.com z-e-n-d-e-v.com. Ich hoffe, in Zukunft noch mehr von Ihnen zu sehen. Alles klar, das ist Kabel-Abmeldung.