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:
SuperStrict Import MaxGui.Driver Local MyWindow:TGadget=CreateWindow("Canvas-Beispiel", 200,200,320,240) Local MyCanvas:TGadget=CreateCanvas(10,10,290,140,MyWindow) Repeat WaitEvent() Select EventID() Case EVENT_WINDOWCLOSE End Case EVENT_GADGETPAINT SetGraphics CanvasGraphics (MyCanvas) DrawRect 20,20,50,80 Flip End Select Forever |
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:
Case EVENT_GADGETPAINT SetGraphics CanvasGraphics (MyCanvas) DrawRect 20,20,50,80 Flip |
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:
SuperStrict Import MaxGui.Driver Local MyWindow:TGadget=CreateWindow("Canvas-Beispiel", 200,200,320,240) Local MyCanvas:TGadget=CreateCanvas(10,10,290,140,MyWindow) Repeat WaitEvent() Select EventID() Case EVENT_WINDOWCLOSE End Case EVENT_GADGETPAINT SetGraphics CanvasGraphics (MyCanvas) SetColor 255,0,0 DrawRect 20,20,50,80 Flip End Select Forever |
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:
SuperStrict Import MaxGui.Driver Local MyWindow:TGadget=CreateWindow("Canvas-Beispiel", 200,200,320,240) Local MyCanvas:TGadget=CreateCanvas(10,10,290,140,MyWindow) Local timer:TTimer=CreateTimer(60) Local x:Int=0 Repeat WaitEvent() Select EventID() Case EVENT_WINDOWCLOSE End Case EVENT_TIMERTICK x=x+1 If x>240 x=0 RedrawGadget(MyCanvas) Case EVENT_GADGETPAINT SetGraphics CanvasGraphics (MyCanvas) Cls DrawRect x,20,50,80 Flip End Select Forever |
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.
Local timer:TTimer=CreateTimer(60) Local x:Int=0 |
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.
Case EVENT_TIMERTICK x=x+1 If x>290 x=0 RedrawGadget(MyCanvas) |
Beachte dass wir bei DrawRect nun eine Intervariable x und nicht eine Konstante benutzen. So können wir die Rechteckkoordinate verändern.
Case EVENT_GADGETPAINT SetGraphics CanvasGraphics (MyCanvas) DrawRect x,20,50,80 Flip |
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.
SuperStrict Import MaxGui.Driver Local MyWindow:TGadget=CreateWindow("Canvas-Beispiel", 200,200,320,240) Local MyCanvas:TGadget=CreateCanvas(10,10,290,140,MyWindow) Local x:Int=0 Local y:Int=0 ActivateGadget MyCanvas Repeat WaitEvent() Select EventID() Case EVENT_WINDOWCLOSE End Case EVENT_MOUSEMOVE x=EventX() y=EventY() RedrawGadget(MyCanvas) Case EVENT_GADGETPAINT SetGraphics CanvasGraphics (MyCanvas) Cls DrawRect x,y,40,40 Flip End Select Forever |
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.
Local x:Int=0 Local y:Int=0 ActivateGadget MyCanvas |
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.
Case EVENT_MOUSEMOVE x=EventX() y=EventY() RedrawGadget(MyCanvas) |
Wir können das obige Programm verbessern, indem wir den Mauszeiger wie folgt verstecken:
SuperStrict Import MaxGui.Driver Local MyWindow:TGadget=CreateWindow("Canvas-Beispiel", 200,200,320,240) Local MyCanvas:TGadget=CreateCanvas(10,10,290,140,MyWindow) Local x:Int=0 Local y:Int=0 ActivateGadget MyCanvas Repeat WaitEvent() Select EventID() Case EVENT_WINDOWCLOSE End Case EVENT_MOUSEENTER HideMouse Case EVENT_MOUSELEAVE ShowMouse Case EVENT_MOUSEMOVE x=EventX() y=EventY() RedrawGadget(MyCanvas) Case EVENT_GADGETPAINT SetGraphics CanvasGraphics (MyCanvas) Cls DrawRect x,y,40,40 Flip End Select Forever |
Der Canvas-Gadget unterstüzt folgende Events:
EVENT_MOUSEDOWN | Mausbutton gedrückt. EventData enthält den Buttoncode. |
EVENT_MOUSEUP | Mausbutton losgelassen. EventData enthält den Buttoncode. |
EVENT_MOUSEMOVE | Maus bewegt. EventX und EventY enthalten die Mauskoordinaten. |
EVENT_MOUSEWHEEL | Mausrad bewegt. EventData enthält die Anzahl Klicks. |
EVENT_MOUSEENTER | Maus kommt in den Gadget-Bereich hinein. |
EVENT_MOUSELEAVE | Maus verlässt den Gadget-Bereich. |
EVENT_KEYDOWN | Taste gedrückt. EventData enthält den Tastencode. |
EVENT_KEYUP | Taste losgelassen. EventData entählt den Tastencode. |
EVENT_KEYCHAR | Zeichen gedrückt. EventDate enthält den UNICODE. |
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.