Rechteck-Berechnung mit Javascript + SVG

(Javascript + Live-Objekt-Grafik)


Amateur-Version


Merkmale

Die Programmierung folgt dem auf einer anderen Seite detailliert vorgestellten Beispiel der → Javascript-Amateur-Lösung.
Hier wird lediglich mit minimalem Aufwand eine Objekt-Grafik des berechneten Rechtecks gezeichnet.


SVG

Die Grafik wird als <svg>-Element in den HTML-Quelltext eingefügt. Dieses Element kann man seit der Version → HTML‑5 'Inline' in HTML einfügen. Das SVG-Element wird im Beispiel zum besseren Verständnis strichliert umrandet.

Darin ist ein <rect>-Element (Rechteck) mit einem eindeutigen id-Attribut enthalten. Die Eigenschaften fill (Farbe der Füllung) und stroke (Farbe des Randes) werden mit → CSS festgelegt.

Details und Beispiele zum Thema → SVG



Das Programm berechnen() wird bei jeder Änderung der Vorgabe-Daten ausgeführt. Damit werden die Vorgaben gelesen, die Ausgabe-Daten berechnet, im Ausgabe-Formular angezeigt und die Grafik gezeichnet. Die Teil-Aufgaben werden zur besseren Übersicht von eigenen Programmen ausgeführt:

function berechnen() {
daten_lesen();
daten_berechnen();
daten_schreiben();
daten_zeichnen();
}


Besonderer Wert wurde auf diese Eigenschaften gelegt:



function daten_zeichnen() {
var robj = document.getElementById('rechteck');
robj.setAttribute('y',250-b);
robj.setAttribute('height',b);
robj.setAttribute('width',a);
}


Als Höhe der Objekt-Grafik ist im Beispiel 250px vorgegeben.
Daher wird als Startpunkt des Rechtecks nicht (x=0,y=0) verwendet sondern (x=0,y=250-b)
Von dort ausgehend wird das Rechteck nach rechts und unten gezeichnet.

Profi-Version


Das Ziel dieses Beispiels ist, einige typische Unterschiede zwischen der korrekten, aber einfachen Lösung einer Aufgabe und einem professionellen Programm zu zeigen.


Entwicklung

Das Programm ist so kurz und einfach wie möglich.
Es werden wieder-verwendbare Elemente (Objekte, Methoden, Funktionen, ...) überall verwendet, wo das sinnvoll ist.
Hier wird z.B. das Javascript-Objekt Rectangle (→ Quelltext) zur Verwaltung und Berechnung der Eigenschaften verwendet.
Das Programm wird so angelegt, dass man es bei Weiter-Entwicklung der verwendeten Resourcen (z.B. neue Versionen von Objekten, Funktionen, ...) nicht ändern muss.
Die verwendeten Methoden und Funktionen werden besonders sorgfältig gegen alle denkbaren Fehler und Sonderfälle abgesichert.


Hinweise

Das gezeigte Beispiel kombiniert die auf einer anderen Seite vorgestellten Beispiele → Objekt-orientierte Lösung und → Eingabe mit Schieberegler mit → Inline Objekt-Grafik.

Die gestellte Aufgabe wird mit dieser Version am besten gelöst.
Eine ähnliche Lösung kann man auch mit → Canvas an Stelle von SVG programmieren. Die Grafik ist allerdings nach ihrem Character eine Objekt-Grafik und keine Pixel-Grafik, daher ist die hier vorgestellte Version mit SVG vorzuziehen.