自绘滚动条,滚动条模型,滚动条数据结构

开发者福利!热门AI工具限时免费用 购周边即赠Coding Plan Lite,Claude Code、Cursor等20+工具畅享,效率翻倍! 阅读详情

最近作一个东西要自己做一个滚动条,决定用GDI自己绘制一个滚动条,然后加上鼠标键盘响应,做完了总结下滚动条的数据结构/模型,方便以后再用,或者方便有相同需求的同学。

 

本文讲述如何实现一个滚动条所用到的必要的数据结构和模型,方便自己去绘制一个滚动条,不是滚动条的入门或者使用教程。

关键字: 自绘滚动条,滚动条模型,滚动条数据结构,scrollbar data structure

 

<图> <CSDN不能传图现在,等能传在传上来>

 

绘制一个滚动条,我们必须绘制如下几个部分(如图):

1.一个向上按钮,一个向下按钮,用于鼠标单击让其滚动;
2.track:thumb所在的轨道,用以拖动滚动的轨道;
3.thumb:可以拖动滚动的部分(或者scroll box)

 

期中track和向上按钮,向下按钮位置大小都很容易确定(也比较固定),这里不讨论如何绘制这个部分。主要讨论如何绘制计算和绘制thumb,我们要确定thumb的大小和位置。

先定义一个结构体供我们设置绘制使用的数据(参考上图):


ScrollInfo {
  int min;
  int max; 
  int page; // 一页包含的unit数。
  int pos;  // 当前thumb位置。
};

 

Scroll Information(简称si)都是以数据模型为单位的,一般用整数表示。(比如,如果数据模型为文本,这个单位就可以是文本的行),这个单位我们统一抽象称为unit。 图中右边的信息单位都是unit(左边的数据信息都是pix,下面带_len的变量单位都是pix).

要决定如何绘制滚动,条我们就必须知道图中左边标注的信息,那就是track的长度,和thumb(也叫scroll box)的长度.
这个track就是thumb可滚动的地方

Win32 SDK Gui编程系列之--滚动条(ScrollBar) nPage的值不能完全确定。即使是垂直滚动,如果画面的高度不是行的整数倍的话,也会出现零头,但是水平滚动这个零头的比例比较大,所以很显眼。但是,如图所示,下旋钮的值不是11(siv.nMax),而是7。经过试错的结果,发现水平滚动时,nMax不是列数,而是相当于全列宽度的像素数,nPage可以显示在画面上的像素数就可以了。生成窗口时,在样式中添加WS_VSCROLL|WS_HSCROLL的话,如下图所示,画面的底部和右端会显示滚动条。因为画面上显示的是5行,所以滚动条的旋钮(拇指)的宽度是整体的5/12。 阅读详情

相关推荐

Win32 SDK Gui编程系列之--检测鼠标光标移动

滚动条的形状非常相似,但是即使把鼠标光标放在条形或拇指上,拇指的颜色也不会改变。在按下山姆的左键的状态下,山姆的颜色会变成和上面对话框的鼠标悬停相似的颜色。最后,下面的画面是用Win32 API的CreateWindowEx函数生成的滚动条。使用FlatSB_SetScrollProp函数,可以给栏杆添加颜色,但是找不到把按下拇指时的颜色换成稍微深一点的浅蓝色的方法。放在脱离拇指的杆子上时,拇指的颜色不会改变,只有杆子两端的箭头会浮起来。以上,在4个例子中,第一个对话框的滚动条看起来是最好的(根据喜好)。

weixin_55465758的博客 1010

滚动条滚动条滚动条

滚动条

Win32 API 滚动条控件简单Demo

/*---------------------------------------- 2020.10.11, by bo ----------------------------------------*/ #include <windows.h> LRESULT CALLBACK WndProc (HWND, UINT, WPARAM, LPARAM) ; int WINAPI WinMain (HINSTANCE hInstance, HINSTANCE hPrev.

bcbobo21cn的专栏 1076

MFC 通用自滚动条

很好利用的自滚动条类!可以被EDIT LISTBOX CTRLLISTBOX使用

Windows通用垂直滚动条

windows自带的滚动条

weixin_42654302的博客 376

Win32 滚动条的创建实例(一)

滚动描述: 我们所看到的滚动其实是文本打印位置的改变,例如:向下滚动,本来我们的文本是从y坐标为0的位置开始排列向下打印,如果我们从y坐标为-1开始打印,这不就实现了滚动的效果(因为坐标为负是文本不显示)。 所需四个重要函数: 设置滚动条的范围:SetScrollRange 设置滚动滑块的位置:SetScrollPos 获取滚动条的范围:GetScrollRange 获取滚动滑块的位置:GetS...

程序员战胜 2388

实现父子窗体同步滚动条的Delphi项目

Delphi作为一款历史悠久的快速应用开发工具,它的面向对象编程(OOP)环境为开发者提供了一套完善而高效的开发解决方案。在本章中,我们将从基础知识开始,逐步深入了解Delphi的面向对象特性。在复杂的应用程序中,可能会遇到标准消息系统无法满足特定需求的情况,这就需要创建自定义消息来实现更复杂的交互和控制逻辑。自定义消息可以用于窗口内部通信,触发特定的业务逻辑,或者处理特定的用户交互。自定义消息的创建和使用应当谨慎进行,因为它们会增加程序的复杂性,并可能降低程序的可维护性。

weixin_33363025的博客 731

【高性能JS】重、重排与浏览器优化方法

本文参考: 《高性能JS》、网页性能管理详解 基础知识 浏览器下载完页面中的所有组件--HTML标记、JS、CSS、图片--之后会解析并生成两个内部数据结构: DOM 树:表示页面结构 渲染树:表示DOM节点如何显示 网页生成的过程 HTML被HTML解析器解析成DOM 树 css被css解析器解析成CSSOM(CSS Object Model) attachment DOM 树和CSSOM...

weixin_33742618的博客 438

高性能JavaScript之重和重排

浏览器下载完页面所需的所有组件后就开始解析并生成两个内部数据结构: DOM树:表示页面结构 渲染树:表示 DOM 节点如何展示 DOM 树中的每个需要显示的节点在渲染树中至少存在一个对应的节点(隐藏的DOM 元素没有)。渲染树中的节点被称为“帧”或“盒”,符合 CSS 模型的定义(盒子模型是一个具有内边距,外边距,边框和位置的盒子)。一旦 DOM 和渲染树构建完成,浏览器就开始显示页面元素。 ...

薛小科的博客 521

浏览器的重排和重

浏览器从下载文件到显示页面是一个很复杂的过程。DOM 树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点(隐藏的 DOM 元素在渲染树中没有对应的节点)。渲染树中的节点被称为 帧(frames) 或 盒(boxes),符合 CSS 模型的定义,理解页面元素为一个具有内边距(padding)、外边距(margin)、边框(border)和位置(position)的盒子。一旦 DOM 树和渲染树构建完成,浏览器就开始显示(制 paint)页面元素。

CatCherry的博客 242

深入浏览器重排与重

一.什么是重与重排 浏览器下载完页面中的所有组件——HTML标记、JavaScript、CSS、图片之后会解析生成两个内部数据结构——DOM树和渲染树。 DOM树表示页面结构,渲染树表示DOM节点如何显示。DOM树中的每一个需要显示的节点在渲染树种至少存在一个对应的节点(隐藏的DOM元素disply值为none 在渲染树中没有对应的节点)。渲染树中的节点被称为“帧”或“盒”,符合CSS模型的定义,理解页面元素为一个具有填充,边距,边框和位置的盒子。一旦DOM和渲染树构建完成,浏览器就开始显示(制)页

GuoZebin的博客 387

学会使用 CSS 自定义滚动条,能让你做的产品更有用户体验

例1在研究定制滚动条之前,值得讨论一下Mac OS中的默认样式。下面是它的外观。滚动条track的左右两边都有边框,背景色为纯色。滚动条thumb是圆形的,左右两边都有空间。对于Windows,它有点不同。下面是我们根据上面的模拟图来定制滚动条。为track和thumb添加是必要的,因为它在上不起作用。在新的语法中,我们不能调整滚动条的宽度,唯一能做的的是改变track和thumb的背景颜色。.section {例2对于这个例子,设计有点重,因为它包含渐变和阴影。

2301_78416543的博客 762

字节前端提前批面试题:下触发了几次回流几次重

一道字节面试题刷新了我的认知,又学到了新知识,开心。刚开始我说了答案是各3次,因为获取一次offsetWidth一次,然后改变样式一次。但是后来发现之所以offsetWidth会触发重排...

weixin_43964148的博客 681

自定义滚动条实现与优化

本文深入探讨了在PHP-GTK应用程序中如何实现和优化自定义滚动条功能。介绍了如何通过设置和调整滚动窗口的位置、子元素的位置以及阴影来控制滚动条的显示和行为,以及如何利用GtkViewPort和GtkScrollbar类为不支持滚动条的小部件添加滚动功能。此外,还详细说明了创建自定义滚动信号处理器的方法,包括如何同步调整值和目标小部件,以及如何在模型更新时维护同步。

weixin_30205153的博客 414

页面重和重拍版的性能问题.

DOM树和渲染树   当浏览器下载完所有页面HTML 标记,JavaScript,CSS,图片之后,它解析文件并创建两个内部数据结构:一棵DOM树表示页面结构,一棵渲染树表示DOM节点如何显示。 渲染树中为每个需要显示的DOM 树节点存放至少一个节点(隐藏DOM 元素在渲染树中没有对应节点)。渲染树上的节点称为“框”或者“盒”,符合CSS 模型的定义,将页面元素看作一个具有填...

dianji4688的博客 207

js 设置div超出宽度隐藏_【高性能JS】重、重排与浏览器优化方法

基础知识浏览器下载完页面中的所有组件--HTML标记、JS、CSS、图片--之后会解析并生成两个内部数据结构:DOM 树:表示页面结构渲染树:表示DOM节点如何显示网页生成的过程HTML被HTML解析器解析成DOM 树css被css解析器解析成CSSOM(CSS Object Model)attachment DOM 树和CSSOM,生成渲染树(Render Tree)生成布局(flow),即将所...

weixin_35541666的博客 448

页面重与重排版的性能影响

当浏览器下载完所有页面HTML 标记,JavaScript,CSS,图片之后,它解析文件并创建两个内部数据结构:一棵DOM树表示页面结构,一棵渲染树表示DOM节点如何显示。       渲染树中为每个需要显示的DOM 树节点存放至少一个节点(隐藏DOM 元素在渲染树中没有对应节点)。渲染树上的节点称为“框”或者“盒”,符合CSS 模型的定义,将页面元素看作一个具有填充、边距、边框和位置的盒。一旦

黄贺群的专栏 2227

字节前端提前批面试题:下触发了几次回流几次重(1),手撕面培训

阿里十分注重你对源码的理解,对你所学,所用东西的理解,对项目的理解。网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。需要这份系统化的资料的朋友,可以添加V获取:vip1024c (备注前端)一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

m0_60575487的博客 700
上一篇: 今天遇到的笔试题
下一篇: C++ vptr vtbl (C++虚表指针,虚函数表,虚函数的实现)很多人都喜欢问这个,写下吧。
fancylea
博客等级 码龄20年 52粉丝 43原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值