将文本添加到彩色输入文本框 pygame

问题描述

我想创建一个彩色输入文本框，用户可以在其中输入一些文本。

这是我正在尝试的代码：

import pygame


class InputBox:
    def __init__(self,x,y,w,h,color_active,color_inactive,font,text=''):
        self.rect = pygame.Rect(x,h)
        self.inner_rect = pygame.Rect(x+2,y+2,w-4,h-4)
        self.color_active = color_active
        self.color_inactive = color_inactive
        self.color = self.color_inactive
        self.text = text
        self.font = font
        self.txt_surface = font.render(text,True,self.color)
        self.active = False

    def handle_event(self,event):
        if event.type == pygame.MOUSEBUTTONDOWN:
            # If the user clicked on the input_Box rect.
            if self.rect.collidepoint(event.pos):
                # Toggle the active variable.
                self.active = not self.active
            else:
                self.active = False
            # Change the current color of the input Box.
            self.color = self.color_active if self.active else self.color_inactive
        if event.type == pygame.KEYDOWN:
            if self.active:
                if event.key == pygame.K_RETURN:
                    print(self.text)
                    self.text = ''
                elif event.key == pygame.K_BACKSPACE:
                    self.text = self.text[:-1]
                else:
                    self.text += event.unicode
                # Re-render the text.
                self.txt_surface = font.render(self.text,self.color)

    def update(self):
        # Resize the Box if the text is too long.
        width = max(200,self.txt_surface.get_width()+10)
        self.rect.w = width

    def draw(self,screen):
        # Blit the text.
        screen.blit(self.txt_surface,(self.rect.x+5,self.rect.y+5))
        # Blit the rect.
        pygame.draw.rect(screen,self.color,self.rect,2)
        pygame.draw.rect(screen,(255,255,255),self.inner_rect)


if __name__ == '__main__':
    pygame.init()
    screen = pygame.display.set_mode((640,480))
    color_inactive = pygame.Color('lightskyblue3')
    color_active = pygame.Color('dodgerblue2')
    font = pygame.font.Font(None,32)
    input_Box1 = InputBox(100,100,140,32,font)
    input_Box2 = InputBox(100,300,font)
    input_Boxes = [input_Box1,input_Box2]
    done = False
    
    while not done:
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                done = True
            for Box in input_Boxes:
                Box.handle_event(event)
        for Box in input_Boxes:
            Box.update()

        screen.fill((30,30,30))
        for Box in input_Boxes:
            Box.draw(screen)

        pygame.display.flip()

我得到的结果是文本在输入文本框背景后面（查看屏幕截图）

我希望文本位于前景中。
我试图改变循环开始和结束处 screen.fill((30,30)) 的位置，但没有奏效。
有谁知道如何解决这个问题？
提前致谢。

解决方法

我得到的结果是文本在输入后面

因此，您必须在文本之前绘制背景：

class InputBox:
    # [...]

    def draw(self,screen):
        # Draw the background of the text box 
        pygame.draw.rect(screen,(255,255,255),self.inner_rect)
        # Blit the text.
        screen.blit(self.txt_surface,(self.rect.x+5,self.rect.y+5))
        # Blit the rect.
        pygame.draw.rect(screen,self.color,self.rect,2)

pygame python python-3.x