WaBis

walter.bislins.ch

JavaScripts: Graph (JSG)

⇒ JSG: Demo 
(Klick: Seite anzeigen)
Das JavaScript Graph Packet (JSG) ermöglicht das Zeichnen und Füllen von 2D-Grafik (Linien, Kreise, Rechtecke, Polygone, Bezier-Kurven, Marker, Text) auf einer Webseite.

Ziel

In meiner Studienzeit hatten wir für das Visualisieren von komplexen mathematischen Formeln Tischrechner (HP) zur Verfügung. Diese konnte man in Basic programmieren. Sie hatten Funktionen zum Zeichnen und Beschriften von Graphen eingebaut. Damit konnte man sehr effizient anschauliche Grafiken erstellen.

Ziel dieses JavaScript Projektes war, diese Funktionalität auf eine Webseite zu bringen. JavaScript ist hervorragend als sehr einfache, aber mächtige Programmiersprache geeigent, mathematische Probleme zu programmieren. Webseiten sind dank meines Wikis sehr schnell erstellt. Es fehlte nur noch eine Möglichkeit zur schnellen grafischen Ausgabe. Diese Möglichkeit habe ich mit dem JsGraph-Modul implementiert.

Vorteile gegenüber Canvas

Das JsGraph Modul ist einfacher zu programmieren als Canvas und stellt viele zusätzlichen Zeichen-Funktionen bereit, z.B. Polygone, Ellipsen, Ellipsenbögen, Html-Texte, Marker, Pfeile. Man kann mit Viewports den Canvas-Bereich in verschiedene Teile einteilen. Für jeden Viewport kann man ein Koordinatensystem angeben. Man braucht also nicht in Canvas-Koordinaten zu zeichnen. Das Modul unterstützt automatisch Displays mit sehr hoher Auflösung (sog. Retina-Displays). Beim Vergrössern eines Browser-Windows wird die Grafik neu berechnet unter Verwendung der neuen Auflösung. Es werden nicht einfach die Pixel skaliert.

Eigenschaften

  • Gratis (GPL), siehe Download
  • Funktioniert auf allen modernen Browsern
  • Unterstützung von Retina-Displays und Subpixel genauem Zeichnen mit Antialias
  • Beliebige viele Canvas auf einer Seite möglich
  • Beliebig viele Viewports auf einem Canvas möglich
  • Abbildung des Wertebereichs auf einen Viewport über die Definition eines Windows
  • Beliebige Clipping-Formen
  • Transformationen wie Scale, Rotate, Move und beliebige Clipping-Formen
  • Grafikelemente: Linien, Polygone, Rechtecke, Kreis- und Ellipsenbögen, Bezier-Kurven, Marker, Pfeile, Html- und Canvas-Texte
  • Farbe, Strichdicke, Füllfarbe, Farbverläufe, Marker- und Textgrösse, Fonts, Text-Attribute beliebig wählbar
  • Funktionen für Gitter, Rahmen, Achsen und Achsenbeschrifungen eingebaut
Weitere Infos zur Seite
Erzeugt Dienstag, 2. Februar 2016
von wabis
Zum Seitenanfang
Geändert Donnerstag, 10. November 2016
von wabis