Tkinter Tutorial Canvas Widgets

Information

Tkinter チュートリアル

Our Host


Tkinter Canvas Widgets.	H.Kamifuji .

目　次

目　次

Introduction

Text on Canvas

Oval Objects

Painting Interactively into a Canvas

Drawing Polygons

Bitmaps

The Canvas Image Item

Exercise

Solution

参照ページ

リリースノート

関連ページ

Introduction

　キャンバスウィジェットは、Tkinter のグラフィックス機能を提供します。これらのグラフィックオブジェクトの中には、線、円、画像、さらには他のウィジェットがあります。このウィジェットを使用すると、グラフやプロットを描画したり、グラフィックエディタを作成したり、さまざまな種類のカスタムウィジェットを実装することができます。

　最初の例では、線を描く方法を示します。

　create_line(coords、options) メソッドは、直線を描くために使用されます。座標 "coords" は 4 つの整数として与えられます：x1、y1、x2、y2 これは、点(x1、y1) から点(x2、y2) に向かうことを意味します。追加のパラメータは空でもかまいません。たとえば、ラインの色をウェブ>サイトの特別な緑色に設定します：fill = "＃476042"

　最初の例を意図的に非常にシンプルにしました。キャンバスを作成し、このキャンバスに直線の直線を描画します。この線は、キャンバスを垂直方向に 2 つの領域に切断します。

　代入 "y = int(canvas_height / 2)" の整数値へのキャストは不要です。なぜなら、create_line は float 値でも動作できるからです。それらは自動的に整数値に変換されます。以下では、最初の簡単なスクリプトのコードを見ることができます：

from tkinter import *
master = Tk()

canvas_width = 80
canvas_height = 40
w = Canvas(master, 
           width=canvas_width,
           height=canvas_height)
w.pack()

y = int(canvas_height / 2)
w.create_line(0, y, canvas_width, y, fill="#476042")


mainloop()

　このプログラムをPython 3で起動すると、次のウィンドウが表示されます。

　

　矩形を作成するには、create_rectangle(coords、options) というメソッドがあります。座標は再び 2 つの点で定義されますが、今回は最初の点が矩形の左上の点と右下の点になります。

　

　上記のウィンドウは、次のPythonのtkinterコードによって作成されます。

from tkinter import *

master = Tk()

w = Canvas(master, width=200, height=100)
w.pack()

w.create_rectangle(50, 20, 150, 80, fill="#476042")
w.create_rectangle(65, 35, 135, 65, fill="yellow")
w.create_line(0, 0, 50, 20, fill="#476042", width=3)
w.create_line(0, 100, 50, 80, fill="#476042", width=3)
w.create_line(150,20, 200, 0, fill="#476042", width=3)
w.create_line(150, 80, 200, 100, fill="#476042", width=3)

mainloop()

　次の座標を使用した画像は、前の例の create_lines および create_rectangle のアプリケーションの理解を簡素化します。

Top

Text on Canvas

　ここでは、キャンバスにテキストを印刷する方法を示します。この目的のために前の例を拡張して変更します。 create_text() メソッドは、キ>ャンバスオブジェクトにテキストを書き込むために適用することができます。最初の 2 つのパラメータは、テキストオブジェクトの x と y の位置です。デフォルトでは、テキストはこの位置の中央に配置されます。これをアンカーオプションで上書きすることができます。たとえば、座標を左上隅にする場合は、アンカーを NW に設定します。キーワードパラメータテキストを使用すると、キャンバスに表示される実際のテキストを定義できます。

from tkinter import *

canvas_width = 200
canvas_height = 100

colours = ("#476042", "yellow")
box=[]

for ratio in ( 0.2, 0.35 ):
   box.append( (canvas_width * ratio,
                canvas_height * ratio,
                canvas_width * (1 - ratio),
                canvas_height * (1 - ratio) ) )

master = Tk()

w = Canvas(master, 
           width=canvas_width, 
           height=canvas_height)
w.pack()

for i in range(2):
   w.create_rectangle(box[i][0], box[i][1],box[i][2],box[i][3], fill=colours[i])

w.create_line(0, 0,                 # origin of canvas
              box[0][0], box[0][1], # coordinates of left upper corner of the box[0]
              fill=colours[0], 
              width=3)
w.create_line(0, canvas_height,     # lower left corner of canvas
              box[0][0], box[0][3], # lower left corner of box[0]
              fill=colours[0], 
              width=3)
w.create_line(box[0][2],box[0][1],  # right upper corner of box[0] 
              canvas_width, 0,      # right upper corner of canvas
              fill=colours[0], 
              width=3)
w.create_line(box[0][2], box[0][3], # lower right corner pf box[0]
              canvas_width, canvas_height, # lower right corner of canvas
              fill=colours[0], width=3)

w.create_text(canvas_width / 2,
              canvas_height / 2,
              text="Python")

mainloop()

　サンプルプログラムのコードは大幅に変更されていますが、グラフィカルな結果は "Python"というテキスト以外は同じです。

　

　たとえば、キャンバスの高さを 90、幅を 190 に変更し、最初のボックスの比率を 0.3 に変更すると、コード変更のメリットを理解できます。最初の>例のコードでこれを行う画像。それははるかに厳しいだろう。結果は次のようになります。

　

Top

Oval Objects

　楕円形（または卵形）は、卵に似た曲線です（卵子はラテン語の卵を意味します）。それは楕円に似ていますが、楕円ではありません。「楕円形」という用語は明確に定義されていません。多くの異なる曲線は楕円と呼ばれますが、それらはすべて共通しています：

微分可能、単純（自己交差しない）、凸、閉、平面曲線

楕円形と形状が非常に似ています

少なくとも 1 つの対称軸がある

　楕円形の言葉は、ラテンの卵子に由来し、それは「卵」を意味し、それはそれです：卵の形に似ている図形です。楕円は、2 つの異なる半径を持つ 2 組の弧から構成されます。円は、楕円の特殊なケースです。

　次のメソッドを使用して、キャンバス c に楕円を作成できます。

id = C.create_oval ( x0, y0, x1, y1, option, ... )

　このメソッドは、新しい楕円オブジェクトのオブジェクトIDをキャンバスCに返します。

　次のスクリプトは、半径25の点（75,75）の周りに円を描画します。

from tkinter import *

canvas_width = 190
canvas_height =150

master = Tk()

w = Canvas(master, 
           width=canvas_width, 
           height=canvas_height)
w.pack()

w.create_oval(50,50,100,100)

mainloop()


"""
def circle(canvas,x,y, r):
   id = canvas.create_oval(x-r,y-r,x+r,y+r)
   return id

id = C.create_oval ( x0, y0, x1, y1, option, ... )
"""

　

　create_oval() メソッドを使用して、円を描く小さな関数を定義することができます。

def circle(canvas,x,y, r):
   id = canvas.create_oval(x-r,y-r,x+r,y+r)
   return id

Top

Painting Interactively into a Canvas

　キャンバスに絵や筆記用のアプリケーションを書いてみたい。残念ながら、1 つのドットだけをキャンバスにペイントする方法はありません。しかし、私たちは小さな楕円形を使ってこの問題を克服することができます：

from tkinter import *

canvas_width = 500
canvas_height = 150

def paint( event ):
   python_green = "#476042"
   x1, y1 = ( event.x - 1 ), ( event.y - 1 )
   x2, y2 = ( event.x + 1 ), ( event.y + 1 )
   w.create_oval( x1, y1, x2, y2, fill = python_green )

master = Tk()
master.title( "Painting using Ovals" )
w = Canvas(master, 
           width=canvas_width, 
           height=canvas_height)
w.pack(expand = YES, fill = BOTH)
w.bind( "<B1-Motion>", paint )

message = Label( master, text = "Press and Drag the mouse to draw" )
message.pack( side = BOTTOM )
    
mainloop()

Top

Drawing Polygons

　ポリゴンを描画する場合は、少なくとも3つの座標点を指定する必要があります。

　create_polygon（x0、y0、x1、y1、x2、y2、...）

　次の例では、このメソッドを使用して三角形を描画します。

from tkinter import *

canvas_width = 200
canvas_height =200
python_green = "#476042"

master = Tk()

w = Canvas(master, 
           width=canvas_width, 
           height=canvas_height)
w.pack()

points = [0,0,canvas_width,canvas_height/2, 0, canvas_height]
w.create_polygon(points, outline=python_green, 
            fill='yellow', width=3)

mainloop()

　これは次のようになります。

　

　これを読むとすぐにクリスマスになるかもしれませんが、Python と Tkinter によって作成されたいくつかの星で次のクリスマスを改善する方法を紹介します。最初の星はまったくプログラミングスキルはほとんどなく、ストレートです。

from tkinter import *

canvas_width = 200
canvas_height =200
python_green = "#476042"

master = Tk()

w = Canvas(master, 
           width=canvas_width, 
           height=canvas_height)
w.pack()

points = [100, 140, 110, 110, 140, 100, 110, 90, 100, 60, 90, 90, 60, 100, 90, 110]

w.create_polygon(points, outline=python_green, 
            fill='yellow', width=3)

mainloop()

　

　言及したように、このアプローチは非常に甘くありません。スターの大きさや厚みを変えなければならない場合はどうすればいいですか？私たちは手動ですべてのポイントを変更する必要があります。これはもちろん、エラーを起こしがたい面倒な作業です。そこで、我々はより多くの「プログラミング」スキルとプログラミングスキルを必要とする前のスクリプトの新しいバージョンを発表します。まず、関数の中に星の作成を入れ、原点と2つの長さ p と t を使って星を作成します：

　私たちの新しい改良されたプログラムは次のようになりました：

from tkinter import *

canvas_width = 400
canvas_height =400
python_green = "#476042"

def polygon_star(canvas, x,y,p,t, outline=python_green, fill='yellow', width = 1):
   points = []
   for i in (1,-1):
      points.extend((x,	      y + i*p))
      points.extend((x + i*t, y + i*t))
      points.extend((x + i*p, y))
      points.extend((x + i*t, y - i * t))

   print(points)

   canvas.create_polygon(points, outline=outline, 
                         fill=fill, width=width)

master = Tk()

w = Canvas(master, 
           width=canvas_width, 
           height=canvas_height)
w.pack()

p = 50
t = 15

nsteps = 10
step_x = int(canvas_width / nsteps)
step_y = int(canvas_height / nsteps)

for i in range(1, nsteps):
   polygon_star(w,i*step_x,i*step_y,p,t,outline='red',fill='gold', width=3)
   polygon_star(w,i*step_x,canvas_height - i*step_y,p,t,outline='red',fill='gold', width=3)

mainloop()

　結果はさらにXmasのように見えます。最初のスターの例で行ったように、ポリゴンポイントを直接定義するのは誰にも分かりません

　

Top

Bitmaps

　create_bitmap() メソッドを使用して、キャンバスにビットマップを含めることができます。次のビットマップは、すべてのプラットフォームで使用できます。

　"error", "gray75", "gray50", "gray25", "gray12", "hourglass", "info", "questhead", "question", "warning"

　次のスクリプトは、これらすべてのビットマップをキャンバスに配置します。

from tkinter import *

canvas_width = 300
canvas_height =80

master = Tk()
canvas = Canvas(master, 
           width=canvas_width, 
           height=canvas_height)
canvas.pack()

bitmaps = ["error", "gray75", "gray50", "gray25", "gray12",
           "hourglass", "info", "questhead", "question", "warning"]
nsteps = len(bitmaps)
step_x = int(canvas_width / nsteps)

for i in range(0, nsteps):
   canvas.create_bitmap((i+1)*step_x - step_x/2,50, bitmap=bitmaps[i])

mainloop()

　結果は次のようになります。

　

Top

The Canvas Image Item

　キャンバスメソッド create_image(x0、y0、options ...) は、キャンバス上にイメージを描画するために使用されます。 create_image はイメージを直接受け入れません。 PhotoImage() メソッドで作成されたオブジェクトを使用します。 PhotoImage クラスは、ファイルから GIF および PGM / PPM イメージのみを読み取ることができます

from tkinter import *

canvas_width = 300
canvas_height =300

master = Tk()

canvas = Canvas(master, 
           width=canvas_width, 
           height=canvas_height)
canvas.pack()

# img = PhotoImage(file="rocks.ppm")
img = PhotoImage(file="rocks01.gif")
canvas.create_image(20,20, anchor=NW, image=img)

mainloop()

　以前のPythonスクリプトで作成されたウィンドウは、次のようになります。

　

Top

Exercise

　キャンバスに市松模様を描く関数を書く。この関数は、チェッカーで (canvas、line_distance) 呼び出されます。 "canvas" は、描画される Canvas オブジェクトです。 line_distance は、垂直線と水平線の間の距離です。

Top

Solution

from tkinter import *

def checkered(canvas, line_distance):
   # vertical lines at an interval of "line_distance" pixel
   for x in range(line_distance,canvas_width,line_distance):
      canvas.create_line(x, 0, x, canvas_height, fill="#476042")
   # horizontal lines at an interval of "line_distance" pixel
   for y in range(line_distance,canvas_height,line_distance):
      canvas.create_line(0, y, canvas_width, y, fill="#476042")


master = Tk()
canvas_width = 200
canvas_height = 100 
w = Canvas(master, 
           width=canvas_width,
           height=canvas_height)
w.pack()

checkered(w,10)

mainloop()

　前のスクリプトの結果は次のようになります。

　

Top

参照ページ

Canvas Widgets

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

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

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

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

Python インストール Linux 版

MAX_PATH を除去する

Top