tkinter - tk.Canvas

tk.Canvas erzeugen

canvas = tk.Canvas(parent, Optionen)

Das folgende Programm stellt ein scrollbares Canvas vor:

import tkinter as tk
from tkinter import ttk

class A(tk.Tk):
    def __init__(self):
        super().__init__()
        self.geometry("500x500")
        self._createWidgets()

    def _createWidgets(self):
        self.grid_columnconfigure(0, weight=1)
        self.grid_rowconfigure(0, weight=1)

        # Canvas erzeugen
        self.canvas = tk.Canvas(self, width=1000, height=1000, scrollregion=(0, 0, 1000, 1000))
        self.canvas.grid(column=0, row=0, sticky=tk.N+tk.S+tk.W+tk.E)

        # Horizontale Scrollbar
        scrollX = ttk.Scrollbar(self, orient=tk.HORIZONTAL, command=self.canvas.xview)
        scrollX.grid(column=0, row=1, sticky=tk.W+tk.E)

        # Vertikale Scrollbar
        scrollY = ttk.Scrollbar(self, orient=tk.VERTICAL, command=self.canvas.yview)
        scrollY.grid(row=0, column=1, sticky=tk.N+tk.S)

        # Canvas mit Scrollbar verbinden
        self.canvas.configure(xscrollcommand=scrollX.set, yscrollcommand=scrollY.set)

        # Eine Linie, damit man was sieht
        self.canvas.create_line(10, 10, 990, 990, fill='red')

if __name__ == '__main__':
    window = A()
    window.mainloop()

Canvas-Methoden ohne Tags oder Ids

Canvas-Methoden, die sich auf Tags oder Ids beziehen

Innerhalb dieses Abschnitts wird von einem Textindex gesprochen. In der Regel ist damit folgendes gemeint:

• numerischer Index: 0 ist das erste Zeichen, 1…
• tk.END: die Stelle nach dem letzten Zeichen im Text
• tk.INSERT: die Stelle an der die Einfügemarke steht
• tk.SEL_FIRST: die Stelle vor dem ersten ausgewählten Zeichen
• tk.SEL_LAST: die Stelle vor dem letzten ausgewählten Zeichen
• '@x,y': Position in der Nähe dieser Koordinate

Bis auf tk.INSERT können Textindices auch für Linien und Polygone benutzt werden.

Im folgenden Beispiel werden einige Rechtecke erzeugt und deren Tags auf der Konsole ausgegeben. Das Item unter der Maus, also das "aktive" Item, wird jeweils besonders dargestellt (Option: activefill):

import tkinter as tk
from tkinter import ttk

class A(tk.Tk):
    def __init__(self):
        super().__init__()
        self.geometry("420x420")
        self._createWidgets()

    def _createWidgets(self):
        self.grid_columnconfigure(0, weight = 1)
        self.grid_rowconfigure(0, weight = 1)

        self.canvas = tk.Canvas(self, width=200, height=200,
                                scrollregion=(0, 0, 400, 400),
                                background='black')
        self.canvas.grid(column=0, row=0, sticky=tk.N+tk.S+tk.W+tk.E)

        r1 = self.canvas.create_rectangle(10, 10, 60, 50,
                                     fill='darkred', activefill='red',
                                     tags=('my-rect', 'rect-1'))

        r2 = self.canvas.create_rectangle(10, 50, 60, 90,
                                     fill='darkgreen', activefill='green',
                                     tags=('my-rect', 'rect-2'))

        r3 = self.canvas.create_rectangle(10, 90, 60, 130,
                                     fill='darkblue', activefill='blue',
                                     tags=('my-rect', 'rect-3'))
        # Alle Ids -> (1, 2, 3)
        print(self.canvas.find_all())
        # Einzelne Id als Tupel -> (3,)
        print(self.canvas.find_above('rect-2'))
        # -> 'rectangle'
        print(self.canvas.type(r1))

if __name__ == '__main__':
    window = A()
    window.mainloop()

Im folgenden Beispiel wird sowohl eine einzelne Id wie auch ein Tag an das MausPress-Ereignis gebunden. Das jeweils aktivierte Rechteck bekommt intern ein zusätzliches Tag namens 'current'. So lässt sich schnell herausfinden, welches Rechteck angeklickt wurde.

