Einführung von GraphicsJs, einer leichten leichten Grafikbibliothek

html5: Der Eckpfeiler moderner Netzwerke. Heutzutage sind SVG und Leinwand häufig die Technologie der Wahl beim Erstellen interaktiver Bilder-Flash wurde vergessen, Silverlight ist zu einem seltenen Einhorn am Rande des Netzwerks geworden, und nur wenige Menschen erinnern sich an Drittanbieter-Plugins.

Die Vor- und Nachteile jeder Technik sind gut dokumentiert, aber in Kurz gesagt ist SVG besser zum Erstellen und Umgang mit interaktiven Elementen geeignet. Dies liegt daran, dass SVG ein XML-basiertes Vektorformat ist, bei dem ein Bild mit dem <svg></svg> -Tag in eine Seite geladen wird, kann jedes Element in der SVG-DOM verwendet werden.

In diesem Artikel möchte ich Ihnen GraphicsJs vorstellen, einer neuen und leistungsstarken Open -Source -JavaScript -Zeichnungsbibliothek basierend auf SVG (für ältere IE -Versionen hat sie eine VML -Alternative). Ich werde zunächst schnell seine Grundlagen vorstellen und dann die Funktionen der Bibliothek mit zwei kurzen und wunderbaren Beispielen präsentieren: Das erste Beispiel geht ausschließlich um Kunst, und das zweite Beispiel zeigt, wie man ein einfaches in weniger als 50 Zeilen von Code -Puzzle -Kunst schreibt Spiel.

Schlüsselpunkte

• GraphicsJS ist eine neue, leistungsstarke Open -Source -JavaScript -Zeichnungsbibliothek, die auf SVG basiert und VML -Alternativen für ältere IE -Versionen bietet. Es ist leicht und flexibel, mit reichen Javascript -APIs.
• von Anychart veröffentlicht, die Bibliothek wird seit mindestens drei Jahren in proprietären Produkten von Anychart wiedergegeben, was ihre Robustheit gewährleistet. Im Gegensatz zu JavaScript Drawing Gallery von Anychart ist GraphicsJS kostenlos für kommerzielle und gemeinnützige Projekte erhältlich.
• GraphicsJS ist die Kompatibilität für die Cross-Browser-Kompatibilität und unterstützt Internet Explorer 6.0, Safari 3.0, Firefox 3.0 und Opera 9.5. Es wird in VML in älteren IE -Versionen und in SVG in allen anderen Browsern in SVG gerendert.
• Diese Bibliothek ermöglicht die Kombination aus Grafik und Animation, einschließlich animierter Lagerfeuer, rotierenden Galaxien, Niederschlag und spielbarer 15 Puzzlespiele. Es enthält auch detaillierte Dokumentation und umfassende API -Referenzen.
• Die GraphicsJS -Bibliothek kann verwendet werden, um interaktive Webanwendungen zu erstellen, einschließlich Ebenen, Gradienten, Mustern, Ereignisverarbeitung und Leistungsoptimierung. Es unterstützt auch komplexe Animationen und Transformationen und macht es zu einer vielseitigen Option für Entwickler.

Warum grafische Js

auswählen

Es gibt viele Bibliotheken, die Entwicklern helfen, SVG zu verwenden: Raphaël, Snap.svg und Bonsaijs, um nur einige der besten Bibliotheken zu nennen. Diese Bibliotheken haben jeweils ihre Vor- und Nachteile, aber ein gründlicher Vergleich wird Gegenstand eines anderen Artikels sein. In diesem Artikel geht es um GraphicsJs. Lassen Sie mich also erklären, was er hat und was er hat.

Zunächst ist GraphicsJs leicht und verfügt über eine sehr flexible JavaScript -API. Es implementiert viele reiche Textmerkmale sowie ein virtuelles DOM, das von Browser-spezifischen HTML-DOM-Implementierungen getrennt ist.

Zweitens handelt es sich um eine neue Open -Source -JavaScript -Bibliothek, die im vergangenen Herbst von Anychart veröffentlicht wurde, einem der weltweit führenden Entwickler für interaktive Datenvisualisierungssoftware. Anychart verwendet GraficsJs seit mindestens drei Jahren (seit der Veröffentlichung von Anychart 7.0), um Diagramme in seinen proprietären Produkten zu rendern, sodass GraphicsJs vollständig bekämpft werden. (Haftungsausschluss: Ich bin der F & E -Leiter bei Anychart und der Lead -Entwickler bei GraphicsJs)

Drittens ist im Gegensatz zu JavaScript Drawing Library von Anychart kostenlos für kommerzielle und gemeinnützige Projekte kostenlos erhältlich. Es ist auf GitHub unter der Apache -Lizenz verfügbar.

Viertens hat GraphicsJS eine Kreuzbarkeit des Cross-Browsers und unterstützt Internet Explorer 6.0, Safari 3.0, Firefox 3.0 und Opera 9.5. Es wird in VML in älteren IE -Versionen und in SVG in allen anderen Browsern in SVG gerendert.

Zuletzt können Sie Grafik -J -Js -Unternehmen perfekt kombinieren. Schauen Sie sich die Hauptgalerie an, einschließlich animierter Lagerfeuer, sich drehenden Galaxien, Niederschlagsmenschen, prozedural erzeugten Blättern, spielbare 15 Puzzlespiele und vieles mehr. GraphicsJs enthält weitere Beispiele in seiner detaillierten Dokumentation und umfassenden API -Referenz.

GraphicsJS -Grundlagen

Um mit GraphicsJs zu beginnen, müssen Sie auf die Bibliothek verweisen und ein HTML-Element auf Blockebene für die Zeichnung erstellen:

<code class="language-html"> <!DOCTYPE html>
 
 
   <meta charset="utf-8">
   <title>GraphicsJS Basic Example</title>    
 
 
   <div id="stage-container" style="width: 400px; height: 375px;"></div>

   
   
 
 </code>

Sie sollten dann eine Bühne erstellen und etwas darin zeichnen, z. B. einen Rechteck, einen Kreis oder eine andere Form:

<code class="language-javascript"> // 创建舞台
 var stage = acgraph.create('stage-container');
 // 绘制矩形
 var stage.rect(25, 50, 350, 300);</code>

Folgendes ist ein Beispiel auf Codepen, in dem wir noch einen Schritt weiter gehen und das Symbol für heilige Heiligtümer zeichnen.

Unser erstes Meisterwerk

Füllung, Schlaganfall und Muster füllen

Jede Form oder Pfad kann mit Fülleinstellungen und Schlaganfalleinstellungen gefärbt werden. Alles hat einen Schlaganfall (Grenze), aber nur die Form und die geschlossenen Pfade haben Polsterung. Füll- und Schlaganfalleinstellungen sind sehr reichhaltig und Sie können lineare oder kreisförmige Gradienten für Füllung und Schlaganfall verwenden. Zusätzlich können die Zeilen gepunktet und das Bildfüllen mit mehreren Fliesenmodi unterstützt werden. Aber das ist alles ziemlich übliche Sachen, die Sie in fast jeder Bibliothek finden können. Was GraphicsJs besonders macht, ist die Mesh- und Muster -Füllfunktion, mit der Sie nicht nur 32 (!) Von den verfügbaren Mesh -Füllmustern direkt verwenden können, sondern Sie auch einfach benutzerdefinierte Muster aus Formen oder Text erstellen können.

Lassen Sie uns jetzt sehen, was genau erreicht werden kann! Ich werde eine einfache Zeichnung eines Mannes zeichnen, der in der Nähe des Hauses steht, und sie mit verschiedenen Mustern und Farben füllen, um ihn zu verbessern. Lassen Sie uns zum Einfachheit halber zu einem kindlichen Kunstgemälde machen (und versuchen Sie, keine Kunstrauheit einzubeziehen). Das war's:

<code class="language-javascript"> // 创建舞台
 var stage = acgraph.create('stage-container');

 // 绘制框架
 var frame = stage.rect(25, 50, 350, 300);

 // 绘制房子
 var walls = stage.rect(50, 250, 200, 100);
 var roof  = stage.path()
   .moveTo(50, 250)
   .lineTo(150, 180)
   .lineTo(250, 250)
   .close();

 // 绘制一个人
 var head = stage.circle(330, 280, 10);
 var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
 var kilt = stage.triangleUp(330, 320, 20);
 var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
 var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);</code>

