滑动条的显示控制方法、装置及存储介质制造方法及图纸

本发明专利技术公开了一种滑动条的显示控制方法、装置及存储介质，涉及滑动条控制技术领域。方法包括响应用户的滑动操作，确定滑块的边缘坐标；基于滑动方向上所对应的滑动位移量，确定滑块的当前边缘坐标和当前中心坐标；基于滑轨长度和图标数量，确定节点图标的分段长度；结束滑动操作时，依据当前边缘坐标、最小边缘坐标和分段长度，确定出应滑动到的节点图标的排序位次；基于排序位次、分段长度和滑块的最小边缘坐标，确定滑块当前应展示位置的坐标并展示滑块；基于当前中心坐标和第一个节点图标的中心坐标，确定出进度显示区域并渲染展；对当前应展示位置的节点视图进行渲染展示。本发明专利技术公开的方案可根据用户的滑动操作任意选择滑动条的进度。动条的进度。动条的进度。

【技术实现步骤摘要】
滑动条的显示控制方法、装置及存储介质


[0001]本专利技术属于滑动条控制
，具体涉及一种滑动条的显示控制方法、装置及存储介质。

技术介绍

[0002]滑动条是前端领域界面设计(User Interface Design，UI)中常见的一种功能组件，用户可通过滑动滑动条对后端进行控制，如通过滑动条控制音、视频的播放进度等。
[0003]目前，市面上的滑动条在进行滑动时，其滑动进度通过列表设置一些固定值，滑动条的终点只会停留在最近某一个固定值所对应的位置，即滑动滑动条时，滑动条的终点只会停留在一些预定的位置上，滑动条的进度并不能根据用户的滑动操作任意选择，导致用户的使用体验感较差。
[0004]因此，如何提供一种有效的方案，以便根据用户的滑动操作任意选择滑动条的进度，是现有技术中亟待解决的问题。

技术实现思路

