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

摘要

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

主权项

1.一种基于JavaScript事件监听和canvas画图实现滑动转盘停留的方法，其特征在于，包括如下步骤：步骤1、定位视图中心：定位视图的中心位置，以该位置为中心点通过canvas技术画出指定半径的扇区图形，并记录每一扇区对应的起止角度值；步骤2、初始化转盘起始转动的角度A＝0；步骤3、监听手势触摸屏幕时的开始位置；步骤4、手势持续移动之后监听手势离开屏幕时的位置；步骤5、计算手势滑动的角度：根据视图的中心位置、步骤2和步骤3计算出手势滑动的角度B；步骤6、计算起止角度值：每一次手势结束后控制扇区转动A+B的角度，并通过B重新计算每一扇区对应的起止角度值；步骤7、判定起止角度值：每一次手势结束后循环每一扇区的起止角度值，并与C进行比较，若起始角度位置小于C并且结束角度位置大于C,即表示C落定在该扇区内；步骤8、获取数据：获取所述步骤7中扇区的索引值后，获取该扇区对应的相关数据。