如何防止进度条指示器显示在圆角之外？

当我使用舍入时，我的进度条溢出了其边框：

我的修复（使用 pygame.draw.arc 在圆角矩形外部形成透明弧）仍然留下一部分可见。 arc 函数使用一个矩形，所以我计算它的位置和大小：

# I stored the 4 border radiuses in a dictionary.
rad = sqrt(border_radius['border_top_left_radius']**2*2)
# It can also be written as
rad = sqrt(2)*border_radius['border_top_left_radius']

并减去边框半径以获得从角到边界正方形顶点的距离：

dist = round(rad-border_radius['border_top_left_radius'])

我画了弧：

pygame.draw.arc(
    self.image,
    (0,0,0,0),
    pygame.Rect(
        -dist,
        -dist,
        border_radius['border_top_left_radius']*2+dist,
        border_radius['border_top_left_radius']*2+dist),
    math.radians(90), math.radians(180),
    dist
)

但它仍然溢出了它的圆角（黑色说明）：

也许圆角不是正圆？

你遇到的问题是，你正在使用 line thickness 在 pygame.draw.arc 中来控制透明弧的宽度，但这会导致部分溢出可见。这是因为线宽在绘制的弧线的中心绘制，因此即使线宽等于圆角半径，它也只会覆盖圆角的一半。

为了解决这个问题，你不需要绘制透明弧。 Pygame 没有内置方法来绘制具有完美圆角的形状，但你可以使用以下方法解决此问题：

1. 使用遮罩：

• 创建一个带有圆角的表面。 这可以使用 pygame.Surface 和 fill 方法（用于背景）和 pygame.draw.circle （用于绘制圆角）来完成。
• 创建一个作为进度条的表面。
• 将进度条表面 blit 到圆角表面上。
• 将圆角表面设置为进度条表面的遮罩。 这将确保只有圆角内的像素可见。

这是一个示例代码：

import pygame

# 初始化 Pygame
pygame.init()

# 设置窗口大小
screen_width = 400
screen_height = 200
screen = pygame.display.set_mode((screen_width, screen_height))

# 设置进度条颜色
bar_color = (0, 128, 0)  # 绿色
bg_color = (255, 255, 255)  # 白色
border_color = (0, 0, 0)  # 黑色

# 设置进度条尺寸和圆角半径
bar_width = 300
bar_height = 30
border_radius = bar_height // 2

# 创建带有圆角的表面
rounded_rect_surface = pygame.Surface((bar_width, bar_height), pygame.SRCALPHA)
rounded_rect_surface.fill((0, 0, 0, 0))  # 透明背景

# 绘制圆角矩形
pygame.draw.rect(rounded_rect_surface, bg_color, (0, 0, bar_width, bar_height), border_radius=border_radius)
pygame.draw.rect(rounded_rect_surface, border_color, (0, 0, bar_width, bar_height), width=2, border_radius=border_radius)


# 创建进度条表面
progress_bar_surface = pygame.Surface((bar_width, bar_height), pygame.SRCALPHA)

# 设置进度条初始值
progress = 0

# 游戏循环
running = True
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

    # 更新进度条 (这里只是一个例子，你可以根据需要更改逻辑)
    progress += 0.01
    if progress > 1:
        progress = 0

    # 清空进度条表面
    progress_bar_surface.fill((0, 0, 0, 0)) 

    # 绘制进度条
    pygame.draw.rect(progress_bar_surface, bar_color, (0, 0, progress * bar_width, bar_height), border_radius=border_radius)

    # 将进度条 blit 到圆角表面上
    rounded_rect_surface.blit(progress_bar_surface, (0, 0))

    # 将圆角表面设置为遮罩
    progress_bar_surface.set_colorkey((0, 0, 0))  # 设置黑色为透明
    progress_bar_surface.blit(rounded_rect_surface, (0, 0), special_flags=pygame.BLEND_RGBA_MIN) 

    # 在屏幕上绘制进度条
    screen.fill(bg_color)
    screen.blit(progress_bar_surface, ((screen_width - bar_width) // 2, (screen_height - bar_height) // 2))

    # 更新显示
    pygame.display.flip()

# 退出 Pygame
pygame.quit()

2. 使用带有圆角的图像编辑软件创建进度条图像。

• 创建一个带有圆角的透明 PNG 图像，作为进度条的背景。
• 在你的 Pygame 代码中，加载此图像并将其用作进度条的背景。然后，你可以简单地在上面绘制一个矩形来表示进度，而圆角将由背景图像处理。

这两种方法都可以帮助你创建带有完美圆角的进度条，而不会出现任何溢出。