一种菜单的环形转动交互方法、装置、设备和介质制造方法及图纸

本发明专利技术提供一种菜单的环形转动交互方法、装置、设备和介质，方法是：菜单页面依次分为环形菜单区和信息显示区，所述环形菜单区用于显示环形菜单，所述环形菜单由N个菜单项呈环形分布，每个菜单项按预设角度同时顺时针或同时逆时针旋转，并在任一菜单项被选中的情况下，该被选中的菜单项对应的内容介绍信息被显示在所述信息显示区。本发明专利技术将菜单通过转动的形式，能够动态地展示各个菜单项中的简要介绍信息，进一步地提高了整个页面的使用率，并且能够更加直观地展示各个菜单项所对应页面的功能，还能够缓解人们对普通列表菜单的审美疲劳。

【技术实现步骤摘要】
一种菜单的环形转动交互方法、装置、设备和介质
本专利技术涉及计算机
，特别涉及一种菜单的方法、装置、设备和介质。
技术介绍
随着互联网技术和信息行业的发展，数据已经渗透到当今每一个行业和业务智能领域，大数据时代随之到来，可视化数据大屏也开始为政府、医院、互联网企业等各大行业所应用。而针对大屏如何能够针对性地对数据进行展示，以及提供展示不同数据类型的入口菜单，大部分依然是采用传统的列表菜单的形式，而在大数据时代，能够介绍更多信息，并且还能让观察者能够清晰地了解各项菜单项后面的内容类型的菜单，已经是大屏展示入口的必备项，而环形菜单正是解决这种问题的良好方法，而单单是静态环形菜单来说，对一个用于展示的大屏来说未免太过单调，所以对这种菜单添加一些动画来进行动态地交互展示成为了必要。
技术实现思路
本专利技术要解决的技术问题，在于提供一种菜单的环形转动交互方法、装置、设备和介质，菜单通过转动的形式，能够动态地展示各个菜单项中的简要介绍信息。第一方面，本专利技术提供了一种菜单的环形转动交互方法，菜单页面依次分为环形菜单区和信息显示区，所述环形菜单区用于显示环形菜单，所述环形菜单由N个菜单项呈环形分布，每个菜单项按预设角度同时顺时针或同时逆时针进行2D旋转，并在任一菜单项被选中的情况下，该被选中的菜单项对应的内容介绍信息被显示在所述信息显示区。第二方面，本专利技术提供了一种菜单的环形转动交互装置，包括：菜单页面，依次分为环形菜单区和信息显示区，所述环形菜单区用于显示环形菜单，所述环形菜单由N个菜单项呈环形分布；旋转控制模块，将所述环形菜单中的每个菜单项按预设角度同时顺时针或同时逆时针进行2D旋转；显示控制模块，在所述环形菜单中的任一菜单项被选中的情况下，将该被选中的菜单项对应的内容介绍信息显示在所述信息显示区。第三方面，本专利技术提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现第一方面所述的方法。第四方面，本专利技术提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现第一方面所述的方法。本专利技术实施例中提供的方法、装置、设备和介质，至少具有如下技术效果或优点：相比于现有技术，使用环形菜单在环形菜单的基础上再进一步地将转动的动画元素交互添加到其中，使得画面变得更为灵动更具生命力，在菜单的简介内容根据选中菜单项进行展示，添加数据的动态显示和变化，进一步地提高了整个页面的使用率，并且能够更加直观地展示各个菜单项所对应页面的功能，还能够缓解人们对普通列表菜单的审美疲劳。上述说明仅是本专利技术技术方案的概述，为了能够更清楚了解本专利技术的技术手段，而可依照说明书的内容予以实施，并且为了让本专利技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本专利技术的具体实施方式。附图说明下面参照附图结合实施例对本专利技术作进一步的说明。图1为本专利技术菜单页面区域分布实施例的示意图；图2为本专利技术菜单页面区域分布另一实施例的示意图；图3为本专利技术实施例一中方法中的流程图；图4为本专利技术实施例二中装置的结构示意图；图5为本专利技术实施例三中电子设备的结构示意图；图6为本专利技术实施例四中介质的结构示意图。具体实施方式本申请实施例通过提供一种菜单的环形转动交互方法、装置、设备及介质，菜单通过转动的形式，以动态地展示各个菜单项中的简要介绍信息。本申请实施例中的技术方案，总体思路如下：将菜单页面划分为环形菜单区和信息显示区，在环形菜单区使用列表进行展示菜单项，通过对每一项菜单项进行角度旋转，从而形成一种环状的旋转菜单样式，再通过定义一个定时器，通过特定的算法来动态的修改每个菜单项的旋转角度值来实现菜单动态旋转的效果。使得画面变得更为灵动更具生命力，在菜单的简介内容根据选中菜单项进行展示，添加数据的动态显示和变化，进一步地提高了整个页面的使用率，并且能够更加直观地展示各个菜单项所对应页面的功能。实现时，可以用HTML(超文本标记语言)来实现菜单项页面的布局，用CSS(层叠样式表)来实现每一项菜单项的旋转，用Javascript(Web编程语言)来实现定时器。实施例一本实施例提供一种菜单的环形转动交互方法，如图1所示，菜单页面依次分为环形菜单区和信息显示区，所述环形菜单区用于显示环形菜单，所述环形菜单由N个菜单项呈环形分布，每个菜单项按预设角度同时顺时针或同时逆时针进行2D旋转，并在任一菜单项被选中的情况下，该被选中的菜单项对应的内容介绍信息被显示在所述信息显示区。作为该实施例的一具体实现方式，N个所述菜单项通过等分360°的形式呈环形分布，通过CSS的transform属性中的rotate来定义菜单项的2D旋转，所述预设角度为旋转角度A，则该旋转角度A和菜单项个数N的关系如公式(1)所示：作为该实施例的另一具体实现方式，取N值为偶数，且为了明确区分左右两块菜单项，在环形菜单的上方和下方分别设一个开角K以形成镂空状，30°≤K≤90°；使所述环形菜单分为左半环和右半环，所述信息显示区包括左显示区和右显示区，分别位于环形菜单区的左右两侧，分别用于显示左半环和右半环的被选中的菜单项对应的内容介绍信息，以适于宽度较大的屏幕设置。具体实例如图2所示，左半环的菜单项与右半环的菜单项的上方和下方的距离较大，形成镂空状。则所述预设角度分为特殊旋转角度S和一般旋转角度B，所述特殊旋转角度S为处于所述开角K两侧的菜单项从左半环跳转到右半环或从右半环跳到左半环时的旋转角度，一般旋转角度B表示剩余菜单项的旋转角度，则：S＝B+K(3)；N个菜单项每旋转一次，根据当前角度值和所述特殊旋转角度S、所述一般旋转角度B算出N个菜单项旋转后角度值，并按顺序封装在一个角度值数组里，并做为参数传入到对应菜单项CSS中的transform做为rotate属性值，根据该rotate属性值生成旋转后的环形菜单。通过Javscript为每个菜单项的旋转角度进行计算，并将旋转角度存入到角度值数组中，通过遍历循环渲染到页面上再为每一个菜单项的旋转角度进行设置，如此一个上下镂空的环形菜单就制作完成。例如：假设开角K为30度，菜单个数N为12，则可以算出一般旋转角度B＝25，特殊旋转角度S＝55，预定任意一个菜单项为初始位置，则初始化后得到这样一个角度值数组：[25,50,105,130,155,180,205,230,285,310,335,360]，其中从位置50度跳转到105度和从位置230度跳转到285度的旋转角度属于菜单项中的特殊旋转角度S，其余为一般旋转角度B，将角度值数组中的值传入到各个菜单项CSS中transform中的rotate属性，即可画出每次旋转后的环形菜单，依此类推，画出12次后，每个菜单项旋转一周。要使环形菜单进行转动，就需要对每个菜单项的旋转角度值进行变化，由于菜单项的旋转后的本文档来自技高网...

