CN115509524A - 基于xaml的ui图像显示方法、终端以及存储介质 - Google Patents

Abstract

本发明提供一种基于XAML的UI图像显示方法、终端以及存储介质，该基于XAML的UI图像显示方法包括：S101：基于XAML代码生成位图，存储位图；S102：基于控件显示存储的位图，并在控件的业务逻辑改变后，判断位图是否满足显示要求，若是，则根据控件进行位图显示，若否，则执行S101。本发明提高了UI界面的展示效果，降低了学习难度，并且通过预存控件所需位图的方式，大大降低了UI界面显示所占用的运算资源，提升了显示速度和设备适应性，满足了用户需求。

Description

基于XAML的UI图像显示方法、终端以及存储介质

技术领域

本发明涉及UI界面显示领域，尤其涉及一种基于XAML的UI图像显示方法、终端以及存储介质。

背景技术

当前的工业控制环境，很多用于管理控制机器的智能系统搭载的硬件都是经过专用化改造的，所以很多情况下，会出现可供使用的运算资源有限的情况。然而智能系统UI界面的生动、直观展示又是一个重要组成部分。

在当前Windows系统下，用于处理该问题的手段技术有GDI、WPF、浏览器等。因为工业环境的智能设备更多的是重运算而轻渲染，所以，当前能使用的技术仅有GDI。

但是，GDI技术学习周期长，技术特点多，如果要呈现出复杂图形，要求的算法复杂，且代码量大，还有些特殊的图形几乎无法绘制，难以满足实际需求。

发明内容

为了克服现有技术的不足，本发明提出一种基于XAML的UI图像显示方法、终端以及存储介质，以XAML代码的方式绘制UI界面所需的图像，相对于GDI技术操作简单、代码量少，且能够用于绘制各种特殊图形，提高了UI界面的展示效果，降低了学习难度，并且通过预存控件所需位图的方式，大大降低了UI界面显示所占用的运算资源，提升了显示速度和设备适应性，满足了用户需求。

为解决上述问题，本发明采用的一个技术方案为：一种基于XAML的UI图像显示方法，所述基于XAML的UI图像显示方法包括：S101：基于控件获取图形的XAML代码，根据所述XAML代码生成位图，存储所述位图；S102：基于控件显示存储的位图，并在控件的业务逻辑改变后，判断位图是否满足显示要求，若是，则根据所述控件进行位图显示，若否，则执行S101。

进一步地，所述基于控件获取图形的XAML代码的步骤具体包括：获取待加载的控件的类型以及呈现内容，判断所述类型、呈现内容是否满足第一预设条件；若是，则在加载控件时，获取所述控件对应的图形需求，基于所述图形需求、语法规则组合原始图形XAML代码形成图形的XAML代码；若否，则在加载控件前，根据所述控件编辑原始图形XAML代码，根据所述控件对应的图形需求、语法规则组合原始图形XAML代码形成图形的XAML代码。

进一步地，所述根据所述XAML代码生成位图的步骤具体包括：加载WPF引擎，通过所述WPF引擎将所述XAML代码转换为位图，并在控件的类型为非规则控件时，利用颜色标示所述位图中不显示图像的区域。

进一步地，所述利用颜色标示所述位图中不显示图像的区域的步骤之后还包括：在存储所述位图后，去除所述位图中的颜色标示区域，将剩余区域确定为控件的呈现区域，加载所述控件。

进一步地，所述业务逻辑包括控件大小、控件状态、呈现区域中的至少一种。

进一步地，所述判断位图是否满足显示要求的步骤具体包括：获取被改变的业务逻辑，基于业务逻辑、控件类型、呈现内容判断存储的位图是否满足显示要求。

进一步地，所述根据所述控件进行位图显示的步骤具体包括：根据改变后的业务逻辑选择对应的位图进行显示或调整显示的位图的大小、位置。

进一步地，所述根据所述控件进行位图显示的步骤之后还包括：获取UI界面上的未显示内容，通过图形设备接口绘制所述未显示内容。

基于相同的发明构思，本发明还提出一种智能终端，所述智能终端包括处理器、存储器，所述存储器存储有计算机程序，所述处理器与所述存储器通信连接，所述处理器通过所述计算机程序执行如上所述的基于XAML的UI图像显示方法。

基于相同的发明构思，本发明还提出一种计算机可读存储介质，所述计算机可读存储介质存储有程序数据，所述程序数据被用于执行如上所述的基于XAML的UI图像显示方法。

相比现有技术，本发明的有益效果在于：以XAML代码的方式绘制UI界面所需的图像，相对于GDI技术操作简单、代码量少，且能够用于绘制各种特殊图形，提高了UI界面的展示效果，降低了学习难度，并且通过预存控件所需位图的方式，大大降低了UI界面显示所占用的运算资源，提升了显示速度和设备适应性，满足了用户需求。

