ESA 2012.A5: Vektor-Grafik Canvas-Bibliothek, Maus-Events, grafische Sub-Objekte

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:

  1. Einführendes und grafische Grundkenntnisse
  2. Matrizen-Transformationen ( Wie? Wozu? ... und Mathe? )
  3. Welt-Vieport-Abbildung ( 2D-Welt auf 2D-Canvas )
  4. Maus-Events ( relative nativ Koordinaten )
  5. Speichern von Mauskoordinaten ( lokal, Server )
  6. Scenarien für App-Entwürfe
  7. Beispiel für Datenstrukturierung und Rendervorgang
Zu 1: Einführendes und grafische Grundkenntnisse Basis-Wissen

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.

Zu 2: Matrizen-Transformationen Wie? Wozu? ... und Mathe?

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
Zu 3: Welt-Vieport-Abbildung 2D-Welt auf 2D-Canvas

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.

Zu 4: Maus-Events relative nativ Canvas-Koordinaten

Zum Experimentieren mit Maus-Ereignissen ist hier eine Maus-Event-Demo 1

Zu 5: Speichern von Koordinaten lokalStore, Server

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.

Zu 6: Scenarien für App-Entwürfe Wie wird Cavas-App gemacht?

Es soll HTML5 und Cava verwendet werden. Grundsätzlich tellen sich folgende Fragen:

Zu 7: Beispiel für Datenstrukturierung und Rendern Wie, Wo, Was?

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