CN109213481A - 一种滑动条控件实现方法及装置 - Google Patents

一种滑动条控件实现方法及装置 Download PDF

Info

Publication number
CN109213481A
CN109213481A CN201710525452.5A CN201710525452A CN109213481A CN 109213481 A CN109213481 A CN 109213481A CN 201710525452 A CN201710525452 A CN 201710525452A CN 109213481 A CN109213481 A CN 109213481A
Authority
CN
China
Prior art keywords
mouse
highlighted
event
sliding button
show
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201710525452.5A
Other languages
English (en)
Inventor
施杨
张文明
陈少杰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Wuhan Douyu Network Technology Co Ltd
Original Assignee
Wuhan Douyu Network Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Wuhan Douyu Network Technology Co Ltd filed Critical Wuhan Douyu Network Technology Co Ltd
Priority to CN201710525452.5A priority Critical patent/CN109213481A/zh
Publication of CN109213481A publication Critical patent/CN109213481A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G06F3/04855—Interaction with scrollbars

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明提供一种滑动条控件实现方法及装置，所述方法包括：创建三个显示对象，分别赋值为滑动条的底图、滑动条的高亮图和滑动条的滑动按钮；按照底图、高亮图和滑动按钮的顺序，将所获得的三个显示对象添加到舞台上；创建字符串变量，用于保存所设置的用于划分图片拉伸区域的四个值，并将所述字符串变量赋值给所述底图显示对象和高亮图显示对象；为所述滑动按钮显示对象添加鼠标按下事件，设置鼠标按下处理回调函数，监听舞台的鼠标抬起事件和鼠标移动事件，并对按钮显示对象进行拖拽限制。本发明具有使滑动条控件能够被任意拉伸，使滑动条控件适用于各种尺寸的使用场合，可有效降低资源浪费，提高开发效率的有益效果。

Description

