Es werden lediglich Basis-Ideen und Hinweise beschrieben, die zu einem selbstgestalteten ( "self-made" ) Canvas-Projekt anregen können. Ein Sprichwort sagt:
Konfuzius
I hear and I forget,
I see and I remember,
I do and I understand.
Der Quickstart zu diesem Projekt zeigt notwendiges Grafik-Grundwissen.
Es werden lediglich Basis-Ideen und Hinweise beschrieben, die zu einem selbstgestalteten ( "self-made" ) Canvas-Projekt anregen können.
Ein Wissen um die Bedienung von Grafik-Programmen ist für eine erfolgreiche Toolchen-Entwicklung wohl nicht hinreichend, wenn Events bei Grafische Elementen und mauszentrierte Applikationsentwicklungen genötigt werden. 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.
HTML5 ermöglicht die eingebettete Verwendung von Canvas-Tags, die als Grafik-Flächen dienen. Eine "elektronische Zeichenfläche" wird engl. auch Canvas ( Leinwand, Gewebe ) genannt. Die Canvas-Unterstützung erfordert ECMAScript. Canvas bietet eine infache "nativ"-Schnittstelle.
Obwohl Canvas2DContext leichtgewichtig gegnüber WebGL, OpenGL, Silverlight ist,
so gibt es doch nützliche Funktionen und Properties, wie z.B.
ctx.translate(), ctx.translate(), ctx.scale(),
ctx.createLinearGradient(), ctx.createRadialGradient() und shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
.
Es gibt:
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'
Properties, wie z.B. 'canvas','fillStyle','font','globalAlpha','globalCompositeOperation', 'lineCap','lineJoin','lineWidth','miterLimit', 'shadowOffsetX','shadowOffsetY', 'shadowBlur','shadowColor', 'strokeStyle','textAlign','textBaseline'
Canvas-Weblinks ( Weblinks )
whatwg the-canvas-element whatwg beginPath() en.wikipedia Canvas_element
de.wikipedia Canvas-HTML-Element, whatwg.org the-canvas-element 2012, simon Canva-Referenz-Karte, alles auf einen Blick w3schools Canvas-Referenz, alles auf einen Blick w3schools Canvas, Einführung html5canvastutorials HTML5 Canvas-Tutorial, opera html-5-canvas-the-basics , opera html-5-canvas-painting , mozilla Canvas tutorial , mozilla DOM/EventTarget.addEventListener , apple Safari HTML5 Canvas Guide
Die Canvas-Browser-Unterstützung zeigt en.wikipedia: en.wikipedia: Comparison_of_layout_engines_&HTML5_Canvas
Assoziationen entsprechen einer Sammlung von Begriffen und Stichwörtern, die zu einem zentralen Begriff einfallen und um diesen zentralen Begriff gruppiert werden. Ein Assoziogramm wird auch "Wortigel" genannt und ist eine visualisierte Darstellung der stichwortartigen Assoziationen. Ordinalzahlen an dem Ästen können auf Legenden/Aspekten/Argumenten hinweisen ( Siehe z.B. Assoziogramm ).
Das Toolchen für Assoziogramme kann z.B. Begriff und Stringdaten per Formular-Eingaben entgegen nehmen und den zugehörigen HTML-ECMAScript-Code erstellen und als Canvas-Grafik rendern. Das online-Toolchen erstellt HTML-ECMAScript-Code, der in eine HTML-Seite übernommen werden kann. Hier ist ein Schnelleinstieg zu Formularzugriffen
Bitte Quelltext der Seite ansehen.
Mindmapping ist ein Visualisieren von Zusammenhängen in Form von Mindmaps. Eine Mindmap ( auch Mind-Map ) visualisiert Abhängigkeiten und Zusammenhänge. Eine Mindmap bildet Ideen grafisch in eine Baumstruktur ab. Jedes Mindmap-Element kann farbige Stichwort(e) und/oder eine symbolische Grafik enthalten, die das Denken in Bildern anregt. Mindmaps können um Webverweise erweitert werden. Ideen werden durch Pfeile verbunden. Ideen-Äste können weitr verzweigen.
Eine Mind Map kann die eigene Intuition unterstützen, wie z.B. bei Präsentationen, Ideensammlung nach Brainstorming, Planung von Besprechungen, Veranstaltungen vorbereiten, Texte abfassen, Vorträgen gestalten, usw.. Wie können Problem-Maps beim Problemlösen helfen? In Problem-Maps können wir z.B. Ziele und Lösungsansätze sammeln, ein vielsprechendes Ziel auswählen und weiter verfolgen.
Randnotiz von Google-Unternehmensinformationen ggf. mit "cloudigen" Gedanken-Assoziationen:
Das Ziel von Google besteht darin,
alle Informationen der Welt zu organisieren
und allgemein nutzbar und zugänglich zu machen.
Bei bestimmten Ideen kann es sinnvoll sein, wenn die gernderte Grafik mit lediglich einem Funktionsaufruf erzeugt wird. Dieser Funktion wird eine Datenstruktur übergeben. In der Funktion sind dann die einzelnen Canvas-Befehle verborgen. In gewisser Weise bildet die Datenstruktur eine "Kurzschreibweise" zum Zeichnen von Figuren.
Hier ist ein Demo- Beispiel, wie z.B. Strukturierte-Objekt-Daten der Funktion
draw_shape({...})
übergeben werden.
Das Rendern der Daten erfolgt durch die Funktion draw_shape(obj).
Die Properties von obj steuern die Funktionen draw_shape(obj).
In gewisser Weise bildet die Datenstruktur eine "Kurzschreibweise" zum Zeichnen von Figuren.
Formulare ( type="text"/textarea ) stellen Strings bereit. Es ist dann vielfach 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:'id_canvas',transf:'t 20 0|r 15 200 200 |push'});
// ... mehrere Figuren werden gedreht ...
draw_shape({id:'id_canvas',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 mit draw_shape({...}) Canvas-Funktionalitäten auf strukturierte-Daten abgebildet werden können.
Die Linienpunkte durch ( wenige ) vorgegebene Punkte können mit Interpolationsverfahren ( wikipedia ) berechnet werden. Beispiele sind Spline ( wikipedia ) , en.wikipedia Hermite Polynomials ( wikipedia ) , Cubic Hermite spline ( wikipedia ), usw.
Wie können mathematische Formeln für die Berechnung der Oberflächenpunkte erhalten werden? Siehe z.B. Regelflächen ( ruled surface ) ruled surface
Eines physikalisch-geometrisches Objekt ( Blume, Haus, Maschine, usw. ) kann mit Datenstrukturen modelliert werden. Eine solche Repräsentation mit Datenstrukturen ist mehr als nur ein Bild, das z.B. als Draht - Modell, Flächen - Modelle, Volumen - Modell gerndert werden kann. Ein physikalisch-geometrisches Objekt kann z.B. bewegt und mit grafischen Methoden in den Bildraum ( Bildebene ) projiziert werden. Die generierten Bilder sind dann nur ein otische Objekt-Präsentation Beispiele sind virtuelle 3D-Objekte, virtuelle Landschaften, Digitales Geländemodell, Kinematik, Gang durch ein virtuelles Gebäude, 3D-Spiele, usw.
Das Speichern von grafischen Daten kann in unterschiedlicher Weise erfolgen. 2D - Bilder können z.B. pixelweise ( unter Verwendung von Kompressions-Algorithmen ) gespeichert werden. Diese Speicherart ist geräteabhängig. Zwischen den Bild - Elementen bestehen lediglich Pixel - Nachbarschaften.
Zum Speichern von geometrischen Körper - Daten ist die Model - Daten - Struktur wesentlich. Für einen Quader der Seitenlängen a = 2.0, b = 1.0, c = 3.0 können die folgenden Punkt -, Kanten - und Flächen - Tabelle aufgeschrieben werden.
kartesische Koordinaten Anfangs- und End- für den i-ten Punkt-Nummer für die k-te Eckpunkte P: Kanten K: | j x y z k j1 j2 |----|------|-----|-----| |----|----|----|---- | 0 | 0.0 | 0.0 | 0.0 | | 0 | 1 | 2 | | 1 | 2.0 | 0.0 | 0.0 | | 1 | 2 | 6 | | 2 | 2.0 | 1.0 | 0.0 | | 2 | 6 | 5 | 0. Fläche | 3 | 0.0 | 1.0 | 0.0 | | 3 | 5 | 1 | |----|------|-----|-----| |----|----|----|---- | 4 | 0.0 | 0.0 | 3.0 | | 4 | 0 | 4 | | 5 | 2.0 | 0.0 | 3.0 | | 5 | 4 | 7 | | 6 | 2.0 | 1.0 | 3.0 | | 6 | 7 | 3 | 1. Fläche | 7 | 0.0 | 1.0 | 3.0 | | 7 | 3 | 0 | |----|------|-----|-----| |----|----|----|---- | 8 | 3 | 7 | | 9 | 7 | 6 | | 10 | 6 | 2 | 2. Fläche Anfangs- und End- | 11 | 2 | 3 | Punkt-Nummern der |----|----|----|---- i-ten begrenzenden | 12 | 0 | 1 | Fläche A: | 13 | 1 | 5 | 3. Fläche | 14 | 5 | 4 | i k1 k2 | 15 | 4 | 0 | |----|----|----|--- |----|----|----|---- | 0 | 0 | 3 | | 16 | 4 | 5 | | 1 | 4 | 7 | | 17 | 5 | 6 | | 2 | 8 | 11 | | 18 | 6 | 7 | 4. Fläche | 3 | 12 | 15 | | 19 | 7 | 4 | | 4 | 16 | 19 | |----|----|----|---- | 5 | 20 | 23 | | 20 | 0 | 3 | |----|----|----|--- | 21 | 3 | 2 | | 22 | 2 | 1 | 5. Fläche | 23 | 1 | 0 | |----|----|----|----
Zum Speichern von geometrischen Körper-Daten ist die Daten - Struktur wesentlich. Die x-, y- , z - Koordinaten der Körper-Punkte können in x[],y[],z[] Arrays gespeichert werden. Z.B. hat der 5 - te Körper-Punkt ( j=5, P5 ) die 3D - Koordinaten ( 2.0, 0.0, 3.0 ).
Weil jede Fläche durch die Punkt - Folge ( Umlaufrichtung beachten ) festgelegt wird, so wird jede ( ungerichtete ) Kante in 2 entgegen gesetzte Richtungen durchlaufen. Die 1 - te Kante verbindet den Punkt P2 mit P6. Die 10 - te Kante verbindet den Punkt P6 mit P2. Die 1 - te Kante gehört zur 0 - ten Fläche. Die 10 - te Kante gehört zur 2 - ten Fläche.
// Punkte j=0., 1., 2., 3., 4., 5., 6., 7.- Punkt double x[]={ 0.0, 2.0, 2.0, 0.0, 0.0, 2.0, 2.0, 0.0 }; double y[]={ 0.0, 0.0, 1.0, 1.0, 0.0, 0.0, 1.0, 1.0 }; double z[]={ 0.0, 0.0, 0.0, 0.0, 3.0, 3.0, 3.0, 3.0 }; //Kanten k=0,1,2,3 | 4,5,6,7 | 8,9, ......................... 22,23.-Kante int j1[]={ 1,2,6,5, 0,4,7,3, 3,7,6,2, 0,1,5,4, 4,5,6,7, 0,3,2,1 }; int j2[]={ 2,6,5,1, 4,7,3,0, 7,6,2,3, 1,5,4,0, 5,6,7,4, 3,2,1,0 }; for ( k = 0; i < 24; i ++ ) { //alle Kanten ( doppelt ) xj1 = x [ j1 [ k ] ]; xj2 = x [ j2 [ k ] ]; yj1 = y [ j1 [ k ] ]; yj2 = y [ j2 [ k ] ]; zj1 = z [ j1 [ k ] ]; zj2 = z [ j2 [ k ] ]; //Linie von (xj1, yj1, zj1) nach (xj2, yj2, zj2) }
Durch hinzufügen eines weiteren A - Index ( hier 6 ) kann auf die k2 Spalte in der Flächen - Tabelle A verzichtet werden. Zur 2 - te Fläche gehören in der Kanten - Tabelle die Indizes 8 bis ( 12 - 1 ).
Anfangs- und ( End-Punkt-Nummern +1 ) der i-ten begrenzenden Fläche A: i k1 --> weitere Daten |-------------------------------------------------- | 0 | 0 | --> Daten für die 0 - te Fläche | 1 | 4 | --> Daten für die 1 - te Fläche | 2 | 8 | --> Daten für die 2 - te Fläche | 3 | 12 | --> Daten für die 3 - te Fläche | 4 | 16 | --> Daten für die 4 - te Fläche | 5 | 20 | --> Daten für die 5 - te Fläche | 6 | 24 | --> Daten für das Volumen |--------------------------------------------------
Auf die j2 - te Spalte der Kanten - Tabelle K kann verzichtet werden, weil zwei aufeinander folgende i Indizes der Flächen - Tabelle A die j Indizes der Kanten - Tabelle festlegen. /* Aufruf Quader * pQuader = new Quader(a,2.0-a,3.0); pQuader->draw(); delete pQuader; */
class Quader {
int A[7]; //Flaechentab A
double Area[6], Ax[6],Ay[6],Az[6];//normierte Normalen Ax,Ay,Az
int K[24]; //Kantentab K
double * pX,* pY,* pZ; //Punktetab X,Y,Z
public:
int anzA, anzK, anzP;
void drawArea( int i );
void draw();
bool calcNormalen();
~Quader() { delete pX; delete pY; delete pZ; }
Quader(double aa, double bb, double cc ) {
anzA = 6; //Flaechentabelle
A[0]= 0; A[1]= 4; A[2]= 8;
A[3]=12; A[4]=16; A[5]=20; A[6]=24;
anzK = 12; //Kantentabelle
K[ 0]=1; K[ 1]=2; K[ 2]=6; K[ 3]=5;
K[ 4]=0; K[ 5]=4; K[ 6]=7; K[ 7]=3;
K[ 8]=3; K[ 9]=7; K[10]=6; K[11]=2;
K[12]=0; K[13]=1; K[14]=5; K[15]=4;
K[16]=4; K[17]=5; K[18]=6; K[19]=7;
K[20]=0; K[21]=3; K[22]=2; K[23]=1;
anzP = 8; //Punktetabelle
pX = new double[anzP];
pY = new double[anzP];
pZ = new double[anzP];
pX[0] = -aa; pY[0] = -bb; pZ[0] = -cc;
pX[1] = +aa; pY[1] = -bb; pZ[1] = -cc;
pX[2] = +aa; pY[2] = +bb; pZ[2] = -cc;
pX[3] = -aa; pY[3] = +bb; pZ[3] = -cc;
pX[4] = -aa; pY[4] = -bb; pZ[4] = +cc;
pX[5] = +aa; pY[5] = -bb; pZ[5] = +cc;
pX[6] = +aa; pY[6] = +bb; pZ[6] = +cc;
pX[7] = -aa; pY[7] = +bb; pZ[7] = +cc;
calcNormalen();
}
};
void Quader::drawArea( int i ) {
double x, y, z; int j, k, k1, k2;
glBegin( GL_LINE_STRIP );
glNormal3d( Ax[i], Ay[i], Az[i] );
k1 = A[i];
k2 = A[i+1];
for ( k = k1; k <= k2; k ++ ) {
if ( k < k2 ) j = K[k ];
else j = K[k1];
x = pX[j];
y = pY[j];
z = pZ[j];
glVertex3d( x, y, z );
}
glEnd();
}
void Quader::draw(void) {
for ( int i = 0; i < anzA; i ++ ) drawArea( i );
}
bool Quader::calcNormalen() {
int i, j, k, k1, k2 ;
double x1, y1, z1, x2, y2, z2, ax, ay, az, a;
for ( i = 0; i < anzA; i ++ ) { ax = ay = az = a = 0.0;
k1 = A[i];
k2 = A[i+1];
j = K[k1];
x1 = pX[j]; y1 = pY[j]; z1 = pZ[j];
for ( k = k1+1; k <= k2; k ++ ) {
j = K[k]; if ( k == k2 ) j = K[k1];
x2 = pX[j]; y2 = pY[j]; z2 = pZ[j];
ax += ( ( y1 - y2 ) * ( z1 + z2 ) ) ;
ay += ( ( z1 - z2 ) * ( x1 + x2 ) ) ;
az += ( ( x1 - x2 ) * ( y1 + y2 ) ) ;
x1 = x2; y1 = y2; z1 = z2;
}
a = sqrt( ax * ax + ay * ay + az * az ) ;
if ( a < 1.0E-9 ) {
Area[i] = Ax[i] = Ay[i] = Az[i] = 0.0 ;
return FALSE ;
} else { a *= 0.5;
Area[i] = a; //Area=Wert der Flaeche
Ax[i] = ax / a; //NormalenKomp Ax,Ay,Az
Ay[i] = ay / a;
Az[i] = az / a;
}
}
return TRUE ;
}
Wie können Teilstrukturen der Canvas-Grafik interaktiv mit der Maus verschoben werden?
Hierzu können die Maus-Geräte-Koordinaten bei Mausereignissen
mit Hilfe von cnv.add_evt(el, evt_name, fn)
wird dem Canvas-Element el Daten vom Mausereignis, wie z.B. evt_name=mousemove und eine Funktion fn zugeordnet.
Jedes Ereignis hebt die Maus-Eventdaten in dem Objekt cnv.evt_date auf.
Die cnv-Bibliothek bitte im Quelltext anschauen.
Mit var m = cnv.evt_daten.MY_CANVAS_ID; ist m.type ist z.B. 'mousemove' m.i ist die Maus-x-Position m.j ist die Maus-y-Position m.w ist die Canvas-Width m.h ist die Canvas-Height m.is_drin ist true, wenn Mauspos in Canvas-Fläche ist
Ein Aufruf sieht dann etwa so aus:
cnv.add_evt(doc.getElementById('ID_MAUS_CANVAS'), 'click',
function () { // zeige die alert-Box bei Maus-click an
var m = cnv.evt_daten.ID_MAUS_CANVAS; // gobal
if (cnv.is_drin( m.i, m.j, 300, 300 )) {
alert(m.type + ' ' +
m.i + ' ' +
m.j + ' ' +
m.w + ' ' +
m.h + ' ' + m.is_drin);
}
}
);
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr