Advanced Snap.svg

Wir haben in einem früheren Beitrag gesehen, wie man mit Snap.svg beginnt. In diesem Beitrag werden wir uns die neuen Funktionen im ersten Artikel genauer ansehen.

Key Takeaways

• Advanced Snap.svg ermöglicht die Erstellung komplexer Masken, Gradienten und Muster, die die Erstellung von einzigartigen und dynamischen Grafiken ermöglichen.
• snap.svg bietet umfassende Animationsfunktionen mit verschiedenen Methoden, um Elemente sowohl unabhängig als auch synchron zu animieren.
• Ereignisbearbeitung in Snap.svg ermöglicht die Interaktion der Benutzer, mit Methoden zum Klicken, Doppelklick, Mausbewegungen und Berührungsereignissen.
• snap.svg unterstützt die Wiederverwendung vorhandener SVG -Code und ermöglicht die Injektion des SVG -Code als Zeichenfolge oder das Lesen einer vorhandenen Datei.
• Leistung kann verbessert werden, wenn das DOM mithilfe von DocumentFragments in Snap.svg manipuliert wird, was zu erheblichen Leistungseinsparungen für große SVG -Zeichnungen führt.

Masking

Beginnen wir zunächst, wie man eine Zeichenoberfläche, eine einfache Form erstellt, und dann ein Bild laden:

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

Der Kreis deckt vorerst die Bildmitte ab.

Es ist jedoch eine Art schade, dass Sie nur rechteckige Bilder haben können. Vielleicht hat Ihr Designer schöne kreisförmige Schaltflächen oder Bilder erstellt. Natürlich gibt es mehrere Lösungen, aber alle hinterlassen ein weiteres Problem: Best -Case -Szenario, der Designer kann Ihnen ein Bild mit der Außenseite geben, die dem Hintergrund der Seite entspricht, damit es kreisförmig aussieht. Angenommen, Sie haben einen soliden Hintergrund, müssen Sie das Bild bearbeiten, wenn Sie seine Farbe ändern müssen. Sie könnten Transparenz verwenden, aber Sie benötigen entweder schwerere Formate wie PNG oder lose Qualität mit GIFs. In ein paar Jahren wird WebP vielleicht von allen Browsern vollständig unterstützt, und das würde das Rätsel beenden. Wenn Sie Interaktivität für Ihr Bild benötigen, bleiben Sie mit einer rechteckigen Form fest, die auf Ereignisse wie Mouseenter, Mausout, Klick usw. reagiert.

Nachdem er sich in der Vergangenheit schon lange mit Flash befasst war, war eines der frustrierendsten Dinge in SVG nicht in der Lage, Masken zu verwenden, die in SVG 1.1 eingeführt wurden). Bei SNAP ist es recht einfach, eine Maske auf ein beliebiges Element einschließlich der Bilder anzuwenden:

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

Grundsätzlich müssen wir unser Element nur die Maskeneigenschaft zuweisen. Wir müssen mit dem Element, das wir als tatsächliche Maske verwenden, vorsichtig sein. Da die Opazität des endgültigen Elements proportional zum weißen Niveau im Maskenelement ist, müssen wir den Kreis in Weiß füllen, wenn wir eine vollständige Deckkraft für unser Bild wünschen. Während dies zunächst ärgerlich erscheint, eröffnet es viele Möglichkeiten für erstaunliche Effekte, wie wir in den nächsten Abschnitten sehen werden.

Sie können offensichtlich verschiedene Formen zusammenstellen, um komplexe Masken zu erzeugen. Snap bietet syntaktischen Zucker, um Ihnen zu helfen:

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

Das Papier.mask () -Methode entspricht Papier.

Clipping

Ausschnittpfade beschränken den Bereich, auf den Farbe angewendet werden kann, und so dass alle Teile der Zeichnung außerhalb des von dem aktuell aktiven Ausschnittpfad begrenzten Bereichs nicht gezeichnet werden. Ein Ausschnittpfad kann als Maske mit sichtbaren Bereichen (innerhalb des Ausschnittpfads) ein Alpha -Wert von 1 haben und versteckte Bereiche einen Alpha -Wert von 0 haben. Der einzige Unterschied besteht darin , abgeschnittene Bereiche nicht.

Snap hat keine Verknüpfungen zum Ausschneiden, aber Sie können die Eigenschaften der Clip-, Clip-Pfad- und Clip-Route-Eigenschaften eines beliebigen Elements mit der ATTR () -Methode einstellen.

Gradienten

SVG 1.1 ermöglicht die Verwendung von Gradienten, um Formen zu füllen. Wenn wir diese Formen verwenden, um eine Maske zu füllen, können wir natürlich die Möglichkeit nutzen, die Alpha -Ebene der endgültigen Zeichnung anzugeben, indem wir die Füllung der Maske ändern und erstaunliche Effekte erzielen. SNAP bietet Verknüpfungen zum Erstellen von Gradienten, die später der Fülleigenschaft anderer Elemente zugeordnet werden können. Wenn wir den vorherigen Code nur ein wenig ändern, zum Beispiel:

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

Wenn Sie diesen Code testen, ist der endgültige Effekt nicht genau das, was Sie erwartet haben. Das liegt daran, dass wir den relativen Strahlungsgradiententyp verwendet haben, der vom oben genannten Kleinbuchstaben r "ausgedrückt wird. Relative Gradienten werden für jedes Element einer Gruppe (als Verbundmaske) getrennt erstellt. Wenn Sie es vorziehen, einen einzelnen Gradienten für die gesamte Gruppe zu haben, können Sie die absolute Version des Befehls verwenden. 'R ()#fff-#000' ist ein absoluter strahlender Gradienten, der mit weißer Füllung in der Mitte beginnt und an den Grenzen schwarz wird.

Wir können das gleiche Ergebnis erzielen, indem wir den SVG -Gradienten für die Fülleigenschaft eines beliebigen Elements angeben:

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

In diesem letzten Beispiel haben wir einen komplexeren Gradienten gezeigt. Neben dem unterschiedlichen Typ (absolut linear) geht dieser Gradient von (0, 0) bis (300, 300) von schwarz über rot bei 25% bis weiß.

Die Gradient () -Methode akzeptiert eine Zeichenfolge. Weitere Details werden in Snaps Dokumentation erläutert.

Es ist auch möglich, vorhandene Gradienten aus jedem SVG -Element auf der Seite zu verwenden:

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

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

Muster

Muster ermöglichen es, Formen zu füllen, indem es das Auftreten einer anderen SVG -Form, -ablauf oder Bild wiederholt. SNAP bietet das Element.topattern () -Methode (formell, muster (), jetzt veraltet), das ein Muster aus jedem Snapelelement erzeugt.

ein Muster erstellen und ein Element damit füllen, ist ziemlich einfach:

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

Wenn wir stattdessen Gradienten und Muster kombinieren möchten, ist das eine andere Geschichte und eine etwas komplizierter! Lassen Sie uns beispielsweise sehen

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

Wir müssen grundsätzlich eine Karte mit zwei Ebenen erstellen. Die endgültige Karte, die auf unserem Bild verwendet wird, das wir mit einem Gradienten füllen, hat eine Karte selbst mit einem Gradienten gefüllt. Das Ergebnis ist ziemlich beeindruckend! Es stellt sich heraus, dass dies auch eine gute Gelegenheit war, Ihnen die Clone () -Methode vorzustellen, die das tut, was Sie sich vorstellen würden - erstellt eine tiefe Kopie des Elements, auf das sie gerufen wird.

Animationen

Animationen sind eine der besten Funktionen von Snap.svg. Es gibt verschiedene Möglichkeiten, Animationen mit etwas unterschiedlichem Verhalten zu handhaben.

element.Animate ()

Wir beginnen mit der einfachsten Animationsmethode Element.Animate (). Mit dieser Methode können Benutzer eine beliebige Anzahl von Eigenschaften eines Elements synchronisieren. Der Anfangswert für die Eigenschaft ist natürlich sein aktueller Wert, während der letzte im ersten Argument für Animate () angegeben ist. Neben den zu ändernden Eigenschaften ist es möglich, die Dauer der Animation, ihre Leichtigkeit und einen Rückruf zu bestehen, der aufgerufen wird, sobald die Animation abgeschlossen ist.

Ein Beispiel wird alles klarer:

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

Dies schrumpft einfach den großen Kreis in unserer Maske auf einen kleineren Radius im Laufe von zwei Sekunden.

set.Animate ()

Sie können Elemente in einer Gruppe (SET) unabhängig animieren. Aber was ist, wenn Sie den gesamten Satz synchron animieren möchten? Einfach! Sie können set.Animate () verwenden. Dies wird die gleiche Transformation auf alle Elemente im Set angewendet, um die Synchronizität zwischen den verschiedenen Animationen zu gewährleisten und die Leistung zu verbessern, indem alle Änderungen zusammen gesammelt werden.

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

Sie können jedes Element auch in einem Satz unabhängig, aber synchron animieren. Set.Animate () akzeptiert eine variable Anzahl von Argumenten, damit Sie ein Array mit den Argumenten für jedes Unterelement verabschieden können, das Sie animieren müssen:

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

Unter der Annahme, dass Sie unseren bisherigen Beispielcode korrekt befolgt haben (probieren Sie es auf CodePen) und den obigen Code in der Konsole Ihres Browsers ausführen, sehen Sie, wie die drei Elemente synchron, jedoch unabhängig voneinander animiert werden. Der obige Code war auch eine Chance, Sätze einzuführen (als Ergebnisse der Methoden Select () und SelectAll ()) und einige nützliche Methoden, die auf ihnen definiert sind.

Eine andere Möglichkeit, einen Satz zu erstellen

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

snap.animate ()

Sie können jede numerische Eigenschaft animieren, aber Animate () funktioniert nicht an anderen Typen, beispielsweise wird es Ihre Textelemente durcheinander bringen, wenn Sie versuchen, ihr Textattribut zu animieren. Es gibt jedoch einen anderen Weg, um einen solchen Effekt zu erlangen, d. H. Der dritte Weg, Animate () in Snap zu nennen.

Durch Aufrufen der animierten Methode des SNAP -Objekts können die Aktionen, die bei jedem Schritt der Animation ausgeführt werden, in weiteren Details angeben. Dies hilft sowohl die Gruppierung komplexer Animationen als auch die synchronisierte Ausführung (obwohl die Methode set.animate () der richtige Weg wäre, um mit diesem Problem umzugehen) und komplexe, nicht numerische Eigenschaften zu animieren.

Erstellen und animieren Sie zum Beispiel ein Textelement:

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

Ereignisbearbeitung

Zurück zum ersten Vergleich zwischen Masken und Bildern können Sie den gleichen Effekt erhalten, den wir im vorherigen Abschnitt mit einem animierten GIF (irgendwie) gezeigt haben. Wenn Sie dieses Verhalten jedoch als Reaktion auf die Benutzerinteraktion reproduzieren möchten, ist die Verbesserung mit SVG noch relevanter. Sie können immer noch einen Weg finden, damit es mit mehreren GIFs funktioniert, aber abgesehen von der Flexibilität können Sie mit so wenig Aufwand nicht die gleiche Qualität erhalten:

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

Klick -Handler können später mit der Element.unclick () -Methode entfernt werden.

unter anderem, die in ähnlicher Weise behandelt werden können, gibt es dblcick, mousedown und mausup, Mousemove, Mausout und Mouseover sowie eine Reihe von mobilen Ereignissen wie Touchstart und Touchend.

