Pygame 教程（4）拓展：使用 subsurface 方法

原文：图像传输和绘制文本

在本拓展文章，将展示如何使用pygame.Surface.subsurface方法实现原文中的更改线条粗细步骤。

pygame.Surface.subsurface将获取原Surface对象的子Surface它与原Surface共享像素，原图像的操作也将影响到改子图像。如果不想该子图像与原图像有任何的关联，可以在调用此方法后使用copy方法创建副本。

在原文实例中，可以通过subsurface方法截取用户绘制的部分，然后重绘屏幕及色板，最后再将截取的部分重新绘制到屏幕上。

将draw_text方法保留原来的样子，并添加change_line_width方法，代码如下：

# ...

def draw_text(self):
    surf = self.font.render(f'Line width: {self.width}', True, (0, 0, 0))
    rect = surf.get_rect()
    rect.right = PALETTE_RECT.right - GAP
    rect.centery = PALETTE_RECT.centery
    fill_rect = pygame.Rect(rect.left - 5, rect.top - 5, rect.width + 10, rect.height + 10)
    pygame.draw.rect(self.screen, (255, 255, 255), fill_rect)
    self.screen.blit(surf, rect)
    
def change_line_width(self):
    board_rect = (0, PALETTE_RECT.bottom, 800, 800 - PALETTE_HEIGHT)
    board = self.screen.subsurface(board_rect).copy()
    self.screen.fill((255, 255, 255))
    self.circles.clear()
    self.draw_colors()
    self.draw_text()
    self.screen.blit(board, board_rect)

# ...

修改on_key_down方法，将调用draw_text改为调用change_line_width：

def on_key_down(self, key):
    if self.drawing:
        return
    if key == pygame.K_UP:
        self.width += 1
        self.width = clamp(self.width, 1, LINE_WIDTH_MAX)
        self.change_line_width()
    elif key == pygame.K_DOWN:
        self.width -= 1
        self.width = clamp(self.width, 1, LINE_WIDTH_MAX)
        self.change_line_width()

完整代码如下：

import sys

import pygame

COLORS = (
    (0, 0, 0),
    (255, 0, 0),
    (0, 255, 0),
    (0, 0, 255),
    (255, 255, 0),
    (255, 0, 255),
    (0, 255, 255),
    (255, 255, 255)
)  # 色板中的所有颜色

RADIUS = 15  # 色板中设置颜色的圆圈的半径
GAP = 15  # 色板中相邻的圆圈之间的空隙
CENTER_DIST = RADIUS * 2 + GAP  # 色板中相邻的圆圈的中心之间的距离
PALETTE_RECT = pygame.Rect(0, 0, 800, RADIUS * 2 + GAP * 2)  # 色板的矩形坐标
PALETTE_HEIGHT = PALETTE_RECT.height  # 色板的矩形的高度
LINE_WIDTH_MAX = 20  # 线条的最大粗度


def clamp(value, low, high):
    return low if value < low else (high if value > high else value)


def clamp_pos(pos):
    y = clamp(pos[1], PALETTE_HEIGHT, 800)
    return (pos[0], y)


def dist_between_points(point1, point2):
    return ((point1[0] - point2[0]) ** 2 + (point1[1] - point2[1]) ** 2) ** 0.5


class DrawingBoard:
    def __init__(self):
        pygame.init()
        self.screen = pygame.display.set_mode((800, 800))
        self.screen.fill((255, 255, 255))
        pygame.display.set_caption('Drawing Board')

        self.color = (0, 0, 0)  # 画笔的颜色
        self.width = 1  # 线条的粗细
        self.last_pos = self.pos = (0, 0)  # 鼠标上一帧的位置以及当前位置
        self.circles = []  # 色板中由圆圈的中心和对应颜色的元组组合而成。
        self.font = pygame.font.SysFont('Times New Roman', 20)  # 字体
        self.drawing = False  # 用户是否正在绘画

        self.draw_colors()
        self.draw_text()

    def draw_colors(self):
        for i in range(len(COLORS)):
            center = (i * CENTER_DIST + GAP + RADIUS, GAP + RADIUS)
            pygame.draw.circle(self.screen, COLORS[i], center, RADIUS)
            self.circles.append((center, COLORS[i]))

        pygame.draw.line(self.screen, (0, 0, 0), (0, PALETTE_HEIGHT), (800, PALETTE_HEIGHT))

    def draw_text(self):
        surf = self.font.render(f'Line width: {self.width}', True, (0, 0, 0))
        rect = surf.get_rect()
        rect.right = PALETTE_RECT.right - GAP
        rect.centery = PALETTE_RECT.centery
        fill_rect = pygame.Rect(rect.left - 5, rect.top - 5, rect.width + 10, rect.height + 10)
        pygame.draw.rect(self.screen, (255, 255, 255), fill_rect)
        self.screen.blit(surf, rect)
        
    def change_line_width(self):
        board_rect = (0, PALETTE_RECT.bottom, 800, 800 - PALETTE_HEIGHT)
        board = self.screen.subsurface(board_rect).copy()
        self.screen.fill((255, 255, 255))
        self.circles.clear()
        self.draw_colors()
        self.draw_text()
        self.screen.blit(board, board_rect)

    def on_mouse_down(self, pos):
        if PALETTE_RECT.collidepoint(pos):
            for center, color in self.circles:
                if dist_between_points(pos, center) < RADIUS:
                    self.color = color
        else:
            self.last_pos = self.pos = pos
            self.drawing = True
            
    def on_mouse_move(self, pos):
        if self.drawing:
            self.pos = clamp_pos(pos)
            pygame.draw.line(self.screen, self.color, self.last_pos, self.pos, self.width)
            self.last_pos = clamp_pos(pos)
            
    def on_key_down(self, key):
        if self.drawing:
            return
        if key == pygame.K_UP:
            self.width += 1
            self.width = clamp(self.width, 1, LINE_WIDTH_MAX)
            self.change_line_width()
        elif key == pygame.K_DOWN:
            self.width -= 1
            self.width = clamp(self.width, 1, LINE_WIDTH_MAX)
            self.change_line_width()

    def process_events(self):
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                pygame.quit()
                sys.exit()
            elif event.type == pygame.MOUSEBUTTONDOWN:
                self.on_mouse_down(event.pos)
            elif event.type == pygame.MOUSEMOTION:
                self.on_mouse_move(event.pos)
            elif event.type == pygame.MOUSEBUTTONUP:
                self.drawing = False
            elif event.type == pygame.KEYDOWN:
                self.on_key_down(event.key)

    def run(self):
        while True:
            self.process_events()
            pygame.display.update()


if __name__ == '__main__':
    app = DrawingBoard()
    app.run()