質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
Tkinter

Tkinterは、GUIツールキットである“Tk”をPythonから利用できるようにした標準ライブラリである。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Q&A

解決済

1回答

11836閲覧

tkinter, PIL, canvas上に開いた画像の上に更に画像を重ねて配置したい

nto

総合スコア1438

Tkinter

Tkinterは、GUIツールキットである“Tk”をPythonから利用できるようにした標準ライブラリである。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

1グッド

1クリップ

投稿2020/05/29 11:48

編集2020/05/29 16:15

前提・実現したいこと

canvas上に任意の画像を開く→
スタンプボタンをクリック→
別ウィンドウでスタンプを選択→
選択したスタンプをcanvas上に重ねて表示→
マウス操作で任意の場所に配置

というスタンプ機能を実装したいです。

該当のソースコード

python

1import os,sys 2import math 3from tkinter import * 4from tkinter import ttk 5from tkinter import filedialog 6from tkinter import messagebox 7from tkinter import simpledialog 8from PIL import Image, ImageTk, ImageOps 9import glob 10 11 12 13_maxline = 700 14 15class Application(ttk.Frame): 16 def __init__(self, master): 17 super().__init__(master) 18 self.master = master 19 self.master.geometry('620x600+280+240') 20 self.grid() 21 self.button_create() 22 23 def button_create(self): 24 self.photo_var = StringVar() 25 ttk.Entry(self.master, textvariable=self.photo_var, width=70).grid(row=0, column=0, pady=100, padx=20) 26 self.bln = BooleanVar() 27 self.bln.set(True) 28 ttk.Button(self.master, text='選択', width=8, command=self.file_select).grid(row=0, column=1, padx=(0, 20)) 29 ttk.Button(self.master, text='決定', width=8, command=self.image_open).grid(row=0, column=2, padx=(0, 20)) 30 31 def file_select(self): 32 iDir = os.getenv("HOMEDRIVE") + os.getenv("HOMEPATH") + "\Desktop" 33 fTyp = [('','*.jpg;*.jpeg;')] 34 filepath = filedialog.askopenfilename(filetypes = fTyp, initialdir = iDir) 35 self.photo_var.set(filepath) 36 37 def image_open(self): 38 self.image_dir = self.photo_var.get() 39 read_image = Image.open(self.image_dir) 40 self.xw, self.xh = self.image_resize(read_image) 41 self.x_image = read_image.resize((self.xw, self.xh)) 42 self.image_window() 43 44 def image_resize(self, image): 45 magnification = 1 46 if image.width > image.height: 47 magnification = _maxline / image.width 48 else: 49 magnification = _maxline / image.height 50 w = int(image.width * magnification) 51 h = int(image.height * magnification) 52 53 return w, h 54 55 def image_window(self): 56 self.photo_window = Toplevel(self.master) 57 self.photo_window.title(os.path.basename(self.image_dir) + ' size:%s*%s'% (self.xw, self.xh)) 58 self.photo_window.geometry('%sx%s+500+240' % (self.xw+1, self.xh+1)) 59 self.canvas = Canvas(self.photo_window, width=self.xw, height=self.xh) 60 self.canvas.grid() 61 self.canvas_create(self.x_image) 62 63 buttonlst = {'crop': [50, self.photo_window.destroy], 'mirror': [80, self.photo_window.destroy], 'Rrotate': [110, self.photo_window.destroy], 'Lrotate': [140, self.photo_window.destroy], 'stamp': [170, self.stamp]} 64 [ttk.Button(self.canvas, text=key, command=value[1]).place(x=self.xw-100, y=value[0]) for key, value in buttonlst.items()] 65 66 def canvas_create(self, img): 67 self.canvas.photo = ImageTk.PhotoImage(image=img) 68 self.canvas.create_image(0, 0, anchor='nw', image=self.canvas.photo) 69 70 def stamp(self): 71 stamplst = glob.glob('./スタンプ/*.png') 72 self.stamp_window = Toplevel(self.photo_window) 73 self.stamp_window.geometry('300x360+800+240') 74 self.cb = ttk.Combobox(self.stamp_window, state='readonly', width=25) 75 self.cb['value'] = stamplst 76 self.cb.pack(pady=10) 77 self.stamp_canvas = Canvas(self.stamp_window, width=250, height=250) 78 self.stamp_canvas.pack(pady=10) 79 80 ttk.Button(self.stamp_window, text='選択', command=self.stamp_selected).pack() 81 82 self.cb.bind('<<ComboboxSelected>>', self.stamp_previous) 83 84 def stamp_previous(self, event): 85 read_image = Image.open(self.cb.get()) 86 self.stamp_image = read_image.resize((250, 250)) 87 self.stamp_canvas.photo = ImageTk.PhotoImage(image=self.stamp_image) 88 self.stamp_canvas.create_image(0, 0, anchor='nw', image=self.stamp_canvas.photo) 89 90 def stamp_selected(self): 91 select_stamp = self.cb.get() 92 self.stamp_window.destroy() 93 stamp = Image.open(select_stamp) 94 stamp = stamp.resize((200, 200)) 95 self.canvas.photo = ImageTk.PhotoImage(image=stamp) 96 self.canvas.create_image(0, 0, anchor='nw', image=self.canvas.photo) 97 98 99 100def main(): 101 root = Tk() 102 app = Application(master = root) 103 app.mainloop() 104 105if __name__ == '__main__': 106 main()

