【Python/tkinter】マウスでスクロールを行う

# -*- coding:utf-8 -*-
import tkinter

is_clicking = False
before_x = 0
before_y = 0
	
def start_scroll(event):
	global is_clicking
	global before_x, before_y
	global canvas

	# クリック中フラグを立てる
	is_clicking = True

	# 現在のマウスの位置を記憶
	before_x = event.x
	before_y = event.y

def scroll(event):
	global canvas
	global is_clicking
	global xbar
	global ybar
	global before_x, before_y

	
	if is_clicking:
		# クリック中であれば表示領域を変更

		# 前回からのマウスのピクセル数を取得
		dx = event.x - before_x
		dy = event.y - before_y

		# 「マウスの移動量」を取得
		h = xbar.delta(dx, dy)
		v = ybar.delta(dx, dy)

		# 水平方向の「現在のキャンバスのスクロール位置」を取得
		start_x, end_x = xbar.get()

		# 水平方向の「移動後のキャンバスのスクロール位置」を取得
		after_x = max(min(start_x + h, 1.0), 0.0) # 値は0〜1に丸める
			
		# 水平方向に対して「移動後のキャンバスのスクロール位置」にスクロール
		canvas.xview_moveto(after_x)

		# 現在のマウスの位置を記憶
		before_x = event.x

		# 水平方向の「現在のキャンバスのスクロール位置」を取得
		start_y, end_y = ybar.get()

		# 水平方向の「移動後のキャンバスのスクロール位置」を取得
		after_y = max(min(start_y + v, 1.0), 0.0) # 値は0〜1に丸める
		
		# 垂直方向に対して「移動後のキャンバスのスクロール位置」にスクロール
		canvas.yview_moveto(after_y)

		# 現在のマウスの位置を記憶
		before_y = event.y

def end_scroll(event):
	global is_clicking

	# クリック中フラグを下ろす
	is_clicking = False


# メインウィンドウの作成
app = tkinter.Tk()

# キャンバスの作成と配置
canvas = tkinter.Canvas(
	app,
	width=400,
	height=300,
	scrollregion=(-200, -100, 800, 600),
	cursor="hand" # エラーになる場合は消してOK
)
canvas.grid(row=0, column=0)

# 楕円をキャンバスからはみ出るように描画
canvas.create_oval(
	300, 250,
	500, 350,
	fill="blue"
)

# 楕円をキャンバスの外に描画
canvas.create_oval(
	700, 0,
	800, 200,
	fill="red"
)

# 長方形をキャンバスの外に描画
canvas.create_rectangle(
	600, 400,
	800, 500,
	fill="green"
)

# 長方形をキャンバスの外に描画
canvas.create_rectangle(
	-200, -100,
	0, 0,
	fill="purple"
)


# 水平方向のスクロールバーを作成
xbar = tkinter.Scrollbar(
	app,  # 親ウィジェット
	orient=tkinter.HORIZONTAL,  # バーの方向
)

# 垂直方向のスクロールバーを作成
ybar = tkinter.Scrollbar(
	app,  # 親ウィジェット
	orient=tkinter.VERTICAL,  # バーの方向
)

# キャンバスの下に水平方向のスクロールバーを配置
xbar.grid(
	row=1, column=0,  # キャンバスの下の位置を指定
	sticky=tkinter.W + tkinter.E  # 左右いっぱいに引き伸ばす
)

# キャンバスの右に垂直方向のスクロールバーを配置
ybar.grid(
	row=0, column=1,  # キャンバスの右の位置を指定
	sticky=tkinter.N + tkinter.S  # 上下いっぱいに引き伸ばす
)


# キャンバスをスクロールするように設定

# スクロールバーのスライダーが動かされた時に実行する処理を設定
xbar.config(
	command=canvas.xview
)
ybar.config(
	command=canvas.yview
)


# キャンバススクロール時に実行する処理を設定
canvas.config(
	xscrollcommand=xbar.set
)
canvas.config(
	yscrollcommand=ybar.set
)

# イベントの設定
canvas.bind("<ButtonPress>", start_scroll)
canvas.bind("<Motion>", scroll)
canvas.bind("<ButtonRelease>", end_scroll)

# メインループ
app.mainloop()

# イベントの設定
canvas.bind("<ButtonPress>", start_scroll)
canvas.bind("<Motion>", scroll)
canvas.bind("<ButtonRelease>", end_scroll)

# キャンバススクロール時に実行する処理を設定
canvas.config(
	xscrollcommand=xbar.set
)
canvas.config(
	yscrollcommand=ybar.set
)

canvas = tkinter.Canvas(
	app,
	# 略
	cursor="hand" # エラーになる場合は消してOK
)

# 「マウスの移動量」を取得
h = -xbar.delta(dx, dy)
v = -ybar.delta(dx, dy)

# 水平方向のスクロールバーを作成
xbar = tkinter.Scrollbar(
	app,  # 親ウィジェット
	orient=tkinter.HORIZONTAL,  # バーの方向
	width=0, # バーの幅を0にする
	highlightthickness=0, # フォーカス時の囲い線の太さを0にする
	bd=0, # バーの枠線の太さを0にする
)

