Tkinterでクリックした部分をわかるようにしてみた

はじめに

前回Tkinterを使ってみて、もう少し何かやりたいなと。
せっかくGUIを使うなら、クリックした部分が直感的にわかるとうれしいと思って作ってみました。

物自体は何とかできましたが、結構ごり押しのコードです。 (きれいなコードではないので注意)

環境

• windows10
• python3.8.10
• pillow8.3.1
• tkinter8.6

内容

大まかな流れは、
画像を読みこむ⇒クリックする⇒クリックした場所が色で塗られる⇒リセットボタンを押すと最初の状態に戻る

クリックした場所が色で塗られる部分の作成が結構苦戦。。。
本来はスマートにしてみたかったのですが、自分の実力ではどうにもできず。仕方ないので下記のように手数をかけて作成しています。

①元画像に画像を貼り付けて保存
②保存した画像を読み込む
③読み込んだ画像を表示する
④リセット時は読み込んだ画像をフォルダから削除

書いただけでもごり押し感が半端ないとりあえずできたらこっちの勝ちだと思っている

import tkinter
import tkinter.ttk
from PIL import Image, ImageTk, ImageDraw
import os

class Application(tkinter.Frame):
    def __init__(self, master=None):
        super().__init__(master)
        self.master = master
        self.master.title('画面')
        self.pack()
        self.create_widgets()

    def create_widgets(self):
        # ボタン
        self.original_button = tkinter.ttk.Button(self, text='リセット')
        self.original_button.grid(row=0, column=1)
        self.original_button.bind('<Button-1>', make_original)

        # canvas
        self.test_canvas = tkinter.Canvas(self, width=original_image.width, height=original_image.height)
        self.test_canvas.grid(row=0, column=0, rowspan=3)

        # canvasに初期画像を表示
        self.test_canvas.photo = ImageTk.PhotoImage(original_image)
        self.image_on_canvas = self.test_canvas.create_image(0, 0, anchor='nw', image=self.test_canvas.photo)

        #クリックで座標取得
        self.test_canvas.bind("<ButtonPress-1>", ButtonPress)


def make_original(event):
    os.remove('draw.png')
    set_image(event, original_image)

def ButtonPress(event):        
    a = event.x
    b = event.y
    a_m = a-5
    b_p = b+5
    a_p = a+5
    b_m = b-5
    draw = original_image.copy()
    draw2 = ImageDraw.Draw(draw)
    draw2.rectangle(((a_m, b_p), (a_p, b_m)), fill=(0, 0, 255), outline='white',  width=2)
    draw.save('draw.png')
    draw_image = Image.open('draw.png')
    set_image(event, draw_image)
    print("clicked at ", event.x, event.y) 

def set_image(event, img):
    # canvasの書き換え
    app.test_canvas.photo = ImageTk.PhotoImage(img)
    app.test_canvas.itemconfig(app.image_on_canvas, image=app.test_canvas.photo)

# 画像ファイル読み込み
original_image = Image.open('kikagaku.png')

# アプリケーション起動
root = tkinter.Tk()
app = Application(master=root)
app.mainloop()

一応やりたいことは何とかできました(ここには出ていないですが、コンソール画面で座標自体も出ています)。

まとめ

ごり押しだけど目標達成。
これを応用してまた何か作りたいです。

参照

https://water2litter.net/rum/post/python_tkinter_canvas_exchange_image/
https://ti-nspire.hatenablog.com/entry/2018/01/18/130346