Tkinter Tutorial Drawing in Tkinter

Information

Tkinter チュートリアル

Our Host


Tkinter Drawing in Tkinter.	H.Kamifuji .

Drawing in Tkinter

　Tkinter チュートリアルのこの部分では、いくつかの描画を行います。 Tkinter での描画は Canvas ウィジェットで行われます。 canvas は、Tkinter でグラフィックスを行うための高水準の機能です

　チャート、カスタムウィジェットを作成したり、ゲームを作成したりするのに使用できます。

目　次

Drawing in Tkinter

Lines

Colours

Shapes

Drawing image

Drawing text

参照ページ

リリースノート

関連ページ

Lines

　線は単純な幾何学的プリミティブである。 create_line() メソッドは、キャンバスに、線分 ( line ) を作成します。

#!/usr/bin/python3
# -*- coding: utf-8 -*-

"""
ZetCode Tkinter tutorial

This script draws lines on 
the Canvas.

Author: Jan Bodnar
Last modified: July 2017
Website: www.zetcode.com
"""

from tkinter import Tk, Canvas, Frame, BOTH

class Example(Frame):
  
    def __init__(self):
        super().__init__()   
         
        self.initUI()
        
        
    def initUI(self):
      
        self.master.title("Lines")        
        self.pack(fill=BOTH, expand=1)

        canvas = Canvas(self)
        canvas.create_line(15, 25, 200, 25)
        canvas.create_line(300, 35, 300, 200, dash=(4, 2))
        canvas.create_line(55, 85, 155, 85, 105, 180, 55, 85)
        
        canvas.pack(fill=BOTH, expand=1)


def main():
  
    root = Tk()
    ex = Example()
    root.geometry("400x250+300+300")
    root.mainloop()  


if __name__ == '__main__':
    main()

　コード例では、単純な線を描きます。

canvas.create_line(15, 25, 200, 25)

　create_line() メソッドのパラメータは、行の開始点と終了点の x 座標と y 座標です。

canvas.create_line(300, 35, 300, 200, dash=(4, 2))

　縦線が引かれます。ダッシュオプションは、行のダッシュパターンを指定します。私たちは、4 ピクセルのダッシュと2ピクセルのスペースの交互のセグメントからなるラインを持っています。

canvas.create_line(55, 85, 155, 85, 105, 180, 55, 85)

　create_line() メソッドは複数のポイントを取ることができます。この線は三角形を描画します。

　

Top

Colours

　色は、赤、緑、青（RGB）の輝度値の組み合わせを表すオブジェクトです。

#!/usr/bin/python3
# -*- coding: utf-8 -*-

"""
ZetCode Tkinter tutorial

This program draws three
rectangles filled with different
colours.

Author: Jan Bodnar
Last modified: July 2017
Website: www.zetcode.com
"""

from tkinter import Tk, Canvas, Frame, BOTH


class Example(Frame):
  
    def __init__(self):
        super().__init__()   
         
        self.initUI()
        
        
    def initUI(self):
      
        self.master.title("Colours")        
        self.pack(fill=BOTH, expand=1)

        canvas = Canvas(self)
        canvas.create_rectangle(30, 10, 120, 80, 
            outline="#fb0", fill="#fb0")
        canvas.create_rectangle(150, 10, 240, 80, 
            outline="#f50", fill="#f50")
        canvas.create_rectangle(270, 10, 370, 80, 
            outline="#05f", fill="#05f")            
        canvas.pack(fill=BOTH, expand=1)


def main():
  
    root = Tk()
    ex = Example()
    root.geometry("400x100+300+300")
    root.mainloop()  


if __name__ == '__main__':
    main()

　コード例では、3 つの長方形を描画し、異なる色の値で塗りつぶします。

canvas = Canvas(self)

　キャンバスウィジェットを作成します。

canvas.create_rectangle(30, 10, 120, 80,
    outline="#fb0", fill="#fb0")