附图说明

图1为本发明基于XAML的UI图像显示方法一实施例的流程图；

图2为本发明智能终端一实施例的结构图；

图3为本发明计算机可读存储介质一实施例的结构图。

具体实施方式

以下通过特定的具体实例说明本申请的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本申请的其他优点与功效。本申请还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本申请的精神下进行各种修饰或改变。需说明的是，通常在此处附图中描述和示出的各本公开实施例在不冲突的前提下，可相互组合，其中的结构部件或功能模块可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本公开保护的范围。

在本申请公开使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本公开。在本公开和所附权利要求书中所使用的单数生式的“一种”、“所述”和“该”也旨在包括多数生式，除非上下文清楚地表示其它含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

请参阅图1，其中，图1为本发明基于XAML的UI图像显示方法一实施例的流程图。结合图1对本发明基于XAML的UI图像显示方法进行说明。

在本实施例中，执行基于XAML的UI图像显示方法的设备为智能终端，该智能终端可以为手机、平板电脑、笔记本电脑、服务器以及其他能够进行UI界面展示的设备。

在本实施例中，智能终端执行的基于XAML的UI图像显示方法包括：

S101：基于控件获取图形的XAML代码，根据XAML代码生成位图，存储位图。

在本实施例中，基于控件获取图形的XAML代码的步骤具体包括：获取待加载的控件的类型以及呈现内容，判断类型、呈现内容是否满足第一预设条件；若是，则在加载控件时，获取控件对应的图形需求，基于图形需求、语法规则组合原始图形XAML代码形成图形的XAML代码；若否，则在加载控件前，根据控件编辑原始图形XAML代码，根据控件对应的图形需求、语法规则组合原始图形XAML代码形成图形的XAML代码。其中，图形需求包括呈现区域位置、形状、呈现内容等需求。

在本实施例中，控件的类型包括非矩形规则控件、矩形规则控件以及没有非矩形呈现要求的控件，呈现内容包括图片、动画。若待加载的控件的类型为不存在非矩形呈现要求的控件，且呈现的内容为图片，则确定满足第一预设条件。其中，以及没有非矩形呈现要求的控件包括外观不受控件状态变化而改变的控件、外观受状态变化而改变的控件、外观受控件大小改变的控件。

在本实施例中，过WPF编辑器或SVG浏览器等相关工具对输入的XAML代码进行调试编辑得到原始图形XAML代码。该原始图形XAML代码可以预存在的智能终端，通过预存的方式提高图形的XAML代码的生成效率。

在一个具体的实施例中，若符合第一预设条件，则在加载控件时，根据该控件对应的实际图形需求以及XAML语法规则以及动态组合的形式对原始图形XAML代码进行语法拼接得到图形的XAML代码。

在另一个具体的实施例中，若确定不符合第一预设条件，则不先加载控件，先获取控件对应的图形需求确定需要编辑的原始图形XAML代码，再根据该控件对应的实际图形需求以及XAML语法规则以及动态组合的形式对原始图形XAML代码进行语法拼接得到图形的XAML代码。

在上述实施例中，为了进一步减少计算量和提高图形呈现效率，在获取图形的XAML代码时，确保获取控件在实际展示时，所能展示的所有图形的XAML代码。并且，在生成图形的XAML代码时，还判断是否已经存储有该图形，若是，则不生成该图形的XAML代码。

在本实施例中，根据XAML代码生成位图的步骤具体包括：加载WPF引擎，通过WPF引擎将XAML代码转换为位图，并在控件的类型为非规则控件时，利用颜色标示位图中不显示图像的区域。其中，使用与位图显示图像区域不同的颜色标示不显示图像的区域。

进一步地，利用颜色标示位图中不显示图像的区域的步骤之后还包括：在存储位图后，去除位图中的颜色标示区域，将剩余区域确定为控件的呈现区域，加载控件。

在一个具体的实施例中，使用DrawingVisual(WPF引擎)或WPF呈现器，绘制出矢量图，并使用BmpBitmapEncoder将WPF矢量图转换成位图。

在本实施例中，存储位图时，生成每张位图的索引，将该索引以及位图存储在指定的存储位置。其中，可以存储在智能终端的内存中，也可以存储在智能终端连接的服务器、硬盘、云盘等存储控件中。

S102：基于控件显示存储的位图，并在控件的业务逻辑改变后，判断位图是否满足显示要求，若是，则根据控件进行位图显示，若否，则执行S101。

在本实施例中，根据控件的状态、显示需求等从存储的位图中选择对应状态下的位图进行显示。其中，位图可以为外观图片、照片、动画中的至少一种。

在本实施例中，业务逻辑包括控件大小、控件状态、呈现区域中的至少一种。其中，存储的位图与控件的业务逻辑、控件类型、呈现内容相对应。

