CN110647377A - 人机交互界面的图片处理系统、设备及介质 - Google Patents

Abstract

本申请的人机交互界面的图片处理系统、设备及介质，包括：图片管理模块，用于对所获取的图片标识ID值，以表征所述图片的存储路径；图片合成模块，用于将标识有ID值的所述图片进行合成以得到合成图片；图片渲染模块，用于对一或多个所述合成图片中指定区域或全部区域进行渲染，或对一或多个所述图片中指定区域或全部区域进行渲染。本申请针对最终用户即可以按照正常的思维逻辑习惯来使用各个小图片，为各类UI控件设置图片相关的属性，同时UI框架内部机制又可以做到高效渲染图片的目的。且过程对用户为无感知的，降低了画面制作的难度，提高了效率，节约了人力成本。

Description

人机交互界面的图片处理系统、设备及介质

技术领域

本申请涉及软件开发技术领域，尤其涉及人机交互界面的图片处理系统、设备及介质。

背景技术

在人机交互界面中，图片是基本绘制元素，常见的格式有png、bmp、jpg、gif等。在2D/3D混合UI框架体系中，各2D控件，3D对象等，往往需要通过图片呈现其部分外观样式。在一个应用(APP)中，往往也需要使用很多图片。这些，就涉及到如何管理图片、如何使用图片、以及如何高效渲染图片，这三方面的内容。

基于GPU编程技术，如果针对一个个小图片分别渲染的话，效率很低效。在游戏开发领域，通过制图工具，比如photoshop，将很多小图片合成一张大的图片，然后在渲染时，通过使用这张大图片中的某个区域内容，来达到高效呈现画面内容的目的。但是，这仅仅解决了如何高效渲染图片的问题。

发明内容

鉴于以上所述现有技术的缺点，本申请的目的在于提供人机交互界面的图片处理系统、设备及介质，解决现有技术中至少一问题。

为实现上述目标及其他相关目标，本申请提供一种人机交互界面的图片处理系统，所述系统包括：图片管理模块，用于对所获取的图片标识ID值，以表征所述图片的图片信息；图片合成模块，用于将标识有ID值的所述图片进行合成以得到合成图片；图片渲染模块，用于对一或多个所述合成图片中指定区域或全部区域进行渲染，或对一或多个所述图片中指定区域或全部区域进行渲染。

于本申请的一或多个实施例中，所述图片管理模块提供有API接口，以供添加或删除或枚举所述图片。

于本申请的一或多个实施例中，各所述图片标识的所述ID值为唯一ID值；所述ID值为数值型，用以标识图片信息，所述图片信息包括图片的文件路径或其他存储方式的位置信息。

于本申请的一或多个实施例中，所述系统还包括：图片关联模块，用于将所述图片的所述ID值与人机交互界面中的2D控件或3D对象的属性进行关联设置，以呈现所述2D控件或所述3D对象的相应特征。

于本申请的一或多个实施例中，所述合成图片合成时还生成有：包含参与合成的各所述图片的位图信息的位图文件、及包含参与合成的各所述图片的配置信息的配置文件。

于本申请的一或多个实施例中，所述配置信息包括：ID值、像素坐标、宽度、及高度中任意一种或多种组合。

于本申请的一或多个实施例中，所述图片合成模块提供有API接口，用于通过所述ID值检索到对应的所述图片；和/或，用于添加或删除或枚举所述合成图片。

于本申请的一或多个实施例中，所述图片合成模块在进行图片合成时，显示有由所述图片管理模块标识有所述ID值的所述图片组成的图片列表，以供将所述图片从图片列表中添加至当前所述合成图片；或，在当前所述合成图片中删除一或多个所述图片，并使所删除的所述图片重新添加至所述图片列表中。

为实现上述目标及其他相关目标，本申请提供一种计算机设备，包括：一或多个存储器、及一或多个处理器；所述一或多个存储器，用于存储计算机程序；所述一或多个处理器，用于运行所述计算机程序，以执行所述的人机交互界面的图片处理系统的功能。

为实现上述目标及其他相关目标，本申请提供一种计算机存储介质，存储有计算机程序，所述计算机程序被运行时执行所述的所述的人机交互界面的图片处理系统的功能。

如上所述，本申请的人机交互界面的图片处理系统、设备及介质，所述系统包括：图片管理模块，用于对所获取的图片标识ID值，以表征所述图片的存储路径；图片合成模块，用于将标识有ID值的所述图片进行合成以得到合成图片；图片渲染模块，用于对一或多个所述合成图片中指定区域或全部区域进行渲染，或对一或多个所述图片中指定区域或全部区域进行渲染。