　create_rectangle() は、キャンバス上に矩形の項目を作成します。最初の 4 つのパラメータは、2 つの境界点の x 座標と y 座標です。左上点と右下点です。輪郭パラメータを使用して、矩形のアウトラインの色を制御します。同様に、fill パラメータは、矩形の内部の色を提供します。

　

Top

Shapes

　キャンバスに様々な形を描くことができます。次のコード例は、それらのいくつかを示します。

#!/usr/bin/python3
# -*- coding: utf-8 -*-

"""
ZetCode Tkinter tutorial

In this script, we draw basic 
shapes on the canvas.

Author: Jan Bodnar
Last modified: July 2017
Website: www.zetcode.com
"""

from tkinter import Tk, Canvas, Frame, BOTH

class Example(Frame):
  
    def __init__(self):
        super().__init__()   
         
        self.initUI()
        
        
    def initUI(self):
      
        self.master.title("Shapes")        
        self.pack(fill=BOTH, expand=1)

        canvas = Canvas(self)
        canvas.create_oval(10, 10, 80, 80, outline="#f11", 
            fill="#1f1", width=2)
        canvas.create_oval(110, 10, 210, 80, outline="#f11", 
            fill="#1f1", width=2)
        canvas.create_rectangle(230, 10, 290, 60, 
            outline="#f11", fill="#1f1", width=2)
        canvas.create_arc(30, 200, 90, 100, start=0, 
            extent=210, outline="#f11", fill="#1f1", width=2)
            
        points = [150, 100, 200, 120, 240, 180, 210, 
            200, 150, 150, 100, 200]
        canvas.create_polygon(points, outline='#f11', 
            fill='#1f1', width=2)
        
        canvas.pack(fill=BOTH, expand=1)


def main():
  
    root = Tk()
    ex = Example()
    root.geometry("330x220+300+300")
    root.mainloop()  


if __name__ == '__main__':
    main()

　ウィンドウには、円、楕円、長方形、円弧、多角形の 5 種類の図形が描画されます。アウトラインは赤で描かれ、緑色で囲まれています。アウトラインの幅は 2 ピクセルです。

canvas.create_oval(10, 10, 80, 80, outline="#f11",
    fill="#1f1", width=2)

　ここでは、create_oval() メソッドを使用して円アイテムを作成します。最初の 4 つのパラメータは円の境界ボックス座標です。つまり、円が描画されるボックスの左上と右下の点の x 座標と y 座標です。

canvas.create_rectangle(230, 10, 290, 60,
    outline="#f11", fill="#1f1", width=2)

　長方形のアイテムを作成します。座標は、描画される矩形のバウンディングボックスです。

canvas.create_arc(30, 200, 90, 100, start=0,
    extent=210, outline="#f11", fill="#1f1", width=2)

　このコード行は円弧を作成します。円弧は円周の一部です。バウンディングボックスを提供します。開始パラメータは円弧の開始角度です。範囲は角度の大きさです。

points = [150, 100, 200, 120, 240, 180, 210,
    200, 150, 150, 100, 200]
    canvas.create_polygon(points, outline='#f11',
        fill='#1f1', width=2)

　ポリゴンが作成されます。これは、複数のコーナーを持つ形です。 Tkinter にポリゴンを作成するには、ポリゴン座標のリストをcreate_polygon() メソッドに渡します。

　

Top

Drawing image

　次の例では、イメージアイテムをキャンバスに描画します。

#!/usr/bin/python3
# -*- coding: utf-8 -*-

"""
ZetCode Tkinter tutorial

In this script, we draw an image
on the canvas.

Author: Jan Bodnar
Last modified: July 2017
Website: www.zetcode.com
"""

from tkinter import Tk, Canvas, Frame, BOTH, NW
from PIL import Image, ImageTk
# from pil import Image, ImageTk

class Example(Frame):
  
    def __init__(self):
        super().__init__()   
         
        self.initUI()
        
        
    def initUI(self):
      
        self.master.title("High Tatras")        
        self.pack(fill=BOTH, expand=1)
        
        self.img = Image.open("tatras.jpg")
        self.tatras = ImageTk.PhotoImage(self.img)

        canvas = Canvas(self, width=self.img.size[0]+20, 
           height=self.img.size[1]+20)
        canvas.create_image(10, 10, anchor=NW, image=self.tatras)
        canvas.pack(fill=BOTH, expand=1)


def main():
  
    root = Tk()
    ex = Example()
    root.mainloop()  


if __name__ == '__main__':
    main()

　この例では、キャンバスに画像を表示します。

from PIL import Image, ImageTk

　PIL（Python Imaging Library）モジュールから、Image モジュールと ImageTk モジュールをインポートします。

self.img = Image.open("tatras.jpg")
self.tatras = ImageTk.PhotoImage(self.img)

　Tkinter は内部的に JPG イメージをサポートしていません。この問題を回避するには、Image モジュールと ImageTk モジュールを使用します。

canvas = Canvas(self, width=self.img.size[0]+20,
    height=self.img.size[1]+20)

　キャンバスウィジェットを作成します。イメージのサイズを考慮します。これは実際の画像サイズより 20px 広く、20px 高いです。

canvas.create_image(10, 10, anchor=NW, image=self.tatras)

　create_image() メソッドを使用してキャンバスにイメージアイテムを作成します。画像全体を表示するには、北と西に固定されています。画像パラメータは、表示する写真画像を提供する。

　jpg サンプル

　

　png サンプル

　

　gif サンプル

　

Top

Drawing text

　最後の例では、ウィンドウにテキストを描画します。

#!/usr/bin/python3
# -*- coding: utf-8 -*-

"""
ZetCode Tkinter tutorial

In this script, we draw text
on the window.

Author: Jan Bodnar
Last modified: July 2017
Website: www.zetcode.com
"""

from tkinter import Tk, Canvas, Frame, BOTH, W

class Example(Frame):
  
    def __init__(self):
        super().__init__()
         
        self.initUI()
        
        
    def initUI(self):
      
        self.master.title("Lyrics")        
        self.pack(fill=BOTH, expand=1)

        canvas = Canvas(self)
        canvas.create_text(20, 30, anchor=W, font="Purisa",
            text="Most relationships seem so transitory")
        canvas.create_text(20, 60, anchor=W, font="Purisa",
            text="They're good but not the permanent one")
        canvas.create_text(20, 130, anchor=W, font="Purisa",
            text="Who doesn't long for someone to hold")
        canvas.create_text(20, 160, anchor=W, font="Purisa",
            text="Who knows how to love without being told")                   
        canvas.create_text(20, 190, anchor=W, font="Purisa",
            text="Somebody tell me why I'm on my own")            
        canvas.create_text(20, 220, anchor=W, font="Purisa",
            text="If there's a soulmate for everyone")               
        canvas.pack(fill=BOTH, expand=1)


def main():
  
    root = Tk()
    ex = Example()
    root.geometry("420x250+300+300")
    root.mainloop()  


if __name__ == '__main__':
    main()

　私たちは曲の歌詞をウィンドウに描きます。

reate_text(20, 30, anchor=W, font="Purisa",
    text="Most relationships seem so transitory")

　最初の 2 つのパラメータは、テキストの中心点の x 座標とy座標です。テキストアイテムを西に固定すると、テキストはこの位置から開始します。 font パラメータはテキストのフォントを提供し、text パラメータは表示されるテキストです。

　

　Tkinterチュートリアルのこの部分では、私たちはいくつかの描画を行いました。

Top

参照ページ

Drawing in Tkinter

リリースノート
2023/03/11 Ver=1.03 Python 3.11.2 で確認

2020/10/27 Ver=1.01 Python 3.9.0 で確認

2018/11/10 Ver=1.01 初版リリース

関連ページ
Python インストール Windows 版

Python インストール Linux 版

MAX_PATH を除去する

Top