一种适配不同大屏分辨率的前端投屏方法技术

本发明专利技术公开了一种适配不同大屏分辨率的前端投屏方法，属于前端大屏开发领域，本发明专利技术要解决的技术问题为如何在开发时按照效果图进行1:1的开发，且无需考虑不同的显示器的分辨率，适应多变的大屏开发需求，技术方案为：该方法是通过定义配置文件，并在配置文件中配置分辨率，经统一处理函数handleInitAuto()进行等比放缩操作后，投放到显示器进行高度还原；具体步骤如下：S1、加载配置文件中预定义的高度和宽度；S2、通过统一处理函数handleInitAuto()获取实际屏幕的宽度和高度；S3、通过统一处理函数handleInitAuto()计算出预定义宽度和实际宽度的比值wScale以及预定义高度和实际高度比值hScale；S4、通过统一处理函数handleInitAuto()动态的对实际宽高进行等比放缩操作；S5、将放缩完成的效果投放到实际的屏幕中。

【技术实现步骤摘要】
一种适配不同大屏分辨率的前端投屏方法
本专利技术涉及前端大屏开发
，具体地说是一种适配不同大屏分辨率的前端投屏方法。
技术介绍
随着WEB前端技术这几年飞速的发展以及浏览器对页面渲染的效率越来越快，用户群体对数据可视化的需求越来越强烈，大屏可视化的项目越来越多，同时随着用户硬件设备的快速迭代，大屏设备做的越来越大，分辨率越来越高，对前端呈现的效果要求也越来越高；并且定制化的大屏可视化项目和通用性大屏可视化的项目也是越来越多，怎么把一个大屏可视化的项目部署到不同的设备场景中是前端开发越来越需要解决的问题，使用自适应进行开发的话，显然效果不太好，没法做到1:1的效果还原，只能适用于还原度要求不高的项目，对这种按实际屏幕设计效果图的项目还原度并不友好。在大屏可视化开发方面，无法避开的一个焦点就是显示器的分辨率，例如中台业务系统开发可以使用响应式布局(ResponsiveWebDesign),或者成熟的响应式布局框架，例如Bootstrap框架。由于大屏开发定制化要求较高，像响应式布局中的媒体查询(MediaQuery)和流布局(Flui本文档来自技高网...

【技术保护点】
1.一种适配不同大屏分辨率的前端投屏方法，其特征在于，该方法是通过定义配置文件，并在配置文件中配置分辨率，经统一处理函数handleInitAuto()进行等比放缩操作后，投放到显示器进行高度还原；具体步骤如下：/nS1、加载配置文件中预定义的高度和宽度；/nS2、通过统一处理函数handleInitAuto()获取实际屏幕的宽度和高度；/nS3、通过统一处理函数handleInitAuto()计算出预定义宽度和实际宽度的比值wScale以及预定义高度和实际高度比值hScale；/nS4、通过统一处理函数handleInitAuto()动态的对实际宽高进行等比放缩操作；/nS5、将放缩完成的效...

【技术特征摘要】
1.一种适配不同大屏分辨率的前端投屏方法，其特征在于，该方法是通过定义配置文件，并在配置文件中配置分辨率，经统一处理函数handleInitAuto()进行等比放缩操作后，投放到显示器进行高度还原；具体步骤如下：
S1、加载配置文件中预定义的高度和宽度；
S2、通过统一处理函数handleInitAuto()获取实际屏幕的宽度和高度；
S3、通过统一处理函数handleInitAuto()计算出预定义宽度和实际宽度的比值wScale以及预定义高度和实际高度比值hScale；
S4、通过统一处理函数handleInitAuto()动态的对实际宽高进行等比放缩操作；
S5、将放缩完成的效果投放到实际的屏幕中。


2.根据权利要求1所述的适配不同大屏分辨率的前端投屏方法，其特征在于，所述步骤S1中加载配置文件中预定义的高度和宽度具体如下：
S101、通过Axios.js动态的获取配置文件中配置信息；
S102、在配置文件中进行对象的定义，对象的属性为width和height，对象的属性值默认为像素。


3.根据权利要求2所述的适配不同大屏分辨率的前端投屏方法，其特征在于，所述配置文件的定义使用JSON格式。


4.根据权利要求1所述的适配不同大屏分辨率的前端投屏方法，其特征在于，所述步骤S4中通过统一处理函数handleInitAuto()动态的对实际宽高进行等比放缩操作具体如下：
S401、动态获取预定义宽度值和高度值；
S402、动态设置容器的宽度值和高度值；
S403、使用Jquery或JavaScript改变容器的宽度值和高度值。


5.根据权利要求4所述的适配不同大屏分辨率的前端投屏方法，其特征在于，所述容器设置在Body里面，容器作为渲染的入口，默认有自己的宽高；容器的宽高为效果图的宽高，同时为容器配置的样式为main；
容器内包含一层子容器，子容器的宽高与容器的宽高保持一致。


6.根据权利要求1所述的适配不同大屏分辨率的前端投屏方法，其特征在于，所述统一处理函数handleInitAuto()接受的参数为对象形式，对象有五个属性，分别为预定义宽度、预定义高度、容器样式、子容器样式和放缩的方式；
其中，放缩的方式默认是一致性放缩...

【专利技术属性】
技术研发人员：刘明鑫，赵胜男，
申请(专利权)人：智慧泉城智能科技有限公司，
类型：发明
国别省市：山东;37