一种滑动条控件实现方法及装置
技术领域
本发明涉及Flash开发技术领域，更具体地，涉及一种滑动条控件实现方法及装置。
背景技术
在Flash的开发过程中，经常会用到滑动条这种控件，目前开发过程中每当需要用到一个尺寸的滑动条控件时，就需要美术工程师切一个对应尺寸的皮肤出来，这样会造成了资源的较大浪费。尤其，当我们需要同一个样式的滑动条时，只是要求滑动条的长度不一样，那么就需要美术对应切几套不同尺寸的皮肤出来，这种美术做的总是重复的工作，非常的不科学，使得资源变大了，且开发效率低。
因此，如何提供一种可以使得滑动条控件能够自由拉伸且功能强大的实现方法，从而减少资源浪费，提高开发效率，显得尤为重要。
发明内容
为了克服现有滑动条控件需要根据不同的尺寸进行重新切皮肤，导致资源浪费、开发效率低的问题，本发明提供一种滑动条控件实现方法及装置。
根据本发明的一个方面，提供一种滑动条控件实现方法，包括：
S1，创建三个显示对象，分别赋值为滑动条的底图、滑动条的高亮图和滑动条的滑动按钮，获得底图显示对象、高亮图显示对象和滑动按钮显示对象；
S2，按照底图、高亮图和滑动按钮的顺序，将所获得的三个显示对象添加到舞台上；
S3，创建字符串变量，用于保存所设置的用于划分图片拉伸区域的四个值，并将所述字符串变量赋值给所述底图显示对象和高亮图显示对象；
S4，为所述滑动按钮显示对象添加鼠标按下事件，设置鼠标按下处理回调函数，监听舞台的鼠标抬起事件和鼠标移动事件，并对所述滑动按钮显示对象进行拖拽限制。
其中，在所述步骤S4之后还包括：
设置所述鼠标抬起事件和鼠标移动事件。
其中，在设置鼠标抬起事件和鼠标移动事件的步骤之后，还包括：
在素材命名时定义一个规范，关联组成滑动条的三张图片，为滑动条实现动态更换皮肤。
其中，在所述步骤S3和步骤S4间，还包括：
屏蔽所述高亮图显示对象的鼠标事件。
其中，所述设置鼠标移动事件的步骤进一步包括：
计算所述滑动按钮显示对象移动的进度值，并根据所述进度值，对高亮图显示对象进行渲染操作。
其中，所述计算所述滑动按钮显示对象移动的进度值，并根据所述进度值，对高亮图显示对象进行渲染操作的步骤进一步包括：
定义value变量，用于表示所述滑动按钮显示对象移动的进度值，value变量的值等于控件的宽度除以滑动按钮的坐标位置；
定义changeValue方法，对高亮图显示对象的进度进行延迟渲染操作。
其中，所述设置鼠标抬起事件的步骤进一步包括：
移除对舞台的鼠标移动事件的监听，并调用所述changValue方法。
根据本发明的另一个方面，提供一种滑动条控件实现装置，包括：
显示对象创建模块，用于创建三个显示对象，分别赋值为滑动条的底图、滑动条的高亮图和滑动条的滑动按钮，获得底图显示对象、高亮图显示对象和滑动按钮显示对象；
舞台实现模块，用于按照底图、高亮图和滑动按钮的顺序，将所获得的三个显示对象添加到舞台上；
控件拉伸区域确定模块，用于创建字符串变量，用于保存所设置的用于划分图片的拉伸区域的四个值，并将所述字符串变量赋值给所述底图显示对象和高亮图显示对象；
鼠标按下处理模块，用于为所述滑动按钮显示对象添加鼠标按下事件，设置鼠标按下处理回调函数，监听舞台的鼠标抬起事件和鼠标移动事件，并对所述滑动按钮显示对象进行拖拽限制。
根据本发明的另一个方面，提供一种滑动条控件实现设备，包括存储器、处理器、以及总线，
所述处理器和存储器通过所述总线完成相互间的通信；
所述存储器存储有可被所述处理器执行的程序指令，所述处理器调用所述存储器中的程序指令，以执行如前所述的方法。
根据本发明的又一个方面，提供一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行如前所述的方法。
本发明提出的一种滑动条控件实现方法及装置，通过自定义拉伸区域，使得滑动条控件能够被任意拉伸，使滑动条控件适用于各种尺寸的使用场合，可有效降低资源浪费，提高开发效率。
附图说明
图1根据本发明一实施例提供的一种滑动条控件实现方法的流程示意图；
图2为根据本发明另一实施例提供的一种滑动条控件实现装置的结构示意图；
图3为根据本发明另一实施例提供的一种滑动条控件实现设备的结构示意图。
具体实施方式
下面结合附图和实施例，对本发明的具体实施方式作进一步详细描述。以下实施例用于说明本发明，但不用来限制本发明的范围。
如图1所示，为本发明一实施例提供的一种滑动条控件实现方法的流程示意图，包括：
S1，创建三个显示对象，分别赋值为滑动条的底图、滑动条的高亮图和滑动条的滑动按钮，获得底图显示对象、高亮图显示对象和滑动按钮显示对象；
S2，按照底图、高亮图和滑动按钮的顺序，将所获得的三个显示对象添加到舞台上；
S3，创建字符串变量，用于保存所设置的用于划分图片拉伸区域的四个值，并将所述字符串变量赋值给所述底图显示对象和高亮图显示对象；
S4，为所述滑动按钮显示对象添加鼠标按下事件，设置鼠标按下处理回调函数，监听舞台的鼠标抬起事件和鼠标移动事件，并对滑动按钮显示对象进行拖拽限制。
具体地，首先我们需要准备三张图片素材，一个滑动条的底图，一个滑动条的拖动按钮图，一个滑动条的高亮展示进度的图片，底图和高亮图需要是一模一样的，只是颜色不一样。滑动按钮可以是任意样式的，圆的、矩形的都可以。步骤S1创建三个显示对象，分别保存我们所准备的图片素材，即滑动条的底图、滑动条的高亮图和滑动条的滑动按钮，获得底图显示对象bg、高亮图显示对象front和滑动按钮显示对象bar。
在显示对象创建好后，则进行步骤S2，按照按照底图、高亮图和滑动按钮的顺序，将步骤S1中所获得的底图显示对象、高亮图显示对象和滑动按钮显示对象添加到舞台上，只有按照底图、高亮图和滑动按钮的顺序才能保证层级关系的正确性。
因为我们想要将滑动条控件做成可以任意拉伸的，那么如果底图和高亮图是不规则的图片的话，一拉伸就会变形了。那么这里我们就需要对图片进行不规则部位的区域固定。将图片用4个变量进行一个区域固定，top表示距离图片顶部的像素值，left表示距离图片左边的像素值，right表示距离右边的像素值，bottom表示距离底部的像素值，通过top和bottom两个值，我们在图片上划两条横线，通过left和right两个值，在图片上划两条竖线可以将图片分成九个部分，并按照从左至右、从上至下依次标注，其中，1,3,7,9这四个部分就是我们保持不变的4个部分，2,8这两个部分我们只进行水平拉伸，4,6这两个部分我们只进行垂直拉伸，5这个部分可以进行水平和垂直拉伸。这样我们就可以通过设置top,bottom,left,right来对图片进行一个固定区域和拉伸区域的划分，这样我们的素材就只需要一套，就可以做各种尺寸的滑动条。设置好用于划分图片拉伸区域的四个值top,bottom,left,right后，创建一个字符串变量，用于保存所述四个值top,bottom,left,right，例如“10,10,10,10”，然后将这个值赋值给底图显示对象bg和高亮图显示对象bar。
步骤S4，为所述滑动按钮显示对象添加鼠标按下事件，只有为滑动按钮实现了鼠标事件，滑动按钮才能跟随用户的鼠标操作相应地动作。设置鼠标按下处理回调函数，监听舞台的鼠标抬起事件和鼠标移动事件，并对按钮显示对象进行拖拽限制，具体地，给滑动按钮显示对象添加鼠标按下事件(MOUSE_DOWN)，设置回调函数为MouseDownHadnler方法，在该方法中，监听舞台的MOUSE_UP鼠标松开事件和MOUSE_MOVE鼠标移动的事件，分别设置回调函数为onStageMouseUp、onStageMouseMove，同时对滑动按钮进行拖拽的限制，限制一个矩形的范围，范围就是整个控件的矩形范围，从0,0坐标开始，在控件的宽高范围内拖拽有效。
本发明实施例提出的一种滑动条控件实现方法及装置，通过自定义拉伸区域，使得滑动条控件能够被任意拉伸，使滑动条控件适用于各种尺寸的使用场合，可有效降低资源浪费，提高开发效率。
基于上述实施例，在所述步骤S4之后还包括：
设置鼠标抬起事件和鼠标移动事件。
具体地，设置鼠标移动事件，即实现回调函数onStageMouseMove，在鼠标移动的事件中，我们要实现计算滑动按钮移动的进度值并根据所述滑动按钮的进度值对高亮图进行更新操作。设置鼠标抬起事件，即实现回调函数onStageMouseUp，在鼠标抬起事件中，我们要实现移除前面监听的鼠标移动事件的操作，因为这个时候拖拽的操作已经结束了。
基于上述实施例，在设置鼠标抬起事件和鼠标移动事件的步骤之后，还包括：
在素材命名时定义一个规范，关联组成滑动条的三张图片，为滑动条实现动态更换皮肤。
具体地，因为我们所实现的滑动条控件是由3张图片组合而成的，为了实现滑动条控件皮肤的动态更换，在素材命名的时候定义一个规范让组成滑动条控件的3个图片关联起来，例如将3个图片分别命名为“滑动条”，“滑动条_front”，“滑动条_bar”分别表示底图，高亮图，滑动按钮图，然后在代码中定义一个set skin方法，传入一个皮肤字符串，例如我们传入str＝“滑动条”这个字符串，那么我们的set skin方法中的具体处理为：bg.skin＝str；front.skin＝str+“_front”；bar.skin＝str+“bar”；，这样就给3个显示对象分别赋值上对应的图片显示。这样就能够实现滑动条控件皮肤的动态更换了。
本发明实施例提出的滑动条控件实现方法，在实现滑动条可任意拉伸外，还使得滑动条控件的皮肤可以动态更换，提高了自定义滑动条控件的实用性，从而进一步地提高了开发人员的开发效率。
基于上述实施例，在所述步骤S3和步骤S4间，还包括：
屏蔽所述高亮图显示对象的鼠标事件。
具体地，因为高亮图片是不需要鼠标交互的，所以在实现滑动按钮显示对象的鼠标事件之前，屏蔽掉高亮图显示对象front的鼠标事件，实现方法是设置_front.mouseEnabled＝false；这样能够提升滑动条控件的性能。
基于上述实施例，所述设置鼠标移动事件的步骤进一步包括：
计算所述滑动按钮显示对象移动的进度值，并根据所述进度值，对高亮图显示对象进行渲染操作。
其中，所述计算所述滑动按钮显示对象移动的进度值，并根据所述进度值，对高亮图显示对象进行渲染操作的步骤进一步包括：
定义value变量，用于表示所述滑动按钮显示对象移动的进度值，value变量的值等于控件的宽度除以滑动按钮的坐标位置；
定义changeValue方法，对高亮图显示对象的进度进行延迟渲染操作。
具体地，我们要实现鼠标移动事件，即实现计算滑动按钮移动的进度值并根据所述滑动按钮的进度值对高亮图进行更新操作，首先，定义一个value变量，用来表示滑动按钮显示对象移动进度的百分比，value的值等于当前控件的宽度除以当前滑动按钮的坐标位置。然后，基于所述进度值，实现对高亮图的更新操作，高亮图的更新是通过渲染操作来完成的。为了实现对高亮图进行渲染的操作，我们定义一个方法changeValue，渲染的操作在这个方法中执行，这里我们采用延迟渲染的机制，因为我们移动进度条是一个很频繁的操作，changeValue方法在移动的时候会被频繁调用，没有必要每拉动一次就渲染一次，假设我们在一帧里面调用了10次changeValue方法，那么我们做了延迟渲染的操作后，这个方法在这一帧中只会执行最后一次，这样就可以大幅提升渲染的性能。
基于上述实施例，所述设置鼠标抬起事件的步骤进一步包括：
移除对舞台的鼠标移动事件的监听，并调用所述changValue方法。
具体地，在鼠标抬起事件中，我们要做的就是移除前面监听的鼠标移动事件，因为这个时候拖拽的操作已经结束了，就不需要这些事件了。在这个方法中我们最后还要调用一个changeValue值，因为有可能拉动进度条的时候鼠标会离开整个舞台的范围，造成位置显示不正确的情况出现，因此，这里再调用一次changeValue方法。
如图2所示，为本发明另一实施例提供的一种滑动条控件实现装置的结构示意图，包括：显示对象创建模块21、舞台实现模块22、控件拉伸区域确定模块23和鼠标按下处理模块24，其中，
显示对象创建模块21，用于创建三个显示对象，分别赋值为滑动条的底图、滑动条的高亮图和滑动条的滑动按钮，获得底图显示对象、高亮图显示对象和滑动按钮显示对象；
舞台实现模块22，用于按照底图、高亮图和滑动按钮的顺序，将所获得的三个显示对象添加到舞台上；
控件拉伸区域确定模块23，用于创建字符串变量，用于保存所设置的用于划分图片的拉伸区域的四个值，并将所述字符串变量赋值给所述底图显示对象和高亮图显示对象；
鼠标按下处理模块24，用于为所述滑动按钮显示对象添加鼠标按下事件，设置鼠标按下处理回调函数，监听舞台的鼠标抬起事件和鼠标移动事件，并对按钮显示对象进行拖拽限制。
具体地，首先我们需要准备三张图片素材，一个滑动条的底图，一个滑动条的拖动按钮图，一个滑动条的高亮展示进度的图片，底图和高亮图需要是一模一样的，只是颜色不一样。滑动按钮可以是任意样式的，圆的、矩形的都可以。显示对象创建模块21，创建三个显示对象，分别保存我们所准备的图片素材，即滑动条的底图、滑动条的高亮图和滑动条的滑动按钮，获得底图显示对象bg、高亮图显示对象front和滑动按钮显示对象bar。
在显示对象创建好后，舞台实现模块22按照按照底图、高亮图和滑动按钮的顺序，将鼠标按下处理模块24所获得的底图显示对象、高亮图显示对象和滑动按钮显示对象添加到舞台上，只有按照底图、高亮图和滑动按钮的顺序才能保证层级关系的正确性。
因为我们想要将滑动条控件做成可以任意拉伸的，那么如果底图和高亮图是不规则的图片的话，一拉伸就会变形了。那么这里我们就需要对图片进行不规则部位的区域固定。将图片用4个变量进行一个区域固定，top表示距离图片顶部的像素值，left表示距离图片左边的像素值，right表示距离右边的像素值，bottom表示距离底部的像素值，通过top和bottom两个值，我们在图片上划两条横线，通过left和right两个值，在图片上划两条竖线可以将图片分成九个部分，并按照从左至右、从上至下依次标注，其中，1,3,7,9这四个部分就是我们保持不变的4个部分，2,8这两个部分我们只进行水平拉伸，4,6这两个部分我们只进行垂直拉伸，5这个部分可以进行水平和垂直拉伸。这样我们就可以通过设置top,bottom,left,right来对图片进行一个固定区域和拉伸区域的划分，这样我们的素材就只需要一套，就可以做各种尺寸的滑动条。设置好用于划分图片拉伸区域的四个值top,bottom,left,right后，控件拉伸区域确定模块23创建一个字符串变量，用于保存所述四个值top,bottom,left,right，例如“10,10,10,10”，然后将这个值赋值给底图显示对象bg和高亮图显示对象bar。
鼠标按下处理模块24为所述滑动按钮显示对象添加鼠标按下事件，只有为滑动按钮实现了鼠标事件，滑动按钮才能跟随用户的鼠标操作相应地动作。设置鼠标按下处理回调函数，监听舞台的鼠标抬起事件和鼠标移动事件，并对按钮显示对象进行拖拽限制，具体地，给滑动按钮显示对象添加鼠标按下事件(MOUSE_DOWN)，设置回调函数为MouseDownHadnler方法，在该方法中，监听舞台的MOUSE_UP鼠标松开事件，和MOUSE_MOVE鼠标移动的事件，分别设置回调函数为onStageMouseUp、onStageMouseMove，同时对滑动按钮进行拖拽的限制，限制一个矩形的范围，范围就是整个控件的矩形范围，从0,0坐标开始，在控件的宽高范围内拖拽有效。
其中，所述装置还包括：
鼠标事件设置模块，用于设置所述鼠标抬起事件和鼠标移动事件。
其中，所述装置还包括：
皮肤更换模块，用于在素材命名时定义一个规范，关联组成滑动条的三张图片，为滑动条实现动态更换皮肤。
其中，所述装置还包括：
高亮图鼠标事件屏蔽模块，用于屏蔽所述高亮图显示对象的鼠标事件。
其中，所述鼠标事件设置模块具体用于：
计算所述滑动按钮显示对象移动的进度值，并根据所述进度值，对高亮图显示对象进行渲染操作。
其中，所述鼠标事件设置模块具体用于：
定义value变量，用于表示所述滑动按钮显示对象移动的进度值，value变量的值等于控件的宽度除以滑动按钮的坐标位置；
定义changeValue方法，对高亮图显示对象的进度进行延迟渲染操作。
其中，所述鼠标事件设置模块具体用于：
移除对舞台的鼠标移动事件的监听，并调用所述changValue方法。
本发明实施例提供的一种滑动条控件实现装置，通过自定义拉伸区域，使得滑动条控件能够被任意拉伸，使滑动条控件适用于各种尺寸的使用场合，可有效降低资源浪费，提高开发效率。
如图3所示，为本发明另一实施例提供的一种滑动条控件实现设备，包括存储器31、处理器32、以及总线33，
所述处理器32和存储器31通过所述总线33完成相互间的通信；
所述存储器31存储有可被所述处理器32执行的程序指令，所述处理器32调用所述存储器31中的程序指令，以执行如前所述的滑动条控件的实现方法，例如包括：S1，创建三个显示对象，分别保存滑动条的底图、滑动条的高亮图和滑动条的滑动按钮，获得底图显示对象、高亮图显示对象和滑动按钮显示对象；S2，按照底图、高亮图和滑动按钮的顺序，将所述三个显示对象添加到舞台上；S3，创建字符串变量，用于保存所设置的用于划分图片拉伸区域的四个值，并将所述字符串变量赋值给所述底图显示对象和高亮图显示对象；S4，为所述滑动按钮显示对象添加鼠标按下事件，设置鼠标按下处理回调函数，监听舞台的鼠标抬起事件和鼠标移动事件，并对所述滑动按钮显示对象进行拖拽限制。
根据本发明的又一个方面，提供一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行如前所述的滑动条控件的实现方法，例如包括：S1，创建三个显示对象，分别保存滑动条的底图、滑动条的高亮图和滑动条的滑动按钮，获得底图显示对象、高亮图显示对象和滑动按钮显示对象；S2，按照底图、高亮图和滑动按钮的顺序，将所述三个显示对象添加到舞台上；S3，创建字符串变量，用于保存所设置的用于划分图片拉伸区域的四个值，并将所述字符串变量赋值给所述底图显示对象和高亮图显示对象；S4，为所述滑动按钮显示对象添加鼠标按下事件，设置鼠标按下处理回调函数，监听舞台的鼠标抬起事件和鼠标移动事件，并对所述滑动按钮显示对象进行拖拽限制。
本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于一计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
以上所描述的滑动条控件的实现设备的实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。
最后，本发明的方法仅为较佳的实施方案，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种滑动条控件实现方法，其特征在于，包括：
S1，创建三个显示对象，分别赋值为滑动条的底图、滑动条的高亮图和滑动条的滑动按钮，获得底图显示对象、高亮图显示对象和滑动按钮显示对象；
S2，按照底图、高亮图和滑动按钮的顺序，将所获得的三个显示对象添加到舞台上；
S3，创建字符串变量，用于保存所设置的用于划分图片拉伸区域的四个值，并将所述字符串变量赋值给所述底图显示对象和高亮图显示对象；
S4，为所述滑动按钮显示对象添加鼠标按下事件，设置鼠标按下处理回调函数，监听舞台的鼠标抬起事件和鼠标移动事件，并对所述滑动按钮显示对象进行拖拽限制。
2.根据权利要求1所述的方法，其特征在于，在所述步骤S4之后还包括：
设置所述鼠标抬起事件和鼠标移动事件。
3.根据权利要求2所述的方法，其特征在于，在设置鼠标抬起事件和鼠标移动事件的步骤之后，还包括：
在素材命名时定义一个规范，关联组成滑动条的三张图片，为滑动条实现动态更换皮肤。
4.根据权利要求1所述的方法，其特征在于，在所述步骤S3和步骤S4间，还包括：
屏蔽所述高亮图显示对象的鼠标事件。
5.根据权利要求2所述的方法，其特征在于，所述设置鼠标移动事件的步骤进一步包括：
计算所述滑动按钮显示对象移动的进度值，并根据所述进度值，对高亮图显示对象进行渲染操作。
6.根据权利要求5所述的方法，其特征在于，所述计算所述滑动按钮显示对象移动的进度值，并根据所述进度值，对高亮图显示对象进行渲染操作的步骤进一步包括：
定义value变量，用于表示所述滑动按钮显示对象移动的进度值，value变量的值等于控件的宽度除以滑动按钮的坐标位置；
定义changeValue方法，对高亮图显示对象的进度进行延迟渲染操作。
7.根据权利要求6所述的方法，其特征在于，所述设置鼠标抬起事件的步骤进一步包括：
移除对舞台的鼠标移动事件的监听，并调用所述changValue方法。
8.一种滑动条控件实现装置，其特征在于，包括：
显示对象创建模块，用于创建三个显示对象，分别赋值为滑动条的底图、滑动条的高亮图和滑动条的滑动按钮，获得底图显示对象、高亮图显示对象和滑动按钮显示对象；
舞台实现模块，用于按照底图、高亮图和滑动按钮的顺序，将所获得的三个显示对象添加到舞台上；
控件拉伸区域确定模块，用于创建字符串变量，用于保存所设置的用于划分图片的拉伸区域的四个值，并将所述字符串变量赋值给所述底图显示对象和高亮图显示对象；
鼠标按下处理模块，用于为所述滑动按钮显示对象添加鼠标按下事件，设置鼠标按下处理回调函数，监听舞台的鼠标抬起事件和鼠标移动事件，并对所述滑动按钮显示对象进行拖拽限制。
9.一种滑动条控件实现设备，其特征在于，包括存储器、处理器、以及总线，
所述处理器和存储器通过所述总线完成相互间的通信；
所述存储器存储有可被所述处理器执行的程序指令，所述处理器调用所述存储器中的程序指令，以执行如权利要求1至7任一所述的方法。
10.一种非暂态计算机可读存储介质，其特征在于，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行如权利要求1至7任一所述的方法。
CN201710525452.5A 2017-06-30 2017-06-30 一种滑动条控件实现方法及装置 Pending CN109213481A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710525452.5A CN109213481A (zh) 2017-06-30 2017-06-30 一种滑动条控件实现方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710525452.5A CN109213481A (zh) 2017-06-30 2017-06-30 一种滑动条控件实现方法及装置

