CN111026391A - 一种图标代码生成方法及装置 - Google Patents

一种图标代码生成方法及装置 Download PDF

Info

Publication number
CN111026391A
CN111026391A CN201811179786.2A CN201811179786A CN111026391A CN 111026391 A CN111026391 A CN 111026391A CN 201811179786 A CN201811179786 A CN 201811179786A CN 111026391 A CN111026391 A CN 111026391A
Authority
CN
China
Prior art keywords
grid
target
icon
graph
icons
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201811179786.2A
Other languages
English (en)
Inventor
刘阳琳
肖东光
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Hangzhou Hikvision Digital Technology Co Ltd
Original Assignee
Hangzhou Hikvision Digital Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Hangzhou Hikvision Digital Technology Co Ltd filed Critical Hangzhou Hikvision Digital Technology Co Ltd
Priority to CN201811179786.2A priority Critical patent/CN111026391A/zh
Publication of CN111026391A publication Critical patent/CN111026391A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces

Abstract

本申请提供一种图标代码生成方法、装置及电子设备,包括:对目标图进行网格划分,生成与目标图上的图标一一对应的目标网格;所述目标图至少包括1个图标;根据所述目标网格的网格参数,生成所述目标网格对应的图标的图标代码。使用本申请提供的方法,可实现自动生成目标图中的所有图标的图标代码。

Description

