Tkinter canvas.create_text文本显示在图片下方而非顶层问题

问题现象 #

使用Python Tkinter开发闪卡程序时，调用canvas.create_text将文本叠加渲染在背景图片上层，运行后仅坐标(0,0)位置创建的文本可见，坐标(400,263)位置的文本未显示，判断为被置于图片图层下方。

复现代码 #

window = Tk()
window.title("Flash Card")
window.config(pady=50, padx=50, background=BACKGROUND_COLOR)

canvas = Canvas(width=800, height=526)
french_background = PhotoImage(file ="images/card_front.png")
canvas.create_image(400, 263, image=french_background)
canvas.create_text(0, 0, text="French", fill= "black" , font=("Ariel", 40, "italic"))
canvas.create_text(400,263, text=random_french, fill="black", font=("Ariel",60,"bold"))
canvas.config(bg=BACKGROUND_COLOR, highlightthickness=0)
canvas.grid(row=0, column=0, columnspan=2)

问题根因 #

Tkinter Canvas的图层逻辑有两个核心规则：

• 默认按元素创建顺序堆叠，先创建的元素在下层，后创建的在上层，重叠区域下层元素会被上层遮挡
• 所有create_*类方法的anchor参数默认值为CENTER，即传入的坐标是元素的中心点，而非左上角坐标
  你遇到的异常来自几个常见疏漏：

1. 800*526尺寸的背景图放在画布中心(400,263)时，会刚好铺满整个画布可视区域；(0,0)位置的文本中心点在画布左上角，仅右下角1/4区域落在画布内，没有被完全遮挡所以可见
2. 要么后续代码中重复创建了新的背景图元素（新图片默认盖在旧文本上方），要么误操作降低了文本层级，也有可能是PhotoImage对象被垃圾回收导致图片显示异常，造成文本被遮挡的错觉

修复方案 #

• 强制调整图层顺序
  创建元素时保存每个元素的返回ID，需要置顶的元素调用tag_raise()方法即可抬升层级，需要置底的元素调用tag_lower()即可：

  canvas = Canvas(width=800, height=526)
  french_background = PhotoImage(file="images/card_front.png")
  # 保存元素ID
  bg_item = canvas.create_image(400, 263, image=french_background)
  title_item = canvas.create_text(0, 0, text="French", fill="black", font=("Ariel", 40, "italic"))
  word_item = canvas.create_text(400,263, text=random_french, fill="black", font=("Ariel",60,"bold"))
  # 将两个文本抬升到背景图上方
  canvas.tag_raise(title_item, bg_item)
  canvas.tag_raise(word_item, bg_item)
  # 不传第二个参数时，直接将元素抬到最顶层
  # canvas.tag_raise(word_item)
  

• 修正文本锚点避免位置异常
  左上角标题建议将anchor设为NW（左上角对齐），避免文本半隐在画布外，显示效果更规整：

  # 留40px边距，左上角对齐显示标题
  canvas.create_text(40, 40, text="French", fill="black", font=("Ariel", 40, "italic"), anchor=NW)
  

• 避免重复创建背景元素
  如果需要切换闪卡正反面，不要每次切换都调用create_image新建图片，否则新图片会自动盖在原有文本上方。建议提前创建好正反面两个图片元素，切换时仅用tag_raise/tag_lower调整两个图片的层级即可。

注意：PhotoImage对象必须保留持久引用（比如挂在window实例/全局变量上），不能作为局部变量使用，否则会被Python垃圾回收，导致图片显示空白，出现类似文本被遮挡的异常。

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