Growbook, Cannabis, Notizbuch, Growbuch, Pflanzenzucht, Samenbank, Seedbank, Software, Stammbaum, Kreuzen, züchten,growen,anbauen,News,GIB,Lux,Omega,Mars, Dünger,BioBizz,Hesi,Athena,
die Software für deinen Anbau
1

Willkommen

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.

    Tut12 1


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)

    Tut12 2


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.

    Tut12 3


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.

    Tut12 4


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 smile.

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.