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

说明书

本申请涉及一种基于SVG实现滑块效果的方法、装置、计算机设备和存储介质，所述方法包括：通过设置滑块轨道和目标元素，获取鼠标位置；根据鼠标位置，通过坐标转换函数getScreenCTM将鼠标位置转换为目标元素位置，根据目标元素位置和位置更新函数更新目标元素的位置，使得目标元素跟随所述鼠标位置在滑动轨道中滑动，通过SVG实现元素滑动，效率高且准确性好。

技术领域

本申请涉及图像处理技术领域，特别是涉及一种基于SVG实现滑块效果的方法、装置、计算机设备和存储介质。

背景技术

在网页等页面设计过程中，实现元素滑动的交互效果的关键点在于获取元素移动距离并实时转换成数值。相关技术中通常只是考虑单一的滑动功能，可以将用js去监听鼠标移动的位置通过计算后在赋值给目标元素，但这种实现方式成本高，耗时长，而且效果不理想，当浏览器进行放大缩小时，鼠标位置会有偏移，会影响准确度，此时需要考虑的控制情况会增多。或者也可以通过第三方库实现，然而，基于已有的第三方库的扩展效果受限，兼容性差。

针对相关技术中，元素滑动效果的实现耗时长、准确度差的问题，目前尚未提出有效的解决方案。

发明内容

基于此，有必要针对上述技术问题，提供一种基于SVG实现滑块效果的方法、装置、计算机设备和存储介质。

第一方面，本申请实施例提供了一种基于SVG实现滑块效果的方法，所述方法包括：

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

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

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

在其中一个实施例中，所述根据所述鼠标位置，通过坐标转换函数getScreenCTM将所述鼠标位置转换为目标元素位置之后，所述方法包括：

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

在其中一个实施例中，所述方法还包括：

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

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

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

在其中一个实施例中，所述设置滑块轨道和目标元素之后，所述方法还包括：

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

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

在其中一个实施例中，所述监听所述鼠标活动事件之后，所述方法还包括：

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

在其中一个实施例中，所述通过位置更新函数更新所述目标元素的位置包括：

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