如何用Pygame创建文本输入框？

在Pygame中创建文本输入框可以让我们的游戏或应用程序拥有更好的交互性。本篇文章将详细介绍如何用Pygame创建一个简单的文本输入框。

环境准备

在开始之前，我们需要先安装好Python 3和Pygame。具体安装步骤可以参考官方文档或自行搜索。

除此之外，我们需要一个文本输入框的背景图和Pygame中的默认字体。这里我们使用一个名为input_box.png的PNG图片作为背景图，可以自行选择其它图片。

创建文本输入框

接下来我们开始创建文本输入框。我们首先需要定义一些基本参数，例如文本输入框的大小、位置、颜色等等。

import pygame as pg

pg.init()

# 定义一些基本参数，可以根据需求进行修改
SCREEN_SIZE = (640, 480)    # 屏幕大小
FONT_SIZE = 32              # 字体大小
FONT_COLOR = (255, 255, 255)    # 字体颜色
INPUT_BOX_COLOR_INACTIVE = (200, 200, 200)    # 输入框未选中时的颜色
INPUT_BOX_COLOR_ACTIVE = (100, 100, 100)    # 输入框选中时的颜色

接下来我们开始创建文本输入框的类。我们需要定义一个InputBox类，并且实现以下几个方法：

__init__: 构造方法，初始化文本输入框的状态
handle_event: 事件处理方法，处理文本输入框的各种事件
draw: 绘制方法，根据文本输入框的状态绘制对应的图形

class InputBox:
    def __init__(self, x, y, width, height, text=''):
        self.rect = pg.Rect(x, y, width, height)
        self.color = INPUT_BOX_COLOR_INACTIVE
        self.text = text
        self.font = pg.font.Font(None, FONT_SIZE)
        self.active = False

    def handle_event(self, event):
        if event.type == pg.MOUSEBUTTONDOWN:
            if self.rect.collidepoint(event.pos):
                self.active = not self.active
            else:
                self.active = False
            self.color = INPUT_BOX_COLOR_ACTIVE if self.active else INPUT_BOX_COLOR_INACTIVE
        if event.type == pg.KEYDOWN:
            if self.active:
                if event.key == pg.K_RETURN:
                    print(self.text)
                    self.text = ''
                elif event.key == pg.K_BACKSPACE:
                    self.text = self.text[:-1]
                else:
                    self.text += event.unicode

    def draw(self, screen):
        txt_surface = self.font.render(self.text, True, FONT_COLOR)
        screen.blit(txt_surface, (self.rect.x+5, self.rect.y+5))
        pg.draw.rect(screen, self.color, self.rect, 2)

在__init__方法中，我们定义了输入框的大小位置和初始文本。handle_event方法中，我们处理了鼠标点击和键盘输入事件，并根据输入框的状态改变颜色。在draw方法中，我们根据当前文本绘制一个表面，并绘制矩形框。

处理输入

现在我们已经可以创建一个文本输入框了，但是我们需要将用户的输入收集起来。在handle_event方法中，我们已经处理了按下回车键的事件，并将文本输出到控制台中。但是这并不是我们想要的，我们需要将输入的文本存储到一个变量中。

为了实现这一点，我们需要对InputBox类进行一些修改：

添加一个text变量，存储输入的文本
修改handle_event方法，当按下回车键时将文本输出改为将输入的文本存储到text变量中

现在，我们可以使用以下代码创建一个文本输入框，并将用户输入的文本存储到变量中：

input_box = InputBox(100, 100, 300, 50)
input_boxes = [input_box]

while True:
    for event in pg.event.get():
        if event.type == pg.QUIT:
            pg.quit()
            sys.exit()
        for box in input_boxes:
            box.handle_event(event)

    screen.fill((30, 30, 30))

    for box in input_boxes:
        box.draw(screen)

    pg.display.flip()

在主循环中，我们首先循环所有的文本输入框，处理它们的事件。然后我们在屏幕上绘制所有的文本输入框。最后更新屏幕并进入下一次循环。

支持多个输入框

如果我们需要在同一页面上有多个文本输入框，我们只需要在上面的代码中创建多个InputBox对象，并将它们添加到一个列表中即可。

input_box1 = InputBox(100, 100, 300, 50)
input_box2 = InputBox(100, 200, 300, 50)
input_boxes = [input_box1, input_box2]

然后在主循环中，循环处理所有的文本输入框即可。

完整代码

下面是完整的创建文本输入框的代码：

import pygame as pg
import sys

pg.init()

# 定义一些基本参数，可以根据需求进行修改
SCREEN_SIZE = (640, 480)    # 屏幕大小
FONT_SIZE = 32              # 字体大小
FONT_COLOR = (255, 255, 255)    # 字体颜色
INPUT_BOX_COLOR_INACTIVE = (200, 200, 200)    # 输入框未选中时的颜色
INPUT_BOX_COLOR_ACTIVE = (100, 100, 100)    # 输入框选中时的颜色

class InputBox:
    def __init__(self, x, y, width, height, text=''):
        self.rect = pg.Rect(x, y, width, height)
        self.color = INPUT_BOX_COLOR_INACTIVE
        self.text = text
        self.font = pg.font.Font(None, FONT_SIZE)
        self.active = False

    def handle_event(self, event):
        if event.type == pg.MOUSEBUTTONDOWN:
            if self.rect.collidepoint(event.pos):
                self.active = not self.active
            else:
                self.active = False
            self.color = INPUT_BOX_COLOR_ACTIVE if self.active else INPUT_BOX_COLOR_INACTIVE
        if event.type == pg.KEYDOWN:
            if self.active:
                if event.key == pg.K_RETURN:
                    print(self.text)
                    self.text = ''
                elif event.key == pg.K_BACKSPACE:
                    self.text = self.text[:-1]
                else:
                    self.text += event.unicode

    def draw(self, screen):
        txt_surface = self.font.render(self.text, True, FONT_COLOR)
        screen.blit(txt_surface, (self.rect.x+5, self.rect.y+5))
        pg.draw.rect(screen, self.color, self.rect, 2)

input_box1 = InputBox(100, 100, 300, 50)
input_box2 = InputBox(100, 200, 300, 50)
input_boxes = [input_box1, input_box2]

screen = pg.display.set_mode(SCREEN_SIZE)
pg.display.set_caption('Pygame Text Input Box Example')

while True:
    for event in pg.event.get():
        if event.type == pg.QUIT:
            pg.quit()
            sys.exit()
        for box in input_boxes:
            box.handle_event(event)

    screen.fill((30, 30, 30))

    for box in input_boxes:
        box.draw(screen)

    pg.display.flip()