本申请针对最终用户即可以按照正常的思维逻辑习惯来使用各个小图片，为各类UI控件设置图片相关的属性，同时UI框架内部机制又可以做到高效渲染图片的目的。且过程对用户为无感知的，降低了画面制作的难度，提高了效率，节约了人力成本。

附图说明

图1显示为本申请实施例中人机交互界面的图片处理系统的模块示意图。

图2显示为本申请实施例中计算机设备的结构示意图。

具体实施方式

以下通过特定的具体实例说明本申请的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本申请的其他优点与功效。本申请还可以通过另外不同的具体实施方式加以实施或应用系统，本说明书中的各项细节也可以基于不同观点与应用系统，在没有背离本申请的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

下面以附图为参考，针对本申请的实施例进行详细说明，以便本申请所属技术领域的技术人员能够容易地实施。本申请可以以多种不同形态体现，并不限定于此处说明的实施例。

为了明确说明本申请，省略与说明无关的电路部件，对于通篇说明书中相同或类似的构成要素，赋予了相同的参照符号。

在通篇说明书中，当说某电路部件与另一电路部件“连接”时，这不仅包括“直接连接”的情形，也包括在其中间把其它元件置于其间而“间接连接”的情形。另外，当说某种电路部件“包括”某种构成要素时，只要没有特别相反的记载，则并非将其它构成要素排除在外，而是意味着可以还包括其它构成要素。

当说某电路部件在另一电路部件“之上”时，这可以是直接在另一电路部件之上，但也可以在其之间伴随着其它电路部件。当对照地说某电路部件“直接”在另一电路部件“之上”时，其之间不伴随其它电路部件。

虽然在一些实例中术语第一、第二等在本文中用来描述各种元件，但是这些元件不应当被这些术语限制。这些术语仅用来将一个元件与另一个元件进行区分。例如，第一接口及第二接口等描述。再者，如同在本文中所使用的，单数形式“一”、“一个”和“该”旨在也包括复数形式，除非上下文中有相反的指示。应当进一步理解，术语“包含”、“包括”表明存在所述的特征、步骤、操作、元件、组件、项目、种类、和/或组，但不排除一个或多个其他特征、步骤、操作、元件、组件、项目、种类、和/或组的存在、出现或添加。此处使用的术语“或”和“和/或”被解释为包括性的，或意味着任一个或任何组合。因此，“A、B或C”或者“A、B和/或C”意味着“以下任一个：A；B；C；A和B；A和C；B和C；A、B和C”。仅当元件、功能、步骤或操作的组合在某些方式下内在地互相排斥时，才会出现该定义的例外。

此处使用的专业术语只用于言及特定实施例，并非意在限定本申请。此处使用的单数形态，只要语句未明确表示出与之相反的意义，那么还包括复数形态。在说明书中使用的“包括”的意义是把特定特性、区域、整数、步骤、作业、要素及/或成份具体化，并非排除其它特性、区域、整数、步骤、作业、要素及/或成份的存在或附加。

表示“下”、“上”等相对空间的术语可以为了更容易地说明在附图中图示的一电路部件相对于另一电路部件的关系而使用。这种术语是指，不仅是在附图中所指的意义，还包括使用中的装置的其它意义或作业。例如，如果翻转附图中的装置，曾说明为在其它电路部件“下”的某电路部件则说明为在其它电路部件“上”。因此，所谓“下”的示例性术语，全部包括上与下方。装置可以旋转90°或其它角度，代表相对空间的术语也据此来解释。

鉴于现有技术中人机交互界面中进行图像处理的不足，本申请的方案中提供基于一套全新设计的2D/3D人机交互界面的实现框架，针对图片的管理、图片的使用、以及图片的高效渲染这三个方面，构建一套系统化的实施方案。

如图1所示，展示本申请实施例中人机交互界面的图片处理系统的模块示意图。

可选的，该方法可以应用于人机交互界面的实现框架(framework)；也可以应用于人机交互界面的制作工具(可以是可视化的)。

所述系统100包括：图片管理模块101、图片合成模块102、及图片渲染模块103。

图片管理模块101

于本申请的一或多个实施例中，所述图片管理模块101，用于对所获取的图片标识ID值，以表征所述图片的图片信息。

于本实施例中，在2D/3D混合UI框架体系中构建一个所述图片管理模块101，所述图片管理模块101提供有API接口，以供包括但不限于添加或删除或枚举所述图片。API(Application Programming Interface，应用程序接口)是一些预先定义的函数，或指软件系统不同组成部分衔接的约定，通过API接口本系统100用以在线获取或传输图片。

