Ja, auch diese Woche werde ich Bezug auf den letzten bzw. vorletzten Eintrag nehmen… Denn auch diese Woche geht es um Tools, die uns helfen mit hochauflösenden Bildschirmen umzugehen. Im Grunde geht es um „SVG“-Grafiken und ein kleines Javascript Framework, welches uns diese zaubert 😉

SVG mit Bonsai JS

Diese Woche geht es also um eine weitere Möglichkeit Grafiken skalierbar zu machen. Vorneweg: Diese Technik ist nicht für alle Browser geeignet – Wenn man Wikipedia glauben kann, dann schaut die Kompatibilität in etwa folgendermaßen aus:

Webbrowser	Version	SVG 1.1 Unterstützung
Opera	11.01	95,44%
Safari	5.0	82,48%
Chrome	10.0	89,23%
Firefox	4.0	82,30%
Internet Explorer	9	59,64%

Die höheren Versionen werden die Standards wohl entsprechend besser unterstützen 😉

Was genau sind „SVG“ Grafiken?

SVG ist die Abkürzung für Scalable Vector Graphic und basiert, anders als JPG, PNG, GIF & Co. nicht auf Pixeln sondern auf Vektoren – Genau wie Schriftarten. Dadurch bekommen wir eine nicht-gerasterte Grafik, die sich endlos skalieren lässt.

Kann ich SVGs einfach so benutzen?

Kurz und Knapp: Ja. Allerdings ist es möglich das einige der Browser nicht alle Features unterstützen (siehe Tabelle oben oder den Wikipedia-Eintrag).

Wie sieht eine SVG Datei aus?

SVG-Grafiken basieren auf XML, daher ist die Syntax für uns nichts neues – Ein großer Pluspunkt!
Hier sehen wir eine Beispielgrafik, die ich mir bei Wikipedia ausgliehen habe:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="350px" height="230px" viewBox="0 0 350 200">
    <!-- Anschlüsse links und rechts -->
    <line x1="0" y1="100" x2="350" y2="100" stroke="black" stroke-width="10px"/>
    <!-- Das Rechteck -->
    <rect x="50" y="50" width="250" height="100" fill="white" stroke="black" stroke-width="10px"/>
    <!-- Der Schleifer -->
    <line x1="90" y1="185" x2="250" y2="25" stroke="black" stroke-width="8px"/>
    <!-- Die Pfeilspitze -->
    <polygon points="250 0 200 13 250 25" transform="rotate(135 245 20)"/>
</svg>

Dieser Code stellt, wenn er korrekt dargestellt wird, das Zeichen für einen elektronischen „variablen Widerstand“ dar:

Bzw. als JPG Grafik, für alle die es nicht sehen können:

SVG Grafiken können, genau wie Elemente aus dem DOM animiert bzw. zur Laufzeit verändert werden… Doch dafür benötigen wir Javascript.

Bühne frei für Bonsai JS!

An dieser Stelle komme ich endlich zum Framework, das ich im Titel bereits vorgestellt habe: Bonsai JS. Bonsai JS selbst besteht dabei aus zwei Komponenten: Der Grafik-API und einem SVG-Renderer. Findige Entwickler können sich also auch eigene Renderer (z.B. Canvas?) entwickeln… Doch darauf möchte ich Heute nicht weiter eingehen – Viel mehr möchte ich erklären, wieso Bonsai ein tolles Tool ist!

Objekt Orientierung!

Bonsai bietet uns eine sehr schöne und saubere API um allerlei Dinge anzustellen – Angefangen bei der Darstellung von einfachen Formen und Farben bis hin zu komplexen Polygon-Grafiken und Animationen! In der durchgängigen Dokumentation findet man viele einfache und erklärte Beispiele. Außerdem gibt es da noch Orbit – Den Hauseigenen Online Editor.

Code Beispiele!

Das Beispiel von oben würde, mit Bonsai erstellt, so aussehen:

new Path([0, 100, 350, 100])
   .addTo(stage)
   .stroke('black', 10);

new Rect(50, 50, 250, 100)
   .addTo(stage)
   .fill('white')
   .stroke('black', 10);

new Path([90, 185, 250, 25])
   .addTo(stage)
   .stroke('black', 8);

new Path([250, 0, 200, 13, 250, 25])
    .addTo(stage)
    .fill('black')
    .setOrigin(245, 20)
    .attr('rotation', Math.PI*.75);

Schaut doch gut aus, oder? Der Vorteil von Bonsai ist nun natürlich das wir die SVG Grafik mit allerlei Spielereien zum „Leben“ erwecken können – Zum Beispiel mit einem Event, das auf unsere Mausbewegung reagiert und das Quadrat rot einfärbt:

// ...

new Rect(50, 50, 250, 100)
   .addTo(stage)
   .fill('white')
   .stroke('black', 10)
   .on('mouseover', function() {
       this.fill('red');
   })
   .on('mouseout', function() {
       this.fill('white');
   });

// ...

Fühlt sich beinahe so an als wenn wir mit HTML und jQuery arbeiten, oder 😉 ?

Klasse, ich will mehr!

Kein Problem, auf der offiziellen Homepage gibt es einige interaktive Demos bei denen ihr die Power von Bonsai austesten könnt.

Fazit

Ehrlich gesagt konnte ich mir Bonsai JS, aus Zeitgründen, nur Oberflächlich anschauen und wenig damit experimentieren… Doch es macht, trotz der Versions-Nummer 0.4.1 einen soliden Eindruck. Lediglich die Debug-Meldungen könnten ggf. etwas ausführlicher sein (oder deaktivierbar?).
Ich werde mich bei meinem nächsten Projekt hoffentlich an dieses Framework erinnern… Es macht bestimmt eine gute Figur bei animierten Logos oder sonstige Grafiken 🙂 Es kribbelt mir schon in den Fingern!

Schaut es euch an und sagt mir, was ihr davon haltet – Ich freue mich über jegliche Kommentare!

Bis zur nächsten Woche wünsche ich euch einen guten Start in den Frühling und natürlich „Happy Coding!“