制作滚动条，但它不一致 [英] Making a scrollbar but its inconsistent

问题描述

所以我只是在胡乱做一个简单的滚动条。基本上，有一些按钮和一个滚动条。我所要做的就是，如果滚动条向下移动，则向上移动按钮；如果向上移动滚动条，则向下移动按钮。以下是代码。

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

    # [...]

这篇关于制作滚动条，但它不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！