制作滚动条,但它不一致
问题描述
所以我只是在胡乱做一个简单的滚动条。基本上,有一些按钮和一个滚动条。我所要做的就是,如果滚动条向下移动,则向上移动按钮;如果向上移动滚动条,则向下移动按钮。以下是代码。
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, 0), bar)
if mousePressed and bar.collidepoint(mousePos) and not scrollStart:
scrollStart = True
scrollPosY = mousePos[1]
if scrollStart:
pygame.draw.rect(window, (255, 0, 0), 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, (0, 0, 0), (10, y, 500, 100), 3)
surf = font.render(f'{i}', True, (0, 0, 0))
window.blit(surf, (100, y + 40))
pygame.display.flip()
我遇到的问题是,当上下滚动时,它们逐渐被放错了位置。例如,它是如何开始的。请注意左侧的栏和按钮是如何在同一层开始的。
下面是上下滚动几次后的结果。
我认为这就是问题所在:
if scrollStart:
pygame.draw.rect(window, (255, 0, 0), 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, (255, 0, 0), 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, 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
# [...]
相关文章