import tkinter as tk
from tkinter import ttk

class A(tk.Tk):
    def __init__(self):
        super().__init__()
        self.geometry("420x420")
        self._createWidgets()

    def _createWidgets(self):
        self.grid_columnconfigure(0, weight = 1)
        self.grid_rowconfigure(0, weight = 1)

        self.canvas = tk.Canvas(self, width=200, height=200,
                                scrollregion=(0, 0, 400, 400),
                                background='black')
        self.canvas.grid(column=0, row=0, sticky=tk.N+tk.S+tk.W+tk.E)

        r1 = self.canvas.create_rectangle(10, 10, 60, 50,
                                     fill='darkred', activefill='red',
                                     tags=('my-rect', 'rect-1'))

        r2 = self.canvas.create_rectangle(10, 50, 60, 90,
                                     fill='darkgreen', activefill='green',
                                     tags=('my-rect', 'rect-2'))

        r3 = self.canvas.create_rectangle(10, 90, 60, 130,
                                     fill='darkblue', activefill='blue',
                                     tags=('my-rect', 'rect-3'))

        self.canvas.tag_bind(r1, '<Button-1>', self._onR1Press)
        self.canvas.tag_bind('my-rect', '<Button-1>', self._onRectPress)

    def _onR1Press(self, event):
        print('Rechteck 1 wurde gedrückt')

    def _onRectPress(self, event):
        print('Es wurde ein Rechteck gedrückt')
        ids = self.canvas.find_withtag('current')
        print(' id des gedrückten Rechtecks:', ids[0])
        tags = self.canvas.gettags(ids[0])
        print(' tags des gedrückten Rechtecks:', tags)

if __name__ == '__main__':
    window = A()
    window.mainloop()

Allgemeine Itemoptionen

Canvas-Items haben ebenfalls Optionen, mit denen sie erstellt werden. Hier werden allgemeine Optionen vorgestellt:

Einige der Itemoptionen werden im folgenden Beispiel vorgestellt. Um die Auswirkung einiger Optionen zu sehen, muss man mit der Maus über die Ränder und in die Flächen fahren:

import tkinter as tk
from tkinter import ttk

class A(tk.Tk):
    def __init__(self):
        super().__init__()
        self.geometry("600x400")
        self._createWidgets()

    def _createWidgets(self):
        self.grid_columnconfigure(0, weight=1)
        self.grid_rowconfigure(0, weight=1)

        # Canvas erzeugen
        self.canvas = tk.Canvas(self, width=400, height=400, scrollregion=(0, 0, 400, 400))
        self.canvas.grid(column=0, row=0, sticky=tk.N+tk.S+tk.W+tk.E)

        # Rechtecke, ändern "dash" beim Überfahren mit der Maus über den Rand
        self.canvas.create_rectangle(50, 50, 150, 150, width=5, activedash='.', dash='-.-')
        self.canvas.create_rectangle(200, 50, 300, 150, width=5, activedash='-', dash='.')
        self.canvas.create_rectangle(350, 50, 450, 150, width=5, activedash=',_', dash='_')

        self.canvas.create_rectangle(50, 200, 150, 300, width=5, outline='red', fill='blue',
                                     activewidth=10, activeoutline='green', activefill='yellow')
        self.canvas.create_rectangle(200, 200, 300, 300, width=1, fill='green',
                                     stipple='gray12', activestipple='gray75')
        self.canvas.create_rectangle(350, 200, 450, 300, width=1, fill='green',
                                     stipple='gray12', activestipple='questhead')

if __name__ == '__main__':
    window = A()
    window.mainloop()

Arc Item

Zeichnet einen Kreisbogen im Rechteck x0, y0, x1, y1

id = c.create_arc(x0, y0, x1, y1, option, …)

Dazu sind die folgenden allgemeinen Itemoptionen bekannt:dash, activedash, disableddash, dashoffset, fill, activefill, disabledfill, offset, outline, activeoutline, disabledoutline, outlinestipple, activeoutlinestipple, disabledoutlinestipple, stipple, activestipple, disabledstipple, state, tags, width, activewidth und disabledwidth

Das folgende Programm zeigt einige Bögen mit unterschiedlichen Parametern:

import tkinter as tk
from tkinter import ttk

class A(tk.Tk):
    def __init__(self):
        super().__init__()
        self.geometry("600x400")
        self._createWidgets()

    def _createWidgets(self):
        self.grid_columnconfigure(0, weight=1)
        self.grid_rowconfigure(0, weight=1)

        # Canvas erzeugen
        self.canvas = tk.Canvas(self, width=400, height=400, scrollregion=(0, 0, 400, 400))
        self.canvas.grid(column=0, row=0, sticky=tk.N+tk.S+tk.W+tk.E)

        # Arcs zeichnen, erste Reihe
        self.canvas.create_arc(  0, 50, 100, 150)
        self.canvas.create_arc(150, 50, 250, 150, start=90, extent=180)
        self.canvas.create_arc(300, 50, 400, 150, start=90, extent=300)
        self.canvas.create_arc(450, 50, 550, 150, start=0, extent=359.99)
        # zweite Reihe
        self.canvas.create_arc(  0, 200, 100, 300, style=tk.PIESLICE, start=90, extent=270)
        self.canvas.create_arc(150, 200, 250, 300, style=tk.ARC, start=90, extent=270)
        self.canvas.create_arc(300, 200, 400, 300, style=tk.CHORD, start=90, extent=270)
        self.canvas.create_arc(450, 200, 550, 300, start=90, extent=270)

if __name__ == '__main__':
    window = A()
    window.mainloop()

Bitmap Item

Stellt ein Bitmap (2-farbiges XPM) dar.

id = c.create_bitmap(x, y, optionen)

Dazu sind die folgenden allgemeinen Itemoptionen bekannt:state und tags

Das folgende Programm zeigt einige Bitmaps und eine Auswahl der Optionen. Es muss hierfür ein Bitmap mit dem Namen test.xbm im XBM-Format vorliegen. Das Bitmap info ist ein internes Bitmap:

import tkinter as tk
from tkinter import ttk

class A(tk.Tk):
    def __init__(self):
        super().__init__()
        self.geometry("250x250")
        self._createWidgets()

    def _createWidgets(self):
        self.grid_columnconfigure(0, weight=1)
        self.grid_rowconfigure(0, weight=1)

        # Canvas erzeugen
        self.canvas = tk.Canvas(self, width=400, height=400, scrollregion=(0, 0, 400, 400))
        self.canvas.grid(column=0, row=0, sticky=tk.N+tk.S+tk.W+tk.E)

        # Bitmaps darstellen
        self.canvas.create_bitmap(20, 20, bitmap="@test.xbm", anchor=tk.NW, background='red')
        self.canvas.create_bitmap(248,248, bitmap="@test.xbm", anchor=tk.SE, foreground='red')
        self.canvas.create_bitmap(20, 150, bitmap='info', activebitmap='error', activebackground='green')

if __name__ == '__main__':
    window = A()
    window.mainloop()

Image Item

Plaziert ein mehrfarbiges Bild auf dem Canvas.

id = c.create_image(x, y, optionen)

Dazu sind die folgenden allgemeinen Itemoptionen bekannt:anchor, state und tags

Das folgende Programm zeigt, wie man ein Bild lädt und es auf dem Canvas darstellt:

import tkinter as tk
from tkinter import ttk

class A(tk.Tk):
    def __init__(self):
        super().__init__()
        self.geometry("400x200")
        self._createWidgets()

    def _createWidgets(self):
        self.grid_columnconfigure(0, weight=1)
        self.grid_rowconfigure(0, weight=1)

        # Canvas erzeugen
        self.canvas = tk.Canvas(self, width=400, height=400, scrollregion=(0, 0, 400, 400))
        self.canvas.grid(column=0, row=0, sticky=tk.N+tk.S+tk.W+tk.E)

        # Bitmaps darstellen
        self.img = tk.PhotoImage(file='test.png')
        self.canvas.create_image(20, 20, image=self.img, anchor=tk.NW)
        ttk.Label(text='Bildherkunft: https://upload.wikimedia.org/wikipedia/commons/5/51/Static_CMOS_Inverter.png').grid()

