如何在Pygame中避免图形重叠？螺旋与连线绘制优化

想要实现从屏幕中心延伸至螺旋运动圆圈的动态牵引线，圆圈持续绘制螺旋轨迹，牵引线仅作为“牵引线”随螺旋位置更新。但尝试覆盖旧连线时，总会连带覆盖已绘制的螺旋图形，用黑色填充连线区域的方法会覆盖该区域的所有内容，无法保留螺旋轨迹。（类似单位圆可视化正弦余弦图的GIF效果）

原始代码 #

import pygame
import math 
import time

clock = pygame.time.Clock()

RED = (255, 0, 0)
BLUE = (0, 0, 255)
YELLOW = (255, 255, 0)
PURPLE = (125, 0, 255)
GREEN = (85, 235, 52)
WHITE = (255, 255, 255)
BLACK = (0, 0, 0)

pygame.init()
screen = pygame.display.set_mode((700, 700))

screen.fill(BLACK)
pygame.display.update

running = True
should_update = False

dtheta = 0.5
theta = 0

ray_len = 100

while running:

    for event in pygame.event.get():
        if event.type == pygame.QUIT: running = False

    ray = (350, 350)
    x = ray[0] + math.cos(math.radians(theta)) * ray_len
    y = ray[1] + math.sin(math.radians(theta)) * ray_len 

    theta = theta - dtheta
    ray_len = ray_len + 0.1

    line = pygame.draw.line(screen, BLUE, ray, (x, y), 5)

    screen.fill(BLACK, line)
    line = pygame.draw.line(screen, BLUE, ray, (x, y), 5)

    pygame.draw.circle(screen, BLUE, (x + 20, y + 20), 20)
    pygame.draw.circle(screen, RED, (x, y), 10)
    pygame.draw.circle(screen, YELLOW, (x + 40, y + 40), 5)

    a = False
    b = False
    c = False
    d = False

    if  300 < x < 400 and 150 < y < 350:
        a = True

    pygame.display.update()

    clock.tick(100)

解决思路 #

核心是分离静态轨迹层和动态元素层：用一个独立的Surface存储已经绘制完成的螺旋轨迹（静态内容），主屏幕每次先绘制这个静态轨迹，再绘制当前的动态牵引线和圆圈。这样旧的牵引线会被每次的清屏操作覆盖，而螺旋轨迹会被保留下来。

修改后的代码 #

import pygame
import math 

clock = pygame.time.Clock()

RED = (255, 0, 0)
BLUE = (0, 0, 255)
YELLOW = (255, 255, 0)
BLACK = (0, 0, 0)

pygame.init()
screen = pygame.display.set_mode((700, 700))
# 创建用于存储螺旋轨迹的Surface，和屏幕尺寸一致
trail_surface = pygame.Surface((700, 700))
trail_surface.fill(BLACK)  # 初始填充黑色

running = True

dtheta = 0.5
theta = 0
ray_len = 100

while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    # 计算当前螺旋点的坐标
    center = (350, 350)
    x = center[0] + math.cos(math.radians(theta)) * ray_len
    y = center[1] + math.sin(math.radians(theta)) * ray_len 

    theta -= dtheta
    ray_len += 0.1

    # 1. 清屏，准备绘制新的一帧
    screen.fill(BLACK)
    # 2. 绘制已经累积的螺旋轨迹
    screen.blit(trail_surface, (0, 0))
    # 3. 绘制当前的动态牵引线
    pygame.draw.line(screen, BLUE, center, (x, y), 5)
    # 4. 绘制当前的三个圆圈到屏幕
    circle_blue = (x + 20, y + 20)
    circle_red = (x, y)
    circle_yellow = (x + 40, y + 40)
    pygame.draw.circle(screen, BLUE, circle_blue, 20)
    pygame.draw.circle(screen, RED, circle_red, 10)
    pygame.draw.circle(screen, YELLOW, circle_yellow, 5)
    # 5. 将当前的圆圈绘制到轨迹Surface，保存为静态轨迹
    pygame.draw.circle(trail_surface, BLUE, circle_blue, 20)
    pygame.draw.circle(trail_surface, RED, circle_red, 10)
    pygame.draw.circle(trail_surface, YELLOW, circle_yellow, 5)

    pygame.display.update()
    clock.tick(100)

pygame.quit()

关键修改点说明 #

• 创建trail_surface专门存储螺旋轨迹，所有已经绘制过的圆圈都会保存在这里，不会被后续操作覆盖。
• 主循环中每次先清屏，再绘制trail_surface的内容（即之前的螺旋轨迹），然后绘制当前的牵引线和圆圈。
• 当前的圆圈同时绘制到trail_surface，这样在下一帧就会成为轨迹的一部分。
• 不再需要用screen.fill(BLACK, line)来擦除旧牵引线，因为每次清屏后重新绘制的都是新的牵引线，旧的自然被清除。

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