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

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

ただいまの
回答率

90.38%

  • Python 3.x

    10718questions

    Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

python tkinter canvas 画面のズーム・移動後のマウス座標について

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 629

Platycerium

score 19

pythonのcanvasで左クリックで赤色の円を配置ができるシンプルなものを作成しました。
また、マウスホイールで画面のズーム、右クリックで全体移動を出来るように実装しています。

最初の画面のままであれば問題は無いのですが、画面のズームや、移動した後に、円を配置しようとすると
マウス位置から離れた所に円が描画されてしまいます。

どのようにすれば、画面変更した後でもマウス位置に円を描画できるのでしょうか?

import tkinter as tk
from tkinter import *

def pos(event):
    global ini_size
    canvas.delete("line")
    x_ent.delete(0, tk.END)
    x_ent.insert(0, event.x)
    y_ent.delete(0, tk.END)
    y_ent.insert(0, event.y)

def lclick(event):
    canvas.create_oval(int(x_ent.get())-5, int(y_ent.get())-5, int(x_ent.get())+5, int(y_ent.get())+5,activefill = 'black',fill='red')

def zoomer(event):
    sf = 1.1 if event.delta > 0 else 0.9
    canvas.scale("all", 0,0,sf, sf)
    canvas.configure(scrollregion=canvas.bbox("all"))

def move_start(event):
    canvas.scan_mark(event.x, event.y)
def move_move(event):
    canvas.scan_dragto(event.x, event.y, gain=1)

def show_width(event):
    window_width.delete(0, tk.END)
    window_width.insert(0, event.width)

window = tk.Tk()
window.title('サンプル')

frame_T = tk.Frame(window,bd=1,relief="ridge")
frame_T.grid(row=0, column=0,sticky='news')
frame1_1 = tk.Frame(window,bd=1,relief="ridge")
frame1_1.grid(row=1, column=0,sticky='news')
frame_main = tk.Frame(window,bd=1,relief="ridge")
frame_main.grid(row=2, column=0,sticky='news')

y_ent = tk.Entry(frame_T)
y_ent.pack(side=RIGHT)
x_ent = tk.Entry(frame_T)
x_ent.pack(side=RIGHT)
window_width = tk.Entry(frame_T)
window_width.pack(side=RIGHT)

canvas = tk.Canvas(master = frame_main, height=600, width=1000, bg='white',bd=1,relief="ridge")
canvas.grid(row=0, column=0,sticky='news')

xsb = tk.Scrollbar(frame_main, orient="horizontal", command=canvas.xview)
ysb = tk.Scrollbar(frame_main, orient="vertical", command=canvas.yview)
canvas.configure(yscrollcommand=ysb.set, xscrollcommand=xsb.set)
xsb.grid(row=1, column=0,sticky="ew")
ysb.grid(row=0, column=1, sticky="ns")

canvas.bind('<Motion>', pos)
canvas.bind('<Button-1>', lclick)
canvas.bind("<MouseWheel>",zoomer)
canvas.bind("<ButtonPress-3>", move_start)
canvas.bind("<B3-Motion>", move_move)
canvas.bind("<Configure>", show_width)

frame_main.grid_columnconfigure(0,weight=1)
frame_main.grid_rowconfigure(0,weight=1)
window.grid_columnconfigure(0,weight=1)
window.grid_rowconfigure(2,weight=1)

window.mainloop()
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

以下のようにcanvas.canvasxを用いてウインドウ座標をキャンバスのスクリーン座標に置き換えて管理する必要があるようです。
参考:
9. ボードゲーム用 GUI を作ろう
8.6. Methods on Canvas widgets
Tkinter canvas zoom + move/pan

def pos(event):
    x = int(canvas.canvasx(event.x))
    y = int(canvas.canvasy(event.y))

    canvas.delete("line")
    x_ent.delete(0, tk.END)
    x_ent.insert(0, x)
    y_ent.delete(0, tk.END)
    y_ent.insert(0, y)

追記:円の大きさを倍率に合わせる

試行錯誤していたら、円の大きさを倍率に合わせることができたので貼っておきます。
正確な理屈は理解できていませんが。

import tkinter as tk
from tkinter import *

g_scale = 1.0 # 累積倍率
g_tagno = 1   # 各円のタグ名。新規追加した円のみスケーリングするために。

def pos(event):
    x = int(canvas.canvasx(event.x))
    y = int(canvas.canvasy(event.y))

    canvas.delete("line")
    x_ent.delete(0, tk.END)
    x_ent.insert(0, x)
    y_ent.delete(0, tk.END)
    y_ent.insert(0, y)

def lclick(event):
    x, y = int(x_ent.get()), int(y_ent.get())

    global g_tagno
    tag = 'temp{}'.format(g_tagno)
    canvas.create_oval(x-5, y-5, x+5, y+5, activefill = 'black',fill='red',tag=tag)
    g_tagno += 1
    canvas.scale(tag, x, y, g_scale, g_scale) # この円だけスケーリングする

def zoomer(event):
    sf = 1.1 if event.delta > 0 else 0.9

    # 累積倍率を記録しておく
    global g_scale
    g_scale *= sf

    canvas.scale("all", 0,0,sf, sf)
    canvas.configure(scrollregion=canvas.bbox("all"))

# 以下は変わらず

def move_start(event):
    canvas.scan_mark(event.x, event.y)
def move_move(event):
    canvas.scan_dragto(event.x, event.y, gain=1)

def show_width(event):
    window_width.delete(0, tk.END)
    window_width.insert(0, event.width)

window = tk.Tk()
window.title('サンプル')

frame_T = tk.Frame(window,bd=1,relief="ridge")
frame_T.grid(row=0, column=0,sticky='news')
frame1_1 = tk.Frame(window,bd=1,relief="ridge")
frame1_1.grid(row=1, column=0,sticky='news')
frame_main = tk.Frame(window,bd=1,relief="ridge")
frame_main.grid(row=2, column=0,sticky='news')

y_ent = tk.Entry(frame_T)
y_ent.pack(side=RIGHT)
x_ent = tk.Entry(frame_T)
x_ent.pack(side=RIGHT)
window_width = tk.Entry(frame_T)
window_width.pack(side=RIGHT)

canvas = tk.Canvas(master = frame_main, height=600, width=1000, bg='white',bd=1,relief="ridge")
canvas.grid(row=0, column=0,sticky='news')

xsb = tk.Scrollbar(frame_main, orient="horizontal", command=canvas.xview)
ysb = tk.Scrollbar(frame_main, orient="vertical", command=canvas.yview)
canvas.configure(yscrollcommand=ysb.set, xscrollcommand=xsb.set)
xsb.grid(row=1, column=0,sticky="ew")
ysb.grid(row=0, column=1, sticky="ns")

canvas.bind('<Motion>', pos)
canvas.bind('<Button-1>', lclick)
canvas.bind("<MouseWheel>",zoomer)
canvas.bind("<ButtonPress-3>", move_start)
canvas.bind("<B3-Motion>", move_move)
canvas.bind("<Configure>", show_width)

frame_main.grid_columnconfigure(0,weight=1)
frame_main.grid_rowconfigure(0,weight=1)
window.grid_columnconfigure(0,weight=1)
window.grid_rowconfigure(2,weight=1)

window.mainloop()

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/29 14:50

    理想の動きができるようになりました。
    ご返答いただきありがとうございました。

    キャンセル

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

  • ただいまの回答率 90.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • Python 3.x

    10718questions

    Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。