大家好，又见面了，我是全栈君。

（tkinter）撩妹弹窗（3）之不要越过三八线，canvas的使用方法

今天，我们又来搞事情了。

一、系列章节列表

1、过分了，别人用来做桌面应用开发，这家伙却用来撩妹(2)-上帝给你开了各种撩妹窗口（Tkinter）

2、过分了，别人用来做桌面应用开发，这家伙却用来撩妹(1)–上帝给你开一个窗口（Tkinter）

二、目录

（tkinter）撩妹弹窗（3）之不要越过三八线，canvas的使用方法

一、系列章节列表

二、目录

三、前言

四、正文

第一步：我有一个窗口

第二步：弹窗之同桌叫我不要越过38线

第三步：弹窗之越过38线的我

第四步：弹窗之哪些隐藏的甜言蜜语

第五步：弹窗之哪些隐藏的你的图片

五、总结

三、前言

在开始学习研究这篇文章之前，你可能需要先看一下前面两篇文章，因为我们所用到的函数方法都是在前面基础上的延伸，对你理解这篇文章也是有不错的帮助。此文，我们主要探寻如何在当我们达到某一条线，或者某一个点的时候，显示我们需要的内容。

四、正文

三八线：

含义一：1945年9月2日，根据盟国协议，盟军最高司令官麦克阿瑟在第一号指令中，以北纬38度线为界作为美苏两国军队分别受理驻朝日军的投降事宜和对日开展军事活动的临时分界线，以北为驻朝苏军受降区，以南为美军受降区

含义二：指一般分界线，同学之间同桌的课桌中间的“分界线”。 

是不是有小时的回忆。哈哈。今天，我们来聊一聊，越过三八线的改变。

第一步：我有一个窗口

首先，我们先来实现一个窗口。

import tkinter
from tkinter import *
tk=tkinter.Tk()
 
def window():
    tk.title("一个窗口")  # 设置窗口名称
    tk.geometry("300x300+500+300")
    tk.iconbitmap('favicon.ico')
    tk["background"] = "#7AC5CD"
    # tk.attributes("-toolwindow", True)#隐藏顶部工具栏之后，icon不会显示
    tk.mainloop()
 
if __name__ == '__main__':
    window()

第二步：弹窗之同桌叫我不要越过38线

弹窗已经实现了，现在，我们来以桌面中心线为中心，同桌叫我不要超过中心线。不能超过中线。如图

这个方法是使用设置窗口的方式，并更新窗口位置，不过有应该缺点，当边框超过中线之后，界面就会因为窗口改变事件，不断循环而卡死，大家有什么好的方法，欢迎在评论区讨论。

 代码如下：

import tkinter

tk = tkinter.Tk()
tk.title("一个窗口")  # 设置窗口名称
tk.geometry("300x300+200+300")
tk.iconbitmap('favicon.ico')
tk.attributes("-toolwindow", True)
w = tk.winfo_screenwidth()#获取屏幕宽
h = tk.winfo_screenheight()#获取屏幕高

def update_test(e):
    tk.update()
    # 获取屏幕的大小;
    height = tk.winfo_height()
    width = tk.winfo_width()
    # 获取窗体的位置
    x = tk.winfo_x()
    y = tk.winfo_y()
    if x + width > w / 2>x:
        tk.geometry("%sx%s+%s+%s" % (int(w / 2 - x), height, x, y))

tk.bind("<Configure>", update_test)
tk.mainloop()

第三步：弹窗之越过38线的我

弹窗已经实现了，现在，我们来以桌面中心线为中心，当弹窗在左边时显示一个颜色，当弹窗在右边时，显示一个颜色。

这里有两个变化，突变和渐变

突变：突然改变，达到超过某一条线之后，突然变为另外一个。

渐变：逐渐改变，到达某一条线时，中间会显示这条分界线，逐渐变为另外一个。

思考：刚开始编写时，我尝试了使用弹窗的标签label，但是似乎不如人意，但也是勉强实现了突变。

当窗口的所在的坐标超过屏幕的二分之一时，变为蓝色。

也就是我们需要知道屏幕的2分之一的位置，以及窗口坐标的位置，集合到之前我们学习到的知识，因此就可以得到。

渐变思考：在上面这种方式，似乎还是没有满足我们想要的结果，要是能慢慢过渡为另外一个颜色，那就好了。

这次不能像之前那样，使用label了，我们这里需要用到另外一个新的知识。Tkinter的画布功能，canvas。

w = tk.winfo_screenwidth()#获取屏幕宽
h = tk.winfo_screenheight()#获取屏幕高
cn=Canvas(tk, height=h, width=w,bg="white")#设置画布高宽，背景颜色

函数  .create_rectangle(0, 0, w / 2 - x, height, fill='red', outline='white')
#创建一个矩形，create_rectangle（x,y,宽，高）。fill 填充颜色，outline，边框颜色

 如上图所示，我们成功将38线找到了，当我越过三八线时，变成为了你。

import tkinter
from tkinter import *


