Aktueller Stand der Javascript Canvas-Bibliotheken? [geschlossen]


90

Ich habe über HTML-Canvas-Bibliotheken recherchiert und bin auf diese Frage gestoßen. Wie ist der aktuelle Stand der Technik in HTML-Canvas-JavaScript-Bibliotheken und -Frameworks? Das wurde 2010 gefragt. Die beste Antwort war Fabric.js. Nachdem ich ein bisschen mehr recherchiert hatte, stieß ich auf http://www.html5canvastutorials.com/, das Tutorials zu KineticJs enthält, die sich durch mehrere Leinwände aus Gründen der Geschwindigkeit auszeichnen. Ein bisschen mehr Forschung später ergab, dass Canvas-Bibliotheken in Bezug auf Geschwindigkeit und Funktionen allgegenwärtig zu sein scheinen. Wie ist der aktuelle Stand der JavaScript Canvas-Bibliotheken und Frameworks heute? Hat man sich durchgesetzt?

EDIT: Da sich Bibliotheken ständig ändern und in letzter Zeit viele Leute hierher gekommen sind, um Neuigkeiten und Informationen über neue Bibliotheken zu erhalten, habe ich die Frage geändert, um zeitloser zu sein.


2
absolut. Ich glaube, die Optionen sehen folgendermaßen aus: 2d-context -> KineticJS, Fabric.js, Paper.js oder Easel.js. 3d-context (webgl) -> Three.js
Eric Rowell

1
Sie können den Link von kangax zum Vergleich von Canvas-Bibliotheken überprüfen. Reposting hier docs.google.com/spreadsheet/…
Ericbowden

4
Ich bin überrascht, dass diese Frage noch nicht geschlossen wurde, da so ziemlich alles hier im Allgemeinen geschlossen wird. Ich möchte antworten, aber ich habe zu viel Angst (lesen Sie "verängstigt"), da dies als nicht zum Thema gehörend angesehen werden könnte. Wenn Sie die Frage als "Was sind Ähnlichkeiten / Kompromisse" umformulieren, könnte ich meine zwei Cent hinzufügen (lesen Sie "Antwort").
Puk

4
Ich fühle mich genauso wie @puk. Darüber hinaus finde ich die semantische Kluft zwischen dem, was im Wesentlichen nur "offen" ist und dem, was als "nicht konstruktiv" gekennzeichnet ist, amüsant. Es bedeutet grob gesagt, dass Fragen, für die eine einzige irreduzible Antwort nicht möglich ist, im weltweit beliebtesten und umfassendsten Repository für Programmierwissen nicht berücksichtigt werden sollten. Ich verstehe, dass sie nicht zu einem guten „Q + A“ passen, aber warum sie nicht einfach als „sehr subjektiv“ markieren, die Wiederholungspunkte begrenzen und sie offen halten… etwas.
Mark Fox

1
Ich wäge nur für SO ab, dass auch ich wirklich irritiert bin über das ständige Schließen hilfreicher Fragen, nur weil sie subjektiv sind. Na und!? Es ist verdammt nützliches Zeug.
Iain Duncan

Antworten:


80

Haftungsausschluss: Ich bin der Autor von Fabric.js .

Ich würde sagen, dass Easel.js, Fabric.js und Paper.js derzeit zu den am häufigsten verwendeten gehören. Ich beurteile die Anzahl der Github-Beobachter für jedes Repository, das Diskussionsvolumen in ihren Google-Gruppen und wie oft ich höre, dass sie als Canvas-Bibliotheken auf Twitter verwendet werden.

Dies sind auch diejenigen mit mehr oder weniger anständiger Dokumentation, Beispielen / Demos, Diskussionsgruppen und Komponententests (der Teststatus in den meisten anderen Canvas-Bibliotheken ist ziemlich traurig).

Ich verwalte auch diese Vergleichstabelle verschiedener Canvas-Bibliotheken , in der Sie sehen können, wie kürzlich die Bibliothek aktualisiert wurde, wie groß sie ist, IE <9 oder node.js unterstützt und vieles mehr.


Ihr Vergleich enthält viele Informationen, die jedoch öffentlich bearbeitet werden können und eingeschränkt werden sollten, da einige andere Benutzer diese falsch bearbeiten. Ich brauche eine Hilfe. Wird kineticjs nodjs nicht unterstützen? und können Sie ein Beispiel wie Windows-
Malprogramm