if __name__ == '__main__':
    window = A()
    window.mainloop()

Line Item

Zeichnet eine Linie oder mehrere Linienabschnitte auf dem Canvas.

id = c.create_line(x1, y1, …, xn, yn, optionen)

Dazu sind die folgenden allgemeinen Itemoptionen bekannt:dash, activedash, disableddash, dashoffset, fill, activefill, disabledfill, stipple, activestipple, disabledstipple, state, tags, width, activewidth und disabledwidth

Das folgende Programm zeigt, wie wie sich joinstyle, smooth und splinesteps auswirken:

import tkinter as tk
from tkinter import ttk

class A(tk.Tk):
    def __init__(self):
        super().__init__()
        self.geometry("450x250")
        self._createWidgets()

    def _createWidgets(self):
        self.grid_columnconfigure(0, weight=1)
        self.grid_rowconfigure(0, weight=1)

        # Canvas erzeugen
        self.canvas = tk.Canvas(self, width=400, height=400, scrollregion=(0, 0, 400, 400))
        self.canvas.grid(column=0, row=0, sticky=tk.N+tk.S+tk.W+tk.E)

        # Linie darstellen mit joinstyle
        self.canvas.create_line(20, 20, 100, 20, 100, 50, width=10)
        self.canvas.create_line(20, 60, 100, 60, 100, 90, width=10, joinstyle=tk.BEVEL)
        self.canvas.create_line(20, 100, 100, 100, 100, 130, width=10, joinstyle=tk.MITER)
        self.canvas.create_line(20, 140, 100, 140, 100, 170, width=10, joinstyle=tk.ROUND)

        # Linie darstellen mit smooth
        self.canvas.create_line(120, 20, 200, 20, 200, 50, 250, 50, smooth=tk.NO)
        self.canvas.create_line(120, 60, 200, 60, 200, 90, 250, 90, smooth=tk.YES)

        # Linie darstellen mit splinesteps
        self.canvas.create_line(300, 20, 350, 20, 350, 50, 400, 50,
                                smooth=tk.YES, splinesteps=2)
        self.canvas.create_line(300, 60, 350, 60, 350, 90, 400, 90,
                                smooth=tk.YES, splinesteps=4)
        self.canvas.create_line(300, 100, 350, 100, 350, 130, 400, 130,
                                smooth=tk.YES, splinesteps=100)

if __name__ == '__main__':
    window = A()
    window.mainloop()

Das folgende Programm zeigt, wie wie sich capstyle auswirkt:

import tkinter as tk
from tkinter import ttk

class A(tk.Tk):
    def __init__(self):
        super().__init__()
        self.geometry("450x250")
        self._createWidgets()

    def _createWidgets(self):
        self.grid_columnconfigure(0, weight=1)
        self.grid_rowconfigure(0, weight=1)

        # Canvas erzeugen
        self.canvas = tk.Canvas(self, width=400, height=400, scrollregion=(0, 0, 400, 400))
        self.canvas.grid(column=0, row=0, sticky=tk.N+tk.S+tk.W+tk.E)

        # Linie darstellen mit arrow
        self.canvas.create_line(20, 20, 100, 20, width=15)
        self.canvas.create_line(20, 40, 100, 40, width=15, capstyle=tk.BUTT)
        self.canvas.create_line(20, 60, 100, 60, width=15, capstyle=tk.PROJECTING)
        self.canvas.create_line(20, 80, 100, 80, width=15, capstyle=tk.ROUND)

if __name__ == '__main__':
    window = A()
    window.mainloop()

Das folgende Programm zeigt, wie wie sich arrow und arrowshape auswirken:

import tkinter as tk
from tkinter import ttk

