一种动态演示界面的加载方法及系统技术方案

本发明专利技术公开了一种动态演示界面的加载方法及系统，通过处理器启动计算机程序根据界面布局参数读取用户界面所需加载的图像；处理器按照界面布局参数中各个图像在用户界面上的相对位置信息和显示区间的大小进行界面组装成为第一用户界面；对第一用户界面进行边缘过渡得到第二用户界面；根据显示器屏幕的尺寸适配第二用户界面；无需精确的计算并指明UI界面中各个图片资源位置偏移量，使用户界面上各个图像组件的边缘衔接更加自然，有效的减少了动态拼接而成的用户界面的图像边缘的撕裂问题；以过渡拼接图像的方法消除了拼接处的不自然等现象，使得图像显示完全度高、图像失真度较小，适应能力好，提高了用户体验。

A loading method and system of dynamic demonstration interface

【技术实现步骤摘要】
一种动态演示界面的加载方法及系统
本公开涉及人机交互技术、界面数据加载
，具体涉及一种动态演示界面的加载方法及系统。
技术介绍
在移动终端、物联网终端显示设备、触摸屏等各种终端(例如，平板电脑、手机、智能家居、导航定位器、订餐终端、多媒体播放器等)的UI用户界面演示方面，一般根据各种终端自身的显示功能进行UI界面的演示，或者是通过服务器设备的模拟器设备进行演示，然后投影到UI用户界面演示；目前存在着一系列的问题，例如服务器设备的模拟器设备进行演示时，屏幕大小和显示色彩都与终端设备本身的属性和设备配置有关；目前的技术在进行UI用户界面的加载时一般对整个UI用户界面进行渲染，需要根据不同的用户界面转换状态的数量，依次预存相同数量的UI模板，因此存储和渲染所需要的计算机存储和计算资源都需要很大，不利于中小型的设备进行显示，而且静态的UI模板如果直接在终端设备上显示，通常是如果不经过人工调整，会出现图像撕裂、图像显示不完全、图像失真等问题，非常影响用户体验和实际的使用，严重的情况下甚至无法使用产品功能，适应性差。
技术实现思路
本公开提供一种动态演示界面的加载方法及系统，通过处理器启动计算机程序根据界面布局参数读取用户界面所需加载的图像；处理器按照界面布局参数中各个图像在用户界面上的相对位置信息和显示区间的大小进行界面组装成为第一用户界面；对第一用户界面进行边缘过渡得到第二用户界面；根据显示器屏幕的尺寸适配第二用户界面；进行界面渲染并绘制第二用户界面从而在显示器中显示出第二用户界面。本公开的目的是针对上述问题，提供一种动态演示界面的加载方法及系统，加载方法依赖于终端设备，所述终端设备包括显示器、存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，计算机程序中包括所需加载的图像和界面布局参数；界面布局参数为用户界面所需要的图像在用户界面上的相对位置信息(即各个图像在用户界面上的相对位置)和显示区间的大小(即各个图像在用户界面上的所占据显示区间的大小)、用户界面的切换状态转换；用户界面的切换状态转换为从一个用户界面到另一个界面的参数；所述加载方法包括以下步骤：S100：处理器启动计算机程序根据界面布局参数读取用户界面所需加载的图像；S200：处理器按照界面布局参数中各个图像在用户界面上的相对位置信息和显示区间的大小进行界面组装成为第一用户界面；S300：对第一用户界面进行边缘过渡得到第二用户界面；S400：根据显示器屏幕的尺寸适配第二用户界面；S500：进行界面渲染并绘制第二用户界面从而在显示器中显示出第二用户界面。进一步地，在S200中，处理器按照界面布局参数中各个图像在用户界面上的相对位置信息和显示区间的大小进行界面组装成为第一用户界面的方法包括以下步骤：S201：处理器读取所需加载的图像；S202：将所需加载的图像按照相对位置信息加载到用户界面的显示区间的大小区域中；S203：得到第一用户界面。进一步地，在S300中，对第一用户界面进行边缘过渡得到第二用户界面的方法包括以下步骤：以I表示第一用户界面，Φ为第一用户界面中已经加载的图像区域，Ω为第一用户界面中除边界外的空缺区域，为第一用户界面中按照界面布局参数的各个图像的边界，p为边界上过渡值最大的像素点，Ψp为以p点为中心的矩形域，np为p点与正交的单位向量；S301：根据界面布局参数为用户界面所需要的图像在用户界面上的相对位置信息和显示区间的大小标记出边界S302：计算边界上所有像素点的过渡值：对于边界上的任意一个像素点p，以p点为中心确定矩形域Ψp，则p点的过渡值P(p)计算方式如下：P(p)＝C(p)*D(p)；其中，C(p)为置信度，其定义如下:|Ψp|为矩形域内像素点总数；C(p)的初始取值如下：对于Ω中的所有像素点，令C(p)＝0，而对于Φ中的所有像素点，令C(p)＝1；D(p)为像素的数据项，定义为：其中，α为像素值；np是在p点与边界正交的单位向量；表示在p点的梯度向量，即颜色变化最大的方向；像素的数据项能够沿着梯度向量方向进行平滑过渡，因为在梯度向量方向，像素的数据项取值最大，而C(p)在靠近p点为中心时值最小，从而使过渡值也相应的小；所以在沿着梯度向量方向平滑过渡时，从而抑制第一用户界面的噪点，从而使第一用户界面中的各个图像边缘的纹理呈现平滑的连续性；S303：以过渡值最大的像素点为中心构建过渡区块Ψp，并在第一用户界面中已经加载的图像区域Φ中扫描匹配模块Ψq：扫描Ψp与最相近的模块Ψ′q，即是欧氏距离最小的模块，即：Ψ′q＝argmind(Ψp,Ψq)；其中，欧氏距离为i、j分别为模块(Ψp、Ψq)中像素的横纵坐标值；S304：更新置信度：C(p)＝C(q')q'∈Ψp∩Ω,q'≠q；S305：将Ψ′q中相应的像素点复制到Ψp中；S306：迭代执行步骤S302到S305，直到边界上所有像素点都已经进行边缘过渡停止迭代；从而对第一用户界面进行边缘过渡得到了第二用户界面。进一步地，在S400中，根据显示器屏幕的尺寸适配第二用户界面的方法为：等比例的缩放第二用户界面为终端设备的显示器屏幕的尺寸大小(屏幕宽高大小)。进一步地，在S500中，进行界面渲染并绘制第二用户界面从而在显示器中显示出第二用户界面的方法为：在平板电脑、手机、智能家居、导航定位器、订餐终端、多媒体播放器中任意一种的显示器中显示输出第二用户界面。本专利技术还提供了一种动态演示界面的加载系统，所述系统包括：存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序运行在以下系统的单元中：图像读取单元，用于处理器启动计算机程序根据界面布局参数读取用户界面所需加载的图像；界面组装单元，用于处理器按照界面布局参数中各个图像在用户界面上的相对位置信息和显示区间的大小进行界面组装成为第一用户界面；边缘过渡单元，用于对第一用户界面进行边缘过渡得到第二用户界面；尺寸适配单元，用于根据显示器屏幕的尺寸适配第二用户界面；显示输出单元，用于进行界面渲染并绘制第二用户界面从而在显示器中显示出第二用户界面。本公开的有益效果为：本专利技术公开了一种动态演示界面的加载方法，无需精确的计算并指明UI界面中各个图片资源位置偏移量，使用户界面上各个图像组件的边缘衔接更加自然，有效的减少了动态拼接而成的用户界面的图像边缘的撕裂问题；以过渡拼接图像的方法消除了拼接处的不自然等现象，使得图像显示完全度高、图像失真度较小，适应能力好，提高了用户体验。附图说明通过对结合附图所示出的实施方式进行详细说明，本公开的上述以及其他特征将更加明显，本公开附图中相同的参考标号表示相同或相似的元素，显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，本文档来自技高网...

【技术保护点】
1.一种动态演示界面的加载方法，其特征在于，所述方法包括以下步骤：/nS100：处理器启动计算机程序根据界面布局参数读取用户界面所需加载的图像；/nS200：处理器按照界面布局参数中各个图像在用户界面上的相对位置信息和显示区间的大小进行界面组装成为第一用户界面；/nS300：对第一用户界面进行边缘过渡得到第二用户界面；/nS400：根据显示器屏幕的尺寸适配第二用户界面；/nS500：进行界面渲染并绘制第二用户界面从而在显示器中显示出第二用户界面。/n

【技术特征摘要】
1.一种动态演示界面的加载方法，其特征在于，所述方法包括以下步骤：
S100：处理器启动计算机程序根据界面布局参数读取用户界面所需加载的图像；
S200：处理器按照界面布局参数中各个图像在用户界面上的相对位置信息和显示区间的大小进行界面组装成为第一用户界面；
S300：对第一用户界面进行边缘过渡得到第二用户界面；
S400：根据显示器屏幕的尺寸适配第二用户界面；
S500：进行界面渲染并绘制第二用户界面从而在显示器中显示出第二用户界面。


2.根据权利要求1所述的一种动态演示界面的加载方法，其特征在于，在S200中，处理器按照界面布局参数中各个图像在用户界面上的相对位置信息和显示区间的大小进行界面组装成为第一用户界面的方法包括以下步骤：
S201：读取所需加载的图像；
S202：将所需加载的图像按照相对位置信息加载到用户界面的显示区间的大小区域中；
S203：得到第一用户界面。


3.根据权利要求1所述的一种动态演示界面的加载方法，其特征在于，在S300中，对第一用户界面进行边缘过渡得到第二用户界面的方法包括以下步骤：
以I表示第一用户界面，Φ为第一用户界面中已经加载的图像区域，Ω为第一用户界面中除边界外的空缺区域，为第一用户界面中按照界面布局参数的各个图像的边界，p为边界上过渡值最大的像素点，Ψp为以p点为中心的矩形域，np为p点与正交的单位向量；
S301：根据界面布局参数为用户界面所需要的图像在用户界面上的相对位置信息和显示区间的大小标记出边界
S302：计算边界上所有像素点的过渡值：对于边界上的任意一个像素点p，以p点为中心确定矩形域Ψp，则p点的过渡值P(p)计算式为：P(p)＝C(p)*D(p)；
其中，C(p)为置信度定义为:|Ψp|为矩形域内像素点总数；
C(p)的初始取值为:对于Ω中的所有像素点C(...

【专利技术属性】
技术研发人员：卢仕辉，
申请(专利权)人：中山市奥珀金属制品有限公司，
类型：发明
国别省市：广东;44