如何计算滚动条拇指大小？ [英] How to calculate the size of scroll bar thumb?

问题描述

我做我自己的自定义的UI系统，我在C＃和XNA游戏，我有一个小问题，滚动条。我不知道什么是计算滚动条的拇指大小的公式。

I'm making my own custom UI system for my game in C# and XNA, and I have a small problem with scroll bars. I don't know what is the equation to calculate the thumb size of the scroll bar.

所以我们可以说我有一个面板是200×200像素。和图像是600×600像素。我怎么能根据图像大小来计算滚动条拇指大小？

So let's say I have a panel that is 200x200 px. and an image that is 600x600 px. How can I calculate the scroll bar thumb size according to the image size?

的 http://www.tkdocs.com/images/scrollbar_elements.png ！

推荐答案

拇指（我听说有人称它为一次洗涤器）大小应视口的大小（在您的示例200像素）的内容（600像素）的大小划分。

The thumb (I've heard people call it a scrubber) size should be the size of the viewport (in your example 200px) divided by the size of the content (600px).

那么，你的拇指要占用1/3的可用高度。可用高度是滚动条减去箭头的大小

So, your thumb should take up 1/3rd the available height. The available height is the size of the scroll bar minus the arrows.

例如，如果每个箭头是25像素，则拇指大小将被计算为这样

For example, if each arrow is 25px, then the thumb size would be calculated as so.

var arrowHeight = 25;
var viewportHeight = 200;
var contentHeight = 600;

var viewableRatio = viewportHeight / contentHeight; // 1/3 or 0.333333333n

var scrollBarArea = viewportHeight - arrowHeight * 2; // 150px

var thumbHeight = scrollBarArea * viewableRatio; // 50px

当然，你将不得不作出自己的检查内容高度比小可视区域，如果内容的高度为0，等等。

Of course you will have to make your own checks if the content height is smaller than the viewable area, if the content height is 0, etc.

这篇关于如何计算滚动条拇指大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！