[0005]本专利技术的目的是提供一种滑动条的显示控制方法、装置及存储介质，用以解决现有技术中存在的上述问题。
[0006]为了实现上述目的，本专利技术采用以下技术方案：
[0007]第一方面，本专利技术提供了一种滑动条的显示控制方法，用于滑动条的显示控制，所述滑动条包括第一滑轨、滑块和多个节点图标，所述多个节点图标所在图层位于所述第一滑轨所在图层与所述滑块所在图层之间，所述多个节点图标沿所述第一滑轨的滑动方向依次均匀分布，且所述多个节点图标中的第一个节点图标的中心坐标与所述第一滑轨的起始坐标重合，所述多个节点图标中的最后一个节点图标的中心坐标与所述第一滑轨的终点坐标重合，所述方法包括：
[0008]响应用户的滑动操作，基于所述多个节点图标中第一个节点图标的中心坐标和最后一个节点图标的中心坐标，确定出所述滑块的边缘坐标，所述边缘坐标包括最小边缘坐标；
[0009]基于滑动操作在滑动方向上所对应的滑动位移量，确定出所述滑块的当前边缘坐标和所述滑块的当前中心坐标；
[0010]基于所述第一滑轨的滑轨长度和所述多个节点图标所对应的图标数量，确定出相邻的两个节点图标所组成分段的分段长度；
[0011]当结束滑动操作时，依据所述滑块的当前边缘坐标、所述滑块的最小边缘坐标和所述分段长度，确定出滑块应滑动到的节点图标在所述多个节点图标的排序位次；
[0012]基于所述排序位次、所述分段长度和所述滑块的最小边缘坐标，确定出所述滑块当前应展示位置的坐标，并在所述滑块当前应展示位置的坐标展示所述滑块；
[0013]基于所述当前中心坐标和所述多个节点图标中第一个节点图标的中心坐标，确定
出所述第一滑轨上的进度显示区域，并渲染展示所述第一滑轨上的进度显示区域；
[0014]遍历所述多个节点图标，对中心坐标小于所述滑块当前应展示位置的坐标的所有节点视图进行渲染展示。
[0015]基于上述公开的内容，本专利技术通过响应用户的滑动操作，基于多个节点图标中第一个节点图标的中心坐标和最后一个节点图标的中心坐标，确定出滑块的边缘坐标，边缘坐标包括最小边缘坐标；基于滑动操作在滑动方向上所对应的滑动位移量，确定出滑块的当前边缘坐标；基于第一滑轨的滑轨长度和多个节点图标所对应的图标数量，确定出相邻的两个节点图标所组成分段的分段长度；当结束滑动操作时，依据滑块的当前边缘坐标、滑块的最小边缘坐标和分段长度，确定出滑块应滑动到的节点图标在多个节点图标的排序位次；基于排序位次、分段长度和滑块的最小边缘坐标，确定出滑块当前应展示位置的坐标，并在滑块当前应展示位置的坐标展示滑块；基于滑块的中心坐标和多个节点图标中第一个节点图标的中心坐标，确定出第一滑轨上的进度显示区域，并渲染展示第一滑轨上的进度显示区域；遍历多个节点图标，对中心坐标小于滑块当前应展示位置的坐标的所有节点视图进行渲染展示。如此，使得第一滑轨上的进度显示区域可以是第一滑轨范围内的任意区域，即可根据用户的滑动操作任意选择滑动条的进度，能够使用户具有较好使用体验，便于实际应用和推广。
[0016]在一个可能的设计中，所述边缘坐标还包括最大边缘坐标，所述基于滑动操作在滑动方向上所对应的滑动位移量，确定出所述滑块的当前边缘坐标，包括：
[0017]对所述最小边缘坐标与所述滑动位移量求和，得到所述滑块的当前边缘坐标；
[0018]其中，若所述最小边缘坐标与所述滑动位移量之和小于所述最小边缘坐标，则将所述最小边缘坐标作为所述滑块的当前边缘坐标；
[0019]若所述最小边缘坐标与所述滑动位移量之和大于所述最大边缘坐标，则将所述最大边缘坐标作为所述滑块的当前边缘坐标。
[0020]在一个可能的设计中，所述最小边缘坐标为view_min
‑
thumImageView/2，所述最大边缘坐标为view_max
‑
thumImageView/2，其中view_min表示所述多个节点图标中第一个节点图标的中心坐标，view_max所述多个节点图标中最后一个节点图标的中心坐标，min
‑
thumImageView/2表示所述滑块两端点坐标之差的二分之一。
[0021]在一个可能的设计中，所述依据所述滑块的当前边缘坐标、所述滑块的最小边缘坐标和所述分段长度，确定出滑块应滑动到的节点图标在所述多个节点图标的排序位次，包括：
[0022]用所述当前边缘坐标与所述最小边缘坐标之间的距离，除以所述分段长度，得到一浮点值；
[0023]对所述浮点值进行四舍五入取整，得到所述排序位次。
[0024]在一个可能的设计中，在对中心坐标小于所述滑块当前应展示位置的坐标的所有节点视图进行渲染展示之后，所述方法还包括：
[0025]将滑动操作在滑动方向上所对应的滑动位移量归零。
[0026]在一个可能的设计中，所述滑动条还包括多个文字标签控件，所述多个文字标签控件与所述多个节点图标数量相等且一一对应，所述多个文字标签控件均匀分布在所述第一滑轨的一侧，且所述多个文字标签控件中任一文字标签的中心点在所述第一滑轨上的投
影坐标与对应的节点图标的中心坐标重合；
[0027]在所述方法还包括：
[0028]对与已渲染展示的节点视图所对应的文字标签进行同步渲染展示。
[0029]在一个可能的设计中，所述滑动条还包括第二滑轨，所述第二滑轨与所述第一滑轨重叠，且所述第二滑轨所在图层位于所述第一滑轨所在图层之下。
[0030]第二方面，本专利技术提供了一种滑动条的显示控制装置，用于滑动条的显示控制，所述滑动条包括第一滑轨、滑块和多个节点图标，所述多个节点图标所在图层位于所述第一滑轨所在图层与所述滑块所在图层之间，所述多个节点图标沿所述第一滑轨的滑动方向依次均匀分布，且所述多个节点图标中的第一个节点图标的中心坐标与所述第一滑轨的起始坐标重合，所述多个节点图标中的最后一个节点图标的中心坐标与所述第一滑轨的终点坐标重合，滑动条的显示控制装置包括：
[0031]第一确定单元，用于响应用户的滑动操作，基于所述多个节点图标中第一本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种滑动条的显示控制方法，用于滑动条的显示控制，所述滑动条包括第一滑轨、滑块和多个节点图标，所述多个节点图标所在图层位于所述第一滑轨所在图层与所述滑块所在图层之间，所述多个节点图标沿所述第一滑轨的滑动方向依次均匀分布，且所述多个节点图标中的第一个节点图标的中心坐标与所述第一滑轨的起始坐标重合，所述多个节点图标中的最后一个节点图标的中心坐标与所述第一滑轨的终点坐标重合，其特征在于，所述方法包括：响应用户的滑动操作，基于所述多个节点图标中第一个节点图标的中心坐标和最后一个节点图标的中心坐标，确定出所述滑块的边缘坐标，所述边缘坐标包括最小边缘坐标；基于滑动操作在滑动方向上所对应的滑动位移量，确定出所述滑块的当前边缘坐标和所述滑块的当前中心坐标；基于所述第一滑轨的滑轨长度和所述多个节点图标所对应的图标数量，确定出相邻的两个节点图标所组成分段的分段长度；当结束滑动操作时，依据所述滑块的当前边缘坐标、所述滑块的最小边缘坐标和所述分段长度，确定出滑块应滑动到的节点图标在所述多个节点图标的排序位次；基于所述排序位次、所述分段长度和所述滑块的最小边缘坐标，确定出所述滑块当前应展示位置的坐标，并在所述滑块当前应展示位置的坐标展示所述滑块；基于所述当前中心坐标和所述多个节点图标中第一个节点图标的中心坐标，确定出所述第一滑轨上的进度显示区域，并渲染展示所述第一滑轨上的进度显示区域；遍历所述多个节点图标，对中心坐标小于所述滑块当前应展示位置的坐标的所有节点视图进行渲染展示。2.根据权利要求1所述的方法，其特征在于，所述边缘坐标还包括最大边缘坐标，所述基于滑动操作在滑动方向上所对应的滑动位移量，确定出所述滑块的当前边缘坐标，包括：对所述最小边缘坐标与所述滑动位移量求和，得到所述滑块的当前边缘坐标；其中，若所述最小边缘坐标与所述滑动位移量之和小于所述最小边缘坐标，则将所述最小边缘坐标作为所述滑块的当前边缘坐标；若所述最小边缘坐标与所述滑动位移量之和大于所述最大边缘坐标，则将所述最大边缘坐标作为所述滑块的当前边缘坐标。3.根据权利要求2所述的方法，其特征在于，所述最小边缘坐标为view_min
‑
thumImageView/2，所述最大边缘坐标为view_max
‑
thumImageView/2，其中view_min表示所述多个节点图标中第一个节点图标的中心坐标，view_max所述多个节点图标中最后一个节点图标的中心坐标，min
‑
thumImageView/2表示所述滑块两端点坐标之差的二分之一。4.根据权利要求1所述的方法，其特征在于，所述依据所述滑块的当前边缘坐标、所述滑块的最小边缘坐标和所述分段长度，确定出滑块应滑动到的节点图标在所述多个节点图标的排序位次，包括：用所述当前边缘坐标与所述最小边缘坐标之间的距离，除以所述分段长度，得到一浮点值；对所述浮点值进行四舍五入取整，得到所述排序位次。5.根据权利要求1...

【专利技术属性】
技术研发人员：刘未，蒋晓龙，杨龙，张立，李伟，唐杰，
申请(专利权)人：成都新潮传媒集团有限公司，
类型：发明
国别省市：