本发明专利技术公开一种可视化大屏多层轮盘效果的实现方法,涉及Web前端可视化技术领域；步骤S1：通过前端获取并验证用户上传的轮盘配置信息；步骤S2：基于大屏，进行多层轮盘效果渲染；步骤S3：根据用户的业务和展示内容的需要处理用户交互，步骤S4：通过响应方式适应不同分辨率的大屏上展示；本发明专利技术能够根据用户的业务和展示内容的需要自由配置多层轮盘效果，实现自动轮播动画和用户交互处理，而且具备响应式设计，确保在不同分辨率的大屏上展示效果良好。
【技术实现步骤摘要】
本专利技术公开一种实现方法,涉及web前端可视化，具体地说是一种可视化大屏多层轮盘效果的实现方法。
技术介绍
1、随着大屏幕技术的发展和应用场景的不断扩大，大屏可视化成为了展示信息和数据的重要手段之一。大屏幕可以展示更多的信息，更生动地展现数据，但大屏幕中不同分辨率屏幕设备，不能使用户获得一致的浏览体验，而且较为复杂的特效，如多层轮盘效果，大屏也不能完善地呈现，导致不能提供统一且友好的用户体验，同时也增加维护成本和工作量。
技术实现思路
1、本专利技术针对现有技术的问题，提供一种可视化大屏多层轮盘效果的实现方法，能够根据用户的业务和展示内容的需求自由配置多层轮盘效果，实现自动轮播动画和用户交互处理，而且具备响应式设计，确保在不同分辨率的大屏上展示效果良好。
2、本专利技术提出的具体方案是：
3、本专利技术提供一种可视化大屏多层轮盘效果的实现方法，包括：
4、步骤s1：通过前端获取并验证用户上传的轮盘配置信息，其中所述轮盘配置信息包括多层轮盘基本信息、轮盘内单个元素的样式、元素数量、文字内容、是否自动播放和单步停顿时间，
5、步骤s2：基于大屏，进行多层轮盘效果渲染，其中根据轮盘配置信息，确定轮盘的层数以及每层轮盘的样式，动态生成多层轮盘的html结构，包括：
6、步骤s21：初始化单层轮盘的参数，所述参数包括轮盘半径、中心点坐标和元素数量，
7、步骤s22：设置每个元素的样式和位置，使每个元素围绕中心点排列，</p>8、步骤s23：与轮盘配置信息中设置的轮盘层数进行对比，重复步骤21和22，直至满足轮盘配置信息中设置的条件，
9、步骤s24：设置旋转动画，根据每一帧的时间间隔计算旋转角度的增量并更新轮盘元素的位置和样式，实现旋转效果；
10、步骤s3：根据用户的业务和展示内容的需要处理用户交互，其中使用javascript的事件监听器捕获用户的鼠标的点击或拖拽事件，并在事件发生时更新旋转轴的角度以及元素的位置和样式，实现交互效果，
11、步骤s4：通过响应方式适应不同分辨率的大屏上展示，其中在javascript中监听窗口大小变化的事件，相应地调整轮盘的大小、位置和布局，适应不同分辨率的大屏上展示多层轮盘效果。
12、进一步，所述的一种可视化大屏多层轮盘效果的实现方法中步骤s1中通过前端获取用户上传的轮盘配置信息，包括：在前端页面中，通过表单和文件上传功能，选择或输入轮盘配置信息，使用javascript编写逻辑，获取用户输入的轮盘配置信息，并将轮盘配置信息整理成一个json对象。
13、进一步，所述的一种可视化大屏多层轮盘效果的实现方法中步骤s1中验证用户上传的轮盘配置信息，包括：
14、针对单个元素的样式：验证是否为有效的图片链接或者base64编码的图片数据，
15、针对元素数量：验证是否为正整数数组，且每个元素值大于0，
16、针对文字内容：验证是否为字符串数组，每个元素是有效的字符串，
17、针对是否自动播放：验证是否为布尔类型，即true或false，
18、针对单步停顿时间：验证是否为正整数，表示轮盘自动播放时每个步骤的停顿时间；
19、并验证上传的轮盘配置信息的数据格式是否正确，若正确则进行安全性检验，针对轮盘配置信息，检查图片链接的有效性，防止sql注入和xss攻击。
20、进一步，所述的一种可视化大屏多层轮盘效果的实现方法中步骤s2中，具体为：
21、步骤s21中初始化时，x方向的半径为轮盘宽度的一半减去左右内边距的距离，y方向的半径为轮盘高度的一半减去上下内边距的距离，轮盘的中心点坐标为轮盘的中心点位置，元素数量为用户所设置的数量；
22、步骤s22中先计算每个元素样式的缩放比例，第i个元素的缩放比例scalei计算公式如下：
23、
24、scalemin表示最小尺寸，是小于1的值，用于控制元素在远离中心点时的缩小比例，sinwi是根据第i个元素在轮盘中的位置计算出的正弦值，取值范围为[-1,1]，通过正弦值的变化，实现元素在轮盘上沿径向的缩放效果，
25、第i个元素的水平和垂直位置xi和yi计算公式如下：
26、xi＝xcenter+(coswi×xr)-0.5bi
27、yi＝ycenter+(sinwi×yr)-0.5bi
28、其中，xcenter和ycenter是轮盘的中心点坐标，coswi和sinwi分别是当前第i个元素所处位置的余弦值和正弦值，xr和yr分别是x方向和y方向的半径，bi表示元素的宽度，
29、通过计算获得元素在轮盘中的样式和位置，使得元素围绕中心点排列，并且在远离中心点时逐渐缩小。
30、进一步，所述的一种可视化大屏多层轮盘效果的实现方法中步骤s3中根据捕获的用户的鼠标的点击或拖拽事件，在事件处理函数中获取鼠标的位置信息，鼠标的位置信息包括鼠标相对于轮盘中心点的位置以及移动的距离，
31、根据鼠标的位置信息，计算出旋转轴的角度，根据旋转轴的角度确定轮盘围绕自身旋转的方向和速度，通过改变css属性transform中的rotate值实现旋转轴的角度更新，根据鼠标的位置信息，计算每个元素应该具有的位置和样式。
32、进一步，所述的一种可视化大屏多层轮盘效果的实现方法中步骤s4中，具体包括：
33、步骤41：添加窗口尺寸变化事件监听器：在前端页面加载完成后或者在需要监听窗口大小变化的地方，通过javascript使用addeventlistener方法添加窗口大小变化事件的监听器，确保在窗口大小变化时触发相应的事件处理函数，
34、步骤42：编写事件处理函数：编写用于处理窗口大小变化事件的事件处理函数，在事件处理函数中，需要获取窗口的新尺寸信息，并根据需要进行相应的处理，
35、步骤43：调整页面元素：根据窗口大小的变化，重新计算和调整页面中相关元素的大小、位置和布局，使用css样式或javascript动态设置元素的样式和属性，确保调整后的页面元素在不同分辨率的屏幕上呈现出相应效果。
36、本专利技术还提供一种可视化大屏多层轮盘效果的实现装置，包括信息获取及验证模块、渲染模块、用户交互模块和展示调节模块，
37、信息获取及验证模块通过前端获取并验证用户上传的轮盘配置信息，其中所述轮盘配置信息包括多层轮盘基本信息、轮盘内单个元素的样式、元素数量、文字内容、是否自动播放和单步停顿时间，
38、渲染模块基于大屏，进行多层轮盘效果渲染，其中根据轮盘配置信息，确定轮盘的层数以及每层轮盘的样式，动态生成多层轮盘的html结构，包括：
39、步骤s21：初始化单层轮盘的参数，所述参数包括轮盘半径、中心点坐标和元素数量，
40、步骤s22：设本文档来自技高网
...
【技术保护点】
1.一种可视化大屏多层轮盘效果的实现方法，其特征是包括：
2.根据权利要求1所述的一种可视化大屏多层轮盘效果的实现方法，其特征是步骤S1中通过前端获取用户上传的轮盘配置信息，包括：在前端页面中，通过表单和文件上传功能，选择或输入轮盘配置信息，使用JavaScript编写逻辑，获取用户输入的轮盘配置信息，并将轮盘配置信息整理成一个JSON对象。
3.根据权利要求1或2所述的一种可视化大屏多层轮盘效果的实现方法，其特征是步骤S1中验证用户上传的轮盘配置信息，包括：
4.根据权利要求1所述的一种可视化大屏多层轮盘效果的实现方法，其特征是步骤S2中，具体为：
5.根据权利要求1所述的一种可视化大屏多层轮盘效果的实现方法，其特征是步骤S3中根据捕获的用户的鼠标的点击或拖拽事件，在事件处理函数中获取鼠标的位置信息，鼠标的位置信息包括鼠标相对于轮盘中心点的位置以及移动的距离，
6.根据权利要求1所述的一种可视化大屏多层轮盘效果的实现方法，其特征是步骤S4中，具体包括：
7.一种可视化大屏多层轮盘效果的实现装置，其特征是包括信息获取及验证模块、渲染模块、用户交互模块和展示调节模块，
8.一种实现可视化大屏多层轮盘效果的电子设备，其特征是包括至少一个处理器和至少一个存储器，所述存储器用于存储程序执行代码，所述处理器用于根据存储器存储的程序执行代码，执行权利要求1-6任一项所述的一种可视化大屏多层轮盘效果的实现方法。
...
【技术特征摘要】
1.一种可视化大屏多层轮盘效果的实现方法，其特征是包括：
2.根据权利要求1所述的一种可视化大屏多层轮盘效果的实现方法，其特征是步骤s1中通过前端获取用户上传的轮盘配置信息，包括：在前端页面中，通过表单和文件上传功能，选择或输入轮盘配置信息，使用javascript编写逻辑，获取用户输入的轮盘配置信息，并将轮盘配置信息整理成一个json对象。
3.根据权利要求1或2所述的一种可视化大屏多层轮盘效果的实现方法，其特征是步骤s1中验证用户上传的轮盘配置信息，包括：
4.根据权利要求1所述的一种可视化大屏多层轮盘效果的实现方法，其特征是步骤s2中，具体为：
5.根据权利要求1所述的一种可视化大屏多层轮...
【专利技术属性】
技术研发人员：杨兴，李文路，马玉玺，郑孝青，刘圣楠，
申请(专利权)人：智慧泉城智能科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。