Javascript Zeichnungsbibliothek?

Irgendwelche Vorschläge für eine interaktive JavaScript-Zeichnungsbibliothek? Sie müssen nur Linien, Polygone, Texte in verschiedenen Farben zeichnen. IE/Firefox/Opera/Safari kompatibel. In der Tat

0

10 Antworten

Wie oben erwähnt, ist Leinwand der Weg, den Sie gehen sollten. IE unterstützt das Programm nativ nicht, daher müssen Sie ExCanvas herunterladen, um die Kompatibilität mit anderen Browsern zu gewährleisten. Ich würde empfehlen, Ajaxian für einige Projekte zu lesen, die das Canvas-Tag verwenden.

0
hinzugefügt

Auch mxGraph . Dies verwendet keine Exanvas für IE. Excanvas ist viel langsamer als die Verwendung von VML, insbesondere die Wiederverwendung derselben VML-Knoten anstelle des Löschens und das Hinzufügen von DOM-Knoten zum Neuzeichnen. Dies ist oft ein übersehener Punkt, aber Exanvas auf IE Leistung ist einfach schrecklich.

0
hinzugefügt

Raphael is pretty cool for that, and works across browsers since it uses VML (for MSIE) and SVG (for everything else).

0
hinzugefügt
Es unterstützt kein FF 2
hinzugefügt der Autor user121196, Quelle
DANKE, das sieht super aus. werde Raphael benutzen.
hinzugefügt der Autor John Ballinger, Quelle
Verdammt, du hast mich bis zum Schlag geschlagen;)
hinzugefügt der Autor Aeon, Quelle

Zeichnen von Text mit dem Canvas-Tag ist ein großer Schmerz. Ihre Optionen sind die Verwendung von regulären divs, die absolut an den richtigen Stellen positioniert sind, oder das Finden/Schreiben einer Fontlayout-Engine ( Beispiel ) oder warten Sie, bis ein neuer Standard implementiert ist, mit dem Sie Text zeichnen können. SVG geht damit viel besser um.

In IE haben Sie ExplorerCanvas die Leinwand API mit IE eigenen VML-Markup zu simulieren. Native VML kann jedoch Text auf einem Pfad und ähnliche Dinge wie SVG ausführen. Ich denke, theoretisch, wenn Sie komplexe Textverarbeitung wünschen, würden Sie SVG und VML wie die Raphael-Bibliothek, die Dan erwähnte, wollen.

Sie können Flash auch kurz in Betracht ziehen, bevor Sie beginnen.

0
hinzugefügt
In der Tat unterstützt VML nativ Textzeichnungen, und die neuesten Versionen von ExplorerCanvas haben die von WHATWG empfohlenen Textzeichemethoden;) explorercanvas .blogspot.com
hinzugefügt der Autor Fabien Ménager, Quelle
Nur als Update. Text ist jetzt weniger schmerzhaft (2011), es war ziemlich gut für das letzte Jahr. iOS4.1 + unterstützt endlich Text auf Canvases korrekt und ich weiß Android 2.1+ auch. Firefox/Safari/Chrome hatte immer gute Zeichensatzunterstützung und IE9 + macht auch Text in Canvas korrekt.
hinzugefügt der Autor Gabe, Quelle

Überprüfen Sie das jQuery-Zeichen-Plug-in , und Sie können auch den Mozilla Leinwand Referenz und Tutorial .

0
hinzugefügt

Sie können das Canvas-Objekt direkt zum Zeichnen in 2D verwenden. IE benötigt die Excanvas-Bibliothek.

http://developer.mozilla.org/En/Drawing_Graphics_with_Canvas

0
hinzugefügt
sieht aus wie Raphael kann mehr als einfache Boxen und Linien .. raphaeljs.com
hinzugefügt der Autor ina, Quelle
Canvas ist der Weg für etwas mehr als ein paar triviale Boxen oder Linien. Und Excanvas funktioniert überraschend gut, zumindest auf IE 7.
hinzugefügt der Autor dgvid, Quelle
Funktioniert auch großartig mit IE6.
hinzugefügt der Autor Prestaul, Quelle

John Resigs Processing.js ist dafür ein guter Rahmen.

0
hinzugefügt
Wie vergleicht processing.js mit Raphael für statische Grafiken?
hinzugefügt der Autor ina, Quelle
Sieht aus wie IE jetzt unterstützt wird (IE9)
hinzugefügt der Autor yorjo, Quelle
Leider unterstützt die Verarbeitung IE nicht. Das ist ein bisschen schade, sieht aber gut aus.
hinzugefügt der Autor John Ballinger, Quelle

Abhängig davon, wie cross-browser Sie sein müssen und Ihr Ziel die Ausgabe zu machen, können Sie sich das Element Canvas und das zugehörige Javascript ansehen.

Leinwand

0
hinzugefügt
0
hinzugefügt
hinzugefügt der Autor quantumpotato, Quelle
walterzorn.com scheint nicht mehr in der Nähe zu sein. :(
hinzugefügt der Autor Alex Black, Quelle
Das Zeug (Zeichnen durch Anordnen von HTML-Elementen) skaliert nicht besonders gut, aber es funktioniert sicherlich :)
hinzugefügt der Autor Dan, Quelle
Wahr ... Sie würden sicherlich kein CAD-System auf diese Weise bauen, aber es kann ziemlich komplexe Zeichnungen machen, wenn Sie bei orthogonalen Strukturen und Bildern (Linien, Rechtecke, usw.) bleiben und sie etwas mit Bildern aufpeppen. Andere Zeichnungsobjekte werden jeweils mit mehreren DIV-Elementen erstellt.
hinzugefügt der Autor Steve Moyer, Quelle

D3.js

D3.js ist eine JavaScript-Bibliothek zum Bearbeiten von Dokumenten basierend auf   Daten. Mit D3 können Sie Daten mithilfe von HTML, SVG und CSS zum Leben erwecken. D3   Schwerpunkt auf Web-Standards gibt Ihnen die volle Leistungsfähigkeit von modern   Browser, ohne sich an ein proprietäres Framework zu binden, das kombiniert   leistungsstarke Visualisierungskomponenten und ein datengesteuerter Ansatz für DOM   Manipulation.

Werfen Sie einen Blick auf diese Diskussion auch.

0
hinzugefügt
JavaScript - Deutsche Gemeinschaft
JavaScript - Deutsche Gemeinschaft
3 der Teilnehmer

In dieser Gruppe sprechen wir über JavaScript.