201018Feb

jQuery: Zeichenfunktion für einfache Grafiken

In manchen Situationen kann es erforderlich sein, kleine Grafiken oder Abbildungen mit JavaScript zu zeichnen. Speziell für das Zeichnen von Graphen oder Diagrammen können Flash- oder JavaScript-Lösungen hilfreich sein. Mehr Kreativität ermöglicht die jQuery Drawing Library von OpenStudio Communication. Die jQuery-Bibliothek zeichnet durch die Angabe von Koordinaten und Winkeln einfache Grafiken im Browser.

jQuery Drawing Library

Zum Einsatz kommt die Canvas-Technik oder SVG, sofern vom Browser unterstützt — das Canvas-Plugin "Explorercanvas" für Internet Explorer ist enthalten.
Eine Ellipse kann so beispielsweise mit folgender Zeile erstellt werden:

  • $("element").drawEllipse(2, 2, 8, 6, {color: "#123456", stroke: 2});

Eine Beschreibung für die Implementierung der Bibliothek findet sich auf der Website des Skriptes. Zu den Zeichenfunktionen gehören Methoden zum Erstellen von Kreisen, Linien, Bögen oder Polygonen. Das Minus stellt die Größe des jQuery-Plugins dar — unkomprimiert schlägt die jQuery Drawing Library etwa 100 KB zu Buche. Die SVG-Bibliothek nimmt dabei einen Teil davon ein.

RSS-Feed abonnieren