tk = tkinter.Tk()
tk.title("一个窗口")  # 设置窗口名称
tk.geometry("300x300+500+300")
tk.iconbitmap('favicon.ico')
w = tk.winfo_screenwidth()#获取屏幕宽
h = tk.winfo_screenheight()#获取屏幕高
cn=Canvas(tk, height=h, width=w,bg="pink")# bg="pink"

def update_test(e):
    cn.delete(tkinter.ALL)#清除画布内容
    tk.update()
    # 获取屏幕的大小;
    height = tk.winfo_height()
    width = tk.winfo_width()
    # 获取窗体的位置
    x = tk.winfo_x()
    y = tk.winfo_y()
    cn.create_rectangle(0, 0, w / 2 - x, height, fill='red', outline='white')
    cn.pack()
tk.bind("<Configure>", update_test)
tk.mainloop()

思路：添加一个画布，并在画布中画一个矩形，并填充颜色。 宽的计算等于多少呢？

w为屏幕的宽，x为坐标的x，也就是窗体的位置坐标横坐标。然后就得到矩形的宽。窗口的高即为矩形的高，也是就得到了这个变化。

第四步：弹窗之哪些隐藏的甜言蜜语

在学习了上面这个技巧之后，我们现在想在桌面上的某一个点来设置我们隐藏的甜言蜜语。有什么好的方法。

继续使用画布的功能。

canvas.create_text(x, y, text='你发现我了',font=3)

 这里的坐标是以窗口的坐标，而不是屏幕的坐标，所以我们还需要进行一次转换。

假如窗口的坐标是（x,y）,我们需要的文字显示在（520,520）的位置，那文字应该在画布的那个坐标显示呢？

因为文字的坐标是变动的，于是就有     （520-x,520-y）

代码如下：

import tkinter
from tkinter import *


tk=tkinter.Tk()
tk.title("窗口")#设置窗口名称
tk.geometry("300x300+500+300")
w = tk.winfo_screenwidth()#获取屏幕宽
h = tk.winfo_screenheight()#获取屏幕高
cn=Canvas(tk, height=h, width=w,bg="white")# bg="pink",

def update_test(e):
    cn.delete(tkinter.ALL)#清除画布状态，否则这不会有效果
    tk.update()
    # 获取窗体的位置
    x = tk.winfo_x()
    y = tk.winfo_y()
    cn.create_text(350-x, 300-y, text='你发现我了',font=30)
    cn.pack()
tk.bind("<Configure>", update_test)
tk.mainloop()

 是不是很不错的样子，赶快拿起键盘试一下吧。

第五步：弹窗之哪些隐藏的你的图片

我们已经能把我们喜欢的话“隐藏”起来了，那我现在想隐藏她的一张照片，怎么办呢？我们继续来看。

隐藏照片，这里我们依然应用到画布的功能哦。

image = Image.open("Figure_1.jpg")  # 打开图片
image = image.resize((300, 300))  # 设置图片大小
photo = ImageTk.PhotoImage(image)  # 引入图片
canvas.create_image(x, y, anchor='nw', image=photo)#将图片加入画布，要把图片放到外层，或者是声明全局变量

类似于文字的坐标，我们便可以得到图片的坐标。

代码如下：

import tkinter
from tkinter import *
from PIL import ImageTk, Image

tk=tkinter.Tk()
tk.title("窗口")#设置窗口名称
tk.geometry("300x300+500+300")
w = tk.winfo_screenwidth()#获取屏幕宽
h = tk.winfo_screenheight()#获取屏幕高
cn=Canvas(tk, height=h, width=w,bg="white")# bg="pink"
image1 = Image.open("Figure_1.jpg")  # 打开图片
image = image1.resize((300, 300))  # 设置图片大小
photo = ImageTk.PhotoImage(image)  # 引入图片
def update_test(e):
    cn.delete(tkinter.ALL)
    tk.update()
    # 获取屏幕的大小;
    height = tk.winfo_height()
    width = tk.winfo_width()
    # 获取窗体的位置
    x = tk.winfo_x()
    y = tk.winfo_y()
    cn.create_image(500-x, 300-y, anchor='nw', image=photo)
    cn.pack()
tk.bind("<Configure>", update_test)
tk.mainloop()

因为我们的xy是变动的，所以在最大化的时候，我们的图片，文字，都会在对应坐标显示出来，为了增加神秘感，于是，我们增加一个判断。

    if x==-8 and y==-8:pass#最大化的窗口坐标点
    else:
        cn.create_image(500 - x, 300 - y, anchor='nw', image=photo)
        cn.pack()

在最大化的时候，我们什么都不处理。

五、总结

阅读本文，主要了解的是，tkinter的画布功能。画布的创建，画矩形的方法，插入文字的方法，插入图片的方法。以及tkinter窗口改变事件的应用。

cn.create_line(100, 0, 100, 200,fill='red') # 红色直线，画直线
cn.create_rectangle(0, 0,w/2-x, height,fill='#7AC5CD',outline='white')# 画矩形
cn.create_text(550-x, 500-y, text='你发现我了',font=300)#插入文字
cn.create_image(1200-x, 300-y, anchor='nw', image=photo)#插入图片，要把图片放到外层，或者是声明全局变量

tk.bind("<Configure>", update_test)#监听窗口改变事件