我一直在思索实现一个透明的窗体，然后可以基于这个窗体可以开发出各种好玩的应用（如桌面运动的小人、运动的小球、截图、录制GIF等等），今天无意间居然让我把其中一个最核心的技术难关突破了，我非常高兴，也借这个机会跟大家分享一下。
这一期，在前面两期的基础上，进一步介绍python使用tkinter实现透明窗体上绘制运动小球。进阶了！
废话不多说，直接开始。
一、先上效果吧
完全透明的窗体，在桌面最前端显示一堆运动的小球，这些小球按照有规则的运动模式进行运动。
二、需求分析
（一）先搞清楚角色
1、有运动的小球，而且运动的小球有不同的颜色、大小、运动方向、速度等。
2、有主界面，也就是我们的屏幕，这个屏幕不断更新数据并展现，也就是说屏幕在不停的重画重画。
（二）再搞清楚技术核心点
1、需要绘制透明的窗口，整个窗口是透明的，而运动的小球是有不同的颜色的。
2、每个小球的随机运动函数，也是一个非常难的技术点，譬如发生了边界碰撞后需要改变方向、其特性的随机性等等。
（三）继续搞清楚需要的类库
1、实现窗口，使用python自带的tkinter库；
2、实现随机性，使用ptthon自带的random随机函数库
三、设计原则
（一）类化
为了代码简洁、易管理、易懂
（二）模块化
所有技术细节均封装、无需关注实现细节，只关注如何调用、如何使用，各司其职、各尽其职。
（三）迭代优化
每个产品都是需要迭代的、无论商用与否，看我们如何思考和优化，精益求精。
四、核心功能模块
（一）运动小球实现
1、运动小球环境参数初始化
def __init__(self, canvas,root):
self.canvas = canvas
self.root = root
2、运动小球功能参数初始化
def create_ball(self):
# tkinter绘图采用屏幕坐标系，原点在左上角，x从左往右递增，y从上往下递增
# 随机产生表示当前球的大小，也就是半径长度
self.radius = randint(2, 10)
self.scrnwidth = int(self.root.winfo_width())
self.scrnheight = int(self.root.winfo_height())
# 在绘图区域内，随机产生当前球的圆心的x坐标和y坐标，用于制定出现的位置
self.xpos = randint(self.radius, int(self.root.winfo_width())-self.radius)
self.ypos = randint(self.radius, int(self.root.winfo_height())-self.radius)
# 在绘图区域内，随机产生当前球的x坐标和y坐标的向量
# 在数学中，几何向量（也称矢量），指具有大小和方向的量
# 这里我们可以用来表示球的速度
self.xvelocity = randint(2, 6)
self.yvelocity = randint(2, 6)
# 通过lambda表达式创建函数对象r，每次调用r()都会产生0~255之间的数字
r = lambda: randint(0, 255)
# 三次调用的数字取前两位，用十六进制数方式存储到self.color里，作为球的颜色
# RRGGBB，前2是红色，中2是绿色，后2是蓝色，最小是0，最大是F
# 如全黑#000000 全白#FFFFFF 全红#FF0000
self.color = "#%02x%02x%02x" % (r(), r(), r())
# canvas.create_oval可以绘制一个圆
# 但是需要传入圆的左、上、右、下四个坐标
# 所以我们先产生4个坐标，通过这个四个坐标，绘制圆的大小
# 左坐标=x坐标-半径
x1 = self.xpos - self.radius
# 上坐标=y坐标-半径
y1 = self.ypos - self.radius
# 右坐标=x坐标+半径
x2 = self.xpos + self.radius
# 下坐标=y坐标+半径
y2 = self.ypos + self.radius
# 通过canvas.create_oval()方法绘出整个圆，填充色和轮廓色分别是self.color生成的颜色
# self.canvas.delete('ball')
self.ball = self.canvas.create_oval(x1, y1, x2, y2, fill=self.color, outline=self.color,tag='ball')
# canvas.addtag_all('t5')
print(x1,y1,x2,y2,self.color,self.radius)
3、运动小球运动函数
def move_ball(self):
# 进行相应的移动，如果坐标超过屏幕边缘则向相反方向移动
# 让球的x坐标和y坐标，按照向量的大小进行增加，表示球的运行，向下和向右
self.scrnwidth = int(self.root.winfo_width())
self.scrnheight = int(self.root.winfo_height())
self.xpos += self.xvelocity
self.ypos += self.yvelocity
# 如果球的y坐标大于等于屏幕高度和球的半径的差，则调整球的运行y轴方向朝上
if self.ypos >= self.scrnheight - self.radius:
self.yvelocity = -self.yvelocity
# 如果球的y坐标小于等于屏幕高度和球的半径的差，则调整球的y轴运行方向朝下
if self.ypos <= self.radius:
self.yvelocity = abs(self.yvelocity)
# 如果球的x坐标大于等于屏幕宽度和球的半径差，则调整球的运行x轴方向朝左
if self.xpos >= self.scrnwidth - self.radius:
self.xvelocity = -self.xvelocity
# 如果球的x坐标小于等于屏幕宽度和球半径的差，则调整球的运行x轴方向朝右
if self.xpos <= self.radius:
self.xvelocity = abs(self.xvelocity)
# 调整canvas对象的move()方法可以让对象动起来，以及对象x轴和y轴的向量大小
self.canvas.move(self.ball, self.xvelocity, self.yvelocity)
# self.canvas.after(10, self.move_ball)
4、运动小球类完整代码
class Ball:
def __init__(self, canvas,root):
self.canvas = canvas
self.root = root
def create_ball(self):
# tkinter绘图采用屏幕坐标系，原点在左上角，x从左往右递增，y从上往下递增
# 随机产生表示当前球的大小，也就是半径长度
self.radius = randint(2, 10)
self.scrnwidth = int(self.root.winfo_width())
self.scrnheight = int(self.root.winfo_height())
# 在绘图区域内，随机产生当前球的圆心的x坐标和y坐标，用于制定出现的位置
self.xpos = randint(self.radius, int(self.root.winfo_width())-self.radius)
self.ypos = randint(self.radius, int(self.root.winfo_height())-self.radius)
# 在绘图区域内，随机产生当前球的x坐标和y坐标的向量
# 在数学中，几何向量（也称矢量），指具有大小和方向的量
# 这里我们可以用来表示球的速度
self.xvelocity = randint(2, 6)
self.yvelocity = randint(2, 6)
# 通过lambda表达式创建函数对象r，每次调用r()都会产生0~255之间的数字
r = lambda: randint(0, 255)
# 三次调用的数字取前两位，用十六进制数方式存储到self.color里，作为球的颜色
# RRGGBB，前2是红色，中2是绿色，后2是蓝色，最小是0，最大是F
# 如全黑#000000 全白#FFFFFF 全红#FF0000
self.color = "#%02x%02x%02x" % (r(), r(), r())
# canvas.create_oval可以绘制一个圆
# 但是需要传入圆的左、上、右、下四个坐标
# 所以我们先产生4个坐标，通过这个四个坐标，绘制圆的大小
# 左坐标=x坐标-半径
x1 = self.xpos - self.radius
# 上坐标=y坐标-半径
y1 = self.ypos - self.radius
# 右坐标=x坐标+半径
x2 = self.xpos + self.radius
# 下坐标=y坐标+半径
y2 = self.ypos + self.radius
# 通过canvas.create_oval()方法绘出整个圆，填充色和轮廓色分别是self.color生成的颜色
# self.canvas.delete('ball')
self.ball = self.canvas.create_oval(x1, y1, x2, y2, fill=self.color, outline=self.color,tag='ball')
# canvas.addtag_all('t5')
print(x1,y1,x2,y2,self.color,self.radius)
def move_ball(self):
# 进行相应的移动，如果坐标超过屏幕边缘则向相反方向移动
# 让球的x坐标和y坐标，按照向量的大小进行增加，表示球的运行，向下和向右
self.scrnwidth = int(self.root.winfo_width())
self.scrnheight = int(self.root.winfo_height())
self.xpos += self.xvelocity
self.ypos += self.yvelocity
# 如果球的y坐标大于等于屏幕高度和球的半径的差，则调整球的运行y轴方向朝上
if self.ypos >= self.scrnheight - self.radius:
self.yvelocity = -self.yvelocity
# 如果球的y坐标小于等于屏幕高度和球的半径的差，则调整球的y轴运行方向朝下
if self.ypos <= self.radius:
self.yvelocity = abs(self.yvelocity)
# 如果球的x坐标大于等于屏幕宽度和球的半径差，则调整球的运行x轴方向朝左
if self.xpos >= self.scrnwidth - self.radius:
self.xvelocity = -self.xvelocity
# 如果球的x坐标小于等于屏幕宽度和球半径的差，则调整球的运行x轴方向朝右
if self.xpos <= self.radius:
self.xvelocity = abs(self.xvelocity)
# 调整canvas对象的move()方法可以让对象动起来，以及对象x轴和y轴的向量大小
self.canvas.move(self.ball, self.xvelocity, self.yvelocity)
# self.canvas.after(10, self.move_ball)
（二）主界面实现
1、实现最简单的窗体
from tkinter import *
if __name__ == '__main__':
tk = Tk()
tk.geometry('500x400+500+150')
tk.title('有趣的透明窗体-开篇了！！！')
canvas = Canvas(tk)
canvas.pack(fill=BOTH, expand=Y)
tk.mainloop()
太简单了，不详细说了，相信大家都看得懂。
2、把灰色设置成透明色
TRANSCOLOUR = 'gray'
tk.wm_attributes('-transparentcolor', TRANSCOLOUR)
3、放置一个矩形框在canvas上。
canvas.create_rectangle(0, 0, canvas.winfo_width(), canvas.winfo_height(), fill=TRANSCOLOUR, outline=TRANSCOLOUR)
4、让透明窗体不断重画的onsize函数
def on_resize(evt):
tk.configure(width=evt.width,height=evt.height)
canvas.create_rectangle(0, 0, canvas.winfo_width(), canvas.winfo_height(), fill=TRANSCOLOUR, outline=TRANSCOLOUR)
print(canvas.winfo_width())
5、绑定onsize函数
tk.bind('<Configure>', on_resize)
6、最终的效果
哈哈，透明主界面效果出来了。
（三）主界面和运动函数的交互实现
1、创建多个ball，并存储在list列表里
balls = []
num = 20
for i in range(num):
ball = Ball(canvas, tk)
ball.create_ball()
balls.append(ball)
这里初始化20个小球，你可以初始化1个，也可以初始化更多个。
2、实现多个小球的运动函数，并在main函数中调用
def move_balls():
for ball in balls:
ball.move_ball()
canvas.after(20, move_balls)
move_balls()
3、主函数的整体代码
if __name__ == '__main__':
tk = Tk()
tk.geometry('600x500+300+100')
tk.title('有趣的透明窗体-开篇了！！！')
tk.bind('<Configure>', on_resize)
canvas = Canvas(tk)
canvas.pack(fill=BOTH, expand=Y)
tk.update()
balls = []
num = 20
for i in range(num):
ball = Ball(canvas, tk)
ball.create_ball()
balls.append(ball)
move_balls()
tk.mainloop()
五、初步的运行效果
好吧，后续我会分享这部分的完整代码给各位，希望大家不是拿来主义，能点点赞、关注一下我啊。
六、更多参数的优化
（一）去掉标题栏
tk.overrideredirect(1)
（二）置顶显示
tk.wm_attributes("-topmost", 1)
（三）把旁边的白边去掉
canvas.config(highlightthickness=0)
呵呵，窗体最后就变成光秃秃的了。
七、最终运行的效果
代码量不大，效果还行。
再深入研究可以有更多更有趣的应用。
分享是一种快乐，希望我们一起快乐，我走过的坎、尝试过的bug，希望你们可以不用再尝试。
对代码有兴趣的朋友们，欢迎关注和点赞，后续我会分享这部分的完整代码给各位，希望大家不是拿来主义，能点点赞、关注一下我啊。
欢迎持续关注，比心。
6748
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
