一种动态演示界面的加载方法及系统与流程
本公开涉及人机交互技术、界面数据加载技术领域，具体涉及一种动态演示界面的加载方法及系统。
背景技术：
在移动终端、物联网终端显示设备、触摸屏等各种终端(例如，平板电脑、手机、智能家居、导航定位器、订餐终端、多媒体播放器等)的ui用户界面演示方面，一般根据各种终端自身的显示功能进行ui界面的演示，或者是通过服务器设备的模拟器设备进行演示，然后投影到ui用户界面演示；目前存在着一系列的问题，例如服务器设备的模拟器设备进行演示时，屏幕大小和显示色彩都与终端设备本身的属性和设备配置有关；
目前的技术在进行ui用户界面的加载时一般对整个ui用户界面进行渲染，需要根据不同的用户界面转换状态的数量，依次预存相同数量的ui模板，因此存储和渲染所需要的计算机存储和计算资源都需要很大，不利于中小型的设备进行显示，而且静态的ui模板如果直接在终端设备上显示，通常是如果不经过人工调整，会出现图像撕裂、图像显示不完全、图像失真等问题，非常影响用户体验和实际的使用，严重的情况下甚至无法使用产品功能，适应性差。
技术实现要素：
本公开提供一种动态演示界面的加载方法及系统，通过处理器启动计算机程序根据界面布局参数读取用户界面所需加载的图像；处理器按照界面布局参数中各个图像在用户界面上的相对位置信息和显示区间的大小进行界面组装成为第一用户界面；对第一用户界面进行边缘过渡得到第二用户界面；根据显示器屏幕的尺寸适配第二用户界面；进行界面渲染并绘制第二用户界面从而在显示器中显示出第二用户界面。
本公开的目的是针对上述问题，提供一种动态演示界面的加载方法及系统，加载方法依赖于终端设备，所述终端设备包括显示器、存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，计算机程序中包括所需加载的图像和界面布局参数；界面布局参数为用户界面所需要的图像在用户界面上的相对位置信息(即各个图像在用户界面上的相对位置)和显示区间的大小(即各个图像在用户界面上的所占据显示区间的大小)、用户界面的切换状态转换；用户界面的切换状态转换为从一个用户界面到另一个界面的参数；
所述加载方法包括以下步骤：
s100：处理器启动计算机程序根据界面布局参数读取用户界面所需加载的图像；
s200：处理器按照界面布局参数中各个图像在用户界面上的相对位置信息和显示区间的大小进行界面组装成为第一用户界面；
s300：对第一用户界面进行边缘过渡得到第二用户界面；
s400：根据显示器屏幕的尺寸适配第二用户界面；
s500：进行界面渲染并绘制第二用户界面从而在显示器中显示出第二用户界面。
进一步地，在s200中，处理器按照界面布局参数中各个图像在用户界面上的相对位置信息和显示区间的大小进行界面组装成为第一用户界面的方法包括以下步骤：
s201：处理器读取所需加载的图像；
s202：将所需加载的图像按照相对位置信息加载到用户界面的显示区间的大小区域中；
s203：得到第一用户界面。
进一步地，在s300中，对第一用户界面进行边缘过渡得到第二用户界面的方法包括以下步骤：
以i表示第一用户界面，φ为第一用户界面中已经加载的图像区域，ω为第一用户界面中除边界外的空缺区域，
s301：根据界面布局参数为用户界面所需要的图像在用户界面上的相对位置信息和显示区间的大小标记出边界
s302：计算边界上所有像素点的过渡值：对于边界
其中，c(p)为置信度，其定义如下:
c(p)的初始取值如下：对于ω中的所有像素点，令c(p)＝0，而对于φ中的所有像素点，令c(p)＝1；
d(p)为像素的数据项，定义为：
其中，α为像素值；np是在p点与边界
像素的数据项能够沿着梯度向量方向进行平滑过渡，因为在梯度向量方向，像素的数据项取值最大，而c(p)在靠近p点为中心时值最小，从而使过渡值也相应的小；所以在沿着梯度向量方向平滑过渡时，从而抑制第一用户界面的噪点，从而使第一用户界面中的各个图像边缘的纹理呈现平滑的连续性；
s303：以过渡值最大的像素点为中心构建过渡区块ψp，并在第一用户界面中已经加载的图像区域φ中扫描匹配模块ψq：扫描ψp与最相近的模块ψ′q，即是欧氏距离最小的模块，即：ψ′q＝argmind(ψp,ψq)；其中，欧氏距离为
s304：更新置信度：c(p)＝c(q')
s305：将ψ′q中相应的像素点复制到ψp中；
s306：迭代执行步骤s302到s305，直到边界上所有像素点都已经进行边缘过渡停止迭代；从而对第一用户界面进行边缘过渡得到了第二用户界面。
进一步地，在s400中，根据显示器屏幕的尺寸适配第二用户界面的方法为：等比例的缩放第二用户界面为终端设备的显示器屏幕的尺寸大小(屏幕宽高大小)。
进一步地，在s500中，进行界面渲染并绘制第二用户界面从而在显示器中显示出第二用户界面的方法为：在平板电脑、手机、智能家居、导航定位器、订餐终端、多媒体播放器中任意一种的显示器中显示输出第二用户界面。
本发明还提供了一种动态演示界面的加载系统，所述系统包括：存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序运行在以下系统的单元中：
图像读取单元，用于处理器启动计算机程序根据界面布局参数读取用户界面所需加载的图像；
界面组装单元，用于处理器按照界面布局参数中各个图像在用户界面上的相对位置信息和显示区间的大小进行界面组装成为第一用户界面；
边缘过渡单元，用于对第一用户界面进行边缘过渡得到第二用户界面；
尺寸适配单元，用于根据显示器屏幕的尺寸适配第二用户界面；
显示输出单元，用于进行界面渲染并绘制第二用户界面从而在显示器中显示出第二用户界面。
本公开的有益效果为：本发明公开了一种动态演示界面的加载方法，无需精确的计算并指明ui界面中各个图片资源位置偏移量，使用户界面上各个图像组件的边缘衔接更加自然，有效的减少了动态拼接而成的用户界面的图像边缘的撕裂问题；以过渡拼接图像的方法消除了拼接处的不自然等现象，使得图像显示完全度高、图像失真度较小，适应能力好，提高了用户体验。
附图说明
通过对结合附图所示出的实施方式进行详细说明，本公开的上述以及其他特征将更加明显，本公开附图中相同的参考标号表示相同或相似的元素，显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图，在附图中：
图1所示为本公开的一种动态演示界面的加载方法的流程图；
图2所示为本公开实施方式的一种动态演示界面的加载系统。
具体实施方式
以下将结合实施例和附图对本公开的构思、具体结构及产生的技术效果进行清楚、完整的描述，以充分地理解本公开的目的、方案和效果。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。
如图1所示为根据本公开的一种动态演示界面的加载方法的流程图，下面结合图1来阐述根据本公开的实施方式的方法。
本公开提出一种动态演示界面的加载方法，加载方法依赖于终端设备，所述终端设备包括显示器、存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，计算机程序中包括所需加载的图像和界面布局参数；界面布局参数为用户界面所需要的图像在用户界面上的相对位置信息和显示区间的大小、用户界面的切换状态转换；用户界面的切换状态转换为从一个用户界面到另一个界面的参数；
所述加载方法包括以下步骤：
s100：处理器启动计算机程序根据界面布局参数读取用户界面所需加载的图像；
s200：处理器按照界面布局参数中各个图像在用户界面上的相对位置信息和显示区间的大小进行界面组装成为第一用户界面；
s300：对第一用户界面进行边缘过渡得到第二用户界面；
s400：根据显示器屏幕的尺寸适配第二用户界面；
s500：进行界面渲染并绘制第二用户界面从而在显示器中显示出第二用户界面。
进一步地，在s200中，处理器按照界面布局参数中各个图像在用户界面上的相对位置信息和显示区间的大小进行界面组装成为第一用户界面的方法包括以下步骤：
s201：处理器读取所需加载的图像；
s202：将所需加载的图像按照相对位置信息加载到用户界面的显示区间的大小区域中；
s203：得到第一用户界面。
进一步地，在s300中，对第一用户界面进行边缘过渡得到第二用户界面的方法包括以下步骤：
以i表示第一用户界面，φ为第一用户界面中已经加载的图像区域，ω为第一用户界面中除边界外的空缺区域，
s301：根据界面布局参数为用户界面所需要的图像在用户界面上的相对位置信息和显示区间的大小标记出边界
s302：计算边界上所有像素点的过渡值：对于边界
其中，c(p)为置信度，其定义如下:
c(p)的初始取值如下：对于ω中的所有像素点，令c(p)＝0，而对于φ中的所有像素点，令c(p)＝1；
d(p)为像素的数据项，定义为：
其中，α为像素值；np是在p点与边界
像素的数据项能够沿着梯度向量方向进行平滑过渡，因为在梯度向量方向，像素的数据项取值最大，而c(p)在靠近p点为中心时值最小，从而使过渡值也相应的小；所以在沿着梯度向量方向平滑过渡时，从而抑制第一用户界面的噪点，从而使第一用户界面中的各个图像边缘的纹理呈现平滑的连续性；
s303：以过渡值最大的像素点为中心构建过渡区块ψp，并在第一用户界面中已经加载的图像区域φ中扫描匹配模块ψq：扫描ψp与最相近的模块ψ′q，即是欧氏距离最小的模块，即：ψ′q＝argmind(ψp,ψq)；其中，欧氏距离为
s304：更新置信度：c(p)＝c(q')
s305：将ψ′q中相应的像素点复制到ψp中；
s306：迭代执行步骤s302到s305，直到边界上所有像素点都已经进行边缘过渡停止迭代；从而对第一用户界面进行边缘过渡得到了第二用户界面。
进一步地，在s400中，根据显示器屏幕的尺寸适配第二用户界面的方法为：等比例的缩放第二用户界面为终端设备的显示器屏幕的尺寸大小(屏幕宽高大小)。
进一步地，在s500中，进行界面渲染并绘制第二用户界面从而在显示器中显示出第二用户界面的方法为：在平板电脑、手机、智能家居、导航定位器、订餐终端、多媒体播放器中任意一种的显示器中显示输出第二用户界面。
本公开的实施例提供的一种动态演示界面的加载系统，如图2所示为本公开的一种动态演示界面的加载系统结构图，该实施例的一种动态演示界面的加载系统包括：处理器、存储器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述一种动态演示界面的加载系统实施例中的步骤。
所述系统包括：存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序运行在以下系统的单元中：
图像读取单元，用于处理器启动计算机程序根据界面布局参数读取用户界面所需加载的图像；
界面组装单元，用于处理器按照界面布局参数中各个图像在用户界面上的相对位置信息和显示区间的大小进行界面组装成为第一用户界面；
边缘过渡单元，用于对第一用户界面进行边缘过渡得到第二用户界面；
尺寸适配单元，用于根据显示器屏幕的尺寸适配第二用户界面；
显示输出单元，用于进行界面渲染并绘制第二用户界面从而在显示器中显示出第二用户界面。
所述一种动态演示界面的加载系统可以运行于桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备中。所述一种动态演示界面的加载系统可运行的系统可包括，但不仅限于，处理器、存储器。本领域技术人员可以理解，所述例子仅仅是一种动态演示界面的加载系统的示例，并不构成对一种动态演示界面的加载系统的限定，可以包括比例子更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述一种动态演示界面的加载系统还可以包括输入输出设备、网络接入设备、总线等。所称处理器可以是中央处理单元(centralprocessingunit，cpu)，还可以是其他通用处理器、数字信号处理器(digitalsignalprocessor，dsp)、专用集成电路(applicationspecificintegratedcircuit，asic)、现场可编程门阵列(field-programmablegatearray，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，所述处理器是所述一种动态演示界面的加载系统运行系统的控制中心，利用各种接口和线路连接整个一种动态演示界面的加载系统可运行系统的各个部分。
所述存储器可用于存储所述计算机程序和/或模块，所述处理器通过运行或执行存储在所述存储器内的计算机程序和/或模块，以及调用存储在存储器内的数据，实现所述一种动态演示界面的加载系统的各种功能。所述存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器可以包括高速随机存取存储器，还可以包括非易失性存储器，例如硬盘、内存、插接式硬盘，智能存储卡(smartmediacard,smc)，安全数字(securedigital,sd)卡，闪存卡(flashcard)、至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。
尽管本公开的描述已经相当详尽且特别对几个所述实施例进行了描述，但其并非旨在局限于任何这些细节或实施例或任何特殊实施例，而是应当将其视作是通过参考所附权利要求考虑到现有技术为这些权利要求提供广义的可能性解释，从而有效地涵盖本公开的预定范围。此外，上文以发明人可预见的实施例对本公开进行描述，其目的是为了提供有用的描述，而那些目前尚未预见的对本公开的非实质性改动仍可代表本公开的等效改动。
- 还没有人留言评论。精彩留言会获得点赞！