class A(tk.Tk):
    def __init__(self):
        super().__init__()
        self.geometry("450x250")
        self._createWidgets()

    def _createWidgets(self):
        self.grid_columnconfigure(0, weight=1)
        self.grid_rowconfigure(0, weight=1)

        # Canvas erzeugen
        self.canvas = tk.Canvas(self, width=400, height=400, scrollregion=(0, 0, 400, 400))
        self.canvas.grid(column=0, row=0, sticky=tk.N+tk.S+tk.W+tk.E)

        # Linie darstellen mit arrow
        self.canvas.create_line(20, 20, 100, 20, arrow=tk.FIRST)
        self.canvas.create_line(20, 120, 100, 120, arrow=tk.LAST)
        self.canvas.create_line(20, 220, 100, 220, arrow=tk.BOTH)
        # Linie mit arrowshape
        self.canvas.create_line(120, 20, 200, 20, arrow=tk.BOTH,
                                arrowshape=(10, 10, 10))
        self.canvas.create_line(120, 120, 200, 120, arrow=tk.BOTH,
                                arrowshape=(20, 10, 10))
        self.canvas.create_line(120, 220, 200, 220, arrow=tk.BOTH,
                                arrowshape=(30, 10, 10))
        self.canvas.create_line(220, 20, 300, 20, arrow=tk.BOTH,
                                arrowshape=(10, 10, 10))
        self.canvas.create_line(220, 120, 300, 120, arrow=tk.BOTH,
                                arrowshape=(10, 20, 10))
        self.canvas.create_line(220, 220, 300, 220, arrow=tk.BOTH,
                                arrowshape=(10, 30, 10))
        self.canvas.create_line(320, 20, 400, 20, arrow=tk.BOTH,
                                arrowshape=(10, 10, 10))
        self.canvas.create_line(320, 120, 400, 120, arrow=tk.BOTH,
                                arrowshape=(10, 10, 20))
        self.canvas.create_line(320, 220, 400, 220, arrow=tk.BOTH,
                                arrowshape=(10, 10, 30))

if __name__ == '__main__':
    window = A()
    window.mainloop()

Oval Item

Zeichnet ein Oval auf dem Canvas. Parameter sind ein Rechteck, in dem das Oval eingefasst wird. Dieses Item ist auch sehr gut zum Zeichnen von geschlossenen Kreisen geeignet und dafür leichter zu handhaben als Kreisbögen.

id = c.create_oval(x1, y1, x2, y2, optionen)

Es sind die folgenden allgemeinen Itemoptionen bekannt:dash, activedash, disableddash, dashoffset, fill, activefill, disabledfill, offset, outline, activeoutline, disabledoutline, outlinestipple, activeoutlinestipple, disabledoutlinestipple, stipple, activestipple, disabledstipple, state, tags, width, activewidth und disabledwidth

Das folgende Programm zeigt einige Ovale

import tkinter as tk
from tkinter import ttk

class A(tk.Tk):
    def __init__(self):
        super().__init__()
        self.geometry("300x400")
        self._createWidgets()

    def _createWidgets(self):
        self.grid_columnconfigure(0, weight=1)
        self.grid_rowconfigure(0, weight=1)

        # Canvas erzeugen
        self.canvas = tk.Canvas(self, width=400, height=400, scrollregion=(0, 0, 400, 400))
        self.canvas.grid(column=0, row=0, sticky=tk.N+tk.S+tk.W+tk.E)

        # Ovale darstellen
        self.canvas.create_oval(100, 50, 200, 150, width=5, fill='red')
        self.canvas.create_oval(100, 150, 200, 350, width=5, fill='green')
        self.canvas.create_oval(20, 200, 100, 250, width=2, fill='blue')
        self.canvas.create_oval(200, 200, 280, 250, width=2, fill='blue')

if __name__ == '__main__':
    window = A()
    window.mainloop()

Polygon Item

Zeichnet ein geschlossenes Polygon. Es wird vom letzten zum ersten Punkt automatisch zurückgezeichnet.

id = c.create_polygon(x1, y1, …, xn, yn, optionen)

Es sind die folgenden allgemeinen Itemoptionen bekannt:dash, activedash, disableddash, dashoffset, fill, activefill, disabledfill, offset, outline, activeoutline, disabledoutline, outlinestipple, activeoutlinestipple, disabledoutlinestipple, stipple, activestipple, disabledstipple, state, tags, width, activewidth und disabledwidth

Das folgende Programm zeigt Polygone:

import tkinter as tk
from tkinter import ttk

class A(tk.Tk):
    def __init__(self):
        super().__init__()
        self.geometry("300x200")
        self._createWidgets()

    def _createWidgets(self):
        self.grid_columnconfigure(0, weight=1)
        self.grid_rowconfigure(0, weight=1)

        # Canvas erzeugen
        self.canvas = tk.Canvas(self, width=400, height=400, scrollregion=(0, 0, 400, 400))
        self.canvas.grid(column=0, row=0, sticky=tk.N+tk.S+tk.W+tk.E)

        # Polygone darstellen
        self.canvas.create_polygon(20, 20, 100, 100, 20, 100, width=5, fill='red')
        self.canvas.create_polygon(200, 20, 250, 50, 200, 120, 150, 50, width=5, fill='green')

if __name__ == '__main__':
    window = A()
    window.mainloop()

Rectangle Item

Zeichnet ein Rechteck

id = c.create_rectangle(x1, y1, x2, y2, optionen)

Es sind die folgenden allgemeinen Itemoptionen bekannt: dash, activedash, disableddash, dashoffset, fill, activefill, disabledfill, offset, outline, activeoutline, disabledoutline, outlinestipple, activeoutlinestipple, disabledoutlinestipple, stipple, activestipple, disabledstipple, state, tags, width, activewidth und disabledwidth

Für Beispiele siehe das Beispiel zu Canvas-Methoden, die sich auf Tags oder Ids beziehen

Text Item

Zeichnet einen Text auf dem Canvas

id = c.create_text(x, y, optionen)

Es sind die folgenden allgemeinen Itemoptionen bekannt: fill, activefill, disabledfill, stipple, activestipple, disabledstipple, state und tags

Das folgende Programm zeichnet Text auf dem Canvas:

import tkinter as tk
from tkinter import ttk

class A(tk.Tk):
    def __init__(self):
        super().__init__()
        self.geometry("300x200")
        self._createWidgets()

    def _createWidgets(self):
        self.grid_columnconfigure(0, weight=1)
        self.grid_rowconfigure(0, weight=1)

        # Canvas erzeugen
        self.canvas = tk.Canvas(self, width=400, height=400, scrollregion=(0, 0, 400, 400))
        self.canvas.grid(column=0, row=0, sticky=tk.N+tk.S+tk.W+tk.E)

        # Text darstellen
        self.canvas.create_text(10, 10, text='Hallo Welt', anchor=tk.NW)
        self.canvas.create_text(10, 50, text='Dieses ist ein sehr langer'
                                + 'Text mit sicher mehr als einer '
                                + 'einzelnen Zeile.',
                                width=100,
                                justify=tk.RIGHT,
                                anchor=tk.NW)

if __name__ == '__main__':
    window = A()
    window.mainloop()

Window Item

Stellt ein tk- oder ttk-Widget auf dem Canvas dar. Diese Widgets liegen immer über anderen grafischen Objekten.

id = c.create_window(x, y, optionen)

Es sind die folgenden allgemeinen Itemoptionen bekannt: state und tags

Das folgende Programm stellt ein ttk.Button im Canvas dar:

import tkinter as tk
from tkinter import ttk

class A(tk.Tk):
    def __init__(self):
        super().__init__()
        self.geometry("300x200")
        self._createWidgets()

    def _createWidgets(self):
        self.grid_columnconfigure(0, weight=1)
        self.grid_rowconfigure(0, weight=1)

        # Canvas erzeugen
        self.canvas = tk.Canvas(self, width=400, height=400, scrollregion=(0, 0, 400, 400))
        self.canvas.grid(column=0, row=0, sticky=tk.N+tk.S+tk.W+tk.E)

        # Window erzeugen
        w =  ttk.Button(self.canvas, text='Ein Knopf')

        # Window darstellen
        self.canvas.create_window(100, 100, window=w)

if __name__ == '__main__':
    window = A()
    window.mainloop()

Siehe Auch

• https://www.tcl.tk/man/tcl8.7/TkCmd/canvas.html
• Namen für Bitmaps in der Itemoption stipple
• Bild, Schaltkreis: Wikimedia Commons