Zeigen Sie die Ergebnisse auf CodePen an.

Wie Sie sehen, verwenden wir jetzt Variablen - alle Methoden zum Zeichnen von Inhalten auf der Bühne geben eine Referenz auf das erstellte Objekt zurück. Mit diesem Link können Sie das Objekt ändern oder löschen.

Beachten Sie auch, wie Kettenaufrufe (z. B. stage.path().moveTo(320, 330).lineTo(320, 340);) überall in GraphicsJs enthalten sind, was dazu beiträgt, den Code zu verkürzen. Angekettete Anrufe sollten mit Vorsicht verwendet werden. Wenn er jedoch ordnungsgemäß angewendet wird, macht er den Code kompakter und leichter zu lesen.

Lassen Sie uns diese Malvorlagen nun einem Kind ausgeben und es malen lassen. Weil sogar Kinder die folgenden Techniken beherrschen können:

<code class="language-html"> <!DOCTYPE html>
 
 
   <meta charset="utf-8">
   <title>GraphicsJS Basic Example</title>    
 
 
   <div id="stage-container" style="width: 400px; height: 375px;"></div>

   
   
 
 </code>

So sieht unser Beispiel jetzt aus.

Nun, wir haben ein Bild von einem Highlander neben einem Kilt, der in der Nähe seines Ziegelburgs mit Stroh auf dem Dach steht. Wir können sogar riskieren, zu sagen, dass dies tatsächlich ein Kunstwerk ist, das wir Urheberrecht erhalten möchten. Lassen Sie uns dies mit Muster -Füllungen basierend auf benutzerdefiniertem Text tun:

Wie Sie sehen können, ist dies einfach: Sie erstellen eine Instanz eines Textobjekts, bilden dann ein Muster auf der Bühne und legen den Text in das Muster.

<code class="language-javascript"> // 创建舞台
 var stage = acgraph.create('stage-container');
 // 绘制矩形
 var stage.rect(25, 50, 350, 300);</code>

Farben urheberrechtlich geschützte Häuser/GraphicsJs auf CodePen anzeigen.

Erstellen Sie ein Puzzle -Kunstspiel in weniger als 50 Codezeilen

Im nächsten Teil dieses Artikels möchte ich Ihnen zeigen, wie Sie ein Cookie-Clicker-ähnliches Spiel mit Grafikjs in weniger als 50 Codezeilen erstellen.

Der Spielname lautet

"Die Straßen im Wind fegen"

, und der Spieler spielt die Rolle eines Aasfressers und fegt die Straßen an einem windigen Nachmittag im Herbst. Das Spiel verwendet einen Code aus dem Programm für Programm generiertes Leaf in der GraphicsJS-Galerie. Sie können die fertigen Spiele auf CodePen (oder das Ende des Artikels) anzeigen.

Ebenen, Zindex und virtuelles Dom

Wir erstellen zuerst eine Stufe (wie bereits erwähnt) und deklarieren dann einige anfängliche Variablen:

Für dieses Spiel werden wir die Ebene verwenden - das Objekt in GraphicsJs, die zum Gruppieren von Elementen verwendet werden. Wenn Sie ähnliche Änderungen an Elementen (z. B. Transformationen) anwenden möchten, müssen Sie Elemente gruppieren. Sie können die Ebene im Pause -Modus (dazu später mehr) ändern, was die Leistung und die Benutzererfahrung verbessern kann.

<code class="language-javascript"> // 创建舞台
 var stage = acgraph.create('stage-container');

 // 绘制框架
 var frame = stage.rect(25, 50, 350, 300);

 // 绘制房子
 var walls = stage.rect(50, 250, 200, 100);
 var roof  = stage.path()
   .moveTo(50, 250)
   .lineTo(150, 180)
   .lineTo(250, 250)
   .close();

 // 绘制一个人
 var head = stage.circle(330, 280, 10);
 var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
 var kilt = stage.triangleUp(330, 320, 20);
 var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
 var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);</code>

