どん底から這い上がるまでの記録

どん底から這い上がりたいけど這い上がれない人がいろいろ書くブログ(主にプログラミング)

Canvasを使ってみる。

 

tkinterCanvasを使っていろいろやってみます。

この記事でやること。

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

 

 

関連リンク

The Tkinter Canvas Widget

8. The Canvas widget

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上に画像や図形を描いてみる。

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

長方形を描くー>create_rectangle

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

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

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

f:id:pytry3g:20180927204156p:plain

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

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()
f:id:pytry3g:20180927203436p:plain

画像を貼るー>create_image

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

create_image(x, y, **options)

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

f:id:pytry3g:20180927204719p:plain

上にある画像を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)

(例)線の色を青色、太さを3に設定

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()
f:id:pytry3g:20180927180043p:plain

弧を描くー>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()
f:id:pytry3g:20180927180625p:plain

文字を書くー>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()
f:id:pytry3g:20180927182409p:plain

サンプルプログラム

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

 

 

顔文字を描いてみる

create_ovalcreate_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()

続き

www.pytry3g.com