一种图标代码生成方法及装置
技术领域
本申请涉及计算机通信领域,尤其涉及一种图标代码生成方法及装置。
背景技术
CSS(Cascading Style Sheets,层叠样式表)Sprites(精灵)又称CSS精灵或者CSS雪碧,是一种网页图应用处理方式。具体为,将一个页面内所需要显示的图标全部整合到一张大图中,并使用CSS背景定位技术来调用大图中的图标。
现有生成大图上图标的图标代码的方式是:人工手工编写大图上的每一个图标的图标代码。人工编写图标代码就会造成图标代码生成效率低且出错率高。
发明内容
有鉴于此,本申请提供一种图标代码生成方法及装置,用以实现自动生成目标图中图标的图标代码。
具体地,本申请是通过如下技术方案实现的:
根据本申请的第一方面,提供一种图标代码生成方法,所述方法包括:
对目标图进行网格划分,生成与目标图上的图标一一对应的目标网格;所述目标图至少包括1个图标;
根据所述目标网格的网格参数,生成所述目标网格对应的图标的图标代码。
可选的,所述对目标图进行网格划分,生成与目标图上的图标一一对应的目标网格,包括:
按照已获取的网格划分参数对目标图进行网格划分,
根据接收的网格调整指令对划分的网格进行调整,生成目标图上的图标一一对应的目标网格。
可选的,所述网格调整指令包括:网格合并指令和/或网格删除指令;
所述根据接收的网格调整指令对划分得到的网格进行调整,包括:
根据接收的网格合并指令将至少两个网格合并;和/或,
根据接收的网格删除指令删除至少一个网格。
可选的,所述网格参数至少包括网格标识、网格的长、宽以及网格在所述目标图中的位置;
所述根据所述目标网格的网格参数,生成所述目标网格对应的图标的图标代码,包括:
根据所述目标网格的网格标识对应的图标标识、所述目标网格的长、宽以及所述目标网格在所述目标图中的位置,生成所述目标网格对应的图标的图标代码
可选的,所述目标网格的网格标识对应的图标标识通过如下方式确定:
获取用户输入的与所述目标网格的网格标识对应的图标标识;或者,
为所述目标网格的网格标识分配不同于其他图标的图标标识。
根据本申请的第二方面,提供一种图标代码生成装置,所述装置包括:
可选的,划分单元,用于对目标图进行网格划分,生成与目标图上的图标一一对应的目标网格;所述目标图至少包括1个图标;
生成单元,用于根据所述目标网格的网格参数,生成所述目标网格对应的图标的图标代码。
可选的,所述划分单元,具体用于按照已获取的网格划分参数对目标图进行网格划分,根据接收的网格调整指令对划分的网格进行调整,生成目标图上的图标一一对应的目标网格。
可选的,所述网格调整指令包括:网格合并指令和/或网格删除指令;
所述划分单元,在根据接收的网格调整指令对划分得到的网格进行调整时,具体用于根据接收的网格合并指令将至少两个网格合并;和/或,根据接收的网格删除指令删除至少一个网格。
可选的,所述网格参数至少包括网格标识、网格的长、宽以及网格在所述目标图中的位置;
所述生成单元,具体用于根据所述目标网格的网格标识对应的图标标识、所述目标网格的长、宽以及所述目标网格在所述目标图中的位置,生成所述目标网格对应的图标的图标代码
可选的,所述目标网格的网格标识对应的图标标识通过如下方式确定:获取用户输入的与所述目标网格的网格标识对应的图标标识;或者,为所述目标网格的网格标识分配不同于其他图标的图标标识。
由上述描述可知,一方面,当用户需要得到多个图标的代码时,用户不再需要分别录入这多个图标,而是只需要录入包含至少一个图标的目标图,电子设备就可以自动生成这些图标的图标代码,所以大大提高了图标录入的效率。
另一方面,电子设备可以批量生成目标图上的每一个图标的代码,所以大大提高了代码生成效率,降低了代码生成的出错率。
附图说明
图1是本申请一示例性实施例示出的一种CSS Sprite图的示意图;
图2是本申请一示例性实施例示出的一种图标代码生成方法的流程图;
图3是本申请一示例性实施例示出的一种软件工具的界面示意图;
图4是本申请一示例性实施例示出的一种CSS Sprite图划分网格的示意图;
图5是本申请一示例性实施例示出的另一种软件工具的界面示意图;
图6是本申请一示例性实施例示出的另一种CSS Sprite图划分网格的示意图;
图7是本申请一示例性实施例示出的一种电子设备的硬件结构图;
图8是本申请一示例性实施例示出的一种图标代码生成装置的框图。
具体实施方式
这里将详细地对示例性实施例进行说明,其示例表示在附图中。下面的描述涉及附图时,除非另有表示,不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反,它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。
在本申请使用的术语是仅仅出于描述特定实施例的目的,而非旨在限制本申请。在本申请和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式,除非上下文清楚地表示其他含义。还应当理解,本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
应当理解,尽管在本申请可能采用术语第一、第二、第三等来描述各种信息,但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如,在不脱离本申请范围的情况下,第一信息也可以被称为第二信息,类似地,第二信息也可以被称为第一信息。取决于语境,如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。
本申请所述的目标图,是指包含有至少一个图标的图,比如可以是CSS Sprite图,或者可以是其他类型图,这里只是对目标图进行示例性地说明,不对其进行具体地限定。
本文以该目标图为目标CSS Sprite图为例,对本申请提供的图标代码生成方法进行详细地说明。其他类型的图与CSS Sprite图类似,这里不再赘述。
参见图1,图1是本申请一示例性实施例示出的一种CSS Sprite图的示意图。
CSS Sprites又称CSS精灵或者CSS雪碧,是一种网页图应用处理方式。具体为,将一个网页页面内所需要显示的图标全部合并到一张大图中,并使用CSS背景定位技术来调用大图中的图标。其中,包含所需要显示的所有图标的大图就被称为CSS Sprite图。
CSS Sprite图,又被称为雪碧图或者CSS雪碧图等等。该CSS Sprite图包括至少一个图标。如图1所示,图1是CSS Sprite图,图1中每个小圆圈所圈住的图像就是CSS Sprite图上的图标。
在实际应用中,一些用户(比如视觉工程师等)可以通过切片模板来实现上述将所需要显示的图标全部合并到一张大图。
其中,切片模板是一种PSD(一种图形设计软件Photoshop的专用格式)或者sketch(一种素描绘画类软件)等源文件形式存在的底板,可以用于校准图标位置、显示CSS坐标。切片模板上包含多个网格,切片模板的倍数表明了切片模板上划分出的网格的大小。切片模板按照倍数的不同,可包括6倍切片模板、8倍切片模板、10倍切片模板以及12倍切片模板等等。通常,在实际应用中,一般采用8倍切片模板,切片模板上的网格的大小为24mm*24mm。
在合并时,视觉工程师可选择所需倍数的切片模板,然后以切片模板作为参照,将待合并的图标按照切片模板上的网格依次摆排在切片模板中,再将切片模板隐藏,并保存成CSS Sprite图。
现有的生成CSS Sprite图上的图标的图标代码的方式可包括如下两种方式:
方式一:
人工手工编写CSS Sprite图上每一个图标的图标代码,人工编写图标代码就会造成图标代码生成效率低且出错率高。
方式二:
基于一种生成图标代码的在线工具(如Instant Sprite在线工具)来生成图标的图标代码。
具体为,用户需要将每个图标添加在Instant Sprite在线工具,Instant Sprite在线工具可以生成每个图标的图标代码。
然而,使用Instant Sprite在线工具的不好之处在于:
用户只能将单个图标导入Instant Sprite在线工具中,Instant Sprite在线工具才会生成单个图标的代码,如果用户导入的是CSS Sprite图,由于Instant Sprite在线工具无法识别出CSS Sprite图中的每个图标,所以Instant Sprite在线工具无法生成雪碧图中的每个图标的图标代码,只能生成整个CSS Sprite图的图标代码。
一方面,当图标量非常大时,人工依次导入单个图标的效率以及出错率就非常高。另一方面,对于用户而言,用户使用的是单个的图标,而不是应用于一个项目中的包含多个图标的雪碧图,这不利于项目的开发管理。
有鉴于此,本申请提供了一种图标代码的生成方法,具体为:电子设备上的软件工具可对目标图进行网格划分,生成与目标图上的图标一一对应的目标网格,并根据所述目标网格的网格参数,生成所述目标网格对应的图标的图标代码。
一方面,当用户需要得到多个图标的代码时,用户不再需要分别录入这多个图标,而是只需要录入包含至少一个图标的目标图,电子设备就可以自动生成这些图标的图标代码,所以大大提高了图标录入的效率。
另一方面,电子设备可以批量生成目标图上的每一个图标的代码,所以大大提高了代码生成效率,降低了代码生成的出错率。
本申请设计了一种图标代码生成的软件工具,该软件工具可执行本申请提供的图标代码生成方法。该软件工具可应用在电子设备上,比如计算机,笔记本等等。这里只是对电子设备进行示例地说明,不对该电子设备进行具体地限定。
需要说明的是,为了方便叙述,下文所指的软件工具是指用于图标代码生成的软件工具,下文不再赘述。
参见图2,图2是本申请一示例性实施例示出的一种图标代码生成方法的流程图,可包括如下所示步骤。
步骤201:对目标CSS Sprite图进行网格划分,生成与目标CSS Sprite图上的图标一一对应的目标网格;所述目标CSS Sprite图至少包括1个图标。
软件工具可先获取目标CSS Sprite图,然后再对目标CSS Sprite图进行网格划分,生成与目标CSS Sprite图上的图标一一对应的目标网格。
1)获取目标CSS Sprite图。
在实现时,当软件工具检测到用户输入CSS Sprite图时,获取用户输入的CSSSprite图,作为目标CSS Srpite图。
软件工具获取用户输入的CSS Sprite图的方式有多种,这里只是示例性地说明,不进行具体地限定。
方式一:
该软件工具为用户提供了本地图片的路径输入区域。用户可以在该路径输入区域输入待录入的CSS Sprite图的路径,当软件工具检测到用户输入的CSS Sprite图的路径时,可以依据该用户输入的路径,在该路径指示的文件夹中获取该路径所指示的CSSSprite图,作为目标CSS Sprite图。
例如,如图3所示,软件工具可为用户提供如图3所示的界面,界面中的“选择”选项所在区域即为上述路径输入区域。用户可以在点击“选择”选项后,选择出CSS Sprite图的路径,或者在“选择”选项左边的区域直接输入CSS Sprite图的路径,这里不对用户输入CSSSprite图的路径进行具体地限定。假设用户输入的路径为“C:\Desktop\切片”。
当软件工具检测到用户输入的CSS Sprite图的路径,可以在软件工具所在电子设备的系统桌面上找到名为“切片”的图,并将该名为“切片”的图确定为用户输入的目标CSSSprite图。
方式二:
用户可以直接将待输入的CSS Sprite图拖入软件工具中,当软件工具检测到用户直接输入的CSS Sprite图,可以直接读取用户输入的该CSS Sprite图作为目标CSS Sprite图。
需要说明的是,目标CSS Sprite图上包含了至少一个图标,即目标CSS Sprite图可包含一个图标,或者包含多个图标。
例如,如图1所示,图1为CSS Sprite图,图1上的圆圈圈住的图像即为图标。
2)对目标CSS Sprite图进行网格划分,生成与目标CSS Sprite图上的图标一一对应的目标网格。
在一种可选的实现方式中,软件工具可按照已获取的网格划分参数对目标CSSSprite图进行网格划分,并根据已接受的网格调整指令对划分的网格进行调整,生成与目标CSS Sprite图上的图标一一对应的目标网格。
步骤1:获取网格划分参数。
方式一:
软件工具为用户提供了网格划分参数输入区,用户可在该网格划分参数输入区中输入网格划分参数,当软件工具检测到用户输入的网格划分参数后,可读取该用户输入的网格划分参数。
例如,如图3所示,用户可在图3所示界面的“方格尺寸”右边的空白栏输入网格划分参数。当软件工具检测到用户输入的网格划分参数后,可读取该用户输入的网格划分参数。
方式二:
软件工具里预配置有默认的网格划分参数,软件工具可在指定文件夹中读取该预配置的网格划分参数。
其中,该网格划分参数可以包括网格的大小,如网格的长、宽等参数。这里只是对网格划分参数进行示例性地说明,不对该网格划分参数进行具体地限定。
步骤2:按照已获取的网格划分参数对目标CSS Sprite图进行划分。
例1,假设网格划分参数为网格的长、宽,假设用户输入的网格划分参数或者本地预配置的网格划分参数是24mm*24mm。
软件工具可将图1所示的目标CSS Sprite图划分为多个24mm*24mm的36个子网格(划分出36个子网格的目标CSS Sprite图如图4所示)
步骤3:根据接收的网格调整指令对划分得到的网格进行调整,生成与目标CSSSprite图上的图标一一对应的目标网格。
其中,该网格调整指令可以包括网格合并指令或者网格删除指令。
在实现时,在对目标CSS Sprite图进行网格划分后,软件工具可向用户展示该网格划分后的CSS Sprite图。
用户可以对划分出的网格进行删除、合并等操作,生成网格删除指令、网格合并指令等网格调整指令。
当软件工具接收到网格合并指令时,可以根据该网格合并指令将至少两个网格合并。比如该网格合并指令里携带的需要合并的网格的网格标识,软件工具可将该网格合并指令携带的网格标识所指示的网格进行合并。
当软件工具接收到网格删除指令时,可以根据该网格删除指令删除至少一个网格。比如,该网格删除指令里携带了需要删除的网格的网格标识,软件工具可将该网格删除指令携带的网格标识所指示的网格删除。
当软件工具既接收到网格合并指令,又接收到网格删除指令时,可以根据该网格合并指令将至少两个网格合并,以及根据该网格删除指令删除至少一个网格。
经过上述对网格的调整(即网格的删除和、或网格的合并),目标CSS Sprite图最终会被划分为至少一个目标网格,每个目标网格中包含一个图标,每个目标网格所包含的图标不同。
仍以例1中的例子为例,并结合图4进行说明。
用户看到图4中的“电饭煲”图标占了4个子网格,用户可以通过“拖拽”、“点击”这4个子网格等方式向软件工具输入网格合并指令。该网格合并指令里包含了“电饭煲”图标所占的4个子网格的标识。
当软件工具检测到用户输入的网格合并指令时,合并该网格合并指令所指示的网格,即合并“电饭煲”图标所占的4个子网格,使得“电饭煲”图标占据合并后的一个网格。
用户看到图4最后一行最后三个子网格没有图标,用户可通过“点击”、“拖拽”这三个子网格等方式向软件工具输入网格删除指令。该网格删除指令里包含了图4最后一行最后三个没有图标的子网格的标识。
当软件工具检测到用户输入的网格删除指令时,软件工具可删除该网格删除指令所指示的网格,即删除图4最后一行最后三个没有图标的子网格。
经过上述网格调整(即网格的删除和合并等调整操作),CSS Sprite图划分为如图5所示的多个目标网格,每个目标网格包含目标CSS Sprite图上的一个图标,每个目标网格包含的图标不同。
需要说明的是,在上述网格划分的过程中,由于人工参与的网格划分的校核(例如合并,删除等),使得网格每个网格都包含一个图标,从而使得网格的划分更为精确。
此外,为了使用户区分出哪些是删除了的网格,软件工具可将删除的网格以区别于正常网格的颜色进行显示,比如将删除的网格设置成灰色来进行显示等等。
当然,软件工具还可以通过其他方法来实现目标CSS Sprite图的网格划分。
例如,软件工具可为用户提供用户划分网格的功能。用户可以通过鼠标等输入设备,在目标CSS Sprite图上划分网格。软件工具可检测用户输入的网格线,依据用户输入网格线对目标CSS Sprite图进行网格划分,划分出与目标CSS Sprite图上图标一一对应的网格。
上述只是对划分网格进行示例性地说明,不对该目标CSS Sprite图上的网格划分进行具体地限定。
步骤202:根据所述目标网格的网格参数,生成所述目标网格对应的图标的图标代码。
该目标网格的网格参数包括:网格标识、网格的长、宽以及网格在该目标CSSSprite图中的位置等等。这里只是对网格参数进行示例性地说明,不对该网格参数进行具体地限定。
步骤1:软件工具可以确定该目标网格的网格参数所对应的图标标识。
针对每一个目标网格,在确定该目标网格的网格标识对应的图标标识时,软件工具可在已记录的网格标识与图标标识的对应关系中,以该目标网格的网格标识为关键字,查找与该关键字对应的图标标识。
其中,已记录的网格标识与图标标识的对应关系通过如下方式记录。
在生成目标网格后,软件工具可自动为生成的目标网格生成不同于其他目标网格的网格标识。目标网格的网格标识可显示在目标网格上。
在一种可选的实现方式中,该软件工具为用户提供了图标标识设定区域,用户可在该图标标识设定区输入与各目标网格标识对应的图标标识。当软件工具检测到用户为各图标输入的标识后,可记录各目标网格的网格标识与各图标标识的对应关系。
例如,如图4和图5所示。
当用户触发图4的“修改图标名称”选项时,软件工具可向用户展示如图5所示的修改图标名称的界面。该修改图标名称的界面中的数字为目标网格的网格标识,数字后面的输入区即用户输入图标标识的区域。
用户可在输入区中输入与各个目标网格的网格标识对应的图标标识,然后软件工具可记录各目标网格的网格标识与各图标标识的对应关系。比如,用户在0后面的输入区输入dii,则软件工具可记录0(网格标识)-dii(图标标识)的对应关系。
在另一种可选的实现方式中,该软件工具可以为各目标网格的网格标识分配不同于其他图标的图标标识,然后记录各目标网格的网格标识与各图标标识的对应关系。
比如,假设目标CSS Sprite图被划分为了33个目标网格,则软件工具可自动为这33个目标网格的网格标识设置不同于其他图标的图标标识。
步骤2:软件工具可计算该图标所在目标网格的长、宽以及该目标网格在该目标CSS Sprite图中的位置。
在实现时,当软件工具检测到该目标网格是由一个划分出的网格构成,则确定出该目标网格的长、宽为一个划分出的网格的长、宽。
当软件工具检测到该图标所在目标网格是由多个划分出的网格合并成的,则确定该目标网格的长、宽分别为多个网格长的总和、宽的总和。
例如,参见图6,假设特定的网格划分参数为24mm*24mm,即网格的长、宽为24mm*24mm,图6中除“电饭煲”图标外的其他图标所在目标网格的长、宽均为24mm*24mm,由于“电饭煲”图标所在目标网格是由相邻的4个网格合并成的,所以电饭煲”图标所在网格的长、宽为48mm*48mm。
此外,软件工具还可以建立坐标系,然后计算每个目标网格在该目标CSS Sprite图中的位置。
步骤3:根据所述目标网格的网格标识对应的图标标识、所述目标网格的长、宽以及所述目标网格在所述目标CSS Sprite图中的位置,生成所述目标网格对应的图标的图标代码。
其中,软件工具可生成该目标CSS Sprite图中每一个图标的图标代码。当然,软件工具还可生成用户指定的目标网格所包含的图标的图标代码。这里不对生成图标代码的图标数量进行具体地限定。
生成的图标代码如下所示:
Figure BDA0001824714540000121
此外,在本申请实施例中,当生成了每个图标的图标代码后,软件工具可生成记录有所有图标代码的指定类型文件,并将该文件保存至用户指定的文件夹中。
其中,当该目标图为CSS Sprite图时,该指定类型文件为CSS文件。这里只是对指定类型的文件进行示例性地说明,不对其进行具体地限定。
例如,用户可以点击图3所示的“导出样式文件”,以及用户可在“图源码路径”区域指定文件夹。
当软件工具检测到用户触发了如图3所示的“导出样式文件”的选项后,可以生成CSS文件,然后将该CSS文件保存在用户指定的文件夹中。该CSS文件包含了所有图标的图标代码。
此外,该软件工具还为用户提供了背景颜色和网格线颜色的修改功能。当软件工具检测到用户针对背景颜色或网格颜色的修改指令时,软件工具可将当前的背景颜色或者网格颜色修改为该修改指令所指示的颜色。
该软件工具还为用户提供了显示图标编号的功能。当软件工具检测到用户触发了显示图标编号的触发选项,如当软件工具检测到用户触发了图3所示的“显示编号”选项后,可以向用户展示每个图标的编号。
参见图7,图7是本申请一示例性实施例示出的一种电子设备的硬件结构图。
在图7中,该电子设备包括:通信接口701、处理器702、机器可读存储介质703和总线704;其中,通信接口701、处理器702和机器可读存储介质703通过总线704完成相互间的通信。处理器702通过读取并执行机器可读存储介质703中与图标代码生成控制逻辑对应的机器可执行指令,可执行上文描述的图标代码生成方法。
本文中提到的机器可读存储介质703可以是任何电子、磁性、光学或其它物理存储装置,可以包含或存储信息,如可执行指令、数据,等等。例如,机器可读存储介质可以是:易失存储器、非易失性存储器或者类似的存储介质。具体地,机器可读存储介质703可以是RAM(Radom Access Memory,随机存取存储器)、闪存、存储驱动器(如硬盘驱动器)、固态硬盘、任何类型的存储盘(如光盘、DVD等),或者类似的存储介质,或者它们的组合。
参见图8,图8是本申请一示例性实施例示出的一种图标代码生成装置的框图,该装置可包括如下所示单元。
划分单元801,用于对目标图进行网格划分,生成与目标图上的图标一一对应的目标网格;所述目标图至少包括1个图标;
生成单元802,用于根据所述目标网格的网格参数,生成所述目标网格对应的图标的图标代码。
可选的,所述划分单元801,具体用于按照已获取的网格划分参数对目标图进行网格划分,根据接收的网格调整指令对划分的网格进行调整,生成目标图上的图标一一对应的目标网格。
可选的,所述网格调整指令包括:网格合并指令和/或网格删除指令;
所述划分单元801,在根据接收的网格调整指令对划分得到的网格进行调整时,具体用于根据接收的网格合并指令将至少两个网格合并;和/或,根据接收的网格删除指令删除至少一个网格。
可选的,所述网格参数至少包括网格标识、网格的长、宽以及网格在所述目标图中的位置;
所述生成单元802,具体用于根据所述目标网格的网格标识对应的图标标识、所述目标网格的长、宽以及所述目标网格在所述目标图中的位置,生成所述目标网格对应的图标的图标代码
可选的,所述目标网格的网格标识对应的图标标识通过如下方式确定:获取用户输入的与所述目标网格的网格标识对应的图标标识;或者,为所述目标网格的网格标识分配不同于其他图标的图标标识。
上述装置中各个单元的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程,在此不再赘述。
对于装置实施例而言,由于其基本对应于方法实施例,所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的,其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本申请方案的目的。本领域普通技术人员在不付出创造性劳动的情况下,即可以理解并实施。
以上所述仅为本申请的较佳实施例而已,并不用以限制本申请,凡在本申请的精神和原则之内,所做的任何修改、等同替换、改进等,均应包含在本申请保护的范围之内。

