Canvas und Praxis Welt-Viewport

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.

Anwendungsgebiete in der Praxis

Welche Gebiete der modernen Informatik-Praxis sind möglich? Einige Beispiele:

  1. BREP - Modell für "Virtuell-Reality"
  2. Finite-Elemente-Methode in zahlreichen Wissenschaften
  3. Berechnung der Sichtbarkeiten von Objekten bei Objektmodellen
  4. Geräte-unabhängige Algorithmen, Texturen und Beleuchtungsmodelle
  5. Automaische Diagnostik und Krebserkennung aus Bildern ( Medizin )
  6. CIM ( CA-Technologien ) Automobilbau, insbesondere CAD
  7. Digitales Geländemodell ( Katasteramt )
Geeigneten Projektwahl Was soll gemacht werden?

Hier eine grobe Liste von geeigneten Projekten:

Hinweise zu Texteingaben ( Parameter und Canvas ) gebraucht als number, string
Teste Flächenberechnung für geschlossene Polygone:

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

Textarea-Content wird aufbereitet und angezeigt:

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

Text-Anzeige:

Textarea:
 
Hinweise zu Welt-Viewport-Abbildung Reelle Welt und Canvas

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"]
Browser kann kein Canvas
Hinweise zu Canvas und Maus Canvas und Maus

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);
      }
    }
);
Die cnv-Bibliothek bitte im Quelltext anschauen. Bitte mit mouseover und click testen:

div mit padding:10px;
canvas 320x120 mit
margin:10px; padding:10px;
Browser kann kein Canvas

div mit padding:10px;



Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr