Es ist ein Toolchen zu entwerfen, zu entwickeln und zu testen, das grafischen Vektor-Sub-Objekte erstellen, speichern und rendern kann. Das Toolchen soll an ein konkretes Anwendungmodell angepaßt werden. Bearbeitungsreihenfolge:
Bemerkungen: In Verbindung mit Cloud-Computing gibt es eine wachsende Zahl von Internet-basierten Anwendungen, die "grafische Generierungen" erfordern.
Randnotiz von Google-Unternehmensinformationen ggf. mit "cloudigen" Gedanken-Assoziationen:
"Das Ziel von Google besteht darin,
die Informationen der Welt zu organisieren
und allgemein nutzbar und zugänglich zu machen."
Einführendes zur Grafik (Stichworte) steht z.B. bei de.wikipedia Scalable Vector Graphics, Computergrafik, Grafikdesign , Logos, Vektorkunst, CD-Motiven, Postern, Graphische Kunst, Comics, Fraktale, Fraktale und Kunst, Lindenmayer-System, L-Systeme (Beiepiele), Google-SketchUp, Mediengestaltungen, Technische Zeichnung im Bauingenieurswesen und Maschinenbau, CAD beim rechnerunterstützten Zeichnen und Konstruieren, Statistik-Visualisierung, technischen Diagrammen, charts library, Landkarten, Stadtplänen, Flugblätter, Schriftzüge, elektronisches Dashboard (englisch für Armaturenbrett, Instrumententafel), usw.
Ein Wissen um die Bedienung von Grafik-Programmen ist für eine Entwicklung von mauszentrierter, grafischer Software ( Applikationsentwicklungen ) oft nicht hinreichend. Falls erforderlich, können/sollen Grafik-Kenntnissen aufgefrischt werden.
Seit den Anfängen der elektronischen Datenverarbeitung gibt es zahlreiche, kommerzielle, umfangreiche Grafik-Programme, siehe z.B. de.wikipedia Grafiksoftware.
Transformationen sind translate, rotate und scale. Diese entsprechen den folgenden Matrizen:
translate(ti,tj) entspricht
[ 1, 0, 0] [ 0, 1, 0] [ti, tj, 1]
rotate(w) entspricht
[ c, s, 0] mit c = cos(w); s = sin(w); [-s, c, 0] [ 0, 0, 1]
scale(si,sj) entspricht
[si, 0, 0] [ 0, sj, 0] [ 0, 0, 1]
HTML 5 hat keine .getTransform() aber .setTransform(m11, m12, m21, m22, dx, dy)
[m11, m12, 0] [m21, m22, 0] [dx, dy, 1] mit i_neu = i * m11 + j * m21 + dx, j_neu = i * m12 + j * m22 + dy
Anstelle von Device-Koordinaten soll die Bibliothek eine isotrope 2D-Welt unterstützen. Es soll eine robuste, einfach zu nutzende Bibliothek entwickelt werden, die "Befehlsverkettungen" erlaubt. Es soll ein eigens "Design Custem Shape" entworfen und getestet und dynamisch bewegt werden. Es sind hinreichend viele Test durchzuführen. Hier ein Hinweis c2d.txt. Erklärungen in der Veranstaltung.
Zum Experimentieren mit Maus-Ereignissen ist hier eine Maus-Event-Demo 1
Wegen der Rückwärtskompatibilität zu IE 5.5 kann die Bibliothek local.js leicht vereinfacht und zu verbessert werden. Dies ist zu tun, indem nur Fall is_std (nicht obsolet is_ie) verwendet wird. Die neue Bibliothek ist zu testen und zu verwenden.
Es soll HTML5 und Cava verwendet werden. Grundsätzlich tellen sich folgende Fragen:
Canvas2DContext hat u.a. Funktionen für 'arc','arcTo','beginPath','bezierCurveTo','clearRect','clip', 'closePath','drawImage','fill','fillRect','fillText','lineTo','moveTo', 'quadraticCurveTo','rect','restore','rotate','save','scale','setTransform', 'stroke','strokeRect','strokeText','transform','translate' und Properties, wie z.B. 'canvas','fillStyle','font','globalAlpha','globalCompositeOperation', 'lineCap','lineJoin','lineWidth','miterLimit', 'shadowOffsetX','shadowOffsetY', 'shadowBlur','shadowColor', 'strokeStyle','textAlign','textBaseline'
Hier ist ein Demo- Beispiel, wie Canvas-Funktionalitäten auf Strukturierte-Daten abgebildet werden können.
Das Rendern der Daten soll im wesentlichen durch eine Funktion draw_shape(obj) erfolgen. Die Properties von obj steuern die Canvas-Funktionen.
Weil die Formulare i.a. Strings bereit stellen, ist es günstig, auch die "render-steuernden-Daten" überwiegend mit (diesen) Strings aufzubauen.
// Beipiel für eine ctx.save()-ctx.restore()-Klammerung // 't 20 0' bewirkt ctx.translate(20,0) // 'r 15 200 200' bewirkt ctx.rotate(Math.PI / 180) * 15) um den Punkt (200,200) // 'push' bewirkt ctx.save(); // 'pop' bewirkt ctx.restore(); draw_shape({id:'canvas0',transf:'t 20 0|r 15 200 200 |push'}); // ... mehrere Figuren werden gedreht ... draw_shape({id:'canvas0',transf:'pop'});
Hinweise zu den Bezeichnern:
c_ steht für das Wort "Canvas"
f_ steht für das Wort "Figur"
name: steht für die Bezeichnung des Objektes
mod: steht für den auszuführenden Rendervorgang
ij: steht für eine Folge von x-y-Gerätekoordinaten, die in einem String sind
Wie kann eine ebene Figur auf ein Objekt abgebildet werden?
// Beipiel für ein Objekt o1 var o1 = { name : '3 grüne schräge Linien', mod : 'LINES', // Folge von einzelnen Linien ij : '200 140 100 240 220 140 120 240 240 140 140 240', id : id, // Canvas-Idetifizierer ctx : ctx, // Canvas-Context ctx_width : ctx.canvas.width, ctx_height : ctx.canvas.height, fill_style : '#999', stroke_style: '#0f0', stroke_width: '5', shadow_style: '5 5 4 rgba(55,0,0,0.5)' // i j blur col };
Hier ist ein Demo-Beispiel, wie Canvas-Funktionalitäten auf Strukturierte-Daten abgebildet werden können.
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine Mo 12.00 Uhr