问题描述
所以我只是在尝试制作一个简单的滚动条。基本上,有一些按钮和一个滚动条。我想要做的就是在滚动条向下移动时向上移动按钮,如果滚动条向上移动则向下移动按钮。这是代码。
import pygame
import time
pygame.init()
window = pygame.display.set_mode((1200,600))
font = pygame.font.Font(pygame.font.get_default_font(),30)
ys = [] ##stores y-positions for the buttons
for y in range(25):
ys.append((y * 101) + 100)
bar = pygame.Rect(550,100,10,(1 / len(ys) if len(ys) > 0 else 1) * 500)
scrollStart = False
updateButtons_Y = False
while True:
for event in pygame.event.get():
if event.type == pygame.QUIT:
pygame.quit()
mousepressed = pygame.mouse.get_pressed()[0]
mousePos = pygame.mouse.get_pos()
window.fill((255,255,255))
if (bar.y < 100): bar.y = 100
if (bar.y + bar.height) > 500: bar.y = 500 - bar.height
pygame.draw.rect(window,(0,0),bar)
if mousepressed and bar.collidepoint(mousePos) and not scrollStart:
scrollStart = True
scrollPosY = mousePos[1]
if scrollStart:
pygame.draw.rect(window,(255,bar)
bar.y += mousePos[1] - scrollPosY
if bar.y > 100 and bar.y + bar.height < 500:
for i in range(len(ys)):
ys[i] -= (mousePos[1] - scrollPosY) * len(ys) * 0.3
scrollPosY = mousePos[1]
if not mousepressed and scrollStart:
scrollStart = False
for i,y in enumerate(ys):
pygame.draw.rect(window,(10,y,500,100),3)
surf = font.render(f'{i}',True,0))
window.blit(surf,(100,y + 40))
pygame.display.flip()
我遇到的问题是,在上下滚动时,它们逐渐错位。例如,这是它的开始方式。请注意左侧的栏和按钮如何在同一级别开始。
这是向上和向下滚动几次后的结果。
我认为这是问题所在:
if scrollStart:
pygame.draw.rect(window,bar)
bar.y += mousePos[1] - scrollPosY
if bar.y > 100 and bar.y + bar.height < 500:
for i in range(len(ys)):
ys[i] -= (mousePos[1] - scrollPosY) * len(ys) * 0.3
scrollPosY = mousePos[1]
mousePos[1] - scrollPosY
根据鼠标移动的速度而变化,因此每帧的变化量是不一致的。为了解决这个问题,我将其替换为
if scrollStart:
pygame.draw.rect(window,bar)
if mousePos[1] - scrollPosY != 0:
speed = 1
direction = math.copysign(speed,mousePos[1] - scrollPosY)
bar.y += direction
if bar.y > 100 and bar.y + bar.height < 500:
for i in range(len(ys)):
ys[i] -= direction
scrollPosY = mousePos[1]
这解决了这个问题,但现在移动感觉不自然(滚动条移动缓慢或按钮移动快速)。
所以我的问题是:有没有办法让它们在以不同速度移动的同时保持一致?
解决方法
不移动列表元素的位置,而是计算新的位置:
ys[i] -= offset
ys[i] = position
计算条的相对位置:
scroll_height = (500 - 100) - bar.height
scroll_rel = (bar.y - 100) / scroll_height
计算列表元素的偏移量:
box_height = (500 - 100)
list_height = 25 * 101
offset = (list_height - box_height) * scroll_rel
设置元素的新位置:
for i in range(len(ys)):
ys[i] = (i * 101) + 100 - offset
变化:
while True:
# [...]
if scrollStart:
bar.y = max(100,min(500 - bar.height,mousePos[1]))
pygame.draw.rect(window,(255,0),bar)
scroll_height = (500 - 100) - bar.height
scroll_rel = (bar.y - 100) / scroll_height
box_height = (500 - 100)
list_height = 25 * 101
offset = (list_height - box_height) * scroll_rel
for i in range(len(ys)):
ys[i] = (i * 101) + 100 - offset
# [...]