Eine Einführung in Snap.svg

Key Takeaways

• snap.svg ist eine leistungsstarke und flexible Bibliothek, die speziell für die Arbeit mit skalierbaren Vektorgrafiken (SVG) entwickelt wurde und Funktionen wie Maskierung, Ausschnitt, Muster, Gradienten und mehr anbietet.
• snap.svg ermöglicht es Entwicklern, vorhandene SVG -Inhalte und SVG -Inhalte zu animieren und zu manipulieren, die mit Snap.svg erzeugt werden, und ist mit allen modernen Browsern kompatibel.
• snap.svg ist eine Bibliothek auf niedriger Ebene, und obwohl sie noch keine Diagramme oder Datenbindungen unterstützt, ist es ideal, um komplexe Animationen und interaktive SVG-Inhalte zu erstellen.
• SVG -Elemente können in Snap.svg gruppiert werden, sodass gemeinsame Transformationen und Ereignisbehandlungen auf alle Elemente in einer Gruppe leichter angewendet werden können.
• snap.svg unterstützt die meisten SVG -Funktionen, einschließlich Gradienten, Mustern und Ausschnittpfade, und ist mit allen modernen Browsern kompatibel. Einige SVG -Funktionen werden jedoch möglicherweise nicht vollständig in älteren Browsern unterstützt.

Obwohl SVG schon seit mehr als einem Jahrzehnt gibt, wurde es in den letzten Jahren populär, um Diagramme in Webanwendungen zu zeichnen besondere D3.Js für Diagramme und Raphaël für coole SVG -Zeichnungen und -animationen.

neue herausragende Bibliotheken entstanden. Sie bieten Front-End-Entwickler und Designer neue Ansätze und erstaunliche neue Funktionen:

• snap.svg bietet, wie wir sehen werden
pathsjs ist eine minimale Bibliothek für die Erstellung von SVG-basierten Diagrammen. Es wurde entwickelt, um die reaktive Programmierung zu unterstützen, indem SVG -Pfade erzeugt werden, die mit Vorlagenmotoren verwendet werden können. Es funktioniert am besten mit einem Schnurrbart-basierten Template-Engine wie Raktiven.
Obwohl es nicht SVG-basiert ist, verdient p5 eine Erwähnung. Es ist ein und anscheinend ein guter Versuch, traditionelle Probleme zu überwinden, die das HTML5 -Canvas -Element beeinflussen - insbesondere die Interaktion.

Obwohl Raphaël mit der Zeit vor anderen Bibliotheken war, zeigte Raphaël seine Grenzen. Um beispielsweise mit älteren Browsern kompatibel zu sein, unterstützt Raphaël nicht all diese coolen neuen SVG -Funktionen, die Ihre Animationen hervorheben.

Deshalb hat sein Autor beschlossen, mit einem neuen Projekt, Snap.svg, frisch zu beginnen, was natürlich von der Erfahrung profitiert, die das Design von Raphaël gesammelt hat. Snap.svg bricht auch mit der Vergangenheit und ermöglicht die Einführung einer völlig neuen Art von Spezialeffekten.

oh, snap!

Bevor Sie sich mit der Snaps Syntax einleiten und mit ein paar Beispielen beginnen, überprüfen wir schnell die Vor- und Nachteile dieser neuen Bibliothek:

Profis:

• Es unterstützt alle coolen Funktionen, die wir oben erwähnt haben.
• SNAP kann sich umwickeln und vorhandene SVG animieren. Sie können Ihr SVG mit Tools wie Adobe Illustrator, Inkscape oder Sketch oder laden SVG asynchron und laden Sie die Teile, die Sie benötigen, um eine SVG -Datei in einen Sprite zu verwandeln.
• Es ist kostenlos und Open Source.

Nachteile:

• Es handelt sich um eine Bibliothek auf niedriger Ebene. Wenn Sie also Daten visualisieren müssen, gibt es leider noch keine Unterstützung für Diagramme.
• Es gibt keine Unterstützung für die Datenbindung.
• Snap ist ein junges Projekt, das noch nicht die volle Reife erreicht hat. Es ist bereits großartig, für Ihre persönlichen Projekte zu verwenden, aber Sie müssen diesen Aspekt gewichten, bevor Sie ihn in einem komplexen verwenden.

Wie bereits erwähnt, verwendet Snap Funktionen, die nicht von älteren Browsern unterstützt werden. Obwohl eine vollständige, aktualisierte Kompatibilitätstabelle noch nicht angegeben ist, sollte diese Bibliothek zumindest mit den folgenden Browserversionen (und neuer) einwandfrei funktionieren:

• Firefox ESR 18
• dh 9.0.8
• Chrom 29
• Opera 24

Erste Schritte mit Snap

Nach dem Herunterladen der Quelldateien aus dem Github -Repository können Sie sie entpacken und nach dem DIST -Ordner suchen, der die erstellten Verteilungsdateien enthält. Ausführliche Anweisungen zum Erstellen von Snap mit GrunT oder für die neueste Version finden Sie hier.

Sobald Sie die minifizierte Version der Datei in den JS -Ordner Ihres neuen Projekts kopiert haben, fügen Sie einfach das Skript in Ihre HTML -Seite auf. Angenommen, es befindet sich im Stammverzeichnis Ihres Projekts, können Sie diese Zeile direkt vor dem Schließkörper Tag der Seite hinzufügen:

<span><span><span><script</span> src<span>="/js/snap.svg-min.js"</span>></span><span><span></script</span>></span></span>

Jetzt sind wir bereit, einen Zeichenbereich für unsere Vektorgrafik zu erstellen. Wir haben zwei Möglichkeiten, dies zu tun:

• Erstellen Sie eine brandneue Zeichenfläche, die an das DOM der Seite (im Körper) angehängt wird.
• Verwenden Sie ein vorhandenes DOM-Element wieder und wickeln Sie es in eine Snap-Struktur ein. Sie können jedes Element einwickeln, aber für Zeichnungsmethoden benötigen Sie ein SVG -Element.

Mit dem ersten Weg können Sie die Breite und Höhe der Oberfläche bei der Erstellung im JavaScript -Code explizit einstellen. Wenn Sie eine größere Trennung zwischen Präsentation und Inhalt erreichen möchten, können Sie den zweiten Weg verwenden und die Werte in einer CSS -Regel angeben. Auf einer hohen Ebene können Sie mit der ersten Methode das Erscheinungsbild der Zeichenoberfläche dynamisch einstellen. Wenn Sie jedoch nicht müssen, ist der zweite Weg mehr MVC-konforme. Darüber hinaus ermöglicht es Ihnen, SVG -Zeichnungen mit externen Tools zu importieren und zu ändern, wie im Einführungsabschnitt erwähnt.

So benötigen Sie zum Beispiel einen neuen Zeichnungsbereich von 800 x 600 Pixel, sondern nur die folgende JavaScript-Zeile:

<span><span><span><script</span> src<span>="/js/snap.svg-min.js"</span>></span><span><span></script</span>></span></span>

Wenn Sie stattdessen einen vorhandenen wickeln möchten, sagen Sie #ComplexSvgfromillustrator:

<span>var s = <span>Snap</span>(800, 600);</span>

Sie können immer noch mit einer einzigen JavaScript -Zeile davonkommen, um die Zeichnungsfläche zu importieren:

<span><span><span><svg</span> id<span>='complexSVGfromIllustrator'</span> version<span>="1.1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span>></span>
</span>  ...
<span><span><span></svg</span>></span></span>

Randnotiz: Für den neugierigen Leser: Wenn Sie die SNAP -Objekte nach der Erstellung überprüfen, werden Sie feststellen, dass sie ein Papierfeld haben und Raphaëls Vermächtnis aussagen.

formes

Sobald wir unsere Zeichenoberfläche, unsere Schnappverpackung erstellt haben, ist es Zeit, einige Formen darauf zu zeichnen. Angenommen, Sie möchten einen Kreis zeichnen:

<span>var s = <span>Snap</span>('#complexSVGfromIllustrator');</span>

Wie Sie aus den Dokumenten sehen können, sind die ersten beiden Parameter in der Methode circle () die Koordinaten seines Zentrums, während der dritte der Radius des Kreises ist. Alle diese Parameter sind obligatorisch, und es führt zu einem Fehler, dass ein Fehler geworfen wird. Die Methode Circle () gibt wie bei allen anderen Zeichnungsmethoden einen Verweis auf ein Objekt zurück.

