• General
• Chapter 1
• Tutorial 12: Canvas, Events und 2D-Grafik

The MaxGUI Beginner Tutorial Series - Tutorial 12:  Canvas, Events und 2D-Grafik
(c) Assari Dec 31 2005
Ins Deutsche übersetzt von simi

Eine der Stärken von BlitzMax sind die OOP-Features. Was aber die Meisten nicht wissen, ist dass die Särken von BlitzMax und MaxGUI auch ohne OOP verfügbar sind. In diesen Tutorials habe ich mich vom OOP-Benutzen entfernt, sodass es keine Probleme zwischen Tutorial und Beispielen gibt.

Der Canvas-Gadget, das Thema dieses Tutorials, ist auch ein Gadget, das leicht ohne OOP benutzt werden kann. Dieser Gadget würde eine ganze Reihe von Tutorials füllen, denn er bringt die ganze Kraft von Max2D mit sich. Wir werden sicher nicht die ganzen Funktionen von Max2D besprechen, aber ein kleines Beispiel geben, was möglich ist.

Lass uns ein sehr simples Canvas in Aktion sehen:

Wie wir sehen können, wurde ein Rechteck in unser Fenster gezeichnet, auf unser Canvas, das wir mit CreateCanvas erstellt haben.

Die Programmzeilen, die uns interessieren sind folgende:

Der EVENT_GADGETPAINT-Event wird benutzt, um die Sachen auf unser Canvas zu zeichnen. Die SetGraphics-Funktion leitet die Grafikausgabe auf den MyCanvas-Gadget um.
DrawRect zeichnet ein Rechteck an die Position 20,20 mit der Grösse 50x80.
Flip ist ein Max2D-Funktion, welche die gezeichneten Sachen auf dem Bildschirm darstellt.

Ich habe die DrawRect-Funktion für dieses Beispiel ausgewähl. Aber auch jeder andere Max2D-Befehl kann auf einem Canvas benutzt werden, was das Canvas zu einem starken Gadget macht.

Lass uns weitere Beispiel ansehen.

Wir können ein farbiges Rechteck wie folgt zeichnen:

et voilà, wir haben ein rotes Rechteck (von unserer SetColor-Funktion)

Wir können auch Animationen benutzen. Um dies zu machen, müssen wir den Timer-Gadget wie folgt benutzen:

Wir sollten nun ein weisses Rechteck sehen, dass sich über den Bildschirm bewegt.

Der CreateTimer-Befehl erstellt einen speziellen Timer, der einen Event 60mal pro Sekunde auslöst. Dieser Event kann über EVENT_TIMERTICK verarbeitet werden. Die Integer-Variable x wird als horizontale Position von unserem Rechteck benutzt.

Wenn der EVENT_TIMERTICK-Event empfangen wird (was alle 1/60-Sekunde sein wird), erhöhen wir die Rechteckkoordinate um ein Pixel. Dann prüfen wir ob das Rechteck über den Bildschirm gegangen ist, und setzen die Koordinaten zurück auf 0.

Die RedrawGadget-Funktion löst einen EVENT_GADGETPAINT-Event aus. Somit wird das Rechteck auf dem Canvas neu gezeichnet.

Beachte dass wir bei DrawRect nun eine Intervariable x und nicht eine Konstante benutzen. So können wir die Rechteckkoordinate verändern.

Eine andere, mächtige Möglichkeit von Canvas ist, dass wir Mausevents empfangen könne. Lass uns ein Beispiel ansehen, wo wir die Maus zum Bewegen des Rechtecks benutzen.

Wir können jetzt das 40x40-Rechteck im Canvas bewegen.

Lass uns unser Programm ein bisschen mehr im Detail ansehen. Wir müssen zuerst die Integer-Variablen für die Koordinaten des Rechecks definieren. Dann müssen wir unser Canvas aktivieren, sonst werden unsere Mausevents nicht an das Canvas gesendet.

Wenn wir einmal die aktivierung gemacht haben, wird der EVENT_MOUSEMOVE-Event gesendet, wenn sich die Maus über dem Canvas bewegt. Die Koordinaten können wir mit der EventX und EventY-Funktion rausfinden. Wenn wir die x und y-Variablen aktualisiert haben, rufen wir die RedrawGadget-Funktion auf, um den EVENT_GADGETPAINT-Event auszulösen, welcher unser Canvas neu zeichnen wird.

Wir können das obige Programm verbessern, indem wir den Mauszeiger wie folgt verstecken:

Der Canvas-Gadget unterstüzt folgende Events:

Ich werde es dir als eine Übung überlassen, die anderen Events zu benutzen, die ich nicht erklärt habe .

Zum Schluss...

Der Canvas-Gadget ist ein mächtiger Gadget, der uns erlaubt alle Max2D-Möglichkeiten auf unser Canvas anzuwenden. Über den Max2D-Befehlen, hast du die MaxGUI-Events, die uns erlauben sehr interessante Programme zu schreiben.

Zur Errinerung, was wir bis jetzt gelernt haben

• Canvas können mit CreateCanvas erstellt werden.
  
• Wir müssen den EVENT_GADGETPAINT-Event benutzen, um unser Canvas zu zeichnen.
  
• Die ReadrwGadget-Funktion muss immer dann benutzt werden, wenn wir unser Canvas updaten wollen.
  
• Ein Canvas kann mit einem Timer animiert werden. Man erstellt einen Timer mit CreateTimer und reagiert auf den EVENT_TIMERTICK-Event.
  
• Maus- und Tastenevents können mit dem Canvas empfangen werden. Aber die ActivateGadget-Funktion muss aufgerufen werden, dass die Events empfangen werden können.