Canvas-Welt-Viewport-Bibliothek Titel: "Draw-Spline-App"


Kultusministerkonferenz (5.2.1999; de.wikipedia ): "Handlungskompetenz wird verstanden als die Fähigkeit des Einzelnen, sich in beruflichen, gesellschaftlichen und privaten Situationen sachgerecht, durchdacht, sowie individuell und sozial verantwortlich zu verhalten."


Einführendes Um was geht es?

Bei fortgeschritttene Simulationen, Animationen und grafischen Web-Entwicklungen werden zahlreiche Parameter benötigt. So bilden z.B. 3D-Polygon-Flächen-Eckpukte "in der Welt" ( xi, yi ) und zugehörige topologische Daten das BREP-Datenmodell. Datenmodelle enthalten strukturierte Daten und Abhängigkeiten. Bei fortgeschritttenen Simulationen, Animationen und grafischen Web-Entwicklungen findet der Datenaustausch über metrische und topologische Daten statt, d.h. weniger über Bilder und mehr über "strkturierte Strings". Das Rendern der Strukturen liefert das grafische Ergebnis. Das Datenmodell kann für technische Berechnungen und für das Rendern genutzt werden (siehe z.B. CIM, CAD ).

Zu modernen Technologien gehören individuelle, kollektive, regionale, globale Räume und Sichten ( konkret, abstrakt, virtuell ). Zu modernen Technologien gehört deren Ambivalenz, Einschätzungen der Nützlichkeit ( und von/für wen ) und die praktische Einsetzbarkeit.

Weitere Hinweise: Grafik Quickstart und vorheriges Projekt

Projekt-Kurzfassung Was soll gemacht werden?

Konkret: Es wird eine Canvas-Grafik-Bibliothek für (x,y)-Weltkoordinaten ( name z.B, "welt" ) entwickelt und mit einer selbst ausgedachten, praxisrelevanten App getestet. Die App soll insbesondere für Kleinunternehmer, Handwerker, Studierende, Schüler hilfreich sein. Empfehlung: Für die Render-Funktionalität der Bibliothek werden zunächst wenige "Draw-Funktionen" verwendet, wie z.B. CTX.beginPath(), CTX.moveTo(i, j), CTX.lineTo(i, j), CTX.fill(), CTX.stroke(), CTX.closePath(), Die "welt"-Bibliothek macht zum Render der Welt-Koordinaten automatische interene Umrechnungen von (x, y) nach (i, j). Damit ergibt sich ein arbeiten in Werl-Koordinaten, wie z.B. moveTo(x, y), lineTo(x, y)

Die Bibliothek soll auch Maus-Eingabe-Daten speichern und verwenden können. Hilfreich kann die ( ungeprüfte ) Funktion welt.add_event(id, evt_name, fn) sein, um bei Mausereignissen ( in privaten Variablen ) die Maus-Geräte-Koordinaten zu speichern.

Weiteres in der Veranstaltung.

Hinweise: Die ( ganzzahligen ) Gerätekoordinaten werden (i, j) genannt, siehe z.B. rendere Datenstring nach Canvas .

// "geg" meint vorgegeben
(i,j)-2d-Welt:  { imin:0;   jmin:0;   imax:imin+width, jmax:jmin+height }
(x,y)-2d-Welt:  { xmin:geg; ymin:geg; xmax:geg,  ymax: geg }  
Gerät: width = CTX.canvas.width - imin; 
       height = CTX.canvas.height - jmin;
Welt:  weite = xmax - xmin; 
       hoehe = ymax - ymin;

Hinweis ( alternativ )  Welt-Viewport-Abbildung

Anstelle der eingebauten Umrechnung CTX.setTransform(a, b, c, d, e, f) muß eine eigene Umrechnung "von Welt nach Canvas" und umgekehrt! gemacht werden. Init bedeutet CTX.setTransform(1, 0, 0, 1, 0, 0);

 Hinweis! Alles ohne Gewähr! 
y-Richtung tauschen, indem 
ymax mit ymin getauscht wird

Umrechnung von Welt (x,y) nach Canvas (i,j) mit

x = xmin + i*(xmax - xmin)/width; 
y = ymin + j*(ymax - ymin)/height; 

Umrechnung von Canvas (i,j) nach Welt (x,y) mit

i = width *(x - xmin)/(xmax - xmin); 
j = height*(y - ymin)/(ymax - ymin);

Welches self-made-Projekt steht an, wenn "global verfügbaren Universal-Programme" zu umfangreich, zu schwer bedienbar, proprietär und nicht speziell anpaßbar sind? Bitte entwickeln sie eine Grafik-App ( basierend auf Canvas, Titel z.B.: "Draw-Spline-App",
siehe z.B. Einfuehrung in Splines )

Strat und einige Hinweise zum Aufbau der Bibliothek . Quelltext ist ungeprüft, dennoch bitte ansehen. Wozu sind die privaten Variablen

Privat für aktuelle Canvas :
ID   = aktuelle Canvas id="ID"         ( string )
CTX  = aktueller Canvas-Context        ( System )
ATTR = alle möglichen Canvas-Attribute ( Obj )
MOUSE = für Event-Handling             ( Obj )

Privat für alle Canvas ( Obj von Obj ):
ATTR_BUF[ID]  ist ATTR
MOUSE_BUF[ID] mit jeweils { id,type, i,j, w,h, l_down, inside };

Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr