如何在 PyGame 中实现选项按钮并更改按钮颜色? [英] How do I implement option buttons and change the button color in PyGame?

问题描述

请建议我按下按钮时如何更改按钮的颜色，当我按下第二个按钮时，第一个按钮的颜色将更改为默认颜色.

例如，当我单击 STRAIGHT 按钮后，该按钮将变为绿色，当我单击 LEFT 按钮时，LEFT 按钮将变为绿色，而 STRAIGHT 按钮将变为默认颜色，即白色.提前致谢:)

代码:

def draw_button(self):全球点击动作 = 错误# 获取鼠标位置pos = pygame.mouse.get_pos()# 为按钮创建 pygame Rect 对象button_rect = Rect(self.x, self.y, self.width, self.height)# 检查鼠标悬停和点击条件如果 button_rect.collidepoint(pos):如果 pygame.mouse.get_pressed()[0] == 1:点击=真pygame.draw.rect(屏幕，self.click_col，button_rect)elif pygame.mouse.get_pressed()[0] == 0 and clicked == True:点击=假行动 = 真别的:pygame.draw.rect(屏幕，self.hover_col，button_rect)别的:pygame.draw.rect(屏幕，self.button_col，button_rect)

解决方案

绘制按钮时，必须根据全局变量 clicked 设置颜色:

def draw_button(self):全球点击# 获取鼠标位置pos = pygame.mouse.get_pos()# 为按钮创建 pygame Rect 对象button_rect = Rect(self.x, self.y, self.width, self.height)# 检查鼠标悬停和点击条件悬停 = button_rect.collidepoint(pos)如果悬停和 pygame.mouse.get_pressed()[0] == 1:点击=未点击颜色 = self.button_col如果点击:颜色 = self.click_colelif 悬停:颜色 = self.hover_colpygame.draw.rect(屏幕，颜色，button_rect)

无论如何，这不会让你满意，因为