In dieser Demo verwenden wir die Ebenenfunktion, um uns zu helfen, die Blätter zusammenzuarbeiten und sie zu vermeiden, das Etikett abzudecken (es zeigt uns, wie viele Blätter gefegt werden). Dazu erstellen wir ein Tag und rufen die

-Methode auf, die die Bühnenbindungsschicht erstellt. Wir setzen die Eigenschaft

dieser Ebene auf die stage.layer -Sache unterhalb des Etiketts. zIndex zIndex

Danach können wir sicherstellen, dass sie den Text nicht überschreiben, egal wie viele Blätter wir in der Ebene erstellen.

<code class="language-javascript"> // 给图片着色
 // 精美的框架
 frame.stroke(["red", "green", "blue"], 2, "2 2 2");
 // 砖墙
 walls.fill(acgraph.hatchFill('horizontalbrick'));
 // 草屋顶
 roof.fill("#e4d96f");
 // 格子呢裙
 kilt.fill(acgraph.hatchFill('plaid'));</code>

konvertieren

Fügen wir als nächstes eine Funktion hinzu, um unsere Blätter zu zeichnen. Dies verwendet die praktische GraphicsJS -Transformations -API, mit der Sie Elemente und Gruppe von Elementen bewegen, skalieren, drehen und schneiden können. Dies ist ein sehr leistungsstarkes Werkzeug in Kombination mit Ebenen und virtuellem DOM.

Sie werden sehen, dass jeder Pfad auf die gleiche Weise erstellt wird, aber dann wird die Konvertierung durchgeführt. Dies erzeugt ein sehr schönes zufälliges Blattmuster.

<code class="language-javascript"> // 169 是版权符号的字符代码
 var  text = acgraph.text().text(String.fromCharCode(169)).opacity(0.2);
 var  pattern_font = stage.pattern(text.getBounds());
 pattern_font.addChild(text);
 // 用图案填充整个图像
 frame.fill(pattern_font);</code>

Verarbeitungsereignisse

Jedes Objekt, Bühnen und Schicht in Grafikjs kann Ereignisse verarbeiten. Eine vollständige Liste unterstützter Ereignisse finden Sie in der EventType -API. Es gibt vier besondere Ereignisse auf der Bühne, um das Rendern zu kontrollieren.

In diesem Spielbeispiel verwenden wir einen Ereignishörer, der an das Blattobjekt angeschlossen ist, damit der Benutzer, wenn er sie über sie hebt, einzeln verschwinden. Fügen Sie dazu den folgenden Code zum Ende der drawLeaves -Funktion vor der return -Anweisung:

hinzu:

<code class="language-html"> <!DOCTYPE html>
 
 
   <meta charset="utf-8">
   <title>GraphicsJS Basic Example</title>    
 
 
   <div id="stage-container" style="width: 400px; height: 375px;"></div>

   
   
 
 </code>

Hier können wir auch sehen, dass wir Ebenen zur Berechnung von Blättern verwenden.

<code class="language-javascript"> // 创建舞台
 var stage = acgraph.create('stage-container');
 // 绘制矩形
 var stage.rect(25, 50, 350, 300);</code>

Bitte beachten Sie, dass wir hier nicht die Anzahl der Blätter nicht speichern. Da wir einer bestimmten Schicht Blätter hinzufügen und Blätter von ihnen entfernen, können wir nachverfolgen, wie viele Kinderelemente wir haben (und daher, wie viele Blätter übrig bleiben).

GraphicsJs bietet ein virtuelles DOM, das abstrakt, leicht und von Browser-spezifischen SVG/VML-Implementierungen getrennt ist. Es ist sehr nützlich, um viele großartige Dinge wie die Verfolgung aller Objekte und Ebenen, die Anwendung von Transformationen auf Gruppen und die Optimierung des Renders mit Hilfe zu ermöglichen, den Rendering -Prozess zu verfolgen und zu steuern.

Leistungsoptimierung

Die virtuellen DOM- und Ereignishandler ermöglichen es GraphicsJS -Benutzern, das Rendering zu steuern. Aufführungsartikel können Ihnen helfen, die Beziehung zwischen diesen Inhalten zu verstehen.

Beim Erzeugen von Blättern im Spiel müssen wir das Rendering beim Hinzufügen neuer Blätter pausieren und das Rendering erst wieder aufnehmen, nachdem alle Änderungen abgeschlossen sind:

<code class="language-javascript"> // 创建舞台
 var stage = acgraph.create('stage-container');

 // 绘制框架
 var frame = stage.rect(25, 50, 350, 300);

 // 绘制房子
 var walls = stage.rect(50, 250, 200, 100);
 var roof  = stage.path()
   .moveTo(50, 250)
   .lineTo(150, 180)
   .lineTo(250, 250)
   .close();

 // 绘制一个人
 var head = stage.circle(330, 280, 10);
 var neck = stage.path().moveTo(330, 290).lineTo(330, 300);
 var kilt = stage.triangleUp(330, 320, 20);
 var rightLeg = stage.path().moveTo(320, 330).lineTo(320, 340);
 var leftLeg = stage.path().moveTo(340, 330).lineTo(340, 340);</code>

Diese Methode des Umgangs mit neuen Elementen lässt neue Blätter fast sofort erscheinen.

shakeTree() Starten Sie schließlich alles, indem Sie

rufen.

<code class="language-javascript"> // 给图片着色
 // 精美的框架
 frame.stroke(["red", "green", "blue"], 2, "2 2 2");
 // 砖墙
 walls.fill(acgraph.hatchFill('horizontalbrick'));
 // 草屋顶
 roof.fill("#e4d96f");
 // 格子呢裙
 kilt.fill(acgraph.hatchFill('plaid'));</code>

Endergebnis

Straßenreiniger/GraphicsJs auf CodePen anzeigen.

Schlussfolgerung

Der Übergang zu HTML5 hat das Netzwerk verändert. Wenn es um moderne Webanwendungen und sogar einfache Websites geht, begegnen wir häufig Aufgaben, die eine Bildverarbeitung erfordern. Es ist zwar unmöglich, eine Lösung zu finden, die in jedem Fall gut funktioniert, aber Sie sollten die Grafikbibliothek berücksichtigen. Es ist Open Source, robust, mit exzellenten Browserunterstützung und vielen Funktionen, die es lustig, bequem und natürlich nützlich machen.

Ich würde gerne Ihr Feedback zu GrPhicsJs in den Kommentaren unten hören. Benutzt du es schon? Würden Sie in Betracht ziehen, es für ein neues Projekt zu verwenden? Ich würde gerne wissen, warum oder warum nicht. Ich schreibe auch eine Liste der wichtigsten JavaScript -Zeichnungsbibliotheken und -artikel, die alle vergleichen und vergleichen. Fühlen Sie sich frei, auf die Funktionen hinzuweisen, die Sie dort sehen möchten.

Link zum weiteren Lesen

• Allgemeine Informationen
  • svg
  • canvas
  • SVG gegen Leinwand
• Bibliothek
  • GraphicsJS
  • raphaël
  • snap.svg
  • bonsaijs
• GraphicsJS
  • GraphicsJs auf GitHub
  • GraphicsJS -Dokumentation
  • GraphicsJS API Referenz

häufig gestellte Fragen zu GraphicsJs

Wie unterscheidet sich GraphicsJs von anderen JavaScript -Grafikbibliotheken?

GraphicsJs zeichnet sich aus seiner leistungsstarken und leichten Natur aus. Es ist eine leistungsstarke Bibliothek, mit der Entwickler alle Grafiken mit hoher Präzision und hoher Leistung zeichnen und animieren können. Im Gegensatz zu anderen Bibliotheken bietet GraphicsJS eine umfassende Reihe von Funktionen, darunter Ebenen, Gradienten, Muster und mehr, ohne die Geschwindigkeit oder Effizienz zu beeinflussen. Es unterstützt auch alle modernen Browser und macht es zu einer vielseitigen Option für Entwickler.

wie ich mit GraphicsJs anfängst?

Um mit GraphicsJs zu beginnen, müssen Sie die GraphicsJS -Bibliothek in Ihre HTML -Datei aufnehmen. Sie können die Bibliothek von der offiziellen Website herunterladen oder CDN verwenden. Sobald die Bibliothek enthalten ist, können Sie die Grafiken erstellen, indem Sie die entsprechenden Funktionen und Methoden der Bibliothek aufrufen.

Kann ich komplexe Animationen mit GraphicsJs erstellen?

Ja, GraphicsJs ist so konzipiert, dass komplexe Animationen problemlos verarbeitet werden. Es bietet eine Reihe von Animationsfunktionen, einschließlich Lockerungsfunktions-, Verzögerungs- und Dauereinstellungen. Sie können jedes Attribut eines Diagramms wie seiner Position, Größe, Farbe und mehr animieren. Dies macht GraphicsJs zu einem leistungsstarken Tool zum Erstellen interaktiver und dynamischer Grafiken.

Ist GraphicsJs mit allen Browsern kompatibel?

GraphicsJs ist so konzipiert, dass sie mit allen modernen Browsern kompatibel ist, einschließlich Chrome, Firefox, Safari und Internet Explorer. Es verwendet SVG und VML zum Rendern, die sie alle unterstützen. Dies stellt sicher, dass Ihre Grafiken konsistent aussehen und auf verschiedenen Plattformen und Geräten gut abschneiden.

Wie erstelle ich Gradienten mit GraphicsJs?

Es ist einfach, Gradienten mit GraphicsJs zu erstellen. Sie können die Gradientenmethode verwenden, um lineare oder radiale Gradienten zu definieren, Farben und Positionen anzugeben und dann Gradienten auf jede Form anzuwenden. Auf diese Weise können Sie leicht farbenfrohe Grafiken erstellen.

Kann ich interaktive Grafiken mit GraphicsJs erstellen?

Ja, GraphicsJs bietet eine Reihe von Funktionen zur Ereignisbearbeitung, mit denen Sie interaktive Grafiken erstellen können. Sie können einen Ereignishörer an alle Grafiken anhängen, mit denen Sie auf Benutzeraktionen wie Klicks, Mausbewegungen und mehr antworten können. Dies macht GraphicsJs zu einer hervorragenden Wahl für das Erstellen interaktiver Webanwendungen.

unterstützt Grafikschichten?

Ja, GraphicsJs unterstützt Ebenen und ermöglicht es Ihnen, Grafiken in separate Gruppen zu organisieren. Jede Schicht kann unabhängig voneinander betrieben werden, wodurch die Verwaltung komplexer Grafiken einfacher wird. Sie können auch die Sichtbarkeit und Z-Ordnung jeder Schicht steuern, wodurch die Grafik eine feinkörnige Kontrolle ermöglicht.

Wie optimieren Sie meine Grafiken mithilfe von Grafikjs?

GraphicsJS bietet mehrere Funktionen, mit denen Sie Ihre Grafiken optimieren können. Sie können beispielsweise die Erntemethode verwenden, um Teile der Grafiken außerhalb eines bestimmten Bereichs zu verbergen, wodurch die Menge der erforderlichen Rendering verringert wird. Sie können auch die Cache -Methode verwenden, um die gerenderte Ausgabe der Grafiken zu speichern, wodurch die Leistung verbessert wird, wenn Sie die Grafiken häufig neu streichen.

Kann ich Diagramme und Grafiken mit GraphicsJs erstellen?

Während GraphicsJS nicht speziell zum Erstellen von Diagrammen und Grafiken entwickelt wurde, ermöglichen es ihm die leistungsstarken Zeichnungs- und Animationsfunktionen, alle Arten von Grafiken, einschließlich Diagrammen und Grafiken, zu erstellen. Mit den Methoden der Bibliothek können Sie Linien, Kurven, Rechtecke, Kreise und mehr zeichnen, um verschiedene Diagrammtypen zu erstellen.

Ist GraphicsJs kostenlos zu bedienen?

Ja, GraphicsJs ist eine kostenlose Open -Source -Bibliothek. Sie können es kostenlos in Ihrem Projekt verwenden. Die Bibliothek wird auch aktiv gepflegt, um sicherzustellen, dass sie mit den neuesten Webstandards und -technologien synchronisiert ist.

Das obige ist der detaillierte Inhalt vonEinführung von GraphicsJs, einer leichten leichten Grafikbibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!