Claims (10)

1.一种图标代码生成方法,其特征在于,所述方法包括:
对目标图进行网格划分,生成与目标图上的图标一一对应的目标网格;所述目标图至少包括1个图标;
根据所述目标网格的网格参数,生成所述目标网格对应的图标的图标代码。
2.根据权利要求1所述的方法,其特征在于,所述对目标图进行网格划分,生成与目标图上的图标一一对应的目标网格,包括:
按照已获取的网格划分参数对目标图进行网格划分,
根据接收的网格调整指令对划分的网格进行调整,生成目标图上的图标一一对应的目标网格。
3.根据权利要求2所述的方法,其特征在于,所述网格调整指令包括:网格合并指令和/或网格删除指令;
所述根据接收的网格调整指令对划分得到的网格进行调整,包括:
根据接收的网格合并指令将至少两个网格合并;和/或,
根据接收的网格删除指令删除至少一个网格。
4.根据权利要求1所述的方法,其特征在于,所述网格参数至少包括网格标识、网格的长、宽以及网格在所述目标图中的位置;
所述根据所述目标网格的网格参数,生成所述目标网格对应的图标的图标代码,包括:
根据所述目标网格的网格标识对应的图标标识、所述目标网格的长、宽以及所述目标网格在所述目标图中的位置,生成所述目标网格对应的图标的图标代码。
5.根据权利要求3所述的方法,其特征在于,所述目标网格的网格标识对应的图标标识通过如下方式确定:
获取用户输入的与所述目标网格的网格标识对应的图标标识;或者,
为所述目标网格的网格标识分配不同于其他图标的图标标识。
6.一种图标代码生成装置,其特征在于,所述装置包括:
划分单元,用于对目标图进行网格划分,生成与目标图上的图标一一对应的目标网格;所述目标图至少包括1个图标;
生成单元,用于根据所述目标网格的网格参数,生成所述目标网格对应的图标的图标代码。
7.根据权利要求6所述的装置,其特征在于,所述划分单元,具体用于按照已获取的网格划分参数对目标图进行网格划分,根据接收的网格调整指令对划分的网格进行调整,生成目标图上的图标一一对应的目标网格。
8.根据权利要求7所述的装置,其特征在于,所述网格调整指令包括:网格合并指令和/或网格删除指令;
所述划分单元,在根据接收的网格调整指令对划分得到的网格进行调整时,具体用于根据接收的网格合并指令将至少两个网格合并;和/或,根据接收的网格删除指令删除至少一个网格。
9.根据权利要求6所述的装置,其特征在于,所述网格参数至少包括网格标识、网格的长、宽以及网格在所述目标图中的位置;
所述生成单元,具体用于根据所述目标网格的网格标识对应的图标标识、所述目标网格的长、宽以及所述目标网格在所述目标图中的位置,生成所述目标网格对应的图标的图标代码。
10.根据权利要求9所述的装置,其特征在于,所述目标网格的网格标识对应的图标标识通过如下方式确定:获取用户输入的与所述目标网格的网格标识对应的图标标识;或者,为所述目标网格的网格标识分配不同于其他图标的图标标识。
CN201811179786.2A 2018-10-10 2018-10-10 一种图标代码生成方法及装置 Pending CN111026391A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811179786.2A CN111026391A (zh) 2018-10-10 2018-10-10 一种图标代码生成方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811179786.2A CN111026391A (zh) 2018-10-10 2018-10-10 一种图标代码生成方法及装置