具体来说，所述ID值为数值型，用以标识图片信息，所述图片信息包括图片的文件路径或其他存储方式的位置信息。其中，所述图片信息能够便于在后续合成图片或渲染图片时快速找到所述图片的存储路径或位置信息，以实现快速找到所述图片。例如，通过数字或大小写字母或数字与大小写字母的组合来表征所述图片的如文件路径或其他存储方式的位置信息的图片信息。

于本实施例中，各所述图片标识的所述ID值为唯一ID值。例如，比较简单的做法，可以在图片管理模块101内部定义一个max ID这样的变化量，从0开始记录，每当添加一个图片时，将该max ID值加1后，作为所述图片标识的所述ID值。但是删除图片时，该max ID不减小。另外，Max ID和所有图片的ID值的配置信息，可序列化到资源存储系统中，并支持从资源存储系统中反序列化。

于本申请的一或多个实施例中，为了提高检索的效率，所述系统100还包括：图片关联模块104，用于将所述图片的所述ID值与人机交互界面中的2D控件或3D对象的属性进行关联设置，以呈现所述2D控件或所述3D对象的相应特征。

于上述实施例中，在2D/3D混合UI框架体系中，如果各2D控件、3D对象等模块需要通过图片来呈现某些外观特征，需要定义相关的属性。为了提高检索的效率，使用图片的ID值作为其属性值，而不使用图片的文件路径。

例如，在图片关联模块104关联的可视化界面制作工具中，用户可以打开画面编辑器，选中画面上某个2D控件/3D对象模块，在其属性面板中，从图片浏览器中选择图片设置到相关的属性上，即其内部是通过图片的ID值来记录的。

图片合成模块102

于本申请的一或多个实施例中，所述图片合成模块102，用于将标识有ID值的所述图片进行合成以得到合成图片。

需说明的是，在所述图片标识有ID值后，即对应2D/3D混合UI框架体系中会形成具有ID值图片的图片集或图片列表，并在合成图片后，参与合成的图片可通过ID值可快速定位或搜索到对应图片。

于本实施例中，所述合成图片合成时还生成有：包含参与合成的各所述图片的位图信息的位图文件、及包含参与合成的各所述图片的配置信息的配置文件。

于上述实施例中，所述位图信息中所记录的数据多用于内存分配、设置调色板信息、读取像素值信等。

位图信息可以包括位图信息头和颜色表，其中，所述位图信息头可以包含单个像素所用字节数以及描述颜色的格式，或者还包括位图的宽度、高度、目标设备的位平面数、图像的压缩格式等信息。

而所述位图文件可以由文件头、位图信息、位图像素数据等部分组成。其中，所述位图文件头可用于识别位图文件，例如可由数值或字符表示位图文件的大小。所述位图文件的格式可以是png、bmp、jpg、gif等等。

于上述实施例中，所述配置文件可以是xml格式或者是二进制格式。为了管理方便，所述配置文件的文件名和所述位图文件的文件名和配置文件最好一致或命名统一。

于本实施例中，所述配置信息包括：ID值、像素坐标、宽度、及高度中任意一种或多种组合。

举例来说，所述配置信息包含以下内容：

Image ID：在所述图片管理模块101中标记的图片的ID值；

Position X：所述图片在合成图片中相对图片左上角的横向位置，单位是像素；

Position Y：所述图片在合成图片中相对图片左上角的纵向位置，单位是像素；

Width：所述图片的宽度，单位是像素；

Height：所述图片的高度，单位是像素。

于本实施例中，所述图片合成模块102提供有API接口，用于通过所述ID值检索到对应的所述图片；和/或，用于添加或删除或枚举所述合成图片。

于上述实施例中，例如，在2D/3D混合UI框架体系中，构建一个图片合成模块102提供的API接口，通过提供所述图片的ID值可以从多个所述合成图片中检索到唯一一个所述图片的配置信息。或者，通过该图片合成模块102提供的API接口，可以添加、删除、枚举所述合成图片。

于本实施例中，所述图片合成模块102在进行图片合成时，显示有由所述图片管理模块101标识有所述ID值的所述图片组成的图片列表，以供将所述图片从图片列表中添加至当前所述合成图片；或，在当前所述合成图片中删除一或多个所述图片，并使所删除的所述图片重新添加至所述图片列表中。