【技术保护点】
1.一种菜单的环形转动交互方法，其特征在于：菜单页面依次分为环形菜单区和信息显示区，所述环形菜单区用于显示环形菜单，所述环形菜单由N个菜单项呈环形分布，每个菜单项按预设角度同时顺时针或同时逆时针旋转，并在任一菜单项被选中的情况下，该被选中的菜单项对应的内容介绍信息被显示在所述信息显示区。/n

【技术特征摘要】
1.一种菜单的环形转动交互方法，其特征在于：菜单页面依次分为环形菜单区和信息显示区，所述环形菜单区用于显示环形菜单，所述环形菜单由N个菜单项呈环形分布，每个菜单项按预设角度同时顺时针或同时逆时针旋转，并在任一菜单项被选中的情况下，该被选中的菜单项对应的内容介绍信息被显示在所述信息显示区。


2.根据权利要求1所述的一种菜单的环形转动交互方法，其特征在于：
N个所述菜单项通过等分360°的形式呈环形分布，所述预设角度为旋转角度A，则该旋转角度A和菜单项个数N的关系如公式(1)所示：





3.根据权利要求1所述的一种菜单的环形转动交互方法，其特征在于：当N为偶数时，所述环形菜单的上方和下方分别存在一个开角K，30°≤K≤90°；使所述环形菜单分为左半环和右半环，所述环形菜单每旋转一次，左半环和右半环均分别具有一被选中的菜单项；所述信息显示区包括左显示区和右显示区，分别位于环形菜单区的左右两侧，分别用于显示左半环和右半环的被选中的菜单项对应的内容介绍信息；
则所述预设角度分为特殊旋转角度S和一般旋转角度B，所述特殊旋转角度S为处于所述开角K两侧的菜单项从左半环跳转到右半环或从右半环跳到左半环时的旋转角度，一般旋转角度B表示剩余菜单项的旋转角度，则：



S＝B+K(3)；
根据所述特殊旋转角度S和所述一般旋转角度B算出N个菜单项旋转后角度值，并按顺序封装在一个角度值数组里，并做为参数传入到对应菜单项CSS中的transform做为rotate属性值，根据该rotate属性值生成旋转后的环形菜单。


4.根据权利要求3所述的一种菜单的环形转动交互方法，其特征在于：所述菜单项旋转由定时器来控制，通过该定时器设定一个理想的时间间隔来使菜单进行定时旋转，在一次角度旋转完成时，根据自动选中的菜单项将对应的内容介绍信息动态地显示在所述信息显示区；
当因外部操作导致当前菜单页面发生变化时，通过监听器在判断菜单页面为离开还是进入，若是离开则清除定时器，若是进入则重新开启定时器。


5.一种菜单的环形转动交互装置，其特征在于：包括：
菜单页面，依次分为环形菜单区和信息显示区，所述环形菜单区用于显示环形菜单，所述环形菜单由N...

【专利技术属性】
技术研发人员：黄家昌，林小旺，杨辉，邱道椿，
申请(专利权)人：福建亿能达信息技术股份有限公司，
类型：发明
国别省市：福建;35