在本实施例中，判断位图是否满足显示要求的步骤具体包括：获取被改变的业务逻辑，基于业务逻辑、控件类型、呈现内容判断存储的位图是否满足显示要求。

根据控件进行位图显示的步骤具体包括：根据改变后的业务逻辑选择对应的位图进行显示或调整显示的位图的大小、位置。

下面通过不同类型的控件在不同业务逻辑以及呈现内容下的图形显示过程对智能终端判断业务逻辑是否满足需求的具体过程进行描述。

在一个具体的实施例中，控件类型为没有非矩形要求的控件，其中，对于外观不受控件状态变化而改变的控件。在控件载入时执行S101。之后位图的呈现都是使用存储的位图(呈现的位图通过UI布局展示在屏幕上)。控件大小改变时。使用存储的图形进行放大或缩小呈现。对于外观受状态变化而改变的控件(状态包括禁用、可用、活动、非活动、鼠标经过、按下等等)，在控件载入时执行步骤S101生成出不同状态的外观图片。之后的呈现根据控件的状态不同从存储的图片使用对应状态的图片给予呈现。控件大小改变时，根据控件的状态从存储的图片使用对应状态的图片进行放大或缩放给予呈现。对于外观受控件大小改变的控件，在控件大小改变时，删除存储的图片，并执行S101生成出控件当前大小不同状态的外观图片并存储。之后的呈现根据控件的状态不同存储的图片使用对应状态的外观图片给予呈现。其中，上述三种控件在执行S101时，直接根据原始图形XAML代码生成图形的XAML代码。

在另一个具体的实施例中，控件的类型为非矩形不规则控件，在控件加载之前，执行S101。并且，生成图形的XAML代码时，通过该代码将不需要显示的区域颜色描述为与其他部分不会相同的颜色(Cx)。结合控件的实际需要生成并存储需要的照片。从存储的照片中将颜色(Cx)区域排除后，将得到一个无(Cx)颜色的非规则区域Region。将该Region作为控件的呈现区域，并保持直到其大小发生变化。呈现时，根据控件的状态不同从存储的照片中选择对应状态的照片给予呈现。当大小发生改变或呈现区域发生变化时，再次执行S101，从生成并存储的照片中选择相应的照片予以呈现。

在又一个具体的实施例中，呈现内容为动画时，对于类型为矩形规则控件的控件，在加载控件之前，执行S101，存储控件在各种状态下的动画对应的各帧照片。结合控件状态从存储中选择对应状态、对应帧的照片呈现。不同帧切换时，选择对应的照片进行呈现。

对于类型为非矩形不规则控件的控件，在加载控件之前，执行S101，并在生成图形的XAML代码时，通过该代码将不需要显示的区域颜色描述为与其他部分不会相同的颜色(Cx)。结合控件的实际需要生成并存储需要的照片。从存储的照片中将颜色(Cx)区域排除后，将得到一个无(Cx)颜色的非规则区域Region。将该Region作为控件的呈现区域，并将对应的照片呈现出来。不同帧切换时,重复获取控件的呈现区域，通过该呈现区域将切换后的帧数对应的照片呈现出来。

在本实施例中，根据控件进行位图显示的步骤之后还包括：获取UI界面上的未显示内容，通过图形设备接口绘制未显示内容。

具体的，对于需要实时变化且规则不确定需要显示的信息，例如：控件上的字符、数字等用于显示程序内部运行信息的内容,使用传统的GDI(图形设备接口)技术,在控件完成图形显示后，执行GDI的绘制。

本发明利用图形计算出控件所要呈现区域Region,控件大小改变时,必须重算(基于图形的像素点进行核对,对于属于镂空标记的颜色,给予去除,非镂空颜色将标记入Region对象中,作为控件在屏幕显示区域的一部分,如此控件的显示区域将变得可以自由编辑)。并且，为了减少重新生成照片的步骤，在控件载入时一次性将控件需要照片的生成完成。对于对呈现区域没有特别要求的控件,尽可能使用图片缩放来满足,生成时生成控件最大可能的小的照片,保证在缩放时,控件呈现达到不失真效果。综合考量控件对大小,状态,区域,动画需求的均衡，如显示动画的控件尽可能不支持大小变化重生成照片,不支持状态变化重新生成照片以降低控件大小；对显示区域有要求显示动画的控件,使每一帧动画的边界一致,使得控件大小改变时,重算一次控件区域Region既可；对显示区域有要求且状态有要求的控件,尽可能减少其大小改变的频次。对于同类型控件存储的照片,尽可能使用内存唯一化特性(相同的照片只生成和存储一次),使得同类控件使用的图片存储器只有一个,且相关生成照片步骤都仅有一次,做到照片公用率最大化。并且，在动画呈现时，尽可能控制动画的帧率,因为这仅仅是交互控件而非视频播放,所以动画足以说明信息即可。

