[发明专利]基于SVG实现滑块效果的方法、装置和计算机设备

权利要求书

1.一种基于SVG实现滑块效果的方法，其特征在于，所述方法包括：

设置滑块轨道和目标元素，获取鼠标位置；

根据所述鼠标位置，通过坐标转换函数getScreenCTM将所述鼠标位置转换为目标元素位置；

根据所述目标元素位置和位置更新函数更新所述目标元素的位置，所述目标元素在所述滑块轨道中跟随所述鼠标位置滑动。

2.根据权利要求1所述的方法，其特征在于，所述根据所述鼠标位置，通过坐标转换函数getScreenCTM将所述鼠标位置转换为目标元素位置之后，所述方法包括：

在所述目标元素位置在所述滑动轨道的预设滑动范围内的情况下，根据所述目标元素位置和位置更新函数更新所述目标元素的位置。

3.根据权利要求2所述的方法，其特征在于，所述方法还包括：

获取所述目标元素的最小临界值位置和最大临界值位置；

在所述鼠标位置在所述最小临界值位置远离所述滑动轨道的一侧且发生鼠标点击事件的情况下，所述滑块滑动至所述最小临界值位置；

在所述鼠标位置在所述最大临界值位置远离所述滑动轨道的一侧且发生鼠标点击事件的情况下，所述滑块滑动至所述最大临界值位置。

4.根据权利要求1所述的方法，其特征在于，所述设置滑块轨道和目标元素之后，所述方法还包括：

监听所述鼠标活动事件，所述鼠标活动事件包括mouseup，mousedown，mousemove；

根据所述鼠标活动事件更新所述鼠标位置。

5.根据权利要求4所述的方法，其特征在于，所述监听所述鼠标活动事件之后，所述方法还包括：

在监听到所述mouseup事件的情况下，启动requesetAnimationFrame动画，所述requesetAnimationFrame动画用于按帧进行重新绘制。

6.根据权利要求5所述的方法，其特征在于，所述通过位置更新函数更新所述目标元素的位置包括：

将所述目标元素位置作为所述requesetAnimationFrame动画的回调函数，通过所述requesetAnimationFrame动画重新绘制时更新所述目标元素的位置。

7.根据权利要求6所述的方法，其特征在于，通过所述requesetAnimationFrame动画重新绘制时更新所述目标元素的位置之后，所述方法包括：

使用requestId保存requestAnimationFrame的返回值。

8.一种基于SVG实现滑块效果的装置，其特征在于，所述装置包括获取模块和转换模块；

所述获取模块用于设置滑动轨道和目标元素，获取鼠标位置；

所述转换模块用于根据所述鼠标位置，通过坐标转换函数getScreenCTM将所述鼠标位置转换为目标元素位置，通过位置更新函数更新所述目标元素的位置，所述目标元素跟随所述鼠标位置在所述滑动轨道中滑动。

9.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。