Top 8 JavaScript-Zeichenbibliotheken: Kostenlos und Open-Source

Bilder und Animationen sind ansprechend, machen Spaß und eignen sich perfekt für die Vermittlung von Informationen, die allein mit geschriebenen Worten nur schwer zu verarbeiten und zu verstehen sind. Dies gilt sowohl für Fotos, die mit der Kamera aufgenommen wurden, als auch für Zeichnungen, die am Computer erstellt wurden. In diesem Artikel zeige ich Ihnen einige der besten kostenlosen und Open-Source-JavaScript-Zeichenbibliotheken.

Es gibt viele kostenlose Bibliotheken, die HTML5 canvas-Elemente und Technologien wie SVG verwenden, um alles, was Sie wollen, im Browser zu zeichnen. Mit den von diesen Bibliotheken bereitgestellten APIs können Sie nicht nur zeichnen, sondern auch alles, was Sie erstellen, animieren.

Lass uns anfangen.

Zwei .js

Two.js ist eine sehr beliebte und benutzerfreundliche Bibliothek zum Zeichnen von 2D-Formen mit JavaScript. Es ist gut dokumentiert und Sie verbringen nur sehr wenig Zeit damit, die Grundlagen zu erlernen.

Zwei Dinge, die Sie an dieser Bibliothek lieben werden. Erstens hat es nichts mit dem Rendern zu tun. Dies bedeutet, dass Sie dieselbe API verwenden können, um Grafiken über SVG oder WebGL auf Canvas-Elementen zu zeichnen. Diese Funktion hat mir viele Male geholfen, wenn ich diese Bibliothek verwende. Zweitens verfügt die Bibliothek auch über eine integrierte Funktionalität, mit der Sie alles, was Sie auf dem Bildschirm zeichnen, animieren können.

Sie können auch einfache Spiele einfacher erstellen, indem Sie auf verschiedene Tastatur- und Mausereignisse hören, um die Größe, Position und Farbe verschiedener auf dem Bildschirm gezeichneter Elemente zu aktualisieren.

Das obige Beispiel von Jono Brandel verwendet Two.js, um eine animierte Wellenstraße auf einer Leinwand zu erstellen. Weitere interessante Projekte finden Sie auf der offiziellen Website.

Paper.js

Die Paper.js-Bibliothek ist eine weitere kostenlose Open-Source-Lösung für Leute, die mit JavaScript zeichnen möchten. Diese Bibliothek verwendet canvas, um ihre Zeichenanimation zu verwalten. Der Schwerpunkt liegt jedoch eher auf vektorbasiertem Zeichnen als auf Rasterbildern.

Es gibt zwei Möglichkeiten, mit dieser Bibliothek Grafiken zu erstellen. Sie können weiterhin normales JavaScript verwenden oder die Verwendung einer modifizierten Version der Bibliothek namens PaperScript in Betracht ziehen. Die Verwendung von PaperScript erfordert, dass Sie etwas mehr Zeit damit verbringen, sich mit der Verwendung vertraut zu machen. Es bietet jedoch einige Vorteile, beispielsweise einfachere Berechnungen für die in der gesamten Bibliothek verwendeten Point 和 Size-Objekte.

Mit dieser Bibliothek können Sie viele interessante Dinge tun, darunter Funktionen wie verschachtelte Ebenen, einfache Pfade und zusammengesetzte Pfade. Sie können mit der Bibliothek auch gezeichnete Kurven glätten. Sie können auch Füllmethoden verwenden, um die Überlappung verschiedener Elemente optisch ansprechender zu gestalten.

Der obige CodePen von Alberto Jerez verwendet eine Reihe dieser Ebenen und Compositing-Funktionen, um einen interessanten Effekt zu erzeugen, mit Kreisen, deren Form sich ändert, wenn sie kollidieren.

P5.js

Die p5.js-Bibliothek ist eine gute Wahl für diejenigen, die eine Bibliothek suchen, die keine steile Lernkurve hat, aber bei Bedarf sehr komplexe Systeme erstellen kann. Auf der Einstiegsseite von P5.js auf der offiziellen Website finden Sie ein Funktionsbeispiel. Mit nur wenigen Codezeilen kann überall dort, wo sich die Maus bewegt, ein Kreis gezeichnet werden.

Diese Bibliothek ist von der beliebten Java-Verarbeitungsplattform inspiriert und verfügt über eine aktive Community, die Ihnen helfen kann, wenn Sie nicht weiterkommen. Es stehen zahlreiche Beispiele zur Verfügung, die die Leistungsfähigkeit dieser Bibliothek veranschaulichen. Sie können eine große Hilfe sein, wenn Sie nach Inspiration suchen. Sie können damit lernen, wie man Physik simuliert, Partikelsysteme erstellt und auf verschiedene Benutzereingaben reagiert.

Johan Karlssons obiges Beispiel verwendet p5.js, um einige kleine Insekten zu erstellen, die sich zufällig auf der Leinwand bewegen. Durch Klicken auf eine beliebige Stelle in der Demo wird ein neuer Satz zufällig platzierter Mücken erstellt.

Kangwa

Die Konva-Bibliothek unterscheidet sich ein wenig von den Bibliotheken, die ich bisher erwähnt habe. Sie können damit grundlegende Formen auf die Leinwand zeichnen, aber es ist durchaus möglich, noch viel mehr zu tun. Sie können leistungsstarke Animationen und Übergänge hinzufügen, um alles, was Sie auf der Leinwand zeichnen, optisch ansprechender zu gestalten.

Das Besondere an dieser Bibliothek ist, dass Sie Event-Handler an alles anhängen können, was Sie auf dem Bildschirm zeichnen. Sie können zuvor gezeichnete Objekte auf der Leinwand auswählen und verschieben. Sie können ausgewählte Objekte auch skalieren und drehen, ohne dass sich dies auf andere gezeichnete Objekte auswirkt.

Diese Funktionen sind perfekt für diejenigen, die eine Bibliothek benötigen, die ihnen beim Erstellen einfacher Skizzieranwendungen und Drag-and-Drop-Spiele auf der Leinwand hilft. Mithilfe von Gruppen können Sie mehrere Formen gemeinsam verschieben und bearbeiten.

Das einfache Puzzlespiel oben wurde mit Konva von Jakub Beneš erstellt. Die Grundidee besteht darin, eine Box mit einer etwas anderen Farbe als die anderen zu wählen.

Fabric.js

Die Fabric.js-Bibliothek basiert auf der gleichen Philosophie wie Konva und verfügt über viele der gleichen Funktionen. Tatsächlich scheint Fabric.js beliebter und aktiver zu sein als Konva.

Diese Bibliothek bietet ein interaktives Objektmodell, das auf dem canvas-Element aufbaut. Das bedeutet im Grunde, dass Sie verschiedene Objekte wie geometrische Formen und Bilder auf die Leinwand zeichnen können, um später mit ihnen zu interagieren. Diese Bibliothek bietet Ihren Benutzern die Möglichkeit, alles, was sie auf der Leinwand zeichnen, zu verschieben, zu skalieren und zu drehen, sodass Sie einfache Mockup-Anwendungen, Meme-Generatoren und mehr erstellen können.

Versuchen Sie, in Martin Florians CodePen oben Text zu ziehen oder Ihre eigenen Formen und Bilder auf die Leinwand hinzuzufügen. Auf der Homepage der Bibliothek werden weitere Funktionen vorgestellt, z. B. Handzeichnungen und die Verwendung von Mustern und Farbverläufen zum Füllen von Formen.

Snap.svg

Die Snap.svg-Bibliothek ist eine beliebte Wahl für Leute, die die Leistungsfähigkeit von SVG und JavaScript nutzen möchten, um auflösungsunabhängige Vektorgrafiken zu erstellen. Die Bibliothek ist Open Source und die Nutzung völlig kostenlos.

Es verfügt über eine saubere und leistungsstarke API, die alle vorhandenen SVG-Inhalte manipulieren und animieren sowie SVG-Inhalte dynamisch generieren kann. Die Bibliothek wurde mit Blick auf die Unterstützung von IE9 und höher entwickelt. Dies erleichtert Entwicklern die Bereitstellung von Funktionen wie Masken, Ausschnitten und Mustern, ohne sich Gedanken über die Unterstützung älterer Browser machen zu müssen.

Die benutzerfreundliche Bibliothek bietet viele Möglichkeiten zum Erstellen grundlegender Formen und zum Anwenden von Eigenschaften mithilfe von Schlüssel-Wert-Paaren wie fill、Stroke 和 StrokeWidth. Sie können Elemente auch gruppieren, um Änderungen an mehreren Elementen gleichzeitig vorzunehmen. Verschiedene Objekte können einfach über den Namen oder entsprechende CSS-Selektoren referenziert werden. Schauen Sie sich das folgende Beispiel von Ronan Levesque an.

SVG.js

Wenn Sie SVG mit JavaScript zeichnen und animieren möchten, ist die Verwendung der SVG.js-Bibliothek eine weitere beliebte Option. Ziel der Bibliotheksentwickler ist es, sie so klein und schnell wie möglich zu machen und gleichzeitig eine nahezu vollständige Abdeckung der SVG-Spezifikation zu gewährleisten. Es gibt keine Abhängigkeiten und die Bibliothek kann unabhängig genutzt werden.

Sie können die Leistung im Vergleich zu Vanilla JS und Snap.svg auf der Homepage der Website sehen. Sie können Grundformen erstellen und diese mithilfe integrierter Funktionen zum DOM hinzufügen. Diese Bibliothek verfügt über verschiedene Funktionen, mit denen Sie das Erscheinungsbild von allem, was Sie auf dem Bildschirm zeichnen, ändern können. Es unterstützt auch Ereignis-Listener, sodass Sie die Möglichkeit implementieren können, jedes SVG-Element basierend auf der Benutzerinteraktion zu ändern oder zu animieren.

Versuchen Sie, die Werte verschiedener Optionen im obigen CodePen von George Francis zu ändern, um mithilfe von SVG.js einzigartige Muster zu generieren.

JS-Sequenzdiagramm

Die letzte Bibliothek auf unserer Liste spricht vielleicht nicht die Massen an, erfüllt aber einen einzigartigen Zweck und ist erwähnenswert. Waren Sie schon einmal an einem Projekt beteiligt, bei dem Sie ein UML-Sequenzdiagramm zeichnen mussten? Wenn Sie damit einverstanden sind, dann könnte die JS Sequence Gallery genau das Richtige für Sie sein.

Diese Bibliothek erstellt mit JavaScript schnell ein einfaches SVG-basiertes Sequenzdiagramm für Sie. Sie müssen ihm lediglich eine gültige Textdarstellung geben. Eine Sache, die Ihnen vielleicht nicht gefällt, ist, dass diese Bibliothek auf eine Reihe anderer Bibliotheken angewiesen ist, um ordnungsgemäß zu funktionieren. Dazu gehören Snap.svg, Web Font Loader, underscore.js und optional jQuery.

Allerdings ist diese Bibliothek immer noch eine gute Wahl für alle, die solche Diagramme schnell generieren möchten, ohne sich Gedanken darüber machen zu müssen, viel Code zu schreiben. Sie können auch Ihre eigenen CSS-Stile anwenden, um die Farbe und Füllung verschiedener Komponenten zu ändern. Schauen Sie sich die E T-Demo oben an und versuchen Sie, den Code zu bearbeiten, um zu sehen, wie sich das Diagramm ändert.

Abschließende Gedanken

Es gibt viele kostenlose Bibliotheken zum Zeichnen von Objekten mit JavaScript. Mein Ziel in diesem Artikel ist es, einige beliebte Bibliotheken hervorzuheben, die über einen schönen Funktionsumfang verfügen, der einzigartige Probleme löst. Hoffentlich hat Ihnen dieser Artikel bei der Auswahl einer Bibliothek geholfen, die Elemente auf Leinwand zeichnen und animieren sowie SVG verwenden kann.

Das obige ist der detaillierte Inhalt vonTop 8 JavaScript-Zeichenbibliotheken: Kostenlos und Open-Source. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!