Für die unserer Leser, die an JQuery- oder D3 -Schnittstellen gewöhnt sind, gibt es in No on () Methode in Snap, um andere Ereignisse manuell zu behandeln. Wenn Sie ein benutzerdefiniertes Verhalten benötigen, das über die von SNAP angebotenen Handler hinausgeht, können Sie die Node -Eigenschaft für jedes Element abrufen, was wiederum einen Verweis auf das zugehörige DOM -Element enthält, und (möglicherweise nach dem Wickeln in jQuery) können Sie Handler hinzufügen und Eigenschaften direkt dazu:

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

Drag and Drop

SNAP erleichtert das Aktivieren von Drag & Drop für jedes Element, Gruppen oder eingestellt mit der Methode von Element.Drag (). Wenn Sie kein benutzerdefiniertes Verhalten benötigen, können Sie es ohne Argumente anrufen:

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

Wenn Sie jedoch ein spezielles Verhalten benötigen, können Sie benutzerdefinierte Rückrufe und Kontexte für die ONDRAGEND -Ereignisse von OnMove, Ondragstart und Ondagend verabschieden. Beachten Sie, dass Sie den OnMove -Rückruf nicht weglassen können, wenn Sie die nächsten übergeben möchten.

Hinzufügen eines Drag -Handlers verbergt das Klickereignis nicht, das nach dem Ondragend -Einsatz abgefeuert wird, es sei denn, dies wird ausdrücklich verhindert.

Lasten Sie vorhandener SVG

Einer der stärksten Punkte dieser großartigen Bibliothek ist, dass sie die Wiederverwendung des vorhandenen SVG -Codes unterstützt. Sie können es als Zeichenfolge „injizieren“ oder noch besser Sie eine vorhandene Datei lesen und dann ändern.

Sie können es selbst ausprobieren. Laden Sie diese nette SVG -Zeichnung in die root Ihres Projekts herunter und speichern Sie sie. Laden Sie es als nächstes in Ihre Seite, ändern Sie seinen Stil oder seine Struktur, wie wir möchten, noch bevor wir es zu unserem DOM -Baum hinzufügen, Ereignishandler usw.

hinzufügen

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

Hinweis : Aufgrund der gleichorientierten Richtlinie in Browsern müssen Sie das Beispiel in einem lokalen Server ausführen, um die Lastmethode zu testen.

Leistungsverbesserungen

Eine Möglichkeit, die Leistung bei der Manipulation des DOM zu verbessern, ist die Verwendung von DocumentFragments. Fragmente sind minimale Behälter für Dom -Knoten. Vor einigen Jahren haben Sie es Ihnen ermöglicht, ganze Unterbäume kostengünstig zu manipulieren, dann zu klonen und einen ganzen Subtree mit n Knoten zu unserer Seite mit 2 Methodenaufrufen anstelle von n hinzuzufügen. Der tatsächliche Unterschied wird ausführlich zu John Ressigs Blog erläutert.

SNAP ermöglicht auch die native Verwendung von Fragmenten mit zwei Methoden:

1. snap.Parse (SVG) nimmt ein einzelnes Argument an, eine Zeichenfolge mit SVG -Code, analysiert es und gibt ein Fragment zurück, das später an eine beliebige Zeichenfläche angehängt werden kann.

2. snap.fragment (varargs) nimmt eine variable Anzahl von Elementen oder Zeichenfolgen an und erstellt ein einzelnes Fragment, das alle bereitgestellten Elemente enthält.

Besonders für große SVG -Zeichnungen können Fragmente zu einer enormen Leistungseinsparung führen, wenn sie angemessen verwendet werden.

Schlussfolgerung

Dies schließt unseren Artikel über erweiterte Snap.svg ab. Jetzt sollten die Leser eine klare Vorstellung davon haben, was sie mit dieser Bibliothek machen können und wie es geht. Wenn Sie ein wenig mehr lernen möchten, ist die SNAP -Dokumentation ein guter Ausgangspunkt.

Ein paar nützliche Links:

• snap.svg Tutorial.
• snap.svg dokumentation.

häufig gestellte Fragen zum erweiterten Snap SVG

Was ist Snap SVG und warum ist es in der Webentwicklung wichtig? SVGs sind ein wesentlicher Bestandteil der Webentwicklung, da sie die Erstellung von hochwertigen, skalierbaren Grafiken ermöglichen, die ihre Klarheit unabhängig von der Größe oder Auflösung des Bildschirms, auf dem sie angezeigt werden, beibehalten. SNAP SVG verbessert diese Funktionalität, indem sie einen robusten Satz von Tools zum Manipulieren und Animieren von SVGs bereitstellen, um den Entwicklern die Erstellung interaktiver, dynamischer Grafiken und Animationen für ihre Websites zu erleichtern. ? Es bietet eine einfache, intuitive API, mit der Entwickler SVGs schnell und einfach erstellen, manipulieren und animieren können. Darüber hinaus unterstützt SNAP SVG eine breite Palette von SVG -Funktionen, einschließlich Gradienten, Mustern, Ausschnitten, Maskieren und vielem mehr. oder Frameworks? Dies bedeutet

Wie fange ich mit SNAP SVG? Dies kann durch das Herunterladen der Bibliothek von der Snap SVG -Website und in Ihrer HTML -Datei oder mithilfe eines Paketmanagers wie NPM durchgeführt werden, um sie zu installieren. Sobald die Bibliothek in Ihrem Projekt enthalten ist, können Sie sie zum Erstellen und Manipulieren von SVGs verwenden. Grafik und Animationen für Websites. Dies kann Dinge wie interaktive Diagramme und Grafiken, animierte Symbole, interaktive Karten und mehr umfassen. Da SNAP SVG eine breite Palette von SVG -Funktionen unterstützt, kann es auch für komplexere Aufgaben wie das Erstellen von SVG -Filtern, Masken und Gradienten verwendet werden. > Ja, Snap SVG ist so konzipiert, dass sie mit allen modernen Browsern kompatibel ist, einschließlich Chrome, Firefox, Safari und Internet Explorer 9 und höher. Dies bedeutet, dass Sie es verwenden können, um SVGs zu erstellen, die über eine Vielzahl von Geräten und Browsern korrekt angezeigt werden. zum Animieren von SVGs. Dies umfasst Methoden zum Ändern der Attribute eines SVG -Elements im Laufe der Zeit, animieren auf einem Pfad und mehr. Darüber hinaus unterstützt SNAP SVG die Verwendung von Lockerungsfunktionen, mit denen Sie die Geschwindigkeit und den Fluss Ihrer Animationen steuern können. Ein ausgezeichnetes Werkzeug zum Erstellen reaktionsschneller Designs. Da SVGs vektorbasiert sind, können sie ohne Qualität nach oben oder unten skaliert werden, was sie ideal für reaktionsschnelles Design macht. Darüber hinaus bietet SNAP SVG Methoden zum Manipulieren und Animieren von SVGs, mit denen Sie dynamische, interaktive Designs erstellen können, die sich an verschiedene Bildschirmgrößen und -auflösungen anpassen. SNAP SVG ist eine Open-Source-Bibliothek, was bedeutet, dass sie kostenlos verwendet und geändert werden kann. Sie können die Bibliothek von der Snap SVG -Website herunterladen oder sie mit einem Paketmanager wie NPM installieren. Um Ihnen zu helfen, mehr über Snap SVG zu erfahren. Die Snap SVG -Website bietet einen umfassenden Leitfaden für die Funktionen und Funktionen der Bibliothek sowie eine Reihe von Demos und Beispielen. Darüber hinaus sind auf Websites wie SitePoint, Dabbles und GitHub zahlreiche Tutorials und Artikel verfügbar, die eingehende Informationen und praktische Beispiele für die Verwendung von Snap SVG liefern.

Das obige ist der detaillierte Inhalt vonAdvanced Snap.svg. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!