ウィンドウのなかに円を描く
# coding:utf-8
import tkinter as tk
# ウィンドウを開く
root = tk.Tk()
root.geometry("600x400")
# Canvasを置く
canvas =tk.Canvas(root, width =600, height =400, bg="white")
canvas.place(x = 0, y = 0)
# 円を描く
canvas.create_oval(300 - 20, 200 - 20, 300 + 20, 200 + 20)
root.mainloop()
前回やったのと同じように今回もまずはウィンドウを表示する →第6章
前回と違う点はウィンドウの上にキャンバスを重ねるところである
canvas =tk.Canvas(root, width =600, height =400, bg="white")
canvas.place(x = 0, y = 0)
今回実行したのはCanvasメソッドというものだ
最後の引数の「bg」は背景色である
canvas.create_oval(300 - 20, 200 - 20, 300 + 20, 200 + 20)
これは円の部分のコードであるためこのコードを修正することで様々な円を描くことができる
canvas.create_oval(300 - 20, 200 - 20, 300 + 20, 200 + 20, fill="red",width=0)
例えばこのように修正すると、赤色の円を描くことができる
結果
赤色の円を描くことも成功
クリックした場所に円を動かす
クリックされたところに描画する
def click(event):
# クリックされたときにそこに描画する
canvas.create_oval(event.x - 20, event.y - 20, event.x + 20, event.y + 20, fill="red",width=0)
# イベントを設定する
canvas.bind("<Button-1>", click)
eventにはクリックしたときの情報が渡される
例えば、
- event.x→クリックされた場所のx座標
- event.y→クリックされた場所のy座標 これらの座標をそれぞれ示す
ここにcreate_ovalメソッドを使い円を描画すればクリックされた場所に円ができる
クリックされたところに移動
# 円の座標
x = 300
y = 200
global x, y
# 今の円を消す
canvas.create_oval(x - 20, y - 20, x + 20, y + 20, fill="white",width=0)
x = event.x
y = event.y
canvas.create_oval(x - 20, y - 20, x + 20, y + 20, fill="red",width=0)
円を消すためには前回どこに円を描画したのか保存しておかなければならない
そこで変数xと変数yに前回描画した位置を保存しておく
結果
（アプリの関係でgifでは円が黒色になってしまう）
クリックせずに円を動かす
円を右に動かす
# x座標を動かす
x = x + 1
# 次の位置に円を描く
canvas.create_oval(x - 20, y - 20, x + 20, y + 20, fill="red",width=0)
# 再びタイマー
root.after(10, move)
# タイマーを設定する
root.after(10, move)
tkinterにはタイマー機能があり一定時間が経過した後指定した関数を実行できる
タイマーはafterメソッドを呼び出すことで動き出す
今回ではrootのところでafterメソッドを呼び出している
結果
うまくできた
今度は往復させる
# 移動量
dx = 1
# x座標を動かす
x = x + dx
# 端を越えていたら反対向きにする
if x >= canvas.winfo_width():
dx = -1
if x <= 0:
dx = +1
これらを追加する
移動量dxを変数とした
はじめは１が足されるため右へ進んでいく
そしてwinfo_widthメソッドを実行してキャンバス幅を超えたかどうか調べる
そのあとのif構文で円が往復するように設定している
結果
後半へ
gifが多くサイトの表示が遅くなりそうなので2つに分けました →後半