[发明专利]一种基于JavaScript事件监听和canvas画图实现滑动转盘停留的方法

说明书

本发明涉及web网页滑动转盘技术领域，具体涉及一种基于JavaScript事件监听和canvas画图实现滑动转盘停留的方法，包括定位视图中心、初始化转盘起始转动的角度A＝0、监听手势触摸屏幕时的开始位置、手势持续移动之后监听手势离开屏幕时的位置、计算手势滑动的角度、计算起止角度值、判定起止角度值、获取数据。发明的有益效果：综合JavaScript事件监听和canvas画图技术实现一个可手势转动的转盘，并获取和展示手势停留时指针位置对应的相关数据信息，该指针可根据设计图放在扇形区的任一边缘,以新的形式展现可视化数据，同时实现功能性和美化效果的统一。

技术领域

本发明涉及web网页滑动转盘技术领域，具体涉及一种基于JavaScript事件监听和canvas画图实现滑动转盘停留的方法。

背景技术

目前有两类与web网页滑动转盘相关的技术，一类是抽奖转盘，即点击一次转盘,转动后随机停留在某一区域以获得抽奖结果；另一类是点击转盘的某一扇区获得相应的数据等相关信息，如echarts,highcharts。

发明内容

本发明的目的在于克服现有技术中存在的问题，提供一种基于JavaScript事件监听和canvas画图实现滑动转盘停留的方法，它可以实现以轻量级代码实现可手势转动的转盘，并获取和展示手势停留时指针位置对应的相关数据信息，该指针可根据设计图放在扇形区的任一边缘。

为实现上述技术目的，达到上述技术效果，本发明是通过以下技术方案实现的：

一种基于JavaScript事件监听和canvas画图实现滑动转盘停留的方法，包括如下步骤：

步骤1、定位视图中心：定位视图的中心位置，以该位置为中心点通过canvas技术画出指定半径的扇区图形，并记录每一扇区对应的起止角度值；

步骤2、初始化转盘起始转动的角度A＝0；

步骤3、监听手势触摸屏幕时的开始位置；

步骤4、手势持续移动之后监听手势离开屏幕时的位置；

步骤5、计算手势滑动的角度：根据视图的中心位置、步骤2和步骤3计算出手势滑动的角度B；

步骤6、计算起止角度值：每一次手势结束后控制扇区转动A+B的角度，并通过B重新计算每一扇区对应的起止角度值；

步骤7、判定起止角度值：每一次手势结束后循环每一扇区的起止角度值，并与C进行比较，若起始角度位置小于C并且结束角度位置大于C,即表示C落定在该扇区内；

步骤8、获取数据：获取所述步骤7中扇区的索引值后，获取该扇区对应的相关数据。

进一步地，所述步骤5中，计算出的所述手势滑动的角度，顺时针即为正角度值，逆时针即为负角度值。

进一步地，所述步骤6中，若起止角度值超出2π或小于-2π时，重新循环，同时重新赋值A+＝B。

发明的有益效果：综合JavaScript事件监听和canvas画图技术实现一个可手势转动的转盘，并获取和展示手势停留时指针位置对应的相关数据信息，该指针可根据设计图放在扇形区的任一边缘,以新的形式展现可视化数据，同时实现功能性和美化效果的统一。

具体实施方式

为了使本发明实现的技术手段、创作特征、达成目的与功效易于明白了解，下面对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

一种基于JavaScript事件监听和canvas画图实现滑动转盘停留的方法，包括如下步骤：