举例来说，在所述图片合成模块102的可视化界面制作工具中，用户可以打开合成图片编辑器，编辑器的左边显示那些在图片管理模块101中标识的但还没有被添加到某个合成图片中的那些所述图片，编辑器的右边显示当前编辑的合成图片。可以从所述图片列表中选择所述图片，将它们添加到当前合成图片中，经过此操作后，所述图片从图片列表中删除；可以从合成图片中选择所述图片，将它们删除，经过此操作后，所述图片被重新添加到图片列表中。

图片渲染模块103

于本申请的一或多个实施例中，所述图片渲染模块103，用于对一或多个所述合成图片中指定区域或全部区域进行渲染，或对一或多个所述图片中指定区域或全部区域进行渲染。

例如，在2D/3D UI控件框架系统和基于GPU的渲染框架系统之间，设计一个承上启下的渲染对象类CRenderImage，它的主要数据成员有图片文件的存储路径，也可以同时指定图片中的某一块区域。如果没有指定区域，则渲染整张图片，否则渲染图片中指定的区域内容。

在具体渲染流程中，一方面可以通过图片合成模块102查找渲染目标(合成图片)，如果找到，说明用户使用了合成图片，则把找到的合成图片的路径和各所述图片的区域信息设置给CRenderImage；如果没有找到，则通过图片管理模块101直接查找图片路径，将图片路径设置给CrenderImage；

另一方面还可以通过图片管理模块101查找渲染目标(标记ID值的图片)，以直接查找图片路径，将图片路径设置给CrenderImage。

上述渲染过程，或者说对合成图片的使用过程，对用户来说是无感知的。用户如果创建了合成图片，则提高了渲染的效率；如果没有创建合成图片，则仍然按照传统流程继续工作。

需要说明的是，应理解以上图1系统实施例中的各个模块的划分仅仅是一种逻辑功能的划分，实际实现时可以全部或部分集成到一个物理实体上，也可以物理上分开。且这些模块可以全部以软件通过处理元件调用的形式实现；也可以全部以硬件的形式实现；还可以部分模块通过处理元件调用软件的形式实现，部分模块通过硬件的形式实现。例如，图片管理模块101可以为单独设立的处理元件，也可以集成在上述装置的某一个芯片中实现，此外，也可以以程序代码的形式存储于上述装置的存储器中，由上述装置的某一个处理元件调用并执行以上图片管理模块101的功能。其它模块的实现与之类似。此外这些模块全部或部分可以集成在一起，也可以独立实现。这里所述的处理元件可以是一种集成电路，具有信号的处理能力。在实现过程中，上述方法的各步骤或以上各个模块可以通过处理器元件中的硬件的集成逻辑电路或者软件形式的指令完成。

例如，以上这些模块可以是被配置成实施以上方法的一个或多个集成电路，例如：一个或多个特定集成电路(Application Specific Integrated Circuit，简称ASIC)，或，一个或多个微处理器(digital signal processor，简称DSP)，或，一个或者多个现场可编程门阵列(Field Programmable Gate Array，简称FPGA)等。再如，当以上某个模块通过处理元件调度程序代码的形式实现时，该处理元件可以是通用处理器，例如中央处理器(Central Processing Unit，简称CPU)或其它可以调用程序代码的处理器。再如，这些模块可以集成在一起，以片上系统(system-on-a-chip，简称SOC)的形式实现。

当然，所述系统也可以通过软件结合硬件电路实现，例如通过装载在计算机设备中的计算机程序实现，如服务器、台式机、笔记本电脑、智能手机、平板电脑等，通过硬件电路运行软件程序实现。

按照上述构建的人机交互界面的图片处理系统和实施步骤，最终用户可以按照正常的思维逻辑习惯来使用各个小图片，为各类UI控件设置图片相关的属性，同时UI框架内部机制又可以做到高效渲染图片的目的。这一过程对用户是无感知的，这样降低了画面制作的难度，提高了效率，节约了人力成本。

如图2所示，展示本申请实施例中的计算机设备的结构示意图。

在本实施例中，所述计算机设备200包括：一或多个存储器201、及一或多个处理器202。

所述一或多个存储器201，存储有计算机程序；

所述一或多个处理器202，用于运行所述计算机程序，以实现例如图1所示的人机交互界面的图片处理系统的功能。

在可能的实现方式中，所述一或多个存储器201可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)和/或高速缓存存储器，还可以包括一个或多个非暂时的计算机可读存储介质诸如ROM、EEPROM、EPROM、闪存设备、磁盘等，和/或其组合。

在可能的实现方式中，所述一个或多个处理器202能够是任何合适的处理元件(例如处理器核、微处理器、ASIC、FPGA、控制器、微控制器等)，并且能够是一个处理器或操作地连接的多个处理器。

