PySimpleGUI能否在图片上添加输入框与文本？求实现示例

要在PySimpleGUI里实现图片上叠加输入框、文本的效果，核心是通过元素位置控制或Graph画布两种方式实现元素重叠，以下是两种可行的实现示例：

方法一：直接布局叠加（适合简单场景） #

通过location参数精准控制输入框、文本在窗口中的位置，将图片作为底层元素，叠加其他控件：

import PySimpleGUI as sg

# 替换为你的本地图片路径或字节数据
bg_img = sg.Image(filename="your_image.png")

# 定义要叠加的输入框和文本，通过location指定在图片上的位置（坐标基于窗口左上角）
input_box = sg.InputText(
    size=(25, 1),
    location=(120, 220),  # 调整为你需要的位置
    font=("微软雅黑", 12),
    key="-INPUT-"
)
overlay_text = sg.Text(
    "自定义叠加文本",
    text_color="#FFFFFF",  # 白色文本适配深色背景
    font=("Arial", 14, "bold"),
    location=(350, 100),
    key="-TEXT-"
)

# 布局：图片作为第一行，叠加元素放在后续行（位置由location控制）
layout = [
    [bg_img],
    [input_box, overlay_text]
]

# 窗口尺寸需与图片尺寸匹配，避免错位
window = sg.Window("图片叠加Demo", layout, size=(800, 600), resizable=False)

while True:
    event, values = window.read()
    if event == sg.WIN_CLOSED:
        break

window.close()

方法二：使用Graph画布（适合复杂叠加场景） #

通过sg.Graph元素绘制图片，再在画布上嵌入输入框或绘制文本，更灵活控制元素层级：

import PySimpleGUI as sg

# 图片尺寸（需与实际图片一致）
IMG_W, IMG_H = 800, 600

# 创建与图片尺寸匹配的Graph画布
graph = sg.Graph(
    canvas_size=(IMG_W, IMG_H),
    graph_bottom_left=(0, 0),
    graph_top_right=(IMG_W, IMG_H),
    key="-GRAPH-"
)

layout = [[graph]]
window = sg.Window("Graph叠加Demo", layout, resizable=False)

# 将图片绘制到Graph画布上（location的Y轴是向上的，所以用(0, IMG_H)对应图片左上角）
graph.draw_image(filename="your_image.png", location=(0, IMG_H))

# 在Graph上嵌入输入框
input_elem = sg.InputText(size=(20, 1), key="-INPUT-")
# 转换坐标：图片上的Y坐标200，对应Graph的Y轴为IMG_H - 200
graph.draw_element(input_elem, location=(120, IMG_H - 220))

# 在Graph上直接绘制文本
graph.draw_text(
    "画布叠加文本",
    location=(350, IMG_H - 100),
    color="#FFFFFF",
    font=("Arial", 14, "bold")
)

while True:
    event, values = window.read()
    if event == sg.WIN_CLOSED:
        break

window.close()

关键注意事项 #

• 确保窗口尺寸与图片尺寸完全一致，避免元素错位
• 使用location时，坐标以窗口左上角为原点；使用Graph时，Y轴向上，需转换图片坐标
• 如需加载网络图片，可通过sg.Image(data=sg.download_to_bytes("图片URL"))获取字节数据后加载

内容的提问来源于stack exchange，提问作者Paichiwo