基于相同的发明构思，本发明还提出一种智能终端，请参阅图2，图2为本发明智能终端一实施例的结构图，结合图2对本发明的智能终端进行具体说明。

在本实施例中，智能终端包括处理器、存储器，存储器存储有计算机程序，处理器与存储器通信连接，处理器通过计算机程序执行如权上述实施例所述的基于XAML的UI图像显示方法。

在一些实施例中，存储器可能包括但不限于高速随机存取存储器、非易失性存储器。例如一个或多个磁盘存储设备、闪存设备或其他非易失性固态存储设备。处理器可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(NetworkProcessor，简称NP)等；还可以是数字信号处理器(Digital Signal Processing，简称DSP)、专用集成电路(Application Specific Integrated Circuit，简称ASIC)、现场可编程门阵列(Field－Programmable Gate Array，简称FPGA)或者其他可编程功能器件、分立门或者晶体管功能器件、分立硬件组件。

基于相同的发明构思，本发明还提出一种计算机可读存储介质，请参阅图3，图3为本发明计算机可读存储介质一实施例的结构图，结合图3对本发明的计算机可读存储介质进行说明。

在本实施例中，计算机可读存储介质存储有程序数据，该程序数据被用于执行如上述实施例所述的基于XAML的UI图像显示方法。

其中，计算机可读存储介质可包括，但不限于，软盘、光盘、CD-ROM(紧致盘-只读存储器)、磁光盘、ROM(只读存储器)、RAM(随机存取存储器)、EPROM(可擦除可编程只读存储器)、EEPROM(电可擦除可编程只读存储器)、磁卡或光卡、闪存或适于存储机器可执行指令的其他类型的介质/机器可读介质。该计算机可读存储介质可以是未接入计算机设备的产品，也可以是已接入计算机设备使用的部件。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其他实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种基于XAML的UI图像显示方法，其特征在于，所述基于XAML的UI图像显示方法包括：

S101：基于控件获取图形的XAML代码，根据所述XAML代码生成位图，存储所述位图；

S102：基于控件显示存储的位图，并在控件的业务逻辑改变后，判断位图是否满足显示要求，若是，则根据所述控件进行位图显示，若否，则执行S101。

2.如权利要求1所述的基于XAML的UI图像显示方法，其特征在于，所述基于控件获取图形的XAML代码的步骤具体包括：

获取待加载的控件的类型以及呈现内容，判断所述类型、呈现内容是否满足第一预设条件；

若是，则在加载控件时，获取所述控件对应的图形需求，基于所述图形需求、语法规则组合原始图形XAML代码形成图形的XAML代码；

若否，则在加载控件前，根据所述控件编辑原始图形XAML代码，根据所述控件对应的图形需求、语法规则组合原始图形XAML代码形成图形的XAML代码。

3.如权利要求2所述的基于XAML的UI图像显示方法，其特征在于，所述根据所述XAML代码生成位图的步骤具体包括：

加载WPF引擎，通过所述WPF引擎将所述XAML代码转换为位图，并在控件的类型为非规则控件时，利用颜色标示所述位图中不显示图像的区域。

4.如权利要求3所述的基于XAML的UI图像显示方法，其特征在于，所述利用颜色标示所述位图中不显示图像的区域的步骤之后还包括：

在存储所述位图后，去除所述位图中的颜色标示区域，将剩余区域确定为控件的呈现区域，加载所述控件。

5.如权利要求1所述的基于XAML的UI图像显示方法，其特征在于，所述业务逻辑包括控件大小、控件状态、呈现区域中的至少一种。

6.如权利要求5所述的基于XAML的UI图像显示方法，所述判断位图是否满足显示要求的步骤具体包括：

获取被改变的业务逻辑，基于业务逻辑、控件类型、呈现内容判断存储的位图是否满足显示要求。

7.如权利要求1所述的基于XAML的UI图像显示方法，其特征在于，所述根据所述控件进行位图显示的步骤具体包括：

根据改变后的业务逻辑选择对应的位图进行显示或调整显示的位图的大小、位置。

8.如权利要求1所述的基于XAML的UI图像显示方法，其特征在于，所述根据所述控件进行位图显示的步骤之后还包括：

获取UI界面上的未显示内容，通过图形设备接口绘制所述未显示内容。

9.一种智能终端，其特征在于，所述智能终端包括处理器、存储器，所述存储器存储有计算机程序，所述处理器与所述存储器通信连接，所述处理器通过所述计算机程序执行如权利要求1-8任一项所述的基于XAML的UI图像显示方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有程序数据，所述程序数据被用于执行如权利要求1-8任一项所述的基于XAML的UI图像显示方法。

Images