另外需说明的是，上述实施例中的人机交互界面的图片处理系统、计算机设备等的实现，所涉及的计算机程序皆可以装载在计算机可读存储介质，所计算机可读存储介质可以是可以保持和存储由指令执行设备使用的指令的有形设备。计算机可读存储介质例如可以是、但不限于电存储设备、磁存储设备、光存储设备、电磁存储设备、半导体存储设备或者上述的任意合适的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、静态随机存取存储器(SRAM)、便携式压缩盘只读存储器(CD-ROM)、数字多功能盘(DVD)、记忆棒、软盘、机械编码设备、例如其上存储有指令的打孔卡或凹槽内凸起结构、以及上述的任意合适的组合。这里所使用的计算机可读存储介质不被解释为瞬时信号本身，诸如无线电波或者其他自由传播的电磁波、通过波导或其他传输媒介传播的电磁波(例如，通过光纤电缆的光脉冲)、或者通过电线传输的电信号。

综上所述，本申请的人机交互界面的图片处理系统、设备及介质，所述系统包括：图片管理模块，用于对所获取的图片标识ID值，以表征所述图片的图片信息；图片合成模块，用于将标识有ID值的所述图片进行合成以得到合成图片；图片渲染模块，用于对一或多个所述合成图片中指定区域或全部区域进行渲染，或对一或多个所述图片中指定区域或全部区域进行渲染

按照上述构建的设计思想和实施步骤，最终用户即可以按照正常的思维逻辑习惯来使用各个小图片，为各类UI控件设置图片相关的属性，同时UI框架内部机制又可以做到高效渲染图片的目的。这一过程对用户是无感知的，这样降低了画面制作的难度，提高了效率，节约了人力成本。

上述实施例仅例示性说明本申请的原理及其功效，而非用于限制本申请。任何熟悉此技术的人士皆可在不违背本申请的精神及范畴下，对上述实施例进行修饰或改变。因此，举凡所属技术领域中具有通常知识者在未脱离本申请所揭示的精神与技术思想下所完成的一切等效修饰或改变，仍应由本申请的权利要求所涵盖。

Claims (10)

1.一种人机交互界面的图片处理系统，其特征在于，所述系统包括：

图片管理模块，用于对所获取的图片标识ID值，以表征所述图片的图片信息；图片合成模块，用于将标识有ID值的所述图片进行合成以得到合成图片；

图片渲染模块，用于对一或多个所述合成图片中指定区域或全部区域进行渲染，或对一或多个所述图片中指定区域或全部区域进行渲染。

2.根据权利要求1所述的方法，其特征在于，所述图片管理模块提供有API接口，以供添加或删除或枚举所述图片。

3.根据权利要求1所述的方法，其特征在于，各所述图片标识的所述ID值为唯一ID值；所述ID值为数值型，用以标识图片信息，所述图片信息包括图片的文件路径或其他存储方式的位置信息。

4.根据权利要求1所述的方法，其特征在于，所述系统还包括：图片关联模块，用于将所述图片的所述ID值与人机交互界面中的2D控件或3D对象的属性进行关联设置，以呈现所述2D控件或所述3D对象的相应特征。

5.根据权利要求1所述的方法，其特征在于，所述合成图片合成时还生成有：包含参与合成的各所述图片的位图信息的位图文件、及包含参与合成的各所述图片的配置信息的配置文件。

6.根据权利要求4所述的方法，其特征在于，所述配置信息包括：ID值、像素坐标、宽度、及高度中任意一种或多种组合。

7.根据权利要求1所述的方法，其特征在于，所述图片合成模块提供有API接口，用于通过所述ID值检索到对应的所述图片；和/或，用于添加或删除或枚举所述合成图片。

8.根据权利要求1所述的方法，其特征在于，所述图片合成模块在进行图片合成时，显示有由所述图片管理模块标识有所述ID值的所述图片组成的图片列表，以供将所述图片从图片列表中添加至当前所述合成图片；或，在当前所述合成图片中删除一或多个所述图片，并使所删除的所述图片重新添加至所述图片列表中。

9.一种计算机设备，其特征在于，包括：一或多个存储器、及一或多个处理器；

所述一或多个存储器，用于存储计算机程序；

所述一或多个处理器，用于运行所述计算机程序，以执行如权利要求1至8中任意一项所述系统的功能。

10.一种计算机存储介质，其特征在于，存储有计算机程序，所述计算机程序被运行时执行如权利要求1至8中任意一项所述系统的功能。

Images