Publications (1)

Publication Number Publication Date
CN109213481A true CN109213481A (zh) 2019-01-15

Family

ID=64961125

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710525452.5A Pending CN109213481A (zh) 2017-06-30 2017-06-30 一种滑动条控件实现方法及装置

Country Status (1)

Country Link
CN (1) CN109213481A (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111443956A (zh) * 2020-03-23 2020-07-24 Oppo广东移动通信有限公司 设置控件显示方法、装置、存储介质及电子设备
CN112527178A (zh) * 2020-12-16 2021-03-19 平安银行股份有限公司 页面控制方法、装置、设备及存储介质
CN113946264A (zh) * 2021-10-25 2022-01-18 网易（杭州）网络有限公司 滑动条处理方法及装置、存储介质、电子设备
CN114168136A (zh) * 2021-12-07 2022-03-11 杭州安恒信息技术股份有限公司 一种滑动条的联动方法、装置、设备及介质
US12019859B2 (en) 2020-03-23 2024-06-25 Guangdong Oppo Mobile Telecommunications Corp., Ltd. Setting control display method and apparatus, storage medium, and electronic apparatus

Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1869925A (zh) * 2006-06-23 2006-11-29 上海科泰世纪科技有限公司 计算机图形系统中的进行控件风格定制的方法
US20100251167A1 (en) * 2009-03-28 2010-09-30 International Business Machines Corporation Scrollbar user interface for multitouch devices
CN102236544A (zh) * 2010-04-21 2011-11-09 腾讯科技（深圳）有限公司 一种皮肤设计方法及装置
CN102591662A (zh) * 2011-12-30 2012-07-18 深圳市万兴软件有限公司 一种绘制皮肤图片的方法及装置
CN103268189A (zh) * 2013-05-30 2013-08-28 广东欧珀移动通信有限公司 一种播放器用户界面的滚动条的实现方法和系统
US20140136939A1 (en) * 2012-11-12 2014-05-15 Microsoft Corporation User control for viewing data in large data sets
US20160170631A1 (en) * 2014-12-11 2016-06-16 Rohde & Schwarz Gmbh & Co. Kg Apparatus, measurement equipment and method for displaying images
CN106126072A (zh) * 2016-05-31 2016-11-16 深圳市贝美互动科技有限公司 时间导航条的操作方法和操作系统
CN106293409A (zh) * 2016-08-12 2017-01-04 福建中金在线信息科技有限公司 一种轻量级滚动条的美化方法
CN106371810A (zh) * 2015-07-20 2017-02-01 腾讯科技（深圳）有限公司 浏览器窗口内分块拉伸方法及装置
CN106484207A (zh) * 2015-08-25 2017-03-08 阿里巴巴集团控股有限公司 一种触控设备界面缩放方法及装置

Patent Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1869925A (zh) * 2006-06-23 2006-11-29 上海科泰世纪科技有限公司 计算机图形系统中的进行控件风格定制的方法
US20100251167A1 (en) * 2009-03-28 2010-09-30 International Business Machines Corporation Scrollbar user interface for multitouch devices
CN102236544A (zh) * 2010-04-21 2011-11-09 腾讯科技（深圳）有限公司 一种皮肤设计方法及装置
CN102591662A (zh) * 2011-12-30 2012-07-18 深圳市万兴软件有限公司 一种绘制皮肤图片的方法及装置
US20140136939A1 (en) * 2012-11-12 2014-05-15 Microsoft Corporation User control for viewing data in large data sets
CN103268189A (zh) * 2013-05-30 2013-08-28 广东欧珀移动通信有限公司 一种播放器用户界面的滚动条的实现方法和系统
US20160170631A1 (en) * 2014-12-11 2016-06-16 Rohde & Schwarz Gmbh & Co. Kg Apparatus, measurement equipment and method for displaying images
CN106371810A (zh) * 2015-07-20 2017-02-01 腾讯科技（深圳）有限公司 浏览器窗口内分块拉伸方法及装置
CN106484207A (zh) * 2015-08-25 2017-03-08 阿里巴巴集团控股有限公司 一种触控设备界面缩放方法及装置
CN106126072A (zh) * 2016-05-31 2016-11-16 深圳市贝美互动科技有限公司 时间导航条的操作方法和操作系统
CN106293409A (zh) * 2016-08-12 2017-01-04 福建中金在线信息科技有限公司 一种轻量级滚动条的美化方法

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111443956A (zh) * 2020-03-23 2020-07-24 Oppo广东移动通信有限公司 设置控件显示方法、装置、存储介质及电子设备
CN111443956B (zh) * 2020-03-23 2023-02-03 Oppo广东移动通信有限公司 设置控件显示方法、装置、存储介质及电子设备
US12019859B2 (en) 2020-03-23 2024-06-25 Guangdong Oppo Mobile Telecommunications Corp., Ltd. Setting control display method and apparatus, storage medium, and electronic apparatus
CN112527178A (zh) * 2020-12-16 2021-03-19 平安银行股份有限公司 页面控制方法、装置、设备及存储介质
CN112527178B (zh) * 2020-12-16 2023-04-07 平安银行股份有限公司 页面控制方法、装置、设备及存储介质
CN113946264A (zh) * 2021-10-25 2022-01-18 网易（杭州）网络有限公司 滑动条处理方法及装置、存储介质、电子设备
CN114168136A (zh) * 2021-12-07 2022-03-11 杭州安恒信息技术股份有限公司 一种滑动条的联动方法、装置、设备及介质
CN114168136B (zh) * 2021-12-07 2024-04-05 杭州安恒信息技术股份有限公司 一种滑动条的联动方法、装置、设备及介质

Similar Documents

Publication Publication Date Title
CN109213481A (zh) 一种滑动条控件实现方法及装置
US10474317B2 (en) Dynamic node grouping in grid-based visualizations
US8269773B2 (en) System and method for drag-and-drop graph building with live feedback
US20050007383A1 (en) System and method of visual grouping of elements in a diagram
CN106126489A (zh) 一种报告文件动态图表编辑方法及系统
CN107765938A (zh) 一种图片交互方法与装置
CN109816763A (zh) 一种图形渲染方法
WO2023071861A1 (zh) 数据可视化展示方法、装置、计算机设备和存储介质
CN112199007A (zh) 菜单显示方法、装置、电子设备和存储介质
CN113255302A (zh) 组织架构图操作方法、计算机设备及计算机存储介质
CN113468261B (zh) 基于图形编辑引擎构建物联网实体关系的方法和系统
CN106682011A (zh) 利用图形展示数据的方法和装置
CN111158840B (zh) 图像轮播方法及装置
CN105094821A (zh) 一种用于确定被调用的应用的背景信息的方法和装置
CN106648623B (zh) 一种安卓系统中字符的显示方法及装置
CN108363571A (zh) 一种基于智能过滤的控件布局方法及系统
CN104750691B (zh) 一种自定义网页生成方法及装置
KR20130061106A (ko) 데이터 세트를 시각화하는 방법 및 장치
US9164668B2 (en) Defining object groups in 3D
US9892452B2 (en) Method for replacing a texture of an apparel with an other texture preserving the wrinkles, in a video file
CN109960553A (zh) 一种多视窗内容呈现方法与系统
CN111782309B (zh) 显示信息的方法、装置及计算机可读存储介质
CN113689113A (zh) 工艺信息的推荐方法和装置，以及存储介质和处理器
CN106598839A (zh) 一种面向目标代码的程序静态分析方法
CN111242735B (zh) 数值模板生成方法及数值模板生成装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20190115

RJ01 Rejection of invention patent application after publication