Gambas: Grafik

Zurück zu Gambas

DrawingArea, Image

Um unter Gambas Grafiken zu erstellen sollten Sie sich mit dem Steuerelement des Zeichnungsfeldes ( DrawingArea) vertraut machen.

Die Koordinaten der DrawingArea1

Folgendes kleine Programm liefert die Koordinaten der DrawingArea1

Machen Sie ein neues Projekt. Öffnen Sie eine neue Form: Mit der rechten Maus auf Form klicken. Geben Sie der Form irgendeinen Namen oder nehmen Sie den Vorschlag Form1. Holen Sie sich eine DrawingArea = Zeichenfeld aus der Werkzeugkiste. Benennen Sie diese nicht um.

Kopieren Sie den Code von unten ins Programm. Starten Sie das Programm mit F5. Die ausgegebenen Zahlen entsprechen den Zahlen bei den Eigenschaften ( = F4 = Properties) der DrawingArea1.

Beachten Sie folgendes : die linke obere Ecke ist (X,Y) , die rechte untere Ecke ist (X + DrawingArea1.Width, Y + DrawingArea1.Height )

Der Code:

PUBLIC SUB Form_Open()
 PRINT DrawingArea1.X
 PRINT DrawingArea1.Y
 PRINT DrawingArea1.Width
 PRINT DrawingArea1.Height
END

Ergebnis

Wenn Sie das Zeichengebiet am Anfang nicht verändert haben werden folgende Werte ausgegeben

0
0
64
32

Bilder

Siehe Gambas:_Bilder

PUBLIC SUB Form_Open()
 PRINT DrawingArea1.X
 PRINT DrawingArea1.Y
 PRINT DrawingArea1.Width
 PRINT DrawingArea1.Height
END

Farben

Siehe Gambas:_Farben

Mathematische Funktionen

Siehe Gambas: Rechnen

Punkt,Linie,Kreis

Zeichnen kann man in Gambas nur in einem Grafikfeld ( = DrawingArea ). In einem Grafikfeld kann man Punkte, Rechtecke, Ellipsen, Linien und anderes zeichnen. Man kann verschiedene Farben und Stiftbreiten benutzen.

Punkte

Das folgende Beispielprogramm zeichnet ein paar Punkte. Einen einzelnen Punkt sieht man schlecht.

Machen Sie dazu ein neues Projekt. Öffnen Sie eine neue Form: Mit der rechten Maus auf Form klicken. Geben Sie ihr den Namen Fmain. Holen Sie sich einen Befehlsknopf = Button aus der Werkzeugkiste . Holen Sie sich eine DrawingArea = Zeichenfeld aus der Werkzeugkiste.

Kopieren Sie den Code ins Programm. Starten Sie das Programm mit F5. Achten Sie auf die Farbgebung bei den Eigenschaften, sonst sehen Sie nichts.

PUBLIC SUB Button1_Click()
Draw.Begin(DrawingArea1)
Draw.Point(100,100)
Draw.Point(100,101)
Draw.Point(100,102)
Draw.Point(100,103)
Draw.Point(100,99)
Draw.Point(100,98)
Draw.Point(100,97)
Draw.Point(100,96)
Draw.End
END

Linien

Das nächste kleine Programm zeichnet ein paar Linien.

Machen Sie ein neues Projekt. Öffnen Sie eine neue Form: Mit der rechten Maus auf Form klicken. Geben Sie ihr den Namen Fmain. Holen Sie sich einen Befehlsknopf = Button aus der Werkzeugkiste . Holen Sie sich eine DrawingArea = Zeichenfeld aus der Werkzeugkiste.

Kopieren Sie den Code ins Programm. Starten Sie das Programm mit F5. Achten Sie auf die Farbgebung bei den Eigenschaften, sonst sehen Sie nichts.

PUBLIC SUB Button1_Click()
DIM B AS Integer ' Variable deklarieren. 
Draw.Begin(DrawingArea1)
FOR B = 1 TO 200 STEP 10 ' Schleife initialisieren. 
Draw.Line(1, B, 500, B)
NEXT 
Draw.End
END

Linienbreite

Dieses Grafikprogramm zeigt die Programmierung verschieden dicker Linien. Sie brauchen wieder einen Befehlsbutton und eine DrawingArea. Der entscheidende Befehl heißt hier Draw.LineWidth Hinter dem Befehl Linienbreite steht folgender Code :

PUBLIC SUB Button1_Click()
DIM B AS Integer ' Variable deklarieren. 
Draw.Begin(DrawingArea1)
Draw.Line(10,100, 20, 100)
FOR B = 1 TO 100 STEP 10 ' Schleife initialisieren. 
 Draw.LineWidth=B ' Stiftbreite einstellen. 
 Draw.Line(10+B,100, 20+B, 100)
NEXT 
Draw.End
END

Noch ein paar Linien

PUBLIC SUB Button1_Click()
Draw.Begin(DrawingArea1)
' Zeichnet eine Linie horizontal durch die Mitte der Form
Draw.Line (0, ME.Height / 2, ME.Width, ME.Height / 2)
' Zeichnet eine Linie senkrecht durch die Mitte der Form
Draw.Line (ME.Width / 2, 0,ME.Width / 2, ME.Height)
' Zeichnet eine Linie von der linken oberen zur unteren rechten Ecke
Draw.Line (0, 0,ME.Width, ME.Height)
' Zeichnet eine Linie von der rechten oberen zur unteren linken Ecke
Draw.Line (ME.Width, 0,0, ME.Height)
Draw.End
END

Warum werden die Linien nicht sauber zentriert ?

Fügen Sie direkt nach der ersten Zeile folgenden Code ein:

DrawingArea1.Resize(ME.Width, ME.Height)
DrawingArea1.Background = &HFFFFFF&

Schaut es jetzt besser aus ?

Wenn Sie die Zeile

DrawingArea1.Resize(ME.Width, ME.Height)

nach dem Befehl Draw.Begin(DrawingArea1) einfügen , gibt es eine Fehlermeldung:

QPaintDevice: Cannot destroy paint device that is being painted
X Error: BadDrawable (invalid Pixmap or Window parameter) 9
 Major opcode:  66
 Minor opcode:  0
 Resource id:  0x2e00010
X Error: RenderBadPicture (invalid Picture parameter) 180
 Major opcode:  153
 Minor opcode:  5
 Resource id:  0x2e00025

Farbe der Linie

Wenn Sie die Farbe Ihrer Linie verändern wollen, dann hilft folgendes Programm

Draw.Begin(DrawingArea1)
Draw.ForeColor = &HFFFFFF 
' weiße Farbe 
' Draw.ForeColor = &H0000FF& blaue Linie
' Draw.ForeColor = &HFF00FF& lila
' Draw.ForeColor = &HFF0000& rot
' Draw.ForeColor = &H00FF00& grün
' Draw.ForeColor = &HFFFF00& gelb
' Draw.ForeColor = &H00FFFF& türkis
' &H000000& = Schwarz 
Draw.Line(1, 130, 500, 400)
Draw.End

Rechteck

Das folgende Programm zeichnet ein Rechteck.

Machen Sie ein neues Projekt. Öffnen Sie eine neue Form: Mit der rechten Maus auf Form klicken. Geben Sie ihr den Namen Fmain. Holen Sie sich einen Befehlsknopf = Button aus der Werkzeugkiste . Holen Sie sich eine DrawingArea = Zeichenfeld aus der Werkzeugkiste.

Nennen Sie die Zeichenfläche da. Dazu markieren Sie die Zeichenfläche mit der Maus . Drücken Sie F4 und sie erhalten die Eigenschaften = Properties der Zeichenfläche. In der zweiten Zeile bei (Name) geben Sie statt DrawingArea den eigenen Namen da ein.

Kopieren Sie den Code ins Programm. Starten Sie das Programm mit F5. Achten Sie auf die Farbgebung bei den Eigenschaften, sonst sehen Sie nichts.

Beachten Sie folgendes:

Die Koordinaten der Drawing Area gehen von der linken Oberen Ecke ( DrawingArea.X = 0, DrawingArea.Y = 0) bis zur unteren rechten Ecke (DrawingArea.Width = beliebig, DrawingArea.Height = beliebig).

Bei den Koordinaten des Rechtecks geben die ersten 2 Ziffern die absoluten Koordinaten der linken oberen Ecke des Rechtecks in der Drawing Area an. Im Beispiel werden 100 und 100 gewählt. Die 2 weiteren Zahlen geben die Koordinaten der rechten unteren Ecke des Rechtecks relativ zur linken oberen Anfangsecke an. Im Beispiel 90 und 90. Die absoluten Koordinaten der rechten unteren Ecke sind im Beispiel dann 190 und 190 .

Beim Draw.Line Befehl ist das anders. Hier wurden absolute Koordinaten gewählt.

Als Übung können Sie versuchen in das Rechteck die 2 Diagonalen mit Drawline einzuzeichen.

Wie lauten dazu die Koordinaten. Lösung siehe unten.

PUBLIC SUB Button1_Click()
Draw.Begin(da)
Draw.Rect(100, 100, 90, 90)
Draw.End
END

Variante mit Diagonalen

PUBLIC SUB Button1_Click() 
Draw.Begin(da)
Draw.Rect(100, 100, 90, 90)
Draw.Line(100, 100, 190, 190)
Draw.Line(100, 190, 190, 100)
Draw.End
END

Rechteck mit Farbe füllen

Das Beispielprogramm zeichnet ein Rechteck und füllt es mit weißer Farbe.

PUBLIC SUB Button1_Click()
  Draw.Begin(DrawingArea1)     ' Verwende DrawinArea1 als "Leinwand"
  Draw.FillColor = Color.white
  Draw.FillStyle = 1
  Draw.ForeColor = Color.white ' der Rand wird auch weiß 
  Draw.Rect (100, 100,200,200)
  Draw.End
END

Kreis

Dieses Grafikprogramm zeigt die Programmierung einer Kreisgrafik:

Hinter dem Befehl ein paar Kreise steht der folgende Code:

PUBLIC SUB Button1_Click()
  Draw.Begin(Drawingarea1)
  Draw.Ellipse(10, 50, 90, 90)
  Draw.Ellipse(10, 50, 50, 50)
  Draw.Ellipse(10, 50, 20, 20)
  Draw.End
END

Sie brauchen eine Zeichenfläche (Klasse Drawingarea) und einen Knopf der Klasse Commandbutton auf Ihrem Formular, um das Programm in Gang zu bringen. Spielen Sie mit den einzelnen Größen etwas herum und beobachten Sie wie sich die Grafiken ändern.

Vereinfachen Sie das Programm so, daß nur noch ein Kreis gezeichnet wird.

Beachten Sie folgendes:

• Die erste Zahl hinter dem Befehl Draw.Ellipse gibt die x Koordinate der linken oberen Ecke eines Rechtecks an, in die die Ellipse , bzw. der Kreis tangential eingebettet ist.
  • Man kann diesen Wert xloe ( x Wert linke obere Ecke) nennen
• Die zweite Zahl gibt die y Koordinate der linken oberen Ecke an.
  • Man kann diesen Wert yloe ( y Wert linke obere Ecke) nennen
• Die dritte Zahl gibt die x Koordinate der rechten unteren Ecke an. Der Wert ist kein Absolutwert sondern relativ zur linken oberen Ecke.
  • Man kann diesen Wert rxrue ( relativen x Wert rechte untere Ecke) nennen
• Die vierte Zahl gibt die y Koordinate der rechten unteren Ecke an.
  • Man kann diesen Wert ryrue ( relativen y Wert rechte untere Ecke) nennen

Will man einen Kreis programmieren, dann müssen der dritte und der vierte Parameter gleich sein, denn nur so wird das berührende Rechteck ein Quadrat. Nur ein Quadrat kann mit allen 4 Seiten einen Kreis berühren.

Draw.Ellipse(xloe, yloe, rxrue, ryrue)

Für den Kreis gilt rxrue = ryrue 

Überprüfen Sie, ob im obigen Kreisprogramm diese Vorgaben eingehalten werden. Verändern Sie den Parameter 3 und 4 und schauen Sie sich an , was passiert.

Um das Ganze zu verdeutlichen programmiert man am besten einen Kreis und das umgebende Quadrat.

PUBLIC SUB Button1_Click()
Draw.Begin(Drawingarea1)
Draw.Ellipse(10, 50, 90, 90)
Draw.Rect(10, 50, 90, 90)
Draw.End
END

Aus diesen Vorgaben kann man den Radius des Kreises berechnen:

Radius = (dritte oder vierter Parameter von Draw.Ellipse) / 2) 

Aus diesen Vorgaben kann man auch die Koordinaten des Kreismittelpunktes berechnen.

mx = xloe + rxrue / 2
my = yloe + rxrue / 2

Wie kann man dann die 2 Brennpunkte einer Ellipse berechnen, wenn also rxrue und ryrue verschieden sind ??

Die Röhre

Ein weiteres Beispiel mit vielen verschiedenen Kreisen. Das Programm wurde mit Menusteuerung programmiert. Siehe Gambas: Menü Außerdem wird eine DrawingArea auf der Form gebraucht.

So schaut das Ganze aus:

Der Code dazu:

PUBLIC SUB Form_Open()
 DrawingArea1.Resize(ME.Width, ME.Height)
END
PUBLIC SUB Menu2_Click()
x AS Integer 
Draw.Begin(Drawingarea1)
FOR x = 0 TO 200 STEP 5
 Draw.Ellipse(10, 10, x + 100, x + 100,5)
NEXT
Draw.End
END
PUBLIC SUB Menu3_Click()
  ME.Close
END

Konzentrische Kreise

Im folgenden Beispiel werden mehrere konzentrische Kreise in eine DrawingArea gezeichnet. Sie brauchen

• eine Drawingarea ( Grafikfeld)
• einen Befehlsbutton

um das Programm in Gang zu bringen.

PUBLIC SUB Form_Open()
 Drawingarea1.cached = TRUE
 IF Drawingarea1.width > Drawingarea1.height THEN 
 Drawingarea1.width = Drawingarea1.height 
 ELSE 
 Drawingarea1.height = Drawingarea1.width 
ENDIF 
Button1.Text = "Kreise"
ME.Text = "Konzentrische Kreise"
END
PUBLIC SUB Button1_Click()
mx AS Integer 
'x Koordinate des Mittelpunktes
my AS Integer
'y Koordinate des Mittelpunktes 
'Radius = mx - a 
a AS Integer
'linke obere Ecke x Koordinate 
b AS Integer
'linke obere Ecke y Koordinate  
c AS Integer
'a + c ergibt die x Koordinate der rechten unteren Ecke 
d AS Integer
'b + d ergibt die y Koordinate der rechten unteren Ecke 
mx = Drawingarea1.width / 2
Draw.Begin(Drawingarea1)
a = 0
FOR a = 0 TO mx STEP 10
 b = a 
 c = 2 * (mx - a)
 d = c
draw.Ellipse (a,b,c,d)
NEXT 
draw.End
END

Die folgende Abbildung zeigt einen Screenshot des Programmes. Eine Kleinigkeit ist allerdings falsch. Fällt es Ihnen auf.

Der zweite Befehlsbutton und der Code dazu fehlt im obigen Programm.

PUBLIC SUB Button2_Click()
 ME.Close 
END

Tortengrafik

Fügt man dem Befehl Draw(Ellipse) außer den 4 notwendigen Parametern noch 2 weitere Parameter hinzu erhält man Kreissegmente, die man gut für eine Tortengrafik nutzen kann.

• Parameter 5, Gradzahl bei der das Segment beginnen soll
• Parameter 6, Gradzahl, bei der das Segment endet soll.

Beispiel:

PUBLIC SUB Button1_Click()
Draw.Begin(Drawingarea1)
Draw.Ellipse(10, 50, 90, 90, 10, 90)
Draw.End
END

Man erhält einen Viertelkreis , der bei zehn Grad im Westem beginnt und entgegen des Uhrzeigerssinnes läuft.

Siehe auch: http://www.binara.com/gambas-wiki/bin/view/Gambas/DrawFigures

Ellipse

Um die wichtigsten Parameter des Befehls Draw.Ellipse zu verstehen, können Sie folgendes Programm ausprobieren:

Layout

Sie brauchen:

• 9 Textboxen auf Ihrer Form
• 1 Drawingarea
• 3 Befehlsbuttons
• 2 Labelfelder

auf Ihrer Form um das Programm in Gang zu bringen.

Der Code

PUBLIC SUB Form_Open()
textbox1.Text = "0"
textbox2.Text = "0"
textbox3.Text = Str(Drawingarea1.Width)
textbox4.Text = Str(Drawingarea1.Height)
textbox5.Text = "10"  
textbox6.Text = "10" 
textbox7.Text = Str(0 + Drawingarea1.Width/2)
textbox8.Text = Str(0 + Drawingarea1.Height/2)
textbox9.Text = Str(Drawingarea1.Width/2)
Button1.Text = "Kreis"
END
PUBLIC SUB Button1_Click()
a AS Integer 
b AS Integer
c AS Integer
d AS Integer
a = Val(Textbox1.text)
b = Val(Textbox2.text)
c = Val(Textbox3.text)
d = Val(Textbox4.text)
Draw.Begin(Drawingarea1)
Draw.ellipse(a,b,c,d)
Draw.End 
textbox7.Text = Str(a + c/2)
textbox8.Text = Str(b + d/2)
textbox9.Text = Str(c/2) 
CATCH
message.Info("Bitte geben Sie in jedes Feld eine Zahl ein !")
END
PUBLIC SUB Button2_Click()
Draw.Begin(Drawingarea1)
Drawingarea1.Refresh
Draw.End 
END
PUBLIC SUB Button3_Click()
a AS Integer 
b AS Integer
c AS Integer
d AS Integer
e AS Float
f AS Float 
a = Val(Textbox1.text)
b = Val(Textbox2.text)
c = Val(Textbox3.text)
d = Val(Textbox4.text)
e = Val(Textbox5.text)
f = Val(Textbox6.text)
Draw.Begin(Drawingarea1)
Draw.ellipse(a,b,c,d,e,f)
Draw.End 
CATCH
message.Info("Bitte geben Sie in jedes Feld eine Zahl ein !")
END

Und so schaut das Programm zur Laufzeit aus :

Der Seestern

"Der kleine G. hatte gar nicht gewußt, dass man unterwasser auch so schöne Sterne finden konnte."

Das Seesternprogramm zeigt den Übergang von einer geordneten Struktur ins Chaos. Normalerweise haben Seesterne eigentlich 5 Beine. Bei unserem Programm ist eines verloren gegangen.

Um das Programm in Gang zu bringen, braucht man eine DrawingArea und einen Befehlsbutton.

Layout

Der Code

PUBLIC SUB Form_Open()
 DrawingArea1.Width = 1000
 DrawingArea1.H = 1000
 DrawingArea1.X = 0
 DrawingArea1.Y = 0
 DrawingArea1.Background = &HFFFFFF&
 Button1.Text = "Seestern"
END
PUBLIC SUB Button1_Click()
 E AS Integer 
AW AS Float 
H AS Integer 
X AS Float
Y AS Float 
I AS Integer 
A AS Float 
B AS Float
C AS Float 
Draw.Begin(DrawingArea1)
FOR E = 1 TO 13 
IF E = 1 THEN 
AW = 55 
H = 100 
ENDIF
IF E = 2 THEN 
AW = 80
H = 120 
ENDIF
IF E = 3 THEN 
AW = 88
H = 120
ENDIF 
IF E = 4 THEN 
AW = 90
H = 150 
ENDIF
IF E = 5 THEN 
AW = 90.1
H = 300 
ENDIF
IF E = 6 THEN 
AW = 90.2
H = 490 
ENDIF
IF E = 7 THEN 
AW = 90.21
H = 1000 
ENDIF
IF E = 8 THEN 
AW = 90.22
H = 600 
ENDIF
IF E = 9 THEN 
AW = 90.25
H = 250 
ENDIF
IF E = 10 THEN 
AW = 90.3
H = 180
ENDIF 
IF E = 11 THEN 
AW = 91
H = 100 
ENDIF
IF E = 12 THEN 
AW = 92
H = 100 
ENDIF
IF E = 13 THEN 
AW = 92.2
H = 410
ENDIF
X = 0.1513 
Y = -0.5388 
'Pi = 3.141593: 
A = AW * Pi / 180'
'Rem umrechnung d.360 Grad Winkels ins Bogenmass 
FOR I = 0 TO H 
B = X * Cos(A) - (Y - X * X) * Sin(A) 
C = X * Sin(A) + (Y - X * X) * Cos(A) 
X = B 
Y = C 
'Draw.Point (400 + E ,400 + E)
Draw.Point(B * 300 + 300, C * 300 + 300) 
'PRINT B, C 
NEXT  
'FOR z = 1 TO 1000000: NEXT z: Rem Zeitverzoegerung kann man variieren 
NEXT  
Draw.End
END