Sie können auch Ellipsen zeichnen, wie im folgenden Code -Beispiel gezeigt. Diesmal werden vertikale und horizontale Radien benötigt. Auch hier sind alle Parameter obligatorisch.

<span>var paper = <span>Snap</span>('#complexSVGfromIllustrator'),
</span>    circle <span>= paper.circle(100, 50, 10);</span>

Wenn Sie ein Rechteck zeichnen möchten, verwenden Sie den folgenden Code. Dies erzeugt ein Rechteck mit seiner oberen linken Ecke bei (100px, 100px), einer Breite von 200px und einer Höhe von 200px.

<span>var ellipse = paper.ellipse(100, 50, 10, 20);</span>

Das coole Ding an der RECT () -Methode ist, dass es auch zwei optionale Parameter akzeptiert, die den Radius von abgerundeten Ecken unabhängig für vertikale und horizontale Achsen steuern. Diese Parameter standardmäßig 0, wenn Sie nicht bestanden werden, aber achten Sie darauf, dass, wenn Sie nur einen (den horizontalen Radius) übergeben, der zweite nicht auf Null gesetzt wird, sondern dass beide den gleichen Wert annehmen.

<span>var r = paper.rect(100, 100, 200, 300);</span>

Wenn Sie nun von vorne anfangen möchten, können Sie eine andere Zeichenoberfläche erstellen oder einfach die Papier verwenden.

Linien und Polygone

Um kompliziertere Zeichnungen abzudecken, müssen wir einen Schritt zurück treten und über Zeichnen von Linien sprechen. Wie Sie erwarten würden, nimmt die Methode die vier Koordinaten der Endpunkte einer Zeile, wie unten gezeigt, nimmt.

<span><span><span><script</span> src<span>="/js/snap.svg-min.js"</span>></span><span><span></script</span>></span></span>

Was ist weitaus interessanter, die Möglichkeit, komplexe Polylines zu zeichnen: var line = paper.polyLine (10, 100, 110, 200); ist im Prinzip der obigen Linie () -Methode, aber Sie wären wahrscheinlich überrascht von ihrem visuellen Ergebnis. Um zu sehen, warum, versuchen wir dies

<span>var s = <span>Snap</span>(800, 600);</span>

paper.polyline () und paper.polygon () sind Aliase für dieselbe Methode, und standardmäßig wird das resultierende (geschlossene) Polygon mit schwarzer Füllung und keinem Schlaganfall gezeichnet. Aus diesem Grund konnten Sie die oben mit Polyline () gezeichnete Linie nicht sehen (obwohl Sie die Seite überprüfen können, indem Sie die Seite inspizieren, dass der SVG -Code dafür tatsächlich an seinen Container angehängt wurde).

Um dieses Verhalten sowie das Erscheinen anderer Elemente zu ändern, müssen wir Attribute einführen.

Attribute

Der Begriff von Attributen für Snap -Elemente ist etwas breiter als gewöhnlich, was bedeutet, dass sowohl HTML -Attribute als auch CSS -Attribute unter derselben Schnittstelle enthält (während die meisten anderen Bibliotheken zwischen .Attr () Methode für HTML -Attribute und 'unterscheiden. style () 'für CSS). Durch die Verwendung der Methode von Element.attr () auf einem Snap -Wrapper -Objekt können Sie seine Klasse oder ID sowie seine Farbe oder Breite festlegen.

Wie oben erwähnt, haben Sie mit SNAP zwei Möglichkeiten, um einem Element CSS -Eigenschaften zuzuweisen. Einer besteht darin, diese Eigenschaften in eine separate CSS -Datei aufzunehmen und dann Ihrem Element einfach die richtige Klasse zuweisen:

<span><span><span><svg</span> id<span>='complexSVGfromIllustrator'</span> version<span>="1.1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span>></span>
</span>  ...
<span><span><span></svg</span>></span></span>

<span>var s = <span>Snap</span>('#complexSVGfromIllustrator');</span>

Das gleiche Ergebnis kann erhalten werden, indem diese Eigenschaften mit JavaScript zugewiesen werden:

<span>var paper = <span>Snap</span>('#complexSVGfromIllustrator'),
</span>    circle <span>= paper.circle(100, 50, 10);</span>

Wieder ermöglicht der erste Weg eine bessere Trennung zwischen Inhalt und Präsentation, während der zweite die Möglichkeit bietet, die Attribute dynamisch zu ändern. Wenn Sie darüber nachdenken, die beiden Strategien zu mischen, denken Sie daran, dass die in einer CSS -Datei definierten Regeln den, den Sie mit Element.attr () zuweisen, trotz der zeitlichen Reihenfolge, in der sie Elementen zugeordnet sind, übertragen werden.

Wenn Sie keine Referenz auf das Element beibehalten haben, das Sie stylen möchten, können Sie es einfach mit CSS -Selektoren greifen:

<span>var ellipse = paper.ellipse(100, 50, 10, 20);</span>

Gruppen

SVG -Elemente können so gruppiert werden, dass gemeinsame Transformationen und Ereignisbehandlungen auf alle Elemente einer Gruppe leichter angewendet werden können. Das Erstellen einer Gruppe ist einfach:

<span>var r = paper.rect(100, 100, 200, 300);</span>

Seien Sie vorsichtig: Ordnung oder die Argumente sind wichtig! Zweitens, wenn Sie einer Gruppe ein Element zuweisen, wird es von jeder Gruppe entfernt, zu der es bereits gehört.

Elemente können natürlich auch zu vorhandenen Gruppen hinzugefügt, nachdem sie erstellt wurden:

<span>var rect = paper.rect(100, 100, 200, 300, 10); //equivalent to  paper.rect(100, 100, 200, 300, 10, 10);</span>

Bilder

SNAP unterstützt die Nesting -Raster -Bilder innerhalb von SVG -Elementen, laden Sie asynchron und werden nur nach Abschluss der Last angezeigt.

<span><span><span><script</span> src<span>="/js/snap.svg-min.js"</span>></span><span><span></script</span>></span></span>

Das resultierende Objekt kann als SVG -Element behandelt werden. Hinweis, wenn Sie Select () für Bilder verwenden, um sie später abzurufen, ist der erstellte Wrapper die für HTML -Elemente, sodass die meisten Methoden für SVG -Elemente nicht unterstützt werden.

Transformationen

Wir haben gesehen, wie man asymmetrische Polygone wie Ellipsen und Rechtecke zeichnet. Grundlegende Methoden beschränken uns jedoch, diese Zahlen zu zeichnen, die an den kartesischen Achsen ausgerichtet sind. Was wäre, wenn wir eine Ellipse zeichnen wollten, deren Achsen in Bezug auf die X-Y-Achsen 45 ° gedreht sind? Wir können dies nicht in den Erstellungsmethoden angeben, aber wir können Transformationen verwenden, um dasselbe Ergebnis zu erzielen.

Ebenso müssen wir möglicherweise ein Bild drehen oder irgendwann nach seiner Erstellung ein Element (oder eine Gruppe) verschieben. Mit der Methode von Transformation () ermöglicht es uns, dies zu tun, indem wir eine SVG -Transformationszeichenfolge übergeben:

<span>var s = <span>Snap</span>(800, 600);</span>

Diese Methode kann entweder eine Zeichenfolge oder ein Objekt als Eingabe annehmen. Wir können auch die Transformationsmatrix verwenden, die einem Element zugeordnet ist, um dieselbe Transformation auf ein anderes Element anzuwenden:

<span><span><span><svg</span> id<span>='complexSVGfromIllustrator'</span> version<span>="1.1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span>></span>
</span>  ...
<span><span><span></svg</span>></span></span>

Seien Sie vorsichtig: Der Transformationszentrum für das zweite Element wird immer noch der für das erste verwendete sein. Der endgültige Effekt könnte Sie überraschen.

Die Methode von Transformation () kann auch verwendet werden, um das Transformationsdeskriptorobjekt für das Element abzurufen, das aufgerufen wird. Nennen Sie es einfach ohne Argumente. Dieser Deskriptor kann verwendet werden, um die lokale Transformationsmatrix und die Differenzmatrix bei verschachtelten Elementen abzurufen:

<span>var s = <span>Snap</span>('#complexSVGfromIllustrator');</span>

Schlussfolgerung

Dieser Artikel lieferte eine Einführung in die Grundlagen von Snap.svg. Wenn Sie daran interessiert sind, das coolste Zeug zu sehen, bleiben Sie bitte dran, da ein fortgeschrittenes Follow-up bald veröffentlicht wird.

Wenn Sie mehr über Datenvisualisierung und SNAP erfahren möchten, finden Sie hier einige nützliche Ressourcen:

1. snap.svg Tutorial.
2. Folien aus einer Präsentation über Datenvisualisierung und erweiterte Techniken.
3. Schauen Sie sich einen Teil des oben genannten Codes in Aktion auf CodePen an.

häufig gestellte Fragen (FAQs) zu Snap SVG

Was ist der Unterschied zwischen SNAP SVG und anderen SVG -Bibliotheken? Im Gegensatz zu anderen SVG -Bibliotheken bietet SNAP SVG eine einfache und intuitive API zum Animieren und Manipulieren vorhandener SVG -Inhalte und SVG -Inhalte, die mit SNAP SVG generiert werden. Es unterstützt auch die meisten SVG -Funktionen, einschließlich Gradienten, Muster und Ausschnittpfade, und ist mit allen modernen Browsern kompatibel. Sie müssen die Snap SVG JavaScript -Datei in Ihr HTML -Dokument aufnehmen. Sie können es von der offiziellen Snap SVG -Website herunterladen oder direkt von einem CDN einbeziehen. Sobald Sie die SNAP -SVG -Datei eingeschlossen haben, können Sie mit der SNAP -SVG -API SVG -Inhalte erstellen und manipulieren.

Kann ich Snap SVG für komplexe Animationen verwenden? Es bietet eine leistungsstarke Animations -API, mit der Sie jedes SVG -Attribut animieren können. Sie können auch die Matrix -Transformationen von SNAP SVG verwenden, um komplexe Animationen problemlos zu erstellen. Außerdem unterstützt SNAP SVG die Lockerungsfunktionen, mit denen glatte und natürliche Animationen erstellt werden können.

Ist Snap SVG mit allen Browsern kompatibel? , Firefox, Safari, Opera und Internet Explorer 9 und höher. Einige SVG -Funktionen werden jedoch möglicherweise nicht vollständig in älteren Browsern unterstützt. . Sie können die Ereignisbearbeitungsfunktionen von SNAP verwenden, um auf Benutzerinteraktionen wie Klicks oder Mausbewegungen zu reagieren. Sie können auch die Animations -API von SNAP SVG verwenden, um interaktive Animationen zu erstellen.

Kann ich Snap SVG mit anderen JavaScript -Bibliotheken verwenden? Es stört andere Bibliotheken nicht und ändert keine nativen JavaScript -Objekte. Dies macht SNAP SVG eine großartige Wahl für Projekte, die andere JavaScript -Bibliotheken verwenden. Sie können die Funktionen von SNAP -SVG verwenden, um die Attribute von SVG -Elementen zu ändern, SVG -Elemente zu transformieren und SVG -Elemente animieren. Sie können auch die Auswahlfunktionen von SNAP SVG verwenden, um bestimmte SVG -Elemente auszuwählen.

Kann ich SNAP -SVG verwenden, um SVG -Filter zu erstellen? Sie können die Filterfunktionen von SNAP SVG verwenden, um SVG -Filter auf SVG -Elemente zu erstellen und anzuwenden. Auf diese Weise können Sie eine breite Palette von visuellen Effekten erstellen, z. B. Unschärfe, Beleuchtung und Farbanpassungen.

Wie kann ich Gradienten mit Snap SVG erstellen? Erstellen von SVG -Gradienten. Sie können die Gradientenfunktionen von Snap SVG verwenden, um lineare und radiale Gradienten zu erstellen, und Sie können die Farbfunktionen von Snap SVG verwenden, um die Farben des Gradienten zu definieren. 🎜> Ja, SNAP SVG unterstützt SVG -Muster. Sie können die Musterfunktionen von SNAP SVG verwenden, um SVG -Muster auf SVG -Elemente zu erstellen und anzuwenden. Auf diese Weise können Sie eine breite Palette von visuellen Effekten erstellen, wie z. B. Texturen und Muster.

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