# 垂直方向のスクロールバーを作成
ybar = tkinter.Scrollbar(
	app,  # 親ウィジェット
	orient=tkinter.VERTICAL,  # バーの方向
	width=0, # バーの幅を0にする
	highlightthickness=0, # フォーカス時の囲い線の太さを0にする
	bd=0, # バーの枠線の太さを0にする
)

# -*- coding:utf-8 -*-
import tkinter
import tkinter.filedialog

image = None
is_clicking = False
before_x = 0
before_y = 0

def read_image():
	global app
	global image
	global canvas

	# ファイル選択ダイアログの表示
	path = tkinter.filedialog.askopenfilename()

	# 画像を読み込む
	image = tkinter.PhotoImage(
		file=path
	)

	# 画像を描画
	canvas.create_image(
		0, 0,
		anchor=tkinter.NW,
		image=image
	)
	canvas.config(
		scrollregion=(
			0, 0,
			image.width(), image.height()
		)
	)

def start_scroll(event):
	global is_clicking
	global before_x, before_y
	global canvas

	# クリック中フラグを立てる
	is_clicking = True

	# 現在のマウスの位置を記憶
	before_x = event.x
	before_y = event.y

def scroll(event):
	global canvas
	global is_clicking
	global xbar
	global ybar
	global before_x, before_y

	
	if is_clicking:
		# クリック中であれば表示領域を変更

		# 前回からのマウスのピクセル数を取得
		dx = event.x - before_x
		dy = event.y - before_y

		# 「マウスの移動量」を取得
		h = -xbar.delta(dx, dy)
		v = -ybar.delta(dx, dy)

		# 水平方向の「現在のキャンバスのスクロール位置」を取得
		start_x, end_x = xbar.get()

		# 水平方向の「移動後のキャンバスのスクロール位置」を取得
		after_x = max(min(start_x + h, 1.0), 0.0) # 値は0〜1に丸める
			
		# 水平方向に対して「移動後のキャンバスのスクロール位置」にスクロール
		canvas.xview_moveto(after_x)

		# 現在のマウスの位置を記憶
		before_x = event.x

		# 水平方向の「現在のキャンバスのスクロール位置」を取得
		start_y, end_y = ybar.get()

		# 水平方向の「移動後のキャンバスのスクロール位置」を取得
		after_y = max(min(start_y + v, 1.0), 0.0) # 値は0〜1に丸める
		
		# 垂直方向に対して「移動後のキャンバスのスクロール位置」にスクロール
		canvas.yview_moveto(after_y)

		# 現在のマウスの位置を記憶
		before_y = event.y

def end_scroll(event):
	global is_clicking

	# クリック中フラグを下ろす
	is_clicking = False


# メインウィンドウの作成
app = tkinter.Tk()

# キャンバスの作成と配置
canvas = tkinter.Canvas(
	app,
	width=400,
	height=300,
	# scrollregion=(-200, -100, 800, 600),
	cursor="hand" # エラーになる場合は消してOK
)
canvas.grid(row=0, column=0)

# 水平方向のスクロールバーを作成
xbar = tkinter.Scrollbar(
	app,  # 親ウィジェット
	orient=tkinter.HORIZONTAL,  # バーの方向
	width=0, # バーの幅を0にする
	highlightthickness=0, # フォーカス時の囲い線の太さを0にする
	bd=0, # バーの枠線の太さを0にする
)

# 垂直方向のスクロールバーを作成
ybar = tkinter.Scrollbar(
	app,  # 親ウィジェット
	orient=tkinter.VERTICAL,  # バーの方向
	width=0, # バーの幅を0にする
	highlightthickness=0, # フォーカス時の囲い線の太さを0にする
	bd=0, # バーの枠線の太さを0にする
)

# キャンバスの下に水平方向のスクロールバーを配置
xbar.grid(
	row=1, column=0,  # キャンバスの下の位置を指定
	sticky=tkinter.W + tkinter.E  # 左右いっぱいに引き伸ばす
)

# キャンバスの右に垂直方向のスクロールバーを配置
ybar.grid(
	row=0, column=1,  # キャンバスの右の位置を指定
	sticky=tkinter.N + tkinter.S  # 上下いっぱいに引き伸ばす
)

# キャンバスをスクロールするように設定

# スクロールバーのスライダーが動かされた時に実行する処理を設定
xbar.config(
	command=canvas.xview
)
ybar.config(
	command=canvas.yview
)


# キャンバススクロール時に実行する処理を設定
canvas.config(
	xscrollcommand=xbar.set
)
canvas.config(
	yscrollcommand=ybar.set
)

# 画像読み込みボタンの作成と配置
button = tkinter.Button(
	app,
	text="画像読み込み",
	command=read_image
)
button.grid(column=0,row=2,columnspan=2)

# イベントの設定
canvas.bind("<ButtonPress>", start_scroll)
canvas.bind("<Motion>", scroll)
canvas.bind("<ButtonRelease>", end_scroll)

# メインループ
app.mainloop()