1.本技术涉及计算机技术领域,特别是涉及程序运行时的图标处理方法及装置、电子设备、存储介质。
背景技术:2.图标在网站设计和开发中具有重要的作用,不仅可以对内容进行概括和总结,同时兼具有导航的功能,在很大程度上增强了用户体验。因此,图标的处理方案是一个项目中必不可少的组成部分。其中,svg图标(即矢量图标)是当前主流图标,svg是一种基于xml语言,用于描述二维矢量图标的格式。svg图标具有缩放不失真的优点。
3.随着前端技术飞快发展,前端框架层出不穷,不同的前端框架对应的图标处理方案常常不同,但是现有技术中,对图标的处理都是在程序编译前或编译时,例如,vue框架的element-ui组件库,使用font-class字体库方案,在程序运行之前,将图标转换为字体,然后再转换成类名,最后通过添加元素类名来实现图标的使用。而react框架的ant design组件库,因为jsx对标记语言标签的解析能力,则是在程序运行之前把svg图标转换成react组件来使用。
4.可见,现有技术对图标的处理都是在编译前或编译时,一旦图标处理方案作为接入方接入其他平台时,常常会因为平台方提供了限制较多的脚手架(用于构建基于数据库的应用),且不开放构建工具的配置修改功能,导致图标不能直接使用,也会导致后期维护困难,即图标接入到其他平台后,不能自定义修改图标的尺寸和颜色等。
5.需要说明的是,在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解,因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。
技术实现要素:6.鉴于上述问题,提出了本技术以便提供克服上述问题或者至少部分地解决上述问题的程序运行时的图标处理方法及装置、电子设备、存储介质,包括:
7.一种程序运行时的图标处理方法,所述方法包括:
8.通过程序对应的软件框架的图标组件,从缓存中调用待显示的目标图标的目标图标标识对应的生成函数,所述生成函数是类对象,根据所述目标图标的目标原始图标文件内容处理得到,用于生成所述软件框架的虚拟节点;
9.根据所述生成函数和所述图标组件的当前属性,在界面中展示所述目标图标。
10.可选地,在所述通过程序对应的软件框架的图标组件,从缓存中调用待显示的目标图标的目标图标标识对应的生成函数之前,所述方法还包括:
11.获取各个图标的原始图标文件,并将所述原始图标文件的原始图标文件内容加载到内存中。
12.可选地,所述从缓存中调用待显示的目标图标的目标图标标识对应的生成函数,包括:
13.当缓存中不存在所述目标图标标识对应的生成函数时,根据所述目标图标标识从内存中获取所述目标图标的目标原始图标文件内容;
14.将所述目标原始图标文件内容转换为所述软件框架对应的生成函数。
15.可选地,所述将所述目标原始图标文件内容转换为所述软件框架对应的生成函数,包括:
16.调用浏览器接口将所述目标原始图标文件的目标原始图标文件内容转换为对应的文档对象模型节点;
17.调用所述软件框架创建元素节点的方法函数,将所述目标图标对应的文档对象模型节点转换为所述软件框架对应的生成函数。
18.可选地,所述调用浏览器接口将目标原始图标文件内容转换为对应的文档对象模型节点,还包括:
19.修改所述目标原始图标文件内容中的尺寸属性和填充颜色属性,使得所述目标图标的尺寸与所述图标组件的当前属性中的尺寸保持一致,所述目标图标的填充颜色属性与所述图标组件的当前属性中的填充颜色保持一致。
20.可选地,所述获取各个图标的原始图标文件,并将所述原始图标文件的原始图标文件内容加载到内存中,包括:
21.调用打包工具获取符合图标文件规则的文件作为原始图标文件,并将获取的多个原始图标文件的原始图标文件内容打包到目标文件中;
22.加载所述目标文件,以将所述目标文件中包含的原始图标文件内容加载到内存中。
23.可选地,在所述将所述目标原始图标文件内容转换为所述软件框架对应的生成函数之后,所述方法还包括:
24.将所述生成函数保存到所述缓存中。
25.一种程序运行时的图标处理装置,所述装置包括:
26.生成函数确定模块,用于通过程序对应的软件框架的图标组件,从缓存中调用待显示的目标图标的目标图标标识对应的生成函数,所述生成函数是类对象,根据所述目标图标的目标原始图标文件内容处理得到,用于生成所述软件框架的虚拟节点;
27.目标图标展示模块,用于根据所述生成函数和所述图标组件的当前属性,在界面中展示所述目标图标。
28.可选地,所述装置还包括:
29.原始内容加载模块,用于获取各个图标的原始图标文件,并将所述原始图标文件的原始图标文件内容加载到内存中。
30.可选地,所述生成函数确定模块,包括:
31.原始内容获取模块,用于当缓存中不存在所述目标图标标识对应的生成函数时,根据所述目标图标标识从内存中获取所述目标图标的目标原始图标文件内容;
32.原始内容转换模块,用于将所述目标原始图标文件内容转换为所述软件框架对应的生成函数。
33.可选地,所述转换模块,包括:
34.第一转换模块,用于调用浏览器接口将所述目标原始图标文件的目标原始图标文
件内容转换为对应的文档对象模型节点;
35.第二转换模块,用于调用所述软件框架创建元素节点的方法函数,将所述目标图标对应的文档对象模型节点转换为所述软件框架对应的生成函数。
36.可选地,所述第一转换模块,还用于修改所述目标原始图标文件内容中的尺寸属性和填充颜色属性,使得所述目标图标的尺寸与所述图标组件的当前属性中的尺寸保持一致,所述目标图标的填充颜色属性与所述图标组件的当前属性中的填充颜色保持一致。
37.可选地,所述原始内容加载模块,包括:
38.打包模块,用于调用打包工具获取符合图标文件规则的文件作为原始图标文件,并将获取的多个原始图标文件的原始图标文件内容打包到目标文件中;
39.加载模块,用于加载所述目标文件,以将所述目标文件中包含的原始图标文件内容加载到内存中。
40.可选地,所述原始内容转换模块,还用于将所述生成函数保存到所述缓存中。
41.一种电子设备,包括处理器、存储器及存储在所述存储器上并能够在所述处理器上运行的计算机程序,所述计算机程序被所述处理器执行时实现如上所述的程序运行时的图标处理方法的步骤。
42.一种计算机可读存储介质,所述计算机可读存储介质上存储计算机程序,所述计算机程序被处理器执行时实现如上所述的程序运行时的图标处理方法的步骤。
43.本技术具有以下优点:
44.在本技术实施例中,在程序运行过程中,通过程序对应的软件框架的图标组件,从缓存中调用待显示的目标图标的目标图标标识对应的生成函数,该生成函数是类对象,根据目标图标的目标原始图标文件内容处理得到,用于生成所述软件框架的虚拟节点,最后,根据生成函数和图标组件的当前组件,在界面中展示目标图标,从而实现在程序运行过程中对图标进行转换处理,以使得图标可以在不同的软件框架中正常显示。
附图说明
45.为了更清楚地说明本技术的技术方案,下面将对本技术的描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本技术的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
46.图1为本技术实施例的一种程序运行时的图标处理方法的步骤流程图;
47.图2为本技术实施例一具体示例中,基于react项目中实现svg图标使用的流程示意图;
48.图3为本技术实施例的一种程序运行时的图标处理装置的结构框图。
具体实施方式
49.为使本技术的上述目的、特征和优点能够更加明显易懂,下面结合附图和具体实施方式对本技术作进一步详细的说明。显然,所描述的实施例是本技术一部分实施例,而不是全部的实施例。基于本技术中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本技术保护的范围。
50.svg图标(即矢量图标)是当前主流图标,svg是一种基于xml语言,用于描述二维矢量图标的格式。svg图标具有缩放不失真的优点。现有技术中对图标的处理都是在程序编译前或编译时通过构建工具对图标进行处理,当图标接入到其他平台,且该平台不开放构建工具的配置修改功能时,则会导致图标无法正常使用,以及后期维护困难等问题。
51.鉴于此,本技术实施例提供了程序运行时的图标处理方法,通过在程序运行过程中对图标进行转换渲染的方式,即使将图标接入到不开放构建工具的配置修改功能的平台,仍然可以正常显示图标,以克服现有技术中需要在程序编译前或编译时对图标进行转换,导致当图标接入到不开放构建工具的配置修改功能的平台时,图标无法正常使用,以及后期维护困难等问题的缺陷。
52.参照图1,示出了本技术一实施例提供的一种程序运行中的图标处理方法的步骤流程图,在本技术实施例中,该方法可以包括如下步骤:
53.步骤101,通过程序对应的软件框架的图标组件,从缓存中调用待显示的目标图标的目标图标标识对应的生成函数,所述生成函数是类对象,根据所述目标图标的目标原始图标文件内容处理得到,用于生成所述软件框架的虚拟节点;
54.步骤102,根据所述生成函数和所述图标组件的当前属性,在界面中展示所述目标图标。
55.本技术实施例在程序运行过程中,通过程序对应的软件框架的图标组件,从缓存中调用待显示的目标图标的目标图标标识对应的生成函数,该生成函数是类对象,根据目标图标的目标原始图标文件内容处理得到,用于生成所述软件框架的虚拟节点,最后,根据生成函数和图标组件的当前属性,在界面中展示目标图标,从而实现在程序运行过程中对图标进行转换处理,以使得图标可以在不同的软件框架中正常显示。
56.下面,将对本示例性实施例中程序运行时的图标处理方法作进一步地说明。
57.本技术实施例提供的是程序运行时的图标处理方法,在程序运行初始化时,需要获取各个图标的原始图标文件,并将各个图标的原始图标文件的原始图标文件内容加载到内存中。在程序运行时,可以直接从内存中获取将要显示的目标图标的原始图标文件内容进行处理,以在界面中展示对应的图标。其中,原始图标文件是指图标的原始代码文件,例如svg图标的svg代码文件;原始图标文件内容可以理解为原始代码文件中的原始代码,例如svg代码文件内容即为svg代码文件中的原始代码。
58.示例性地,可以通过打包工具获取符合图标文件规则的文件作为原始图标文件,并将获取到的多个原始图标文件的原始图标文件内容打包到一个目标文件中,再加载目标文件,以将获取到的原始文件的内容加载到内存中。示例性地,打包工具可以是webpack(一种模块打包器),通过执行require.context函数(用来管理依赖的一个函数)获取一个特定上下文,将符合图标文件规则的原始图标文件的原始图标文件内容打包到同一个文件中,该文件记为目标文件,目标文件加载后,即可将原始图标文件的原始图标文件内容和对应的文件名存储到内存的变量中。本实施例利用打包工具的批量导入功能,可以提高数据处理的效率。
59.需要说明的是,在其他示例中,也可以不采用打包工具而通过其他方式将原始图标文件的原始图标文件内容加载到内存中,例如,逐个读取原始图标文件,以将原始文件的内容加载到内存中。
60.在步骤101中,通过程序对应的软件框架的图标组件,从缓存中调用待显示的目标图标的目标图标标识对应的生成函数,所述生成函数是类对象,根据所述目标图标的目标原始图标文件内容处理得到,用于生成所述软件框架的虚拟节点。
61.该图标组件是用程序对应的软件框架实现的,是图标的一个访问点。为了便于区分,将界面中即将需要显示的图标确定为目标图标。在程序运行过程中,当界面中需要显示目标图标时,目标图标的目标图标标识会传入图标组件中,图标组件可以基于传入的目标图标的目标图标标识从缓存中调用对应的生成函数。其中,图标标识可以是图标的名称或者图标的编号等可以唯一确定图标的信息,目标图标标识用于唯一确定待显示的目标图标的信息。
62.生成函数是指用于生成软件框架的虚拟节点(vnode)的函数,是根据目标图标的目标原始图标文件内容处理得到的,目标原始图标文件内容是指目标图标的原始代码文件中的原始代码,例如目标图标为svg图标时,目标原始图标内容即为该svg图标的原始svg代码。其中,生成函数是类对象,当调用生成函数时,相当于类实例化了一个对象,该对象即为目标图标的虚拟节点。通过生成函数可以实现自定义图标属性,也就是说,通过生成函数可以对接收的图标属性进行合并,以实现图标尺寸和颜色的修改。
63.在本技术一可选实施例中,上述从缓存中调用待显示的目标图标的目标图标标识对应的生成函数,可以包括:在确定目标图标的目标图标标识后,首先从缓存中调用目标图标标识对应的生成函数。可以理解,在本实施例中,先判断缓存中是否存有目标图标标识对应的生成函数,若缓存中存有目标图标标识对应的生成函数,则直接获取该生成函数;若缓存中不存在目标图标标识对应的生成函数,则从内存中获取目标图标标识对应的目标原始图标文件内容,再将目标原始图标文件内容转换为软件框架对应的生成函数。
64.本实施例优先从缓存中获取目标图标的目标图标标识对应的生成函数,可以提高数据处理的效率;当获取不到时,再从内存中获取目标原始图标文件内容转换为生成函数,可以实现按需转换,节约数据处理资源。
65.可选地,上述将目标原始图标文件内容转换为软件框架对应的生成函数,包括:
66.调用浏览器接口将目标图标的目标原始图标文件内容转换为对应的文档对象模型节点;一个图标的原始图标文件内容对应一个文档对象模型节点;
67.调用软件框架创建元素节点的方法函数,将所述目标图标对应的文档对象模型节点转换为所述软件框架对应的生成函数。
68.在本实施例中,每个图标对应一个文档对象模型节点,通过调用浏览器接口将目标图标的目标原始图标文件内容转换为对应的文档对象模型(即dom)节点;再通过调用软件框架的创建元素节点的方法(如软件框架的createelement方法)将需要显示的目标图标对应的文档对象模型节点转换为软件框架对应的生成函数,通过先将原始图标文件内容转换为文档对象模型节点,再将文档对象模型节点转换为软件框架对应的生成函数,相比于直接将原始图标文件内容转换为软件框架对应的生成函数而言,更容易实现,可以降低转换的难度。
69.以svg图标为例,浏览器接口具有解析svg格式代码的能力,通过浏览器接口解析目标图标的目标原始文件svg代码,将目标原始文件svg代码转换成对应的文档对象模型节点,再通过软件框架中创建元素节点的方法,将目标图标的文档对象模型节点转换为软件
框架对应的生成函数,使得目标图标可以显示在基于该软件框架设计的界面中。
70.可选地,在上述调用浏览器接口将目标图标的目标原始图标文件内容转换为对应的文档对象模型节点的过程中,包括:
71.修改目标原始图标文件内容的尺寸属性和填充颜色属性,使得所述目标图标的尺寸与所述图标组件的当前属性中的尺寸保持一致,所述目标图标的填充颜色属性与所述图标组件的当前属性中的填充颜色保持一致。
72.本技术实施例考虑到设计师提供的图标大多数是不能直接使用的,即大多数情况下,在实际使用图标时都需要对图标的填充颜色和大小进行修改。为了方便图标的使用,本实施例中,浏览器接口在将目标原始图标文件内容转换为对应的文档对象模型节点的过程中,还修改目标原始图标文件内容中的尺寸属性和填充颜色属性,以便目标图标可以基于自定义的尺寸属性和填充颜色属性进行显示。
73.示例性地,以基于vue软件框架使用svg图标为例,尺寸属性包括宽度(width)属性和高度(height)属性,通过调用属性设置接口将svg图标的宽度属性和高度属性,修改成1em(一个字符宽度,可以理解为当前字体大小),以及将svg图标的填充颜色(fill)属性修改成currentcolor(当前颜色),以便后续可以通过font-size(字体大小)和color(颜色)这两个css(层叠样式表)属性修改svg图标的大小和颜色。其中css是一种用来为结构化文档添加样式的计算机语言,也就是说,css是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言,软件开发者可以通过css属性可以设计出多种页面样式。为了实现图标的显示样式可以与软件开发者通过css属性设计的页面样式相匹配,结合生成函数可以合并图标组件的当前属性的功能,将原始图标文件内容中的宽度属性和高度属性修改为1em,这样,生成函数合并图标组件的当前属性后,得到的目标图标的宽度和高度均与图标组件的宽度和高度一致;同理,将原始图标文件内容中的填充颜色属性修改为currentcolor,使得生成函数合并图标组件的当前属性后,得到的目标图标的填充颜色与图标组件的填充颜色一致。
74.进一步地,在将目标原始图标文件内容转换为软件框架对应的生成函数之后,还包括:将生成函数保存到缓存中。示例性地,可以通过map(映射)结构在缓存中保存,该map结构可以以图标标识为键,以生成函数为值。当再次需要显示该目标图标时,可以根据map结构从缓存中快速找到对应的生成函数。
75.在本技术另一可选实施例中,上述从缓存中调用待显示的目标图标的目标图标标识对应的生成函数,可以包括:从内存中获取所有原始图标文件内容,将各个原始图标文件内容转换为对应的生成函数,得到多个与各个图标对应的生成函数,并将多个生成函数保存在缓存中。在确定目标图标的目标图标标识后,从缓存中获取目标图标标识对应的生成函数。其中,每个原始图标文件内容转换为对应的生成函数的过程可以参见上文描述,即可以通过调用浏览器接口将原始图标文件内容转换为文档对象模型节点,再将文档对象模型节点转换为生成函数,并且,在将原始图标文件内容转换为文档对象模型节点的过程中,还可以修改原始图标文件内容中的尺寸属性和填充颜色属性,以使得图标的尺寸和颜色可以与图标组件的当前属性中的尺寸和颜色保持一致。
76.本实施例先将所有图标的原始图标文件内容转换为对应的生成函数保存在缓存中,再从缓存中获取目标图标的图标标识对应的生成函数,减少因缓存中不存在对应的生
成函数而影响数据处理的效率。
77.可选地,在将生成函数保存在缓存中的过程中,可以通过map(映射)结构在缓存中保存,该map结构可以以各个图标的图标标识为键,以对应的生成函数为值。在确定目标图标的图标标识后,可以基于map结构快速找到对应的生成函数。
78.在步骤102中,根据所述生成函数和所述图标组件的当前属性,在界面中展示所述目标图标。
79.在本实施例中,生成函数可以接收一些属性值,并将其合并到对应的虚拟节点中;也就是说,生成函数可以接收一些属性值,与生成函数对应的图标的属性值进行合并,得到图标的新属性值,最终在界面中根据新属性值显示图标。其中,生成函数接收的属性值为图标组件的当前属性值,图标组件的当前属性值包括尺寸属性的值和填充颜色属性的值。
80.示例性地,生成函数对应的图标的属性值记为图标当前属性值,该图标当前属性值可以与图标原始属性值一致;如果在图标的原始图标文件内容转换为生成函数的过程中,图标的原始属性值遭到修改,则以修改后的属性值作为图标当前属性值。为了使最终呈现在界面中的图标与界面的样式相匹配,而与图标相关的界面的样式一般包括颜色和尺寸;因此,可以在图标的原始图标文件内容转换为生成函数的过程中,将图标的尺寸属性的值修改为1em,填充颜色属性值修改为currentcolor,这样,生成函数将图标当前尺寸属性值和填充颜色属性值,与图标组件的当前尺寸属性值和填充颜色属性值进行合并后,得到的图标的新尺寸属性值和新填充颜色属性值分别与图标组件的当前尺寸属性值以及填充颜色属性值保持一致。最终返回虚拟节点时,渲染得到的目标图标可以与界面的样式相匹配。
81.本技术实施例在程序运行过程中,通过程序对应的软件框架的图标组件,从缓存中调用待显示的目标图标的目标图标标识对应的生成函数,该生成函数是根据目标图标的目标原始图标文件内容处理得到的,用于生成所述软件框架的虚拟节点,最后,根据生成函数和图标组件的当前组件,在界面中展示目标图标,从而实现在程序运行过程中对图标进行转换处理,以使得图标可以在不同的软件框架中正常显示。
82.为了方便本领域技术人员理解本方案,下面将以基于react项目中实现svg图标使用为例,对本技术实施例提供的程序运行中的图标处理方法进行描述、说明。其中,react为前端框架。
83.本示例中,svg图标在使用时,只需要引入用react框架实现的图标组件,该图标组件起到代理的作用,也可以称为代理组件,代理组件可以接收需要显示的目标svg图标标识,并将代理组件的当前属性传入目标svg图标对应的生成函数,由生成函数合并代理组件的当前属性,最终返回react框架对应的虚拟节点,以在界面中显示目标svg图标。
84.如图2所示,本示例程序运行时的图标处理方法的流程如下:
85.程序运行初始化,通过收集器将所有svg图标的原始图标文件的原始图标文件内容加载到内存中。具体地,收集器利用打包工具获取所有svg图标的原始图标文件,并将所有svg图标的原始图标文件的原始图标文件内容打包到一个目标文件中;收集器再加载目标文件,以将所有svg图标的原始图标文件内容加载到内存中。如图2中,所有svg图标的原始图标文件包含home(主页)图标的原始图标文件、arrow(箭头)图标的原始图标文件、search(搜索)图标的原始图标文件等;由打包工具将符合图标文件规则的原始图标文件的
原始图标文件内容打包成一个目标文件;然后再加载目标文件,将svg图标的原始图标文件内容(即svg图标的原始代码)及对应的文件名,存储到变量中,以便在需要提取待显示的目标svg图标的目标原始图标文件内容时,可以根据该目标svg图标的文件名,从变量中获取到该目标svg图标对应的目标原始文件内容。例如,当需要提取home图标的原始图标文件内容时,可以根据home图标对应的文件名,从变量中,获取到home图标对应的原始图标文件内容。
86.在确定待渲染的目标图标后,通过处理器和转换器将目标原始图标文件内容转换为对应的生成函数,其中,处理器用于将目标原始图标文件内容转换为对应的文档对象模型节点,转换器用于将文档对象模型节点转换为软件框架对应的生成函数。
87.具体地,处理器通过innerhtml(用于设置html元素的子元素html为超文本标记语言)将待显示的目标svg图标的目标原始图标文件内容中的字符串转换为文档对象模型(dom);然后调用setattribute接口(属性设置接口)和removeattribute接口(属性删除接口)来实现对目标svg图标原始属性的修改,即通过removeattribute接口删除svg图标原始属性值,通过setattribute接口重新为svg图标的属性赋值。最终将修改后的dom节点返回。
88.转换器通过软件框架的createelement接口(虚拟节点生成接口)将dom节点转换为软件框架的生成函数,由生成函数返回软件框架的虚拟节点。其中,生成函数可以将接收的属性值合并到svg图标对应的虚拟节点中,再返回框架的虚拟节点。需要说明的是,当转换得到生成函数时,采用map结构将生成函数对应的svg图标的图标标识存储到缓存中。另外,在react框架中,dom节点属性采用驼峰命名,因此在转换时需要对字段名进行处理,避免因字段名导致调用出现问题。
89.当代理组件传入待显示的目标svg图标标识时,先判断缓存中是否存在目标svg图标标识,若存在,则说明缓存中同样存在目标svg图标标识对应的生成函数,并将代理组件的属性值传入目标svg图标标识对应的生成函数,由生成函数将接收的代理组件的属性值合并到目标svg图标对应的虚拟节点中,并返回虚拟节点以在界面中显示目标svg图标。若缓存中不存在目标svg图标标识,则说明缓存中不存在目标svg图标标识对应的生成函数,则从内存中获取目标svg图标标识对应的目标原始图标文件内容,并调用处理器和转换器将目标原始图标文件内容转换为对应的生成函数,在得到了目标svg图标标识对应的生成函数后,将代理组件的属性值传入目标svg图标标识对应的生成函数,由生成函数将接收的代理组件的属性值合并到目标svg图标对应的虚拟节点中,并返回虚拟节点以在界面中显示目标svg图标。其中,当缓存中不存在目标svg图标标识时,从内存中获取目标svg图标标识对应的目标原始图标文件内容转换成对应的生成函数后,将生成函数保存到缓存中,以便后续使用。
90.本示例利用浏览器接口对svg文件的解析能力,将svg图标的原始图标文件内容转换为dom节点,实现对svg图标属性的修改,使得修改svg图标的样式变得更加方便。通过调用软件框架的虚拟节点生成接口,将dom节点转换为框架虚拟节点,兼容各个框架模板语法,满足图标在各个框架上的使用。另外,利用打包工具批量导入的功能,将svg图标的原始图标文件内容打包成一个文件,实现svg图标原始图标文件的批量加载,提高了数据处理效率。本示例不是在编译前或编译时通过修改构建配置,而是在运行阶段转换svg图标,实现svg图标可以方便地在不同框架中使用的效果。
91.需要说明的是,对于方法实施例,为了简单描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本技术实施例并不受所描述的动作顺序的限制,因为依据本技术实施例,某些步骤可以采用其他顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作并不一定是本技术实施例所必须的。
92.参照图3,示出了本技术的一种程序运行时的图标处理装置实施例的结构框图,与上述程序运行时的图标处理方法实施例相对应,本技术实施例提供的程序运行时的图标处理装置,可以包括如下模块:
93.生成函数确定模块301,用于通过程序对应的软件框架的图标组件,从缓存中调用待显示的目标图标的目标图标标识对应的生成函数,所述生成函数是类对象,根据所述目标图标的目标原始图标文件内容处理得到,用于生成所述软件框架的虚拟节点;
94.目标图标展示模块302,用于根据所述生成函数和所述图标组件的当前属性,在界面中展示所述目标图标。
95.可选地,所述装置还包括:
96.原始内容加载模块,用于获取各个图标的原始图标文件,并将所述原始图标文件的原始图标文件内容加载到内存中。
97.可选地,所述生成函数确定模块301,包括:
98.原始内容获取模块,用于当缓存中不存在所述目标图标标识对应的生成函数时,根据所述目标图标标识从内存中获取所述目标图标的目标原始图标文件内容;
99.原始内容转换模块,用于将所述目标原始图标文件内容转换为所述软件框架对应的生成函数。
100.可选地,所述转换模块,包括:
101.第一转换模块,用于调用浏览器接口将所述目标原始图标文件的目标原始图标文件内容转换为对应的文档对象模型节点;
102.第二转换模块,用于调用所述软件框架创建元素节点的方法函数,将所述目标图标对应的文档对象模型节点转换为所述软件框架对应的生成函数。
103.可选地,所述第一转换模块,还用于修改所述目标原始图标文件内容中的尺寸属性和填充颜色属性,使得所述目标图标的尺寸与所述图标组件的当前属性中的尺寸保持一致,所述目标图标的填充颜色属性与所述图标组件的当前属性中的填充颜色保持一致。
104.可选地,所述原始内容加载模块,包括:
105.打包模块,用于调用打包工具获取符合图标文件规则的文件作为原始图标文件,并将获取的多个原始图标文件的原始图标文件内容打包到目标文件中;
106.加载模块,用于加载所述目标文件,以将所述目标文件中包含的原始图标文件内容加载到内存中。
107.可选地,所述原始内容转换模块,还用于将所述生成函数保存到所述缓存中。
108.本技术实施例在程序运行过程中,生成函数确定模块通过程序对应的软件框架的图标组件,从缓存中调用待显示的目标图标的目标图标标识对应的生成函数,该生成函数是类对象,根据目标图标的目标原始图标文件内容处理得到,用于生成所述软件框架的虚拟节点,目标图标展示模块根据生成函数和图标组件的当前组件,在界面中展示目标图标,
从而实现在程序运行过程中对图标进行转换处理,以使得图标可以在不同的软件框架中正常显示。
109.对于装置实施例而言,由于其与方法实施例基本相似,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
110.本技术实施例还公开了电子设备,包括处理器、存储器及存储在所述存储器上并能够在所述处理器上运行的计算机程序,所述计算机程序被所述处理器执行时实现如上所述的程序运行时的图标处理方法的步骤。
111.本技术实施例还公开了计算机可读存储介质,所述计算机可读存储介质上存储计算机程序,所述计算机程序被处理器执行时实现如上所述的程序运行时的图标处理方法的步骤。
112.本说明书中的各个实施例均采用递进的方式描述,每个实施例重点说明的都是与其他实施例的不同之处,各个实施例之间相同相似的部分互相参见即可。
113.本领域内的技术人员应明白,本技术实施例的实施例可提供为方法、装置、或计算机程序产品。因此,本技术实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本技术实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
114.本技术实施例是参照根据本技术实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
115.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
116.这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上,使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
117.尽管已描述了本技术实施例的优选实施例,但本领域内的技术人员一旦得知了基本创造性概念,则可对这些实施例做出另外的变更和修改。所以,所附权利要求意欲解释为包括优选实施例以及落入本技术实施例范围的所有变更和修改。
118.最后,还需要说明的是,在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包
括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下,由语句“包括一个
……”
限定的要素,并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。
119.以上对本技术所提供的一种程序运行时的图标处理方法及装置、电子设备和存储介质,进行了详细介绍,本文中应用了具体个例对本技术的原理及实施方式进行了阐述,以上实施例的说明只是用于帮助理解本技术的方法及其核心思想;同时,对于本领域的一般技术人员,依据本技术的思想,在具体实施方式及应用范围上均会有改变之处,综上所述,本说明书内容不应理解为对本技术的限制。
技术特征:1.一种程序运行时的图标处理方法,其特征在于,所述方法包括:通过程序对应的软件框架的图标组件,从缓存中调用待显示的目标图标的目标图标标识对应的生成函数,所述生成函数是类对象,根据所述目标图标的目标原始图标文件内容处理得到,用于生成所述软件框架的虚拟节点;根据所述生成函数和所述图标组件的当前属性,在界面中展示所述目标图标。2.根据权利要求1所述的方法,其特征在于,在所述通过程序对应的软件框架的图标组件,从缓存中调用待显示的目标图标的目标图标标识对应的生成函数之前,所述方法还包括:获取各个图标的原始图标文件,并将所述原始图标文件的原始图标文件内容加载到内存中。3.根据权利要求2所述的方法,其特征在于,所述从缓存中调用待显示的目标图标的目标图标标识对应的生成函数,包括:当缓存中不存在所述目标图标标识对应的生成函数时,根据所述目标图标标识从内存中获取所述目标图标的目标原始图标文件内容;将所述目标原始图标文件内容转换为所述软件框架对应的生成函数。4.根据权利要求3所述的方法,其特征在于,所述将所述目标原始图标文件内容转换为所述软件框架对应的生成函数,包括:调用浏览器接口将所述目标原始图标文件的目标原始图标文件内容转换为对应的文档对象模型节点;调用所述软件框架创建元素节点的方法函数,将所述目标图标对应的文档对象模型节点转换为所述软件框架对应的生成函数。5.根据权利要求4所述的方法,其特征在于,所述调用浏览器接口将目标原始图标文件内容转换为对应的文档对象模型节点,还包括:修改所述目标原始图标文件内容中的尺寸属性和填充颜色属性,使得所述目标图标的尺寸与所述图标组件的当前属性中的尺寸保持一致,所述目标图标的填充颜色属性与所述图标组件的当前属性中的填充颜色保持一致。6.根据权利要求2所述的方法,其特征在于,所述获取各个图标的原始图标文件,并将所述原始图标文件的原始图标文件内容加载到内存中,包括:调用打包工具获取符合图标文件规则的文件作为原始图标文件,并将获取的多个原始图标文件的原始图标文件内容打包到目标文件中;加载所述目标文件,以将所述目标文件中包含的原始图标文件内容加载到内存中。7.根据权利要求3所述的方法,其特征在于,在所述将所述目标原始图标文件内容转换为所述软件框架对应的生成函数之后,所述方法还包括:将所述生成函数保存到所述缓存中。8.一种程序运行时的图标处理装置,其特征在于,所述装置包括:生成函数确定模块,用于通过程序对应的软件框架的图标组件,从缓存中调用待显示的目标图标的目标图标标识对应的生成函数,所述生成函数是类对象,根据所述目标图标的目标原始图标文件内容处理得到,用于生成所述软件框架的虚拟节点;目标图标展示模块,用于根据所述生成函数和所述图标组件的当前属性,在界面中展
示所述目标图标。9.一种电子设备,其特征在于,包括处理器、存储器及存储在所述存储器上并能够在所述处理器上运行的计算机程序,所述计算机程序被所述处理器执行时实现如权利要求1至7中任一项所述的程序运行时的图标处理方法的步骤。10.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质上存储计算机程序,所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述的程序运行时的图标处理方法的步骤。
技术总结本申请提供了一种程序运行时的图标处理方法及装置、电子设备、存储介质,其中,方法包括:通过程序对应的软件框架的图标组件,从缓存中调用待显示的目标图标的目标图标标识对应的生成函数,该生成函数是类对象,根据目标图标的目标原始图标文件内容处理得到,用于生成软件框架的虚拟节点;最后,根据生成函数和图标组件的当前组件,在界面中展示目标图标,从而实现在程序运行过程中对图标进行转换处理,以使得图标可以在不同的软件框架中正常显示。示。示。
技术研发人员:林键
受保护的技术使用者:网易(杭州)网络有限公司
技术研发日:2022.04.07
技术公布日:2022/7/5