Konfuzius:
Die Erfahrung ist wie eine Laterne im Rücken;
sie beleuchtet stets nur das Stück Weg,
das wir bereits hinter uns haben.
Nachfolgend werden lediglich einige Basis-Ideen und Hinweise beschrieben, die zu einem solchen 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. Hierzu bitte den Quickstart ( notwendiges Grafik-Grundwissen ) nachlesen.
Weitere Hinweise:
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'
Was enthält der Canvas-Kontext ctx? Etwa ...
canvas:[object HTMLCanvasElement] fillStyle:#000000 font:10px sans-serif globalAlpha:1 globalCompositeOperation:source-over lineCap:butt lineJoin:miter lineWidth:1 miterLimit:10 shadowBlur:0 shadowColor:rgba(0, 0, 0, 0.0) shadowOffsetX:0 shadowOffsetY:0 strokeStyle:#000000 textAlign:start textBaseline:alphabetic
Was enthält das HTMLCanvasElement ctx.canvas? Etwa ...
ctx=accessKey: all:[object HTMLCollection] attributes:[object NamedNodeMap] baseURI: ...dat.htm childElementCount:0 childNodes:[object NodeList] children:[object HTMLCollection] classList: className: clientHeight:220 clientLeft:6 clientTop:6 clientWidth:320 contentEditable:inherit currentPage:0 currentStyle:[object CSSStyleDeclaration] dataset:[object DOMStringMap] dir: draggable:false dropzone: firstChild:[object Text] firstElementChild:null height:200 hidden:false id:POLYGON_FLAECHE innerHTML:Browser kann kein Canvas innerText:Browser kann kein Canvas isContentEditable:false itemId: itemProp: itemRef: itemScope:false itemType: itemValue:null lang: lastChild:[object Text] lastElementChild:null localName:canvas namespaceURI:http://www.w3.org/1999/xhtml nextElementSibling:[object HTMLScriptElement] nextSibling:[object Text] nodeName:CANVAS nodeType:1 nodeValue:null offsetHeight:232 offsetLeft:14 offsetParent:[object HTMLBodyElement] offsetTop:2535 offsetWidth:332 outerHTML:<canvas id="MYID" width="300" height="200" style="...">Browser braucht Canvas</canvas> outerText:Browser kann kein Canvas ownerDocument:[object HTMLDocument] pageCount:1 parentElement:[object HTMLElement] parentNode:[object HTMLElement] prefix:null previousElementSibling:[object HTMLParagraphElement] previousSibling:[object Text] properties:[object HTMLPropertiesCollection] scrollHeight:232 scrollLeft:0 scrollTop:0 scrollWidth:332 spellcheck:true style:[object CSSStyleDeclaration] tabIndex:-1 tagName:CANVAS textContent:Browser kann kein Canvas title: unselectable: width:300 onscroll:null onfocusin:null onfocusout:null onclick:null onmousedown:null onmouseup:null onmouseover:null onmouseenter:null onmousemove:null onmouseout:null onmouseleave:null onmousewheel:null onkeypress:null onkeydown:null onkeyup:null onload:null onunload:null onabort:null onerror:null onfocus:null onblur:null ondblclick:null oncontextmenu:null oninvalid:null onloadstart:null onprogress:null onsuspend:null onstalled:null onloadend:null ontimeout:null onemptied:null onplay:null onpause:null onloadedmetadata:null onloadeddata:null onwaiting:null onplaying:null onseeking:null onseeked:null ontimeupdate:null onended:null oncanplay:null oncanplaythrough:null onratechange:null ondurationchange:null onvolumechange:null oncuechange:null onfullscreenerror:null onfullscreenchange:null onpagechange:null ondragstart:null ondrag:null ondragenter:null ondragleave:null ondragover:null ondrop:null ondragend:null oncopy:null oncut:null onpaste:null ontextinput:null
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
Hier ist ein einfaches, unfertiges, fehlerhaftes, einführendes Beispiel für ein Lösung aus? Siehe Start-Lehr-Beispiel .
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.
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 ;
}
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr