SLP Advent Calendar 2024 - Adventar
本記事は25日目になります。
はじめに
メリークリスマス！！
こんにちは。kakkoです。
今日はクリスマス当日ということで、クリスマスっぽいお絵かきをしたいと思います。そのために、tkinterを使って一筆書きのお絵描きができるシステムをつくりました。
tkinterとは、PythonでGUIを作成することができるライブラリです。
システムの概要
スタート画面は以下のようになります。
水色の点をペン先としています。ボタンを押すと、ボタンに書かれている方向に水色の点が動き、動いた跡が線で表示されます。
例）上ボタンを押したとき
例）上ボタンを押したあと、右ボタンを押したとき
このように、ボタンを押して線を引いていくことで、お絵描きができるシステムをつくりました。
今回、線を削除できる機能を付けていないので、一筆書きのお絵描きになります。また、ここでの一筆書きは、同じ線を上から何度でも書くことができるようになっています。
ソースコードについて
ソースコードは以下のようになります。
import tkinter as tk
def btn_click(x, y):
global point_x
global point_y
# 線を描画
canvas.create_line(point_x, point_y, point_x+x, point_y+y)
# 楕円を消す
canvas.delete("oval")
# 楕円の位置を更新して、描画
point_x += x
point_y += y
canvas.create_oval(point_x+2, point_y-2, point_x-2, point_y+2, fill='skyblue', tag="oval")
root = tk.Tk()
# ウィンドウ作成
root.title('お絵描き')
root.geometry('500x500')
root.resizable(False, False)
# フレーム
frame1 = tk.Frame(root, width=500, height=300, bd=5, relief='solid')
frame2 = tk.Frame(root, width=200, height=200, bd=5, relief='solid')
# Frameサイズを固定
frame1.grid_propagate(False)
# フレーム設置
frame1.grid(row=0, column=0)
frame2.grid(row=1, column=0)
# frame1にキャンバスを作成・配置する
canvas = tk.Canvas(frame1, width=490, height=290, bg='white')
canvas.grid()
# 楕円（ペン先）の座標
point_x=100
point_y=100
# 楕円の描画
canvas.create_oval(point_x+3, point_y-3, point_x-3, point_y+3, fill='skyblue', tag="oval")
# ボタン作成
btn_up = tk.Button(frame2, text='↑', font=('MS UI Gothic', 20), cursor='hand2', command=lambda:btn_click(0, -20))
btn_ur = tk.Button(frame2, text='↗', font=('MS UI Gothic', 20), cursor='hand2', command=lambda:btn_click(20, -20))
btn_right = tk.Button(frame2, text='→', font=('MS UI Gothic', 20), cursor='hand2', command=lambda:btn_click(20, 0))
btn_dr = tk.Button(frame2, text='↘', font=('MS UI Gothic', 20), cursor='hand2', command=lambda:btn_click(20, 20))
btn_down = tk.Button(frame2, text='↓', font=('MS UI Gothic', 20), cursor='hand2', command=lambda:btn_click(0, 20))
btn_dl = tk.Button(frame2, text='↙', font=('MS UI Gothic', 20), cursor='hand2', command=lambda:btn_click(-20, 20))
btn_left = tk.Button(frame2, text='←', font=('MS UI Gothic', 20), cursor='hand2', command=lambda:btn_click(-20, 0))
btn_ul = tk.Button(frame2, text='↖', font=('MS UI Gothic', 20), cursor='hand2', command=lambda:btn_click(-20, -20))
# ボタン設置
btn_ul.grid(row=0, column=0)
btn_up.grid(row=0, column=1)
btn_ur.grid(row=0, column=2)
btn_left.grid(row=1, column=0)
btn_right.grid(row=1, column=2)
btn_dl.grid(row=2, column=0)
btn_down.grid(row=2, column=1)
btn_dr.grid(row=2, column=2)
root.mainloop()
まず、ウィンドウを作成したり、フレームを設定したりしますが、それついての説明は、私の1つ目の記事で行いましたので、割愛させていただきます。そのため、使用したウェジェットのキャンバスとボタンについて説明していきます。
キャンバスについて
キャンバスはtkinterの画面に図形を描画することができるウェジェットです。描画できる図形には、長方形や楕円、線などさまざまなものがあります。
キャンバスはtk.Canvas(キャンバスを設置するフレーム, width=幅, height=高さ)で設定できます。ここでは、オプションbgを使って、キャンバスの背景色を指定しています。
今回はキャンバスに楕円と線を描画しています。
楕円の描画
楕円の描画ではcreate_ovalメソッドを用います。
create_ovalメソッドの使い方は次のようになります。
作成した作成したキャンバス.create_oval(x1, y1, x2, y2, option, ....)
x1とy1を左上の座標、x2とy2を右下の座標とした長方形に接するように楕円が描画されます。
今回は、お絵描きをするため、ペン先を小さな楕円を描画することで表しています。ペン先はボタンを押すと移動するので、座標を変数point_x point_yで管理しています。
また、オプションとしてfill='skyblue'とtag="oval"を設定しています。fillは楕円の色を設定していて、tagは楕円にタグをつけています。タグをつけることで、描画した図形を、消すという処理をすることができます。
線の描画
線の描画ではcreate_lineメソッドを用います。
create_lineメソッドの使い方は次のようになります。
作成したキャンバス.create_line(x1, y1, x2, y2, ...., xn, xy, option, ....)
座標(x1, y1)、座標(x2, y2)～座標(xn, yn)を順々に線でつないで図形を描画することができます。
ボタンについて
ボタンをクリックしたとき、btn_click関数が動作します。
btn_click関数は、ペン先がx軸方向に移動する量とy軸方向に移動する量を引数として受け取り、線の描画とペン先の移動を行っています。
線の描画では、ペン先の現在の座標と移動後の座標をつなぐような線を描画しています。そうすることで、一筆書きのように線がつながっていきます。
ペン先の移動は、楕円をタグを使ってdeleteで削除した後、楕円の座標を更新して再び、描画することで実現しています。
さいごに
このシステムを使ってクリスマスっぽい絵を描きました！
これでSLP Advent Calendar 2024が最後となります！
みなさん、お疲れさまでした！
参考文献