Publications (1)

Publication Number Publication Date
CN111026391A true CN111026391A (zh) 2020-04-17

Family

ID=70191672

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811179786.2A Pending CN111026391A (zh) 2018-10-10 2018-10-10 一种图标代码生成方法及装置

Country Status (1)

Country Link
CN (1) CN111026391A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113495726A (zh) * 2021-06-25 2021-10-12 上海万物新生环保科技集团有限公司 一种生成雪碧图及其样式代码的方法及设备

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101261642A (zh) * 2008-04-10 2008-09-10 深圳市迅雷网络技术有限公司 一种调整互联网页面布局的方法及装置
CN102737067A (zh) * 2011-04-15 2012-10-17 阿里巴巴集团控股有限公司 输出网页的方法和系统
US20120278696A1 (en) * 2011-04-27 2012-11-01 Microsoft Corporation Rule-based grid independent of content
US20140289651A1 (en) * 2009-06-18 2014-09-25 Adobe Systems Incorporated Methods and Systems for Defining Slices
CN104572668A (zh) * 2013-10-15 2015-04-29 阿里巴巴集团控股有限公司 基于多个样式文件生成合并样式文件的方法和设备
CN105354022A (zh) * 2015-10-16 2016-02-24 华为技术有限公司 一种页面布局文件生成方法及装置
US20170357319A1 (en) * 2016-06-12 2017-12-14 Apple Inc. Devices, Methods, and Graphical User Interfaces for Providing Haptic Feedback
CN108459856A (zh) * 2018-02-28 2018-08-28 平安普惠企业管理有限公司 界面图标配置方法、装置、计算机设备及存储介质

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101261642A (zh) * 2008-04-10 2008-09-10 深圳市迅雷网络技术有限公司 一种调整互联网页面布局的方法及装置
US20140289651A1 (en) * 2009-06-18 2014-09-25 Adobe Systems Incorporated Methods and Systems for Defining Slices
CN102737067A (zh) * 2011-04-15 2012-10-17 阿里巴巴集团控股有限公司 输出网页的方法和系统
US20120278696A1 (en) * 2011-04-27 2012-11-01 Microsoft Corporation Rule-based grid independent of content
CN104572668A (zh) * 2013-10-15 2015-04-29 阿里巴巴集团控股有限公司 基于多个样式文件生成合并样式文件的方法和设备
CN105354022A (zh) * 2015-10-16 2016-02-24 华为技术有限公司 一种页面布局文件生成方法及装置
US20170357319A1 (en) * 2016-06-12 2017-12-14 Apple Inc. Devices, Methods, and Graphical User Interfaces for Providing Haptic Feedback
CN108459856A (zh) * 2018-02-28 2018-08-28 平安普惠企业管理有限公司 界面图标配置方法、装置、计算机设备及存储介质

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113495726A (zh) * 2021-06-25 2021-10-12 上海万物新生环保科技集团有限公司 一种生成雪碧图及其样式代码的方法及设备

Similar Documents

Publication Publication Date Title
EP2564325B1 (en) Temporary formatting and charting of selected data
US7522176B2 (en) Dynamically generating mini-graphs to represent style and template icons
US20160357425A1 (en) Spin control user interface for selecting options
US20230085169A1 (en) Online collaboration platform
SG172623A1 (en) Modifying a chart
US8413113B2 (en) Dynamic naming conventions in a source code editor
US8572229B2 (en) Distributed computing
US20060107220A1 (en) Method and system for displaying an annotated file
CN114841126A (zh) 表单生成方法、装置、设备、存储介质和程序产品
CN114385168A (zh) 可视化地图生成方法、装置、服务器及系统
WO2019089159A1 (en) Priority based automatic placement of labels on charts
CN111026391A (zh) 一种图标代码生成方法及装置
CN108279962A (zh) 一种创建可视化数据显示界面的方法及装置
KR101769129B1 (ko) 온라인 환경에서 구현되는 대시보드 내 차트간 인터랙션 방법
Leonard Analyzing wildlife telemetry data in R
CN106569785B (zh) 一种作业表单生成方法及设备
JP7298413B2 (ja) 操作画面作成装置、操作画面作成方法及びプログラム
CN111949682B (zh) 补偿协议生成方法、装置、计算机设备和存储介质
US20230185976A1 (en) Systems and methods for editing and rendering tables
CN111859850B (zh) 富文本片段整体化的方法、装置、电子设备及存储介质
CN116842235A (zh) 树形组件的渲染方法、装置及电子设备
CN115982271A (zh) 可视化图表的辅助数据展示方法、数据展示装置及介质
CN114860140A (zh) 一种基于配置实现的lvgl界面循环滑动方法和装置
CN117094300A (zh) 报表数据的生成方法、装置、电子设备及存储介质
CN116301810A (zh) 数据展示组件的实现方法、装置及电子设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination