CN111913777A - 信息处理方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请实施例提供一种信息处理方法、装置、电子设备及存储介质，包括：获取背景图及多个图标；基于预先确定的所述背景图的各行可绘制图标数量，以及所述多个图标中的各图标的尺寸，确定各图标在所述背景图中的欲置位置，以使所述多个图标中的任意两个图标在所述背景图中不相交；根据各图标在所述背景图中的欲置位置，将各图标设置在所述背景图的相应位置，生成雪碧图；基于各图标在所述雪碧图中的位置及预先确定的各图标的标识，生成样式表，所述样式表用于记录各图标的标识及各图标在所述雪碧图中的位置的对应关系；在无需依靠人工设置各个图标在背景图中的欲置位置的前提下，自动完成雪碧图和样式表的制作，提高雪碧图和样式表的制作效率。

Description

信息处理方法、装置、电子设备及存储介质

技术领域

本申请涉及前端开发技术领域，具体而言，涉及一种信息处理方法、装置、电子设备及存储介质。

背景技术

在前端开发的过程中，若需要在开发页面中设置多个图标，一种方式是：服务器一次性加载多个图标，不过这会极大地耗费服务器的性能；另一种方式是：每次加载一个图标，分多次完成多个图标的加载，不过这种方式中每加载一个图标均需要单独向服务器请求一次，导致服务器被请求加载的次数增多，继而增加服务器的压力。

为了解决上述问题，雪碧技术应时而生，雪碧技术是通过将多个小图标和背景图进行合并，以得到一张雪碧图，那么当需要在开发页面中设置多个图标时，服务器只需要加载一次就能加载出包含所述多个图标的雪碧图，降低服务器的图标加载压力；然而，现有的雪碧图制作技术需要依靠人工手动设置各个图标在背景图中的欲置位置之后，才能完成雪碧图和与该雪碧图对应的样式表的自制，效率低。

发明内容

鉴于此，本申请实施例的目的在于提供一种信息处理方法、装置、电子设备及存储介质，以在无需依靠人工设置各个图标在背景图中的欲置位置的前提下，自动完成雪碧图和样式表的制作，提高雪碧图和样式表的制作效率。

第一方面，本申请实施例提供一种信息处理方法，所述方法包括：获取背景图及多个图标；基于预先确定的所述背景图的各行可绘制图标数量，以及所述多个图标中的各图标的尺寸，确定各图标在所述背景图中的欲置位置，以使所述多个图标中的任意两个图标在所述背景图中不相交；根据各图标在所述背景图中的欲置位置，将各图标设置在所述背景图的相应位置，生成雪碧图；基于各图标在所述雪碧图中的位置及预先确定的各图标的标识，生成样式表，所述样式表用于记录各图标的标识及各图标在所述雪碧图中的位置的对应关系。

现有的雪碧图制作技术需要依靠人工手动设置各个图标在背景图中的欲置位置之后，才能完成雪碧图和与该雪碧图对应的样式表的自制，效率低，因此，在上述实现过程中，在获取到待制作雪碧图的多个图标和背景图之后，基于预先确定的所述背景图的每行可绘制图标数量及各图标的尺寸，自动且快速地确定出各个图标在所述背景图中的欲置位置，无需人工确定，继而根据各个图标在背景图中的欲置位置、所述多个图标和所述背景图，快速地生成雪碧图，提高雪碧图的生成效率，且由于所述多个图标中的任意两个图标在所述背景图中不相交，因此雪碧图中的任意两个图标不会存在重叠，继而保证雪碧图中的各个图标均不会被遮挡；其次，通过样式表记录各图标的标识及各图标在所述雪碧图中的位置的对应关系，保证在后续对前端页面进行开发时，能够根据样式表，将雪碧图中的各个图标准确地置于各个目标位置，且保证各个图标会完整地显示在各个目标位置上。

基于第一方面，在一种可能的设计中，所述基于预先确定的所述背景图的各行可绘制图标数量及各图标的尺寸，确定各图标在所述背景图中的欲置位置，包括：基于预先确定的所述背景图的各行可绘制图标数量及各图标的尺寸，确定出各图标的第一边的中心点和第二边的中心点在所述背景图中的欲置位置；其中，所述第一边和所述第二边相交。

在上述实现过程中，利用图标的第一边的中心点和第二边的中心点在背景图中的欲置位置来描述图标在背景图中的欲置位置，其中，所述第一边和所述第二边相交，能够更准确地描述图标在背景图中的欲置位置。

基于第一方面，在一种可能的设计中，所述方法还包括：接收图标添加指令，所述图标添加指令包括待添加图标及第一目标雪碧图标识；基于预先存储的雪碧图标识与雪碧图及样式表的对应关系，查找出与所述第一目标雪碧图标识对应的第一目标样式表和第一目标雪碧图；确定所述待添加图标的尺寸；根据所述第一目标样式表及所述待添加图标的尺寸，确定所述待添加图标在所述第一目标雪碧图中的目标欲置位置；将所述待添加图标设置在所述第一目标雪碧图的所述目标欲置位置，并更新所述第一目标样式表。

在上述实现过程中，通过预先建立并存储雪碧图的标识、雪碧图与样式表的对应关系，继而能够在接收到图标添加指令之后，基于所述图标添加指令中的所述第一目标雪碧图的标识，从所述对应关系中，快速地查找出与所述第一目标雪碧图的标识对应的第一目标样式表和第一目标雪碧图；并根据所述图标添加指令中的待添加图标的尺寸，确定所述待添加图标在所述第一目标雪碧图中的目标欲置位置，以使所述待添加图标与第一目标雪碧图中的图标不存在重叠部分；将所述待添加图标设置在所述第一目标雪碧图的所述目标欲置位置，并更新第一目标样式表，保证后续能够直接利用更新后的第一目标样式表进行开发，由于所述添加图标是直接设置在所述第一目标雪碧图中的，因此，省去了重新生成第一目标雪碧图中的图标的时间，继而提高图标的添加效率。

基于第一方面，在一种可能的设计中，所述方法还包括：接收图标删除指令，所述图标删除指令包括待删除图标的标识及第二目标雪碧图标识；基于预先存储的雪碧图标识与图库文件的对应关系，查找出与所述第二目标雪碧图标识对应的目标图库文件，所述目标图库文件包括第二目标雪碧图的背景图，图标及与图标对应的标识；将所述目标图库文件中与所述待删除图标的标识对应的图标删除；基于预先存储的雪碧图标识与样式表的对应关系，查找出与所述第二目标雪碧图标识对应的第二目标样式表；将所述第二目标样式表中被删除图标的标识与所述被删除图标在所述第二目标雪碧图中的位置的对应关系删除。

在上述实现过程中，通过预先建立并存储的雪碧图的标识和图库文件的对应关系，以及雪碧图的标识与样式表的对应关系，继而能在接收到表图标删除指令之后，基于图标删除指令中的第二目标雪碧图的标识，快速地查找出与第二目标雪碧图对应的目标图库文件，并基于删除指令中的待删除图标的标识，准确地将目标图库文件中与待删除图标的标识对应的图标删除，以对所述对应的图库文件进行更新；并基于第二目标雪碧图的标识，快速地查找出与第二目标雪碧图的标识对应的第二目标样式表，并通过将所述第二目标样式表中被删除图标的标识与所述被删除图标在所述第二目标雪碧图中的位置的对应关系删除，以对第二目标样式表进行更新，无需根据所述更新后的图库文件重新确定各个图标在背景图中的欲置位置，继而提高目标样式表的更新效率。

基于第一方面，在一种可能的设计中，所述方法还包括：接收图标替换指令，所述图标替换指令包括欲替换图标的标识，替换图标及第三目标雪碧图标识；基于预先存储的雪碧图标识与图库文件的对应关系，查找出与所述第三目标雪碧图标识对应的图库文件，所述对应的图库文件包括第三目标雪碧图的背景图，图标及与所述图标对应标识；将所述对应的图库文件中与所述欲替换图标的标识对应的图标和所述欲替换图标的标识删除；从预先存储的雪碧图标识和样式表的对应关系中，查找出与所述第三目标雪碧图标识对应的第三目标样式表；基于所述第三目标样式表，查找出与所述欲替换图标的标识对应的欲替换图标在第三目标雪碧图中的位置；在确定所述替换图标的尺寸小于等于所述欲替换图标的尺寸时，将所述替换图标设置在删除所述欲替换图标后腾出的位置，并更新所述第三目标样式表。

在上述实现过程中，通过预先建立并存储雪碧图的标识和图库文件的对应关系，以及雪碧图的标识和样式表的对应关系，继而能在接收到图标替换指令之后，基于图标替换指令中的第三目标雪碧图标识，快速查找出与第三目标雪碧图标识对应的图库文件；基于欲替换图标的标识，准确地将所述对应的图库文件中的欲替换图标的标识对应的图标和欲替换图标的标识删除；并基于第三目标雪碧图标识，快速地查找出与第三目标雪碧图标识对应的第三目标样式表；继而基于第三目标样式表，查找出与欲替换图标的标识对应欲替换图标在第三目标雪碧图中的位置，并在确定所述替换图标的尺寸小于等于所述欲替换图标的尺寸时，直接将所述替换图标设置在删除所述欲替换图标后腾出的位置，无需根据第三目标样式表中的各个图标的尺寸和位置，来确定替换图标的欲置位置，提高替换图标的欲置位置确定效率，并通过更新第三目标样式表，保证后续能够利用更新后的第三目标样式表进行前端开发。

第二方面，本申请实施例提供一种信息处理装置，所述装置包括：获取单元，用于获取背景图及多个图标；位置确定单元，用于基于预先确定的所述背景图的每行可绘制图标数量，以及所述多个图标中的各图标的尺寸，确定各图标在所述背景图中的欲置位置，以使所述多个图标中的任意两个图标在所述背景图中不相交；雪碧图生成单元，用于根据各图标在所述背景图中的欲置位置，将各图标设置在所述背景图的相应位置，生成雪碧图；样式表建立单元，用于基于各图标在所述雪碧图中的位置及预先确定的各图标的标识，生成样式表，所述样式表用于记录各图标的标识及各图标在所述雪碧图中的位置的对应关系。

基于第二方面，在一种可能的设计中，所述位置确定单元，具体用于基于预先确定的所述背景图的各行可绘制图标数量及各图标的尺寸，确定出各图标的第一边的中心点和第二边的中心点在所述背景图中的欲置位置；其中，所述第一边和所述第二边相交。

基于第二方面，在一种可能的设计中，所述装置还包括：第一更新单元，用于接收图标添加指令，所述图标添加指令包括待添加图标及第一目标雪碧图标识；以及基于预先存储的雪碧图标识与雪碧图及样式表的对应关系，查找出与所述第一目标雪碧图标识对应的第一目标样式表和第一目标雪碧图；确定所述待添加图标的尺寸；根据所述第一目标样式表及所述待添加图标的尺寸，确定所述待添加图标在所述第一目标雪碧图中的目标欲置位置；将所述待添加图标设置在所述第一目标雪碧图的所述目标欲置位置，并更新所述第一目标样式表。

基于第二方面，在一种可能的设计中，第二更新单元，用于接收图标删除指令，所述图标删除指令包括待删除图标的标识及第二目标雪碧图标识；以及基于预先存储的雪碧图标识与图库文件的对应关系，查找出与所述第二目标雪碧图标识对应的目标图库文件，所述目标图库文件包括第二目标雪碧图的背景图，图标及与图标对应的标识；将所述目标图库文件中与所述待删除图标的标识对应的图标删除；基于预先存储的雪碧图标识与样式表的对应关系，查找出与所述第二目标雪碧图标识对应的第二目标样式表；将所述第二目标样式表中被删除图标的标识与所述被删除图标在所述第二目标雪碧图中的位置的对应关系删除。

基于第二方面，在一种可能的设计中，第三更新单元，用于接收图标替换指令，所述图标替换指令包括欲替换图标的标识，替换图标及第三目标雪碧图标识；以及基于预先存储的雪碧图标识与图库文件的对应关系，查找出与所述第三目标雪碧图标识对应的图库文件，所述对应的图库文件包括第三目标雪碧图的背景图，图标及与所述图标对应标识；将所述对应的图库文件中与所述欲替换图标的标识对应的图标和所述欲替换图标的标识删除；从预先存储的雪碧图标识和样式表的对应关系中，查找出与所述第三目标雪碧图标识对应的第三目标样式表；基于所述第三目标样式表，查找出与所述欲替换图标的标识对应的欲替换图标在第三目标雪碧图中的位置；在确定所述替换图标的尺寸小于等于所述欲替换图标的尺寸时，将所述替换图标设置在删除所述欲替换图标后腾出的位置，并更新所述第三目标样式表。

第三方面，本申请实施例提供一种电子设备，包括处理器以及与所述处理器连接的存储器，所述存储器内存储计算机程序，当所述计算机程序被所述处理器执行时，使得所述电子设备执行第一方面所述的方法。

第四方面，本申请实施例提供一种存储介质，所述存储介质中存储有计算机程序，当所述计算机程序在计算机上运行时，使得所述计算机执行第一方面所述的方法。

本申请的其他特征和优点将在随后的说明书阐述，并且，部分地从说明书中变得显而易见，或者通过实施本申请实施例了解。本申请的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本申请实施例提供的信息处理方法的流程示意图。

图2为本申请实施例提供的确定图标在背景图中的位置的示意图。

图3为本申请实施例提供的信息处理装置的结构示意图。

图4为本申请实施例提供的电子设备的结构示意图。

图标：200-信息处理装置；210-获取单元；220-位置确定单元；230-雪碧图生成单元；240-样式表建立单元；300-电子设备；301-处理器；302-存储器；302-通信接口。

具体实施方式

下面将结合本申请实施例中附图，对本申请实施例中的技术方案进行描述。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本申请的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

请参照图1，图1为本申请实施例提供的一种信息处理方法的流程图，下面将对图1所示的流程进行详细阐述，所述方法包括步骤：S11、S12、S13和S14。

S11：获取背景图及多个图标。

S12：基于预先确定的所述背景图的每行可绘制图标数量，以及所述多个图标中的各图标的尺寸，确定各图标在所述背景图中的欲置位置，以使所述多个图标中的任意两个图标在所述背景图中不相交。

S13：根据各图标在所述背景图中的欲置位置，将各图标设置在所述背景图的相应位置，生成雪碧图。

S14：基于各图标在所述雪碧图中的位置及预先确定的各图标的标识，生成样式表，所述样式表用于记录各图标的标识及各图标在所述雪碧图中的位置的对应关系。

下面对上述方法进行详细介绍。

S11：获取背景图及多个图标。

在实际实施过程中，S11可以按照如下方式实施，接收表征需要制作雪碧图的第一指令，所述第一指令中包括：待制作雪碧图的多个图标和背景图，从所述第一指令中提取出所述待制作雪碧图的多个图标和背景图。

作为一种实施方式，S11可以按照如下方式实施，通过文件的形式预先将图标和图标的标识的对应关系进行存储，继而在接收表征需要制作雪碧图的第二指令之后，其中，所述第二指令中包括：待制作雪碧图的多个图标的标识和背景图，从所述第二指令中提取出所述多个图标的标识和所述背景图，其中，针对所述多个图标的标识中的每个图标的标识，通过调用node-images库提供的应用程序编程接口(Application ProgrammingInterface，API)，从预先存储的图标和图标的标识的对应关系，查找出与该图标的标识对应的图标。

其中，node-images库为Node.js的轻量级跨平台图像编解码库，提供了类似jQuery的链式调用API，简单可依赖。支持Windows、OSX、Linux多种操作系统且安装简单，使用npm命令即可完成。

其中，不同图标的标识不同，图标的标识具有唯一性。

其中，在本实施例中，通过文件的形式预先将图标和图标的标识的对应关系存储，在其他实施例中，也可以以其他形式存储所述对应关系。

作为一种实施方式，S11可以按照如下方式实施，通过文件的形式预先将图标进行存储，继而在接收表征需要制作雪碧图的第二指令之后，其中，所述第二指令中包括：待制作雪碧图的多个图标的存储路径的二维数组和背景图，其中，所述二维数组中的一个元素为一个图标的存储路径，从所述第二指令中提取出所述二维数组和所述背景图，继而基于所述二维数组中的元素(即图标的存储路径)，查找到所述多个图标。

在获取到所述多个图标和所述背景图之后，执行步骤S12。

S12：基于预先确定的所述背景图的每行可绘制图标数量，以及所述多个图标中的各图标的尺寸，确定各图标在所述背景图中的欲置位置，以使所述多个图标中的任意两个图标在所述背景图中不相交。

其中，所述图标可以为长方形、正方形等图形。

值的一提的是，若图标的形状不为长方形或正方形，则确定出一个形状最小，且能够包围该图标的长方形或者正方形，即外接图形，确定该外接图形的尺寸为该图标的最终尺寸。

其中，在本实施例中，所述多个图标中的各个图标的尺寸相同，在其他实施例中，所述多个图标中的各个图标的尺寸也可以不同。

在本实施例中，图标的宽可以利用images中的width函数确定，图标的长可以利用images中的height函数确定。

其中，在本实施例中，若所述多个图标中的各个图标的尺寸相同，那么，需要在所述背景图中的各行绘制的图标的数量可以根据预先确定的所述多个图标中的各个图标的尺寸、相邻两个图标之间的间隔距离和所述背景图的大小确定，背景图中的各行绘制的图标的数量可以相同，也可以不同。

例如：所述多个图标中的各个图标的长和宽均为2cm，所述多个图标的数量为10个，相邻两个图标之间的间隔距离为0.5cm，所述背景图的长为10cm，宽为8cm，那么所述背景图中的各行可绘制的图标的数量最多为4个；在本实施例中，所述背景图中的第一行可绘制4个图标，所述背景图中的第二行可绘制4个图标，所述背景图中的第三行可绘制2个图标。作为一种实施方式，需要在所述背景图中的各行绘制的图标的数量可以通过如下步骤确定，根据预先确定的所述多个图标中的各个图标的尺寸，各个图标在所述背景图中按照从左至右的排列顺序，相邻两个图标之间的间隔距离以及所述背景图的大小，确定出所述背景图中的各行可绘制图标的数量，各个图标在所述背景图中的欲排列位置(例如，图标A在所述背景图中的欲排列位置为第3行第2列，那么所述背景图中的第3行图标中的第2列的图标应该为图标A)。

其中，相邻两个图标之间的间隔距离大于零，以保证各个图标之间不存在重叠部分，所述相邻两个图标之间的间隔距离根据实际需求设定，在本实施例中，任意相邻两个图标之间的间隔距离相等，在其他实施例中，任意相邻两个图标之间的间隔距离也可以不等，只要保证相邻两个图标之间的距离大于零即可。

作为一种实施方式，若在S11中获取到了所述二维数组，则需要在所述背景图中的每行每列绘制的图标的数量可以根据所述二维数组的大小确定，即所述二维数组的列数为需要在所述背景图中的每行绘制的图标的数量，所述二维数组的行数为需要在所述背景图中的每列绘制的图标的数量，所述二维数组的行列数可以根据实际需求设定。

在实际实施过程中，S12可以按照如下方式实施，根据所述多个图标中的各个图标的尺寸、相邻两个图标之间的间隔距离和需要在所述背景图中的每行绘制的图标的数量，确定出各个图标在所述背景图中的欲置位置。

在其他实施例中，也可以所述背景图的左上角、右上角和右下角为原点确定一个二维坐标系。

作为一种实施方式，S12可以按照如下方式实施，根据所述多个图标中的各个图标的尺寸、相邻两个图标之间的间隔距离、需要在所述背景图中的每行绘制的图标的数量和各个图标在所述背景图中的欲排列位置，确定出各个图标在所述背景图中的欲置位置。

作为一种实施方式，若在S11中获取到了所述二维数组，S12可以按照如下方式实施，根据所述多个图标的尺寸和相邻两个图标之间的间隔距离，按照所述多个图标中的各个图标的存储路径在所述二维数组中的位置索引，并以所述背景图的左下角原点确定一个二维坐标系，确定出各个图标在所述背景图中的欲置位置，其中，各个图标在所述背景图中的欲置位置索引与各个图标的存储路径在所述二维数组中的存储位置索引相同。例如：针对一个图标，若该图标的存储路径位于所述二维数组中的第i行第j列，那么该图标也应该位于所述背景图中的第i行第j列。

作为一种实施方式，S12可以按照如下方式实施，基于预先确定的所述背景图的每行可绘制图标数量及各图标的尺寸，确定出相邻两个图标之间的间隔距离，以使各个图标之间不存在重叠部分，继而根据所述多个图标的尺寸、相邻两个图标之间的间隔距离和需要在所述背景图中的每行绘制的图标的数量，确定出各个图标的中心点在所述背景图中的相对位置，以所述背景图的左上角为原点确定一个二维坐标系，那么，针对所述多个图标中的每个图标，则确定该图标的中心点在所述二维坐标系中的横坐标和纵坐标为该图标在背景图中的欲置位置。

例如，若以所述背景图的左上角为原点确定一个二维坐标系，在所述背景图中的第i行第j列设置一个图标A，则确定所述背景图中的第i行的前j-1个图标的宽、所述图标A的宽的1/2、第i行的前j-1个图标中的相邻两个图标之间的间隔距离，以及第i行的第j-1个图标和所述图标A之间的间隔距离之和，即所述图标A的中心点在所述背景图中的横坐标的值；同理，确定所述背景图中的第j列的前i-1个图标的长、所述图标A的长的1/2、第j列的前i-1个图标中的相邻两个图标之间的间隔距离，以及第j行的第i-1个图标和所述图标A之间的间隔距离之和，即所述图标A的中心点在所述背景图中的纵坐标的值。

在其他实施例中，也可以所述背景图的左上角、右上角和右下角为原点确定一个二维坐标系。

作为一中实施方式，S12包括：基于预先确定的所述背景图的各行可绘制图标数量及各图标的尺寸，确定出各个图标的第一边的中心点和第二边的中心点在所述背景图中的欲置位置；其中，所述第一边和所述第二边相交。

由于利用图标的各个顶点能够更准确地描述图标在背景图中的欲置位置，因此，作为一种实施方式，S12包括：基于预先确定的所述背景图的各行可绘制图标数量及各图标的尺寸，确定出各个图标的各个顶点在所述背景图中的欲置位置。

请参照图2，若以所述背景图的左上角为原点确定一个二维坐标系，在所述背景图中的第i行第j列设置一个图标A，则确定所述背景图中的第i行的前j-1个图标的宽、第i行的前j-1个图标中的相邻两个图标之间的间隔距离，以及第i行的第j-1个图标和所述图标A之间的间隔距离之和，即所述图标A的第一顶点a1和第二顶点a2在所述背景图中的横坐标的值；同理，确定所述背景图中的第i行的前j-1个图标的宽、第i行的前j-1个图标中的相邻两个图标之间的间隔距离，第i行的第j-1个图标和所述图标A之间的间隔距离，以及所述图标A的宽之和，即所述图标A的第三顶点a3和第四顶点a4在所述背景图中的横坐标的值；

确定所述背景图中的第j列的前i-1个图标的长、第j列的前i-1个图标中的相邻两个图标之间的间隔距离，以及第j行的第i-1个图标和所述图标A之间的间隔距离之和的相反数，即所述图标A的第一顶点a1和第三顶点a3在所述背景图中的纵坐标的值；同理，确定所述背景图中的第j列的前i-1个图标的长、第j列的前i-1个图标中的相邻两个图标之间的间隔距离，第j行的第i-1个图标和所述图标A之间的间隔距离、以及所述图标A的长之和的相反数，即所述图标A的第二顶点a2和第四顶点a4在所述背景图中的纵坐标的值。在确定出各个图标在所述背景图中的欲置位置之后，执行步骤S13。

S13：根据各图标在所述背景图中的欲置位置，将各图标设置在所述背景图的相应位置，生成雪碧图。

在本实施例中，针对所述多个图标中的各个图标，按照该图标在所述背景图中的欲置位置，利用images的draw函数将该图标设置在所述背景图中的相应位置，在将所述多个图标均设置在所述背景图中之后，得到所述雪碧图。在其他实施例中，也可以才采用其他方式得到所述雪碧图。

S14：基于各图标在所述雪碧图中的位置及预先确定的各图标的标识，生成样式表，所述样式表用于记录各图标的标识及各图标在所述雪碧图中的位置的对应关系。

作为一种实施方式，S14包括：基于预先确定的所述多个图标中的各个图标的标识，建立各个图标的标识、各个图标在所述雪碧图的欲置位置和各个图标的尺寸的对应关系，得到所述样式表。

针对所述多个图标中的每个图标，将该图标的尺寸、在所述雪碧图中的欲置位置、该图标的标识封装成层叠样式表(Cascading Style Sheets，CSS)声明块的对象，再将所述多个图标的对象封装层字符串流，继而借助writeFile函数将该字符串流封装到CSS样式表中，得到所述样式表。

作为一种实施方式，所述方法还包括步骤：A1、A2、A3、A4和A5。

A1：接收图标添加指令，所述图标添加指令包括待添加图标及第一目标雪碧图标识。

在接收到所述添加指令之后，执行步骤A2。

A2：基于预先存储的雪碧图标识与雪碧图及样式表的对应关系，查找出与所述第一目标雪碧图标识对应的第一目标样式表和第一目标雪碧图。

其中，雪碧图的标识具有唯一性，即不同的雪碧图的标识不同。

从所述添加指令中提取出所述待添加图标和所述第一目标雪碧图标识，继而基于预先存储的雪碧图标识与雪碧图及样式表的对应关系，查找出与所述第一目标雪碧图标识对应的第一目标样式表和第一目标雪碧图。

在得到所述待添加图标之后，执行步骤A3。

A3：确定所述待添加图标的尺寸。

确定出所述第一图标的长和宽，其中，在本实施例中，所述第一图标的宽可以利用images中的width函数确定，所述第一图标的长可以利用images中的height函数确定。在其他实施例中，所述第一图标的长和宽也可以采用其他方式确定。

在查找出所述第一目标样式表，以及确定出所述待添加图标的尺寸之后，执行步骤A4。

A4：根据所述第一目标样式表及所述待添加图标的尺寸，确定所述待添加图标在所述第一目标雪碧图中的目标欲置位置。

基于所述待添加图标的尺寸、所述第一目标样式表中各个图标的尺寸、标识，以及在所述第一雪碧图中的位置，从所述第一雪碧图中快速地确定出尺寸大于所述待添加图标的尺寸的空余区域(即未设置图标的区域)，以使所述待添加图标能够设置于所述空余区域内，继而快速地确定所述空余区域的中心为所述待添加图标的中心在所述第一目标雪碧图中的目标欲置位置。

作为一种实施方式，基于所述第一目标样式表中各个图标的尺寸、标识、在所述第一目标雪碧图中的位置，确定出所述第一目标雪碧图中的最后一行图标的下方的空余区域，并基于所述第一目标雪碧图中的所述最后一行图标的尺寸、在所述第一目标雪碧图中的位置和所述待添加图标的尺寸，在该空余区域中快速地确定出所述待添加图标的目标欲置位置，以使所述待添加图标与所述第一目标雪碧图中的图标不存在重叠部分。

在得到所述待添加图标、所述目标欲置位置和所述第一目标雪碧图之后，执行步骤A5。

A5：将所述待添加图标设置在所述第一目标雪碧图的所述目标欲置位置，并更新所述第一目标样式表。

根据所述目标欲置位置，利用images的draw函数将所述待添加图标设置在所述第一目标雪碧图中的所述目标欲置位置上，以对所述第一目标雪碧图进行更新，同时，在所述第一目标样式表中添加所述待添加图标的标识、所述待添加图标的尺寸和所述目标欲置位置的对应关系，以对所述第一目标样式表进行更新。

作为一种实施方式，所述方法还包括步骤：B1、B2、B3、B4、B5、B6和B7。

B1：接收图标删除指令，所述图标删除指令包括待删除图标及第二目标雪碧图标识。

其中，所述待删除图标可以和所述待添加图标相同，也可以不同。

在接收到所述图标删除指令之后，执行步骤B2。

B2：基于预先存储的雪碧图标识与图库文件的对应关系，查找出与所述第二目标雪碧图标识对应的目标图库文件，所述目标图库文件包括第二目标雪碧图的背景图，图标及与图标对应的标识。

从所述图标删除指令中提取出所述第二目标雪碧图标识和所述待删除图标的标识，并基于所述第二目标雪碧图标识，从预先存储的雪碧图标识和图库文件的对应关系，快速地查找出与所述第二目标雪碧图标识对应的目标图库文件；其中，所述目标图库文件包括第二目标雪碧图的背景图，图标及与图标对应的标识。

其中，所述目标图库文件中的图标和图标的标识是一一对应存储。

在查找到所述目标图库文件之后，执行步骤B3。

B3：将所述目标图库文件中与所述待删除图标的标识对应的图标删除。

基于所述待删除图标的标识，从所述目标图库文件中查找出与所述待删除图标的标识对应的图标，并将所述对应的图标删除，以对所述目标图库文件更新。

在获取到所述第二目标雪碧图标识之后，执行步骤B4。

B4：基于预先存储的雪碧图标识与样式表的对应关系，查找出与所述第二目标雪碧图标识对应的第二目标样式表。

B5：将所述第二目标样式表中被删除图标的标识与所述被删除图标在所述第二目标雪碧图中的位置的对应关系删除。

由于在B3中已经将所述目标图库文件中与所述待删除图标的标识对应的图标删除，因此，根据被删除图标的标识，将所述第二目标样式表中与所述被删除图标的标识和所述被删除图标在所述第二目标雪碧图中的位置的对应关系删除，以对所述第二目标样式表进行更新，得到更新后的第二目标样式表。

作为一种实施方式，在B5之后，所述方法还包括：B6和B7。

B6：根据更新后的第二目标样式表和更新后的目标图库文件，生成新的第二目标雪碧图。

根据所述更新后的图库文件中的背景图、各个图标、各个图标的标识，以及更新后的第二目标样式表中的各个图标在所述背景图中的欲置位置(即该图标在所述第一雪碧图中的欲置位置)，利用images的draw函数将各个图标设置在所述背景图的相应位置，在将更新后的目标图标文件中的全部图标设置在所述背景图之后，得到新的第二目标雪碧图。

B7：从预先存储的雪碧图的标识和雪碧图的对应关系中，查找出与所述第二目标雪碧图标识对应的第二目标雪碧图，并利用所述新的第二目标雪碧图对所述第二目标雪碧图进行更新。

作为一种实施方式，在B3之后，所述方法还包括：B8、B9、B10、B11和B12。

B8：根据更新后的目标图标图库文件中的背景图和各个图标的尺寸，确定出各个图标在所述背景图中的欲置位置，以使更新后的目标图标图库文件中的任意两个图标在所述背景图中不相交。

B9：根据各图标在所述背景图中的欲置位置，将各图标设置在所述背景图的相应位置，生成新的雪碧图。

B10：从预先存储的雪碧图的标识和雪碧图的对应关系中，查找出与所述第二目标雪碧图标识对应的第二目标雪碧图，并利用所述新的雪碧图对所述第二目标雪碧图进行更新。

B11：基于各图标在所述新的雪碧图中的位置及预先确定的各图标的标识，生成新的样式表，所述新的样式表用于记录各图标的标识及各图标在所述新的雪碧图中的位置的对应关系。

B12：从预先存储的雪碧图的标识和样式表的对应关系中，查找出与所述第二目标雪碧图标识对应的第二目标样式表，并利用所述新的样式表对所述第二目标样式表进行更新。作为一种实施方式，所述方法还包括步骤：C1、C2、C3、C4、C5、C6、C7、C8和C9。

C1：接收图标替换指令，所述图标替换指令包括欲替换图标的标识，替换图标及第三目标雪碧图的标识。

其中，所述替换图标和所述欲替换图标不同。

所述替换图标可以和所述待添加图标相同，也可以不同。

所述替换图标也可以和所述待删除图标相同，也可以不同。

所述欲替换图标可以和所述待添加图标相同，也可以不同。

所述欲替换图标也可以和所述待删除图标相同，也可以不同。

在接收到所述图标替换指令之后，执行步骤C2。

C2：基于预先存储的雪碧图标识与图库文件的对应关系，查找出与所述第三目标雪碧图标识对应的图库文件，所述对应的图库文件包括第三目标雪碧图的背景图，图标及与所述图标对应标识。

其中，C2的具体实施方式和B2相同，在此不再赘述。

在获取到所述第三图标的标识之后，执行步骤C3。

C3：将所述对应的图库文件中与所述欲替换图标的标识对应的图标和所述欲替换图标的标识删除。

其中，C3的具体实施方式和B3相同，在此不再赘述。

在获取到所述第三目标雪碧图标识之后，执行步骤C4。

C4：从预先存储的雪碧图标识和样式表的对应关系中，查找出与所述第三目标雪碧图标识对应的第三目标样式表。

在查找到所述第一样式表之后，执行步骤C5。

C5：基于所述第三目标样式表，查找出与所述欲替换图标的标识对应欲替换图标在第三目标雪碧图中的位置。

基于所述欲替换图标的标识，从所述第三目标样式表中，查找出与所述欲替换图标的标识对应的欲替换图标在第三目标雪碧图中的位置。

C6：在确定所述替换图标的尺寸小于等于所述欲替换图标的尺寸时，将所述替换图标设置在删除所述欲替换图标后腾出的位置，并更新所述第三目标样式表。

分别确定出所述替换图标和所述欲替换图标的长和宽，并将所述替换图标的长和所述欲替换图标的长进行比较，以及将所述替换图标的宽与所述欲替换图标的宽进行比较，在确定所述替换图标的长小于等于所述欲替换图标的长，所述替换图标的宽小于等于所述欲替换图标的宽时，利用所述替换图标的标识，更新所述第三目标样式表中的所述欲替换图标的标识，以对所述第三目标样式表进行更新，得到更新后的第三目标样式表。

在得到更新后的第三目标样式表和更新后的图库文件之后，执行步骤C8。

C8：基于更新后的图库文件和更新后的第三目标样式表，生成新的第三目标雪碧图。

其中，C8的具体实施方式和B6相同，因此，在此不再赘述。

在得到所述新的新的第三目标雪碧图之后，执行步骤C9。

C9：利用所述新的第三目标雪碧图，对预先存储的雪碧图的标识和雪碧图的对应关系中的与所述第三目标雪碧图标识对应的雪碧图进行更新。

作为一种实施方式，在C5之后，所述方法还包括：

C51：在确定所述替换图标的尺寸大于所述欲替换图标的尺寸时，基于所述第三目标样式表中除所述欲替换图标以外的其余图标的标识、大小、在所述背景图中的位置、所述替换图标的尺寸，确定出所述替换图标在所述背景图中的待置位置，以使所述替换图标与所述第三目标样式表中除所述欲替换图标之外的其余图标在所述背景图中不相交；

C52：利用所述替换图标的标识和所述待置位置的对应关系，更新所述第三目标样式表中的所述第三图标的标识和位置的对应关系，得到更新后的第三目标样式表。

C53：基于更新后的图库文件和所述更新后的第三目标样式表，生成新的第三目标雪碧图。

C54：从预先存储的雪碧图的标识和雪碧图的对应关系中，查找出与所述第二目标雪碧图标识对应的第三目标雪碧图，并利用所述新的第三目标雪碧图对所述第三目标雪碧图进行更新。

请参照图3，图3是本申请实施例提供的一种信息处理装置200的结构框图。下面将对图3所示的结构框图进行阐述，所示装置包括：

获取单元210，用于获取背景图及多个图标。

位置确定单元220，用于基于预先确定的所述背景图的各行可绘制图标数量，以及所述多个图标中的各图标的尺寸，确定各图标在所述背景图中的欲置位置，以使所述多个图标中的任意两个图标在所述背景图中不相交。

雪碧图生成单元230，用于根据各图标在所述背景图中的欲置位置，将各图标设置在所述背景图的相应位置，生成雪碧图。

样式表建立单元240，用于基于各图标在所述雪碧图中的位置及预先确定的各图标的标识，生成样式表，所述样式表用于记录各图标的标识及各图标在所述雪碧图中的位置的对应关系。

作为一种实施方式，所述位置确定单元220，具体用于基于预先确定的所述背景图的各行可绘制图标数量及各图标的尺寸，确定出各图标的第一边的中心点和第二边的中心点在所述背景图中的欲置位置；其中，所述第一边和所述第二边相交。

作为一种实施方式，所述装置还包括：第一更新单元，用于接收图标添加指令，所述图标添加指令包括待添加图标及第一目标雪碧图标识；以及基于预先存储的雪碧图标识与雪碧图及样式表的对应关系，查找出与所述第一目标雪碧图标识对应的第一目标样式表和第一目标雪碧图；确定所述待添加图标的尺寸；根据所述第一目标样式表及所述待添加图标的尺寸，确定所述待添加图标在所述第一目标雪碧图中的目标欲置位置；将所述待添加图标设置在所述第一目标雪碧图的所述目标欲置位置，并更新所述第一目标样式表。

作为一种实施方式，第二更新单元，用于接收图标删除指令，所述图标删除指令包括待删除图标的标识及第二目标雪碧图标识；以及基于预先存储的雪碧图标识与图库文件的对应关系，查找出与所述第二目标雪碧图标识对应的目标图库文件，所述目标图库文件包括第二目标雪碧图的背景图，图标及与图标对应的标识；将所述目标图库文件中与所述待删除图标的标识对应的图标删除；基于预先存储的雪碧图标识与样式表的对应关系，查找出与所述第二目标雪碧图标识对应的第二目标样式表；将所述第二目标样式表中被删除图标的标识与所述被删除图标在所述第二目标雪碧图中的位置的对应关系删除。

作为一种实施方式，第三更新单元，用于接收图标替换指令，所述图标替换指令包括欲替换图标的标识，替换图标及第三目标雪碧图标识；以及基于预先存储的雪碧图标识与图库文件的对应关系，查找出与所述第三目标雪碧图标识对应的图库文件，所述对应的图库文件包括第三目标雪碧图的背景图，图标及与所述图标对应标识；将所述对应的图库文件中与所述欲替换图标的标识对应的图标和所述欲替换图标的标识删除；从预先存储的雪碧图标识和样式表的对应关系中，查找出与所述第三目标雪碧图标识对应的第三目标样式表；基于所述第三目标样式表，查找出与所述欲替换图标的标识对应的欲替换图标在第三目标雪碧图中的位置；在确定所述替换图标的尺寸小于等于所述欲替换图标的尺寸时，将所述替换图标设置在删除所述欲替换图标后腾出的位置，并更新所述第三目标样式表。

本实施例对的各功能单元实现各自功能的过程，请参见上述图1所示实施例中描述的内容，此处不再赘述。

请参照图4，图4为本申请实施例提供的一种电子设备300的结构示意图，电子设备300可以为上述实施例中的站点服务器，电子设备300可以是个人电脑(personalcomputer，PC)、平板电脑、智能手机、个人数字助理(personal digital assistant，PDA)等。

电子设备300可以包括：存储器302、处理301、通信接口303和通信总线，通信总线用于实现这些组件的连接通信。

所述存储器302用于存储本申请实施例提供的信息处理方法和装置对应的计算程序指令等各种数据，其中，存储器302可以是，但不限于，随机存取存储器(Random AccessMemory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(ProgrammableRead-Only Memory，PROM)，可擦除只读存储器(Erasable Programmable Read-OnlyMemory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-OnlyMemory，EEPROM)等。

处理器301用于读取并运行存储于存储器中的信息处理方法和装置对应的计算机程序指令，以获取背景图及多个图标；

基于预先确定的所述背景图的各行可绘制图标数量，以及所述多个图标中的各图标的尺寸，确定各图标在所述背景图中的欲置位置，以使所述多个图标中的任意两个图标在所述背景图中不相交；根据各图标在所述背景图中的欲置位置，将各图标设置在所述背景图的相应位置，生成雪碧图；基于各图标在所述雪碧图中的位置及预先确定的各图标的标识，生成样式表，所述样式表用于记录各图标的标识及各图标在所述雪碧图中的位置的对应关系。

其中，处理器301可能是一种集成电路芯片，具有信号的处理能力。上述的处理器301可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

通信接口303，用于接收或者发送数据。

此外，本申请实施例还提供了一种存储介质，在该存储介质中存储有计算机程序，当所述计算机程序在计算机上运行时，使得所述计算机执行本申请任一项实施方式所提供的方法。

综上所述，本申请各实施例提出的信息处理方法、装置、电子设备及存储介质，在获取到待制作雪碧图的多个图标和背景图之后，基于预先确定的所述背景图的每行可绘制图标数量及各图标的尺寸，自动且快速地确定出各个图标在所述背景图中的欲置位置，无需人工确定，继而根据各个图标在背景图中的欲置位置、所述多个图标和所述背景图，快速地生成雪碧图，提高雪碧图的生成效率，且由于所述多个图标中的任意两个图标在所述背景图中不相交，因此雪碧图中的任意两个图标不会存在重叠，继而保证雪碧图中的各个图标均不会被遮挡；其次，通过样式表记录各图标的标识及各图标在所述雪碧图中的位置的对应关系，保证在后续对前端页面进行开发时，能够根据样式表，将雪碧图中的各个图标准确地置于各个目标位置，且保证各个图标会完整地显示在各个目标位置上。

在本申请所提供的实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的装置来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

Claims (10)

1.一种信息处理方法，其特征在于，所述方法包括：

获取背景图及多个图标；

基于预先确定的所述背景图的各行可绘制图标数量，以及所述多个图标中的各图标的尺寸，确定各图标在所述背景图中的欲置位置，以使所述多个图标中的任意两个图标在所述背景图中不相交；

根据各图标在所述背景图中的欲置位置，将各图标设置在所述背景图的相应位置，生成雪碧图；

基于各图标在所述雪碧图中的位置及预先确定的各图标的标识，生成样式表，所述样式表用于记录各图标的标识及各图标在所述雪碧图中的位置的对应关系。

2.根据权利要求1所述的方法，其特征在于，所述基于预先确定的所述背景图的各行可绘制图标数量及各图标的尺寸，确定各图标在所述背景图中的欲置位置，包括：

基于预先确定的所述背景图的各行可绘制图标数量及各图标的尺寸，确定出各图标的第一边的中心点和第二边的中心点在所述背景图中的欲置位置；其中，所述第一边和所述第二边相交。

3.根据权利要求1所述的方法，其特征在于，所述方法还包括：

接收图标添加指令，所述图标添加指令包括待添加图标及第一目标雪碧图标识；

基于预先存储的雪碧图标识与雪碧图及样式表的对应关系，查找出与所述第一目标雪碧图标识对应的第一目标样式表和第一目标雪碧图；

确定所述待添加图标的尺寸；

根据所述第一目标样式表及所述待添加图标的尺寸，确定所述待添加图标在所述第一目标雪碧图中的目标欲置位置；

将所述待添加图标设置在所述第一目标雪碧图的所述目标欲置位置，并更新所述第一目标样式表。

4.权利要求1所述的方法，其特征在于，所述方法还包括：

接收图标删除指令，所述图标删除指令包括待删除图标的标识及第二目标雪碧图标识；

基于预先存储的雪碧图标识与图库文件的对应关系，查找出与所述第二目标雪碧图标识对应的目标图库文件，所述目标图库文件包括第二目标雪碧图的背景图，图标及与图标对应的标识；

将所述目标图库文件中与所述待删除图标的标识对应的图标删除；

基于预先存储的雪碧图标识与样式表的对应关系，查找出与所述第二目标雪碧图标识对应的第二目标样式表；

将所述第二目标样式表中被删除图标的标识与所述被删除图标在所述第二目标雪碧图中的位置的对应关系删除。

5.根据权利要求1所述的方法，其特征在于，所述方法还包括：

接收图标替换指令，所述图标替换指令包括欲替换图标的标识，替换图标及第三目标雪碧图标识；

基于预先存储的雪碧图标识与图库文件的对应关系，查找出与所述第三目标雪碧图标识对应的图库文件，所述对的图库文件包括第三目标雪碧图的背景图，图标及与所述图标对应标识；

将所述对应的图库文件中与所述欲替换图标的标识对应的图标和所述欲替换图标的标识删除；

从预先存储的雪碧图标识和样式表的对应关系中，查找出与所述第三目标雪碧图标识对应的第三目标样式表；

基于所述第三目标样式表，查找出与所述欲替换图标的标识对应的欲替换图标在第三目标雪碧图中的位置；

在确定所述替换图标的尺寸小于等于所述欲替换图标的尺寸时，将所述替换图标设置在删除所述欲替换图标后腾出的位置，并更新所述第三目标样式表。

6.一种信息处理装置，其特征在于，所述装置包括：

获取单元，用于获取背景图及多个图标；

位置确定单元，用于基于预先确定的所述背景图的每行可绘制图标数量，以及所述多个图标中的各图标的尺寸，确定各图标在所述背景图中的欲置位置，以使所述多个图标中的任意两个图标在所述背景图中不相交；

雪碧图生成单元，用于根据各图标在所述背景图中的欲置位置，将各图标设置在所述背景图的相应位置，生成雪碧图；

样式表建立单元，用于基于各图标在所述雪碧图中的位置及预先确定的各图标的标识，生成样式表，所述样式表用于记录各图标的标识及各图标在所述雪碧图中的位置的对应关系。

7.根据权利要求6所述的装置，其特征在于，所述位置确定单元，具体用于基于预先确定的所述背景图的各行可绘制图标数量及各图标的尺寸，确定出各个图标的第一边的中心点和第二边的中心点在所述背景图中的欲置位置；其中，所述第一边和所述第二边相交。

8.根据权利要求6所述的装置，其特征在于，所述装置还包括：第一更新单元，用于接收图标添加指令，所述图标添加指令包括待添加图标及第一目标雪碧图标识；以及基于预先存储的雪碧图标识与雪碧图及样式表的对应关系，查找出与所述第一目标雪碧图标识对应的第一目标样式表和第一目标雪碧图；确定所述待添加图标的尺寸；根据所述第一目标样式表及所述待添加图标的尺寸，确定所述待添加图标在所述第一目标雪碧图中的目标欲置位置；将所述待添加图标设置在所述第一目标雪碧图的所述目标欲置位置，并更新所述第一目标样式表。

9.一种电子设备，其特征在于，包括存储器以及处理器，所述存储器中存储有计算机程序指令，所述计算机程序指令被所述处理器读取并运行时，执行如权利要求1-5中任一项所述的方法。

10.一种存储介质，其特征在于，所述存储介质上存储有计算机程序指令，所述计算机程序指令被计算机读取并运行时，执行如权利要求1-5中任一项所述的方法。

Images