导入pygame类 RadioButton(pygame.sprite.Sprite):def __init__(self, x, y, w, h, font, text):super().__init__()text_surf = font.render(text, True, (0, 0, 0))self.button_image = pygame.Surface((w, h))self.button_image.fill((96, 96, 96))self.button_image.blit(text_surf, text_surf.get_rect(center = (w//2, h//2)))self.hover_image = pygame.Surface((w, h))self.hover_image.fill((96, 96, 96))self.hover_image.blit(text_surf, text_surf.get_rect(center = (w//2, h//2)))pygame.draw.rect(self.hover_image, (96, 196, 96), self.hover_image.get_rect(), 3)self.clicked_image = pygame.Surface((w, h))self.clicked_image.fill((96, 196, 96))self.clicked_image.blit(text_surf, text_surf.get_rect(center = (w//2, h//2)))self.image = self.button_imageself.rect = pygame.Rect(x, y, w, h)self.clicked = Falseself.buttons = 无def setRadioButtons(self, 按钮):self.buttons = 按钮定义更新(自我，事件列表):悬停 = self.rect.collidepoint(pygame.mouse.get_pos())对于 event_list 中的事件:如果 event.type == pygame.MOUSEBUTTONDOWN:如果悬停和 event.button == 1:对于 self.buttons 中的 rb:rb.clicked = 假self.clicked = Trueself.image = self.button_image如果 self.clicked:self.image = self.clicked_imageelif 悬停:self.image = self.hover_imagepygame.init()窗口 = pygame.display.set_mode((300, 300))时钟 = pygame.time.Clock()font50 = pygame.font.SysFont(None, 50)单选按钮 = [RadioButton(50, 40, 200, 60, font50, "option 1"),RadioButton(50, 120, 200, 60, font50, "option 2"),RadioButton(50, 200, 200, 60, font50, "option 3")]对于单选按钮中的 rb:rb.setRadioButtons(radioButtons)radioButtons[0].clicked = Truegroup = pygame.sprite.Group(radioButtons)运行 = 真运行时:时钟滴答(60)event_list = pygame.event.get()对于 event_list 中的事件:如果 event.type == pygame.QUIT:运行 = 错误group.update(event_list)window.fill(0)group.draw(窗口)pygame.display.flip()pygame.quit()出口()

Pls suggest how can I change the color of the button when I pressed it, and the color of the first button will be changed to the default color when I pressed the second button.

For example, After I clicked the STRAIGHT Button, the button will become green color and when I click the LEFT button the LEFT button will change to green color and the STRAIGHT button will become the default color which is white color. Thanks in advance :)

CODE:

def draw_button(self):

    global clicked
    action = False

    # get mouse position
    pos = pygame.mouse.get_pos()

    # create pygame Rect object for the button
    button_rect = Rect(self.x, self.y, self.width, self.height)

    # check mouseover and clicked conditions
    if button_rect.collidepoint(pos):
        if pygame.mouse.get_pressed()[0] == 1:
            clicked = True
            pygame.draw.rect(screen, self.click_col, button_rect)
        elif pygame.mouse.get_pressed()[0] == 0 and clicked == True:
            clicked = False
            action = True
           
        else:
            pygame.draw.rect(screen, self.hover_col, button_rect)
    else:
        pygame.draw.rect(screen, self.button_col, button_rect)

解决方案

When you draw the button, you have to set the color dependent on the global variable clicked:

def draw_button(self):

    global clicked
    
    # get mouse position
    pos = pygame.mouse.get_pos()

    # create pygame Rect object for the button
    button_rect = Rect(self.x, self.y, self.width, self.height)

    # check mouseover and clicked conditions
    hover = button_rect.collidepoint(pos)
    if hover and pygame.mouse.get_pressed()[0] == 1:
        clicked = not clicked

    color = self.button_col
    if clicked:
        color = self.click_col
    elif hover:
        color = self.hover_col

    pygame.draw.rect(screen, color, button_rect)

Anyway, that won't satisfy you, because pygame.mouse.get_pressed() returns a list of Boolean values ​​that represent the state (True or False) of all mouse buttons. The state of a button is True as long as a button is held down.
You have to use MOUSEBUTTONDOWN event. The MOUSEBUTTONDOWN event occurs once when you click the mouse button and the MOUSEBUTTONUP event occurs once when the mouse button is released. The pygame.event.Event() object has two attributes that provide information about the mouse event. pos is a tuple that stores the position that was clicked. button stores the button that was clicked.

---

If you have multiple buttons that you have to interact with each other, a single clicked status is not enough. You need a separate "clicked" state for each button. If the clicked state of 1 button becomes True, the states of the other keys must be set to False. I recommend to implement a RadioButton class for this.

See also Mouse and Sprite.

Minimal example:

import pygame

class RadioButton(pygame.sprite.Sprite):
    def __init__(self, x, y, w, h, font, text):
        super().__init__() 
        text_surf = font.render(text, True, (0, 0, 0))
        self.button_image = pygame.Surface((w, h))
        self.button_image.fill((96, 96, 96))
        self.button_image.blit(text_surf, text_surf.get_rect(center = (w // 2, h // 2)))
        self.hover_image = pygame.Surface((w, h))
        self.hover_image.fill((96, 96, 96))
        self.hover_image.blit(text_surf, text_surf.get_rect(center = (w // 2, h // 2)))
        pygame.draw.rect(self.hover_image, (96, 196, 96), self.hover_image.get_rect(), 3)
        self.clicked_image = pygame.Surface((w, h))
        self.clicked_image.fill((96, 196, 96))
        self.clicked_image.blit(text_surf, text_surf.get_rect(center = (w // 2, h // 2)))
        self.image = self.button_image
        self.rect = pygame.Rect(x, y, w, h)
        self.clicked = False
        self.buttons = None

    def setRadioButtons(self, buttons):
        self.buttons = buttons

    def update(self, event_list):
        hover = self.rect.collidepoint(pygame.mouse.get_pos())
        for event in event_list:
            if event.type == pygame.MOUSEBUTTONDOWN:
                if hover and event.button == 1:
                    for rb in self.buttons:
                        rb.clicked = False
                    self.clicked = True
        
        self.image = self.button_image
        if self.clicked:
            self.image = self.clicked_image
        elif hover:
            self.image = self.hover_image


pygame.init()
window = pygame.display.set_mode((300, 300))
clock = pygame.time.Clock()
font50 = pygame.font.SysFont(None, 50)

radioButtons = [
    RadioButton(50, 40, 200, 60, font50, "option 1"),
    RadioButton(50, 120, 200, 60, font50, "option 2"),
    RadioButton(50, 200, 200, 60, font50, "option 3")
]
for rb in radioButtons:
    rb.setRadioButtons(radioButtons)
radioButtons[0].clicked = True

group = pygame.sprite.Group(radioButtons)

run = True
while run:
    clock.tick(60)
    event_list = pygame.event.get()
    for event in event_list:
        if event.type == pygame.QUIT:
            run = False 

    group.update(event_list)

    window.fill(0)
    group.draw(window)
    pygame.display.flip()

pygame.quit()
exit()

这篇关于如何在 PyGame 中实现选项按钮并更改按钮颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！