Es ist eine praktische Applikation zu entwickeln und zu testen, die reale Objekt-Geometrien (x,y real, isotrop/anisotrop ) im 2D-Welt-Koordinatensysteme braucht. Die grafische Darstellung soll die Objekt-Darstellung mit Hilfe eine bidirektionale Abbildung machen, d.h. Welt-Koordinaten (x,y) sollen in Viewport-Koordinaten (i,j; z.B. Maus, Canvas, Device) und umgekehrt umgerechnet werden können.
Welche Gebiete der modernen Informatik-Praxis sind möglich? Einige Beispiele:
Hier eine grobe Liste von geeigneten Projekten:
berechne_polygon_flaeche([1,1,2,1,2,2]).a lieferet 0.5
berechne_polygon_flaeche([0,-1, 1,0, 0,1, -1,0]).a) lieferet 2
berechne_polygon_flaeche([0,0, 4,0, 4,3, 3,2, 3,1, 1,1, 1,2, 3,2, 4,3, 0,3]).a lieferet 10
AUSGABE von str_von_TA0()
AUSGABE von o.imin_jmin_imax_jmax
AUSGABE von o.xmin_ymin_xmax_ymax
AUSGABE von o.x_y_koord
mit o.x_y_koord.length
berechne_polygon_flaeche(OBJ().x_y_koord).a
Normalenvektor zu Polygon-Fläche [.ex,.ey,.ez]
AUSGABE aller keys
AUSGABE aller vals
Siehe den Quelltext! Hier kommt ein Test der Welt-Viewport-Abbildung.
Zunächst wird das Bild mit festen Werten im Code dargestellt.
Dann können die geänderden
*x_y_koord:
der textarea verwendet und das neue Polygon hinzu gezeichnet werden.
Teste:
Daten von ta holen und zeichne: test_mit_den_werten_aus_ta("isotrop","no_init") *imin_jmin_imax_jmax: 0 0 300 200 *xmin_ymin_xmax_ymax: -4.0 2.0 4.0 -2.0 isotrop no_init *x_y_koord: -1.5 -1.5 1.5 -1.5 1.5 1.5 -1.5 1.5 *strokeStyle: #f00
MYC.fillRect({x1:-1.49,y1:-1.49,x2:1.49,y2:1.49,fillStyle:"rgba(0,201,255,.5)"}) (Transparenz)
MYC.fillRect({x1:-1.49,y1:-1.49,x2:1.49,y2:1.49,fillStyle:"rgb(0,201,255)"})
MYC.fillRect({x1:-1.49,y1:-1.49,x2:1.49,y2:1.49,fillStyle:"#530"}
MYC.fillRect("#227")
MYC.fillRect()
Zeichne Anfangsfigur mit [0,0, 300,200, -4.0, 2.0, 4.0, -2.0, | ,"isotrop","init"] | "isotrop","no_init"] |
Zeichne Anfangsfigur mit [0,0, 300,200, -4.0, 2.0, 4.0, -2.0, | "an_isotrop","init"] | "an_isotrop","no_init"] |
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