Es ist nicht öffentlich bearbeitbar
Kangax

1
So glücklich, dass ich diesen Beitrag gefunden habe! Früher wurde mit Kinetic gearbeitet, aber es ist noch nicht ausgereift. Dann versuchte es mit Staffelei, aber es ist zu schwer. Endlich zu Fabric gewechselt und es ist großartig!
MeLight

@ Kangax Entschuldigung für das Miss Verständnis, können Sie mir ein Beispiel wie Windows-
Malprogramm

@ Thirumalaimurugan hier gehen Sie: jsfiddle.net/fabricjs/nXmTC/1
Kangax

66

EDIT: KineticJS wird nicht mehr aktiv gewartet.

Haftungsausschluss: Ich habe KineticJS erstellt

KineticJS geht es eigentlich ziemlich gut. Sie finden den Quellcode bei Github , wo er derzeit von 2180 Personen gespielt wird.

Es kann Tausende von gleichzeitigen Formen verarbeiten:

10.000 Drag & Drop-Stresstest: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

10.000 Formen mit QuickInfos: http://www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

Es bietet eine sehr gute Ereignisunterstützung, einschließlich mobiler Ereignisse, und eine ziemlich solide Suite von Hunderten von Komponententests, sodass sich die Codebasis ziemlich solide anfühlt.

kangax: PS tolle Arbeit mit Fabric.js! Abgesehen von KineticJS (natürlich) sind meine beiden anderen Lieblingsbibliotheken Stoff und Papier.


7
Ich habe mir nur die Demos angesehen und die Leistung sieht ziemlich großartig aus! Ich bin auch froh zu hören, dass Sie Unit-Tests haben. Ich sehe, Sie erlauben die Erstellung mehrerer Ebenen. Das ist schön. In Stoff optimieren wir auf die gleiche Weise, haben jedoch nur zwei Ebenen - eine zur Auswahl, eine zum Zeichnen - und intern (Benutzer können nicht mehr erstellen). Irgendwie habe ich Kinetic beim Erstellen einer Bibliotheksvergleichstabelle verpasst. Wir sollten das beheben :)
Kangax

6
Update: KineticJS ist jetzt in github: github.com/ericdrowell/KineticJS
Eric Rowell

7
Wie vergleicht sich KineticJS mit EaselJS? Wann sollte man was verwenden?
geeky_monster

1
Ich möchte darauf hinweisen, dass KineticJS auch SVG-Vektoren über die Form Kinetic.Path
Eric Rowell

2
@EricRowell Mate Ich liebe KineticJS, seine Geschwindigkeit, die Ehe mit GSAP, aber was bringt mich dazu, den Kopf zu drehen. Gibt es eine Möglichkeit, KineticJS-Objekte wie in FabricJS frei zu transformieren? Hier ist der Link, der auf das verweist, was ich sagen möchte : Fabricjs.com/customization Ich möchte FabricJs nicht als sehr langsam und als geringe Leistung verwenden, die aus verschiedenen Komponententests hervorgeht. Ich freue mich sehr darauf, einen Weg zu finden, um Objekte in KineticJS frei transformieren zu können, da dies das Leben so viel einfacher machen würde. Vielen Dank, Praney
Praneybehl

62

Für die jüngsten Leser habe ich ab Januar 2013 Folgendes bewertet:

  • Kinetisch
  • Stoff
  • Papier
  • Staffelei

Mit "ausgewertet" habe ich mehr als nur die Dokumente gelesen. Ich habe eine Prototyp-App erstellt.

Ich habe mit Fabric angefangen, weil es die größte Community zu haben schien und dachte, dass es meine Lösung sein würde. Aber ich habe Fabric aus folgenden Gründen aufgegeben:

  • seltsame und undokumentierte API-Inkonsistenzen, die einen Großteil meiner Zeit unnötig verbrannten.
  • Unterstützung für inkonsistente Zeigerereignisse. Insbesondere betrachtet Fabric einen "Pfad" nicht als ein echtes Formobjekt, das auswählbar und beobachtbar ist. Dies entsprach nicht meinen Anforderungen, da interaktive Pfade eine wichtige Anforderung meiner App sind.
  • Hinter den Kulissen werden Übersetzungen zum Canvas hinzugefügt, um Objekte zu positionieren. Für mich versucht Fabric in dieser Hinsicht zu klug zu sein, ohne dem Entwickler klar zu machen, was er tut.
  • zu starke Meinung darüber, wie das Verschieben, Ändern der Größe und Drehen der Interaktivität funktioniert. In vielerlei Hinsicht ist es großartig, diese Funktionalität in das Framework integriert zu haben, aber in meinem Fall war ich mit der Art und Weise, wie sie implementiert wurde, nicht einverstanden, was bedeutete, dass ich sie ohnehin selbst neu implementieren musste.
  • spärliche Dokumentation - viele Fälle, in denen die Dokumentation einer Methode die Form hat: "setX (Y) - setze das X auf Y" :-)

Ich habe mir Paper angesehen und bin nicht zu weit gekommen. Es schien mir zu stumpf und liegt auch zwischen zu Hockern IMO - es ist zu viel Visualisierungsbibliothek, um ein einfaches Objektmodell für Canvas zu sein, aber es reicht nicht aus, um mit D3 zu konkurrieren. Außerdem war die Dokumentation wieder nicht besonders zugänglich.

Ich denke, Staffelei macht wahrscheinlich sehr viel Sinn, wenn Sie einen Flash / ActionScript-Hintergrund haben, aber ich nicht. Außerdem schien es für meine Anforderungen zu spielorientiert zu sein. Der Nagel im Sarg war wieder Dokumentation - nicht genug und in nicht standardisiertem Format präsentiert.

Also habe ich mich für Kinetic entschieden, weil:

  • wirklich reichhaltige und klare Tutorials und Beispiele
  • API-Funktionen machen das, was sie genannt werden und sind weitgehend zu erraten - schnellere Produktivität, flachere Lernkurve
  • ist ziemlich klar darüber, was es tut und was nicht - es ist nicht so reich wie einige der anderen, aber das ist ein Vorteil; es macht weniger Dinge, aber es macht sie besser
  • Wege sind erstklassige Bürgerformen, wie jede andere Form, die für meine Anforderungen wesentlich war.

Kinetic ist keineswegs perfekt und es gab einige Male, in denen ich tief in den Quellcode eintauchen musste, um herauszufinden, was tatsächlich unter der Decke vor sich geht. Außerdem vermisse ich das SVG-Parsen und die Ausgabe von Fabric.


1
Danke für diese Antwort, hat mir viel Zeit gespart. Ich werde mit Kinetic gehen und hoffe, dass Sie herausfinden, was Sie bereits gesagt haben.
Bashevis

Ich habe einen nicht wissenschaftlichen Benutzertest der bereitgestellten Drag-and-Drop-Demos für die oben genannten Bibliotheken auf iPad3 und Samsung Galaxy Tab2 durchgeführt. KineticJS hat sich auch hier als klarer Gewinner erwiesen, da es reaktionsschneller und präziser in der Touch-Positionierung ist.
Per Quested Aronsson

1
Ich bewerte beides und im Moment scheint Fabricjs aufrichtiger vollständiger und gut dokumentiert zu sein.
Albanx

9
Jeremy, ich würde gerne mehr über API-Inkonsistenzen in Fabric erfahren. Ich versuche es so intuitiv wie möglich zu gestalten. Wenn also etwas noch komisch ist, würde ich mich definitiv darum kümmern wollen. Können Sie hier ein Ticket einreichen oder erwähnen? Die Dokumente haben sich seit Januar verbessert, obwohl sie immer noch nicht so gut sind, wie ich es gerne hätte. Starke Meinung zur Interaktivität - das kann man wohl sagen, obwohl man ziemlich viel optimieren kann. Was genau wolltest du anders? Schließlich Zeigerereignisse - nicht sicher, was Sie meinen. Pfad ist sicherlich eine echte Form: Fabricjs.com/quadratic-curve
Kangax

23

Ich kann pixijs nur empfehlen. Es ist eine Hochleistungs-Canvas-Bibliothek.

Pixi.js ist ein 2D-WebGL-Renderer mit einem nahtlosen Canvas-Fallback, der es ermöglicht, mit allen modernen Browsern sowohl auf dem Desktop als auch auf dem Handy zu arbeiten.

http://www.goodboydigital.com/pixi-js-is-out/


3
Ab Juli 2014 scheint dies die beste Leinwandbibliothek auf dem Markt zu sein. Mit 4.000 Leuten war es auf Github zu sehen und es wird von großen Unternehmen und Agenturen verwendet. pixijs.com/projects wie Google.
Vennsoh
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.