1.2.2 Figuren zeichnen

Programm »bunteFiguren1.py«

Das Programm »bunteFiguren.py« erzeugt eine grafische Benutzeroberfläche mit dem Hauptfenster und einem darauf platzierten blauen Canvas-Widget mit bunten geometrischen Figuren – wie ein Rechteck, Quadrat, Ellipse und Kreis.

In der Abbildung 1 ist das vom Programm »bunteFigurem1.py« ausgegebene Canvas-Widget zu sehen.

Bild 16
Abbildung 1: Blaues Canvas-Widget mit bunten geometrischen Figuren

Erster Teil des Programms

Der erste Teil des Programms besteht darin, dass auf dem Canvas-Widget ein Rechteck und ein Quadrat gezeichnet werden.

Bild 17
Abbildung 2: Blaues Canvas-Widget mit rotem Rechteck und weißem Quadrat

Um eine Rechteck zu zeichnen, müssen die Koordinaten des Punkts (x,y) der rechten oberen Ecke des Rechtecks und die des Punkts (x+Länge,y+Breite) der linken unteren Ecke des Rechtecks angegeben werden.

  • Dabei gilt, dass Länge ≠ Breite ist.
Bild 18

Ein Quadrat ist ein spezielles Rechteck.

Um eine Quadrat zu zeichnen, müssen die Koordinaten des Punkts P(x,y) der rechten oberen Ecke des Quadrats und die des Punkts P(x+Länge,y+Länge) der linken unteren Ecke des Quadrats angegeben werden.

  • Dabei gilt, dass Länge = Breite ist.
Bild 19
Quelltext des Programms »bunteFiguren1.py«
import tkinter as tk

# geometrische Benutzeroberfläche
root=tk.Tk()
root.title("Bunte Figuren")
root.geometry("400x400")
root.resizable(False, False)

rechtecklaenge=200
rechteckbreite=110
quadratlaenge=150

# Canvas-Widget mit bunten Figuren
canvas = tk.Canvas(root, background="blue")
canvas.create_rectangle((50,80), (50+rechtecklaenge,\
				80+rechteckbreite), width=2, outline="red")
canvas.create_rectangle((200,150), (200+quadratlaenge,\
				150+quadratlaenge), width=2, outline="white")

canvas.pack(fill=tk.BOTH, expand=True)

root.mainloop()

Erklärungen zum Quelltext
5. Zeile Das Hauptfenster erhält den Titel »Bunte Figuren«.
6. Zeile Das Hauptfenster erhält die Größe »400x400« Pixel.
  • Die Breite des Hauptfensters beträgt 400 Pixel.
  • Die Höhe des Hauptfensters beträgt 400 Pixel.
9. Zeile Der Variable »rechtecklaenge« wird der Wert 200 zugewiesen.
10. Zeile Der Variable »rechteckbreite« wird der Wert 110 zugewiesen.
11. Zeile Der Variable »quadratlaenge« wird der Wert 150 zugewiesen.
14. Zeile Das Canvas-Widget wird erzeugt.
  • Die Füllfarbe des Canvas-Widgets ist blau.
15. und 16. Zeile Auf dem Canvas-Widget wird ein Rechteck vom Punkt (50,80) zum Punkt (50+laenge,80+breite) gezeichnet.
  • In der Zeile 15 bedeutet der Backslash einen Zeilenumbruch im Quelltext.
  • Die Liniendicke der Rechteckseiten beträgt 2 Pixel.
  • Die Farbe der Rechteckseiten ist rot.
17. und 18. Zeile Auf dem Canvas-Widget wird ein Quadrat vom Punkt (200,150) zum Punkt (200+laenge,150+laenge) gezeichnet.
  • In der Zeile 17 bedeutet der Backslash einen Zeilenumbruch im Quelltext.
  • Die Liniendicke der Quadratseiten beträgt 2 Pixel.
  • Die Farbe der Quadratseiten ist weiß.
20. Zeile Das Canvas-Widget wird auf dem Hauptfenster platziert.
  • Dabei entspricht die Größe des Canvas-Widgets aufgrund von »fill=tk.Both« und »expand=True« der Größe des Hauptfensters.

Zweiter Teil des Programms

Eine Erweiterung des Programms »bunteFiguren.py« erfolgt dadurch, dass auf dem Canvas-Widget zusätzlich noch eine Ellipse und ein Kreis gezeichnet werden.

Um eine Ellipse zu zeichnen, müssen die Koordinaten des Punkts P(x,y) der rechten oberen Ecke des die Ellipse umschließsenden Rechtecks und die des Punkts (x+Länge,y+Breite) der linken unteren Ecke des die Ellipse umschließenden Rechtecks angegeben werden.

  • Dabei gilt, dass Länge≠Breite ist,
Bild 20

Ein Kreis ist eine spezielle Ellipse.

Um einen Kreis zu zeichnen, müssen die Koordinaten des Punkts P(x,y) der rechten oberen Ecke des den Kreis umschließendende Quadrats und die des Punkts P(x+Länge,y+Länge) der linken unteren Ecke des den Kreis umschließenden Quadrats angegeben werden.

  • Dabei gilt, dass Länge=Breite ist.
Bild 21
Quelltext des erweiterten Programms »bunteFigurem.py«
import tkinter as tk

# geometrische benutzeroberfläche
root=tk.Tk()
root.title("Bunte Figuren")
root.geometry("400x400")
root.resizable(False, False)

rechtecklaenge=200
rechteckbreite=110
quadratlaenge=150
ellipselaenge=300
ellipsebreite=120
kreislaenge=200

# Canvas-Widget mit bunten Figuren
canvas = tk.Canvas(root, background="blue")
canvas.create_rectangle((50,90), (50+rechtecklaenge,\
				90+rechteckbreite1), width=2, outline="red" )
canvas.create_rectangle((200,150), (200+quadratlaenge,\
				150+quadratlaenge), width=2, outline="white")
canvas.create_oval((40,50), (20+ellipselaenge,\
				50+ellipsebreite), width=2, outline="black")
canvas.create_oval((60,160), (60+kreislaenge,\
				160+kreislaenge), width=2, outline="green")

canvas.pack(fill=tk.BOTH, expand=True)

root.mainloop()

Erklärungen zum Quelltext
22. und 23. Zeile Auf dem Canvas-Widget wird eine Ellipse vom Punkt P(40,50) zum Punkt P(40+ellipsenlaenge,50+ellipsenbreite) gezeichnet.
  • In der Zeile 22 bedeutet der Backslash einen Zeilenumbruch im Quelltext.
  • Die Liniendicke der Ellipse beträgt 2 Pixel.
  • Die Farbe der Ellipsenlinie ist grün.
24. und 25. Zeile Auf dem Canvas-Widget wird ein Kreis vom Punkt P(60,160) zum Punkt P(60+kreislaenge,160+kreislaenge) gezeichnet.
  • In der Zeile 24 bedeutet der Backslash einen Zeilenumbruch im Quelltext.
  • Die Liniendicke des Kreises beträgt 2.
  • Die Farbe des Kreislinie ist schwarz.
Übung

Aufgabe A5

Implementiere das Programm »bunteFigurem.py« am Computer.

Führe das Programm aus und teste, ob es fehlerfrei läuft und den gestellten Anforderungen entspricht.

Übung

Aufgabe A6

Implementiere ein Programm »meineFiguren1.py« am Computer.

  • Das Hauptfenster soll den Titel »Meine Figuren« und die Größe 400x400 Pixel erhalten.
  • Die Größe des Canvas-Widgets soll der Größe des Hauptfensters entsprechen.
  • Das Canvas-Widgets soll die Füllfarbe Schwarz erhalten.
  • Das Programm soll – ähnlich wie in der Abbildung 4 dargestellt – ein schwarzes Canvas-Widget ausgeben, auf dem ein Quadrat mit gelben Seiten, ein Rechteck mit orangen Seiten, ein Kreis mit einer roten Linie und eine Ellipse mit einer lila Linie platziert sind.[1]
Bild 22
Abbildung 4: Schwarzes Canvas-Widget mit bunten geometrischen Figuren

Führe das Programm aus und teste, ob es fehlerfrei läuft und den gestellten Anforderungen entspricht.

Erweitere das Programm »meineFiguren2.py«, indem die Figuren zusätzlich mit den Farben ihrer Seite bzw. Linien ausgefüllt werden (z. B. durch »fill="yellow"« beim Quadrat).

  • Dabei ist zu beachten, dass die Reihenfolge, in der die Figuren gezeichnet werden, entscheidend für die Sichtbarkeit aller Figuren ist. Auch dann, wenn sich die Figuren teils überlappen.

Führe das erweiterte Programm aus und teste, ob es fehlerfrei läuft und den gestellten Anforderungen entspricht.

Übung

Aufgabe 7

Implementiere ein Programm »meineFiguren2.py« am Computer.

  • Das Hauptfenster soll den Titel »Bunte Figuren« und die Größe 400x400 Pixel erhalten.
  • Die Größe des Canvas-Widgets soll der Größe des Hauptfensters entsprechen.
  • Das Canvas-Widgets soll die Füllfarbe Grün erhalten.

Das Programm soll zwei Figuren – ähnlich wie in der Abbildun 5 dargestellt – zeichnen.

  • Auf das grüne Canvas-Widget (background="green") soll ein Quadrat mit weißen Quadratseiten (outline="white") der Dicke 4 (width="4") und einer roten Quadratfläche (fill="red") gezeichnet werden.[1]
  • Zudem soll auf dem Canvas-Widget eine Ellipse mit einer orangen Ellipsenlinie (outline="orange") der Dicke 4 (width="4") und einer purpurnen (fill=purple) Ellipsenfläche gezeichnet werden.[1]
  • Die Ellipse soll das Quadrat teilweise überlappen.
Bild 26
Abbildung 5: Im Hauptfenster mit auf dem Canvas-Widget platzierte bunten Figuren

Führe das Programm aus und teste, ob es fehlerfrei läuft und den gestellten Anforderungen entspricht.


  1. [1] Es ist möglich, auch andere Farben zu verwenden.