サンプルデータ

スタンプに使用するサンプル画像
画像1
画像2

補足情報(FW/ツールのバージョンなど)

python3.8.1
windows10

teamikl👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Yasumichi

2020/05/29 12:52 編集

Canvas はほかの言語にもあったりするのでタグを tkinter.Canvas とかに修正するか、削除した方が良い気がします。 # タグにマウスオーバーすると HTML5 の canvas として認識されています。
nto

2020/05/29 16:16

タグの削除を致しました。
guest

回答1

0

ベストアンサー

任意の場所への移動はもう一工夫必要になりますが、
画像を重ねて表示出来てない原因は、

元になる jpg 画像とスタンプの画像全てで
self.canvas.photo を上書きしている為です。

上書きされた時点で、前の画像は破棄されてしまう為、
新しい画像しか表示されません。

解決策:
それぞれ別の属性に保存する。
スタンプを複数使う場合は、予め辞書にでも入れておくとよいです。

python

1# __init__で準備 2self.stamp = {} 3 4# スタンプ読み込み時 変数 photo と 辞書に参照を残す 5self.stamp[filepath] = photo = ImageTk.PhotoImage(...) 6self.canvas.create_image(0, 0, anchor='nw', image=photo)

※ 追記: defaultdictを使った方が良いかもしれません

def load_stamp(filepath): return tk.PhotoImage(file=filepath) # 対象が png のみであれば tk でも読込可。 # __init__で準備 # キーが無い時に load_stamp関数が呼び出され PhotoImage を生成 from collections import defaultdict self.stamp = defaultdict(load_stamp) # 読み込み時 self.canvas.create_image(0, 0, image=self.stamp[filepath])

キャンバス上のオブジェクトの移動

残念ながら勝手に動いてくれるようなオプションはないので、自分で実装する必要があります。

  • create_image の戻り値(キャンバスへ描画するオブジェクトのID)を何処かに保存する
  • マウスの press/motion/release イベントで移動処理

 - ドラッグ開始時 マウスの座標から 対象のオブジェクトのIDを探す canvas.find_closest
- motion (マウス移動時) オブジェクトのIDを指定して移動 canvas.coords
- release で移動処理の後始末

参考: Canvasの図形や画像をドラッグ・アンド・ドロップで動かす。


実は、標準ライブラリ内に tkinter.dndというものがあって、
python -m tkinter.dnd とすると、ICONボタンを動かせるデモが起動するのですが
サンプルコードやドキュメントが少なすぎて、お勧めし辛い。

投稿2020/05/29 13:22

編集2020/05/30 04:17
teamikl

総合スコア8660

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nto

2020/05/29 16:22

なるほどです。 画像上にスタンプを生成さえ出来れば、移動に関しては大丈夫そうです。 残念ながら今現在すぐにpcに向かうことが出来ないために翌週よりテストしてみます。 ご回答ありがとうございました!
nto

2020/06/01 06:38

恐れ入ります、スタンプの生成、移動を行う様にする事ができました。 そこでもう一点別途での質問なのですが、画像が2枚重なったとき スタンプに対して、いわゆるtopmostみたいなものはどの様にして設定できるのでしょうか? 掲題のコードにて、 self.canvas.create_image(0, 0, anchor='nw', image=self.canvas.photo, tags='photo') と、タグを設定してあげた上で、 def mirror_image(self): self.canvas.delete('photo') self.x_image = ImageOps.mirror(self.x_image) self.canvas_create(self.x_image) と、反転したimageをキャンバス上に再生成するイベントを動かすと、スタンプが下に重なってしまいます。
teamikl

2020/06/01 07:03

canvas.tag_raise や tag_lower で出来そうです。 使ったことないので、取り急ぎ参考リンクのみ http://effbot.org/tkinterbook/canvas.htm#Tkinter.Canvas.tag_raise-method 注意点は、tag と item ID の指定方法で tag では複数のアイテムに対して一括で操作し、 item ID は 個別のアイテムが操作対象になります。 (find_closest やcreate_imageの戻り値) 下地の画像は tag_lower で下げて スタンプ同士の重なり合いは、クリック時に canvas.find_closest で座標からアイテムのIDを所得して、 個別にクリックしたアイテムを上レイヤへ引き上げ~といった感じでしょうか。 (※ 動作確認はしてません)
nto

2020/06/01 07:30

度々ご回答ありがとうございます。 まずは試行してみます。
nto

2020/06/01 07:41

先の関数にて再生成した後に self.canvas.tag_raise('stamp') または self.canvas.tag_lower('photo') で期待の動きが見られました。 本来はID指定が良いのかとは思いますが こちらの仕様上tag指定での動作が一番スムーズな形となりましたので tagを指定しスタンプを常に最前面に配置する事ができました。
teamikl

2020/06/01 07:48

ID指定が必要になるのは、複数のスタンプを重ねる場合ですね。 (同じtag同士の順序を指定できない為) tag/IDはどちらが良い等ではなく使い分けなので、 期待の動作が得られたのであれば、それで大丈夫です。
nto

2020/06/01 08:09

はい。仕様上、スタンプは1つ以上生成する事はない為、tagの指定が都合良い形になりました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問