Projekt-Kurzfassung: Es gibt zahlreiche IT-Web-Anwendungsbereiche, die graphische 2D-Elemente benötigen. Bei diesem Projekt geht es um die Entwicklung einer App, die ECMAScript verwendet und das Entwicklen von SVG-Komponenten unterstützt ( statisch und/oder Animationen, localSorage und JSON ).
Die eigene Idee soll in möglichst einfacher, robuster Weise als Projekt realisiert werden ( Plagiate sind out ). Hierbei seien user-zentrierte Anwendungsbezüge und Erwartungen vorrangig.
Franz Kafka:
"Verbringe nicht die Zeit mit der Suche nach einem Hindernis, vielleicht ist keines da."
Hier werden lediglich Basis-Ideen und Hinweise stichwortartig beschrieben. Die "self-made" soll praxistauglich sein und SVG gestaltend einbeziehen.
<h3> <use xlink:href="#herz_icon"></use></ </h3>
<style> .icon{width:32px;height:32px; </style>
<svg height="0" width="0" style="position:absolute;margin-left:-100%;">
<path
id = "herz_icon"
style = "width:32px;height:32px;fill:#09c;"
d = "M16,28.261c0,0-14-7.926-14-17.046c0-9.356,13.159-10.399,14-0.454
c1.011-9.938,14-8.903,14,0.454C30,20.335,16,28.261,16,28.261z"/>
</svg>
<p>
<svg class="icon" viewBox="-32 0 32 32"><use xlink:href="#herz_icon"></use></svg>
<br />
<svg class="icon" viewBox="0 0 32 32"><use xlink:href="#herz_icon"></use>
</svg><svg class="icon" viewBox="0 0 32 32"><use xlink:href="#herz_icon"></use>
</svg><svg class="icon" viewBox="0 0 32 32"><use xlink:href="#herz_icon"></use></svg>
<br />
<svg class="icon" viewBox="-32 0 32 32"><use xlink:href="#herz_icon"></use></svg>
</p>
Anzeige:
/* Aufrufbeispiel:
var aa = [
[ 2, 2, 4], // 2*a + 2*b = 4
[ 3, -2, 1], // 3*a - 2*b = 1
[-1, 2, 3] // -1*a + 2*b = 1
];
var x_arr = house_calc(aa);
// ergibt [a, b ] - Lösung
// x_arr = [1.315789, 0.947368];
*/
function house_calc( aa ) {
var i, j, k, a1, a2, a3, h, n, m, nr, right_cols = 1, r = [ ];
nr = right_cols; n = aa.length; m = aa[0].length - nr;
for (k = 0; k < m; k+=1) { a2 = 0; for (i = k; i < n; i+=1) {h = aa[i][k]; h *= h; a2 += h;}
if (a2 < 1E-09) {a2 = 1.0E-33;}//alert("ERR: SINGULAER");
a1 = Math.sqrt(a2); h = aa[k][k]; if (h < 0.0) {a1 = -a1;}
a2 += a1*h; h += a1; aa[k][k] = h;
for (j = k + 1; j < m + nr; j+=1) { a3 = 0;
for (i = k; i < n; i += 1) { a3 += aa[i][k]*aa[i][j];} h = a3 / a2;
for (i = k; i < n; i += 1) { aa[i][j] = h*aa[i][k]-aa[i][j];}
} aa[k][k] = a1;}
for (j = m; j < m + nr; j += 1) {
for (i = m-1; i >= 0; i -= 1) { a3 = aa[i][j];
for (k = i+1; k < m; k += 1) {if (i < m ) { a3 -= aa[i][k]*aa[k][j]; }
} aa[i][j] = a3/aa[i][i]; r.push(aa[i][j]);
}
} return r;
}
var koeffizienten = [ // Lösg: x0 = 1.315789, x1 = 0.947368
[ 2, 2, 4], // 2*x0 + 2*x1 = 4
[ 3, -2, 1], // 3*x0 - 2*x1 = 1
[-1, 2, 3] // -1*x0 + 2*x1 = 1
];
alert( house_calc(koeffizienten) );
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.
Hier einige Links zu SVG:
HTML5 ermöglicht die eingebettete Verwendung von SVG-Tags, die als Grafik-Flächen dienen. Auch können externe SVG-Dokumente ähnlich wie Bilder ( object-Tag ) eingebunden werden. Hier ist ein de.wikipedia-Beispiel: SVG-Buch-logo.svg ,
Transformationen sind translate, rotate und scale. Siehe w3.org Koordinaten-Transformationen .
svg-Tag mit width="600" height="150" und viewBox="-100 0 300 150" x="10" y="10" width="50" height="50" transform="matrix(1 0 0 1 0 0)" x="10" y="10" width="50" height="50" transform="matrix(1 0 0 1 25 25)" x="-25" y="-25" width="50" height="50" transform="matrix(1 0 0 1 85 85)" x="85" y="85" width="50" height="50" transform="rotate(45 110 110)"
Teste Transformationen ( Bitte auf ein farbiges Quadrat klicken )
Siehe Weblink svg-transformations
i = a·x + c·y + e j = b·x + d·y + f
Die Initialisierung entspricht transform="matrix(1 0 0 1 0 0)", d.h. b = c = e = f = 0 und a = d = 1. In der Matrizenschreibweise sieht die Transformation der Userkoordinaten (x,y) in die Gerätekoordinaten (i,j) so aus:
Viewport = Matric * Userspace ⎡ i ⎤ ⎡ a c e ⎤ ⎡ x ⎤ ⎢ ⎥ ⎢ ⎥ ⎢ ⎥ ⎢ j ⎥ = ⎢ b d f ⎥·⎢ y ⎥ ⎢ ⎥ ⎢ ⎥ ⎢ ⎥ ⎣ 1 ⎦ ⎣ 0 0 1 ⎦ ⎣ 1 ⎦
Mit den Transformationskonstanten a, b, c, d, e, f können die Userkoordinaten (x,y) in die Gerätekoordinaten (i,j) umgewandelt werden. Ist a·d != b·c, so kann die Umkehrmatrix berechnet werden:
⎡ 1 0 0 ⎤ ⎡ a c e ⎤ ⎡ d -c c·f-d·e ⎤ ⎢ ⎥ ⎢ ⎥ ⎢ ⎥ ⎢ 0 1 0 ⎥ = ⎢ b d f ⎥·⎢ -b a b·e-a·f ⎥·(a·d - b·c) ⎢ ⎥ ⎢ ⎥ ⎢ ⎥ ⎣ 0 0 1 ⎦ ⎣ 0 0 1 ⎦ ⎣ 0 0 a·d-b·c ⎦
Bei translate(ti,tj) ist e = tx, f = ty
[ 1, 0, ti]
[ 0, 1, tj]
[ 0, 0, 1 ]
Bei rotate(w) entspricht a = cos(w), b = sin(w), b = -sin(w), d = cos(w), e = 0, f = 0.
[ co, sn, 0] mit co = cos(w); sn = sin(w);
[-sn, co, 0]
[ 0, 0, 1]
Bei scale(sx,sy) entspricht a = sx, b= 0, c = 0, d = sy, e = 0, f = 0.
[sx, 0, 0]
[ 0, sy, 0]
[ 0, 0, 1]
Die Reihenfolge der Transformationen ist wesentlich. Beispiel:
rot(a) := matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0)
scale(sx,sy) := matrix( sx, 0, 0, sy, 0, 0)
rot(a) * scale(sx,sy) = matrix(sx*cos(a), sx*sin(a),
-sy*sin(a), sy*cos(a), 0, 0)
scale(sx,sy) * rot(a) = matrix(sx*cos(a), sy*sin(a),
-sx*sin(a), sy*cos(a), 0, 0)
Bei Rotationen um einen Punkt ( i0, j0 ) ist eine Verschiebung ( -e, -f ) zum Nullunkt, dann eine Rotation um den Nullpunkt und dann eine Verschiebung um ( e, f ) erforderlich.
⎡ a1 c1 a1·e+c1·f - e ⎤ ⎡ 1 0 -e ⎤ ⎡ a1 c1 0 ⎤ ⎡ 1 0 e ⎤ ⎢ ⎥ ⎢ ⎥ ⎢ ⎥ ⎢ ⎥ ⎢ b1 d1 b1·e+d1·f - f ⎥ = ⎢ 0 1 -f ⎥·⎢ b1 d1 0 ⎥·⎢ 0 1 f ⎥ ⎢ ⎥ ⎢ ⎥ ⎢ ⎥ ⎢ ⎥ ⎣ 0 0 1 ⎦ ⎣ 0 0 1 ⎦ ⎣ 0 0 1 ⎦ ⎣ 0 0 1 ⎦
Somit
e_neu = a1·i0 + c1·j0 - i0 und
f_neu = b1·i0 + d1·j0 - j0
Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr