1.2.1 Linien zeichnen

Insbesondere im Anfangsunterricht ist das Programmieren von einfachen Grafiken auf Canvas-Widgets gut geeignet. Außerdem ist es etwas abwechslungsreicher, als beispielsweise das Lösen mathematischer Gleichungen zu programmieren.

Programm »gelbeLinien.py«

Das Programm »gelbeLinien.py« erzeugt eine grafische Benutzeroberfläche mit dem Hauptfenster und dem darauf platzierten blauen Canvas-Widget mit zwei gelben Linien.

  • In der Abbildung 1 sind die auf dem Canvas-Widget diagonal entgegengesetzt verlaufenden gelbe Linien zu sehen.
Bild 12
Abbildung 1: Blaues Canvas-Widget mit zwei gelben Linien

Um die Linien zu zeichnen, müssen die Koordinaten der Anfangs- und Endpunkte der Linien angegeben werden:

  • Das Koordinatensystem des Canvas-Widgets ist in der Abbildung 2 dargestellt.
  • Auch diesmal ist zu beachten, dass die y-Achse des Koordinatensystems nach unten (Süden) ausgerichtet ist.
Bild 13
Abbildung 2: Koordinatensystem des Canvas-Widget
  • Die Anfangs- und der Endpunkte der Linie haben jeweils eine x-Koordinate und eine y-Koordinate.
  • Die Linien werden mit der Canvas-Methode »create_line((x1, y1), (x2, y2), …)« auf dem Canvas-Widget gezeichnet.
Quelltext des Programms »gelbeLinien.py« 
import tkinter as tk

# grafische Benutzeroberfläche
root=tk.Tk()
root.title("Gelbe Linien")
root.geometry("400x400")
root.resizable(False, False)

# Canvas-Widget mit gelben Linien
canvas=tk.Canvas(root, background="blue")
canvas.create_line((20,20), (380,380), width=2,\
                   fill="yellow")
canvas.create_line((380,20), (20,380), width=2,\
                   fill="yellow")

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

root.mainloop()
Erklärungen zum Quelltext
3. und 9. Zeile In den Zeilen stehen Kommentare zum Verstehen des Quelltexts. Die Kommentare haben keinen Einfluss auf den Ablauf des Programms.
5. Zeile Das Hauptfenster erhält den Titel »Gelbe Linien«.
6. Zeile Das Hauptfenster bekommt die Größe »400x400« Pixel.
  • Die Breite des Hauptfensters beträgt 400 Pixel.
  • Die Höhe des Hauptfensters beträgt 400 Pixel.
7. Zeile Die Größe das Hauptfensters wird fixiert.
8. Zeile Das Canvas-Widget wird erzeugt.
  • Die Füllfarbe des Canvas-Widgets ist blau.
11. und 12. Zeile Auf dem Canvas-Widget wird eine gelbe Linie vom Punkt (20,20) zum Punkt (380,380) gezeichnet.
  • Die Dicke der Linie beträgt 2 Pixel.
13. und 14, Zeile Auf dem Canvas-Widget wird eine gelbe Linie vom Punkt (380,20) zum Punkt (20,380) gezeichnet.
  • Die Dicke der Linie beträgt 3 Pixel.
16. Zeile Das Canvas-Widget wird als Element 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.
Übung

Aufgabe A4

Implementiere – mit Blick auf den Quelltext des Programms »gelbeLinien.py« – ein Programm »meineLinien.py« am Computer.

  • Das Hauptfenster soll den Titel »Meine Linien« 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.
  • Die Linien sollen die Farbe Rot und die Linienbreite 2 Pixel erhalten.
  • Das Programm soll, ähnlich wie in der Abbildung 3 dargestellt, ein schwarzes Canvas-Widget mit den darauf befindlichen roten Linien ausgeben.[1]
Bild 14
Abbildung 3: Schwarzes Canvas-Widget mit roten Linien

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

Erweitere das Programm, sodass das Programm – ähnlich wie in der Abbildung 4 dargestellt – ein schwarzes Canvas-Widget mit den darauf befindlichen roten Linien ausgibt.[1]

Bild 15
Abbildung 4: Schwarzes Canvas-Widget mit roten Linien

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

Auf der Seite 4. wird ein vertiefender Einblick in das Programmieren von Grafiken vermittelt.

  1. [1] Es ist durchaus möglich, andere Hintergrund- und Linienfarben zu verwenden.