Canvasを使ってみる。 - どん底から這い上がるまでの記録

tkinterのCanvasを使っていろいろやってみます。

この記事でやること。

Canvasの基本的な使い方。
Canvas上に図形や画像を作る。

関連リンク
minimal application
Canvasを作る。
Canvas上に画像や図形を描いてみる。
サンプルプログラム
- 顔文字を描いてみる
Q&A
- Canvas上に画像が表示されない
続き

minimal application

まずはCanvasの配置先であるメインウィンドウを用意します。

import tkinter as tk
root = tk.Tk()
"""
ここの間にCanvasの処理について書いていく。
"""
root.mainloop()

このプログラムを実行すると、下のようなウィンドウが立ち上がります。このプログラムをベースにCanvasの使い方について書いていきます。

f:id:pytry3g:20180924183513p:plain

Canvasを作る。

Canvasのインスタンスを作ってメインウィンドウに貼り付けてみます。

canvas = tk.Canvas(root, width=300, height=300, bg="lime green")
canvas.pack()

上のコードをminimal applicationのコメントアウトの部分に置き換えると、このようなウィンドウが立ち上がります。

f:id:pytry3g:20180926173537p:plain

Canvas上に画像や図形を描いてみる。

tkinterのCanvasには画像や図形をCanvas上に描くことが可能で、そのためのメソッドがいくつか用意されています。

長方形を描くー＞create_rectangle

長方形を描くにはcreate_rectangleを使います。

create_rectangle(x0, y0, x1, y1, **options)

２つの座標、左上の座標（x0, y0）と右下の座標（x1, y1）から長方形を作ります。ここで注意しなければならないことは右下の指定した座標は長方形には含まれないということです。

（例）長方形の中の色（fill）を赤色、辺の色（outline）を青色、線の太さ（width）を３にして長方形を作っています。

import tkinter as tk
root = tk.Tk()
canvas = tk.Canvas(root, width=100, height=100, bg="white")
canvas.pack()
canvas.create_rectangle(
    20, 20, 80, 80, fill="red", outline="blue", width=3
)
root.mainloop()

画像を貼るー＞create_image

Canvas上に画像を貼るにはcreate_imageを使います。

create_image(x, y, **options)

画像の中心が指定した座標x, yに来るように表示されます。画像を貼るにはcreate_imageの引数のimageに画像をPhotoImageのオブジェクトにしてから渡す必要があります。

上にある画像をsmile.pngとして下のプログラムと同じディレクトリに置いてから下のプログラムを動かしてみてください。

import tkinter as tk
from PIL import Image, ImageTk
root = tk.Tk()
canvas = tk.Canvas(root, width=200, height=200, bg="white")
canvas.pack()
img = Image.open("smile.png")
tkimg = ImageTk.PhotoImage(img)
canvas.create_image(100, 100, image=tkimg)
root.mainloop()

f:id:pytry3g:20180928173004p:plain

線を引くー＞create_line

線を引くにはcreate_lineを使います。

create_line(x0, y0, x1, y1, ..., xn, yn, **options)

（例）線の色を青色、太さを３に設定

import tkinter as tk
root = tk.Tk()
canvas = tk.Canvas(root, width=50, height=50, bg="white")
canvas.pack()
canvas.create_line(10, 10, 10, 20, 40, 40, fill="blue", width=3)
root.mainloop()

f:id:pytry3g:20180927173530p:plain

円を描くー＞create_oval

円を描くにはcreate_ovalを使います。

create_oval(x0, y0, x1, y1, **options)

座標の指定方法は長方形を描くときと似ていてこんな感じになります。

f:id:pytry3g:20180927175659p:plain

イメージとしては長方形の左上の頂点と右下の頂点から長方形の形にし、その長方形に収まるように円を描きます。

import tkinter as tk
root = tk.Tk()
canvas = tk.Canvas(root, width=50, height=50, bg="white")
canvas.pack()
canvas.create_oval(20, 20, 30, 30)
root.mainloop()

弧を描くー＞create_arc

弧を描くにはcreate_arcを使います。

create_arc(x0, y0, x1, y1, **options)

座標の指定方法は円を描くときと同じです。下のプログラムでは弧の描き方をイメージしやすいように？円を描いてから弧を描いています。

import tkinter as tk
root = tk.Tk()
canvas = tk.Canvas(root, width=100, height=100, bg="white")
canvas.pack()
canvas.create_oval(10, 10, 90, 90)
canvas.create_arc(10, 10, 90, 90, fill="red")
canvas.create_arc(10, 10, 90, 90, fill="blue",
                  outline="green", start=180, width=3)
root.mainloop()

文字を書くー＞create_text

文字を書くにはcreate_textを使います。

create_text(x, y, **options)

座標x, yに与えられたテキストの中心が来るように表示されます。

（例）歩をCanvas上に表示させるプログラムです。文字の大きさや角度についての設定をしています。

import tkinter as tk
root = tk.Tk()
canvas = tk.Canvas(root, width=100, height=100, bg="white")
canvas.pack()
canvas.create_rectangle(20, 20, 80, 80)
canvas.create_text(
    40, 40, text="歩", font=("Helvetica", 18, "bold"), angle=45
)
root.mainloop()

サンプルプログラム

Canvasを使ったサンプルプログラム。

顔文字を描いてみる

create_ovalとcreate_arcを組み合わせて顔文字を描くプログラム。

import tkinter as tk
root = tk.Tk()

canvas = tk.Canvas(root, width=300, height=300, bg="white")
canvas.pack()
canvas.create_oval(100, 100, 200, 200, fill="sky blue")
canvas.create_oval(125, 130, 135, 140, fill="black")
canvas.create_oval(160, 130, 170, 140, fill="black")
canvas.create_arc(120, 120, 180, 180, style="chord", start=225)

root.mainloop()

f:id:pytry3g:20180926181210p:plain

Q&A

Canvas上に画像が表示されない

私の経験上、上で説明した方法で画像が表示されない場面として考えられるのはクラスの中で画像を貼り付ける処理をしている場合です。ここに、画像が表示されない理由がありました。

The application must keep a reference to the image object.

クラス内で画像を貼るときは以下のようにせず、

    def set_image(self):
        img = Image.open('smile.png')
        tkimg = ImageTk.PhotoImage(img)
        self.canvas.create_image(100, 100, image=tkimg)

下のようにしましょう

    def set_image(self):
        img = Image.open('smile.png')
        self.tkimg = ImageTk.PhotoImage(img)
        self.canvas.create_image(100, 100, image=self.tkimg)

（サンプルプログラム）

import tkinter as tk
from PIL import Image, ImageTk

class App(tk.Tk):
    def __init__(self):
        super(App, self).__init__()
        self.canvas = tk.Canvas(self, width=200, height=200, bg="white")
        self.canvas.pack()
        self.set_image()

    def set_image(self):
        img = Image.open('smile.png')
        self.tkimg = ImageTk.PhotoImage(img)
        self.canvas.create_image(100, 100, image=self.tkimg)

    def run(self):
        self.mainloop()


if __name__ == "__main__":
    app = App()
    app.run()

関連リンク