CN113407078A

CN113407078A - 字符图标的编辑方法、装置、存储介质及终端

Info

Publication number: CN113407078A
Application number: CN202110633900.XA
Authority: CN
Inventors: 张多; 曾国栋
Original assignee: Yuanguang Software Co Ltd
Current assignee: Yuanguang Software Co Ltd
Priority date: 2021-06-07
Filing date: 2021-06-07
Publication date: 2021-09-17

Abstract

本申请公开了一种字符图标的编辑方法、装置、存储介质和终端，该方法包括：将本地存储的字符图标的数据上传至资源库中；显示页面；其中，所述页面包括组件库和画布；响应于拖动操作，将所述组件库中的字符图标组件拖入到所述画布中；其中，所述字符图标组件设置有图标显示区域；响应于针对所述字符图标组件的触发操作时，显示所述资源库的操作界面；响应于针对所述操作界面的选择操作时，将选中的字符图标放置在所述图标显示区域中。本申请通过字符图标的上传和管理提高页面开发的效率。

Description

字符图标的编辑方法、装置、存储介质及终端

技术领域

本申请涉及计算机技术领域，尤其涉及一种字符图标的编辑方法、装置、存储介质及终端。

背景技术

在服务器/浏览器的沟通中，需要设计用于人机交互的页面，页面中包括各种各样的图标，例如：输入框、按钮和表格等，在复杂的页面设计中，开发人员需要设计大量的图标，如何提高页面的开发效率是目前亟待解决的问题。

发明内容

本申请实施例提供了一种字符图标的编辑方法、装置、存储介质及终端，通过页面元素的复用提高页面开发的效率。所述技术方案如下：

第一方面，本申请实施例提供了一种字符图标的编辑方法，所述方法包括：

显示页面；其中，所述页面包括组件库和画布；

响应于拖动操作，将所述组件库中的字符图标组件拖入到所述画布中；其中，所述字符图标组件设置有图标显示区域；

响应于针对所述字符图标组件的触发操作时，显示资源库；

响应于针对所述资源库的选择操作时，将选中的字符图标放置在所述图标显示区域中。

第二方面，本申请实施例提供了一种字符图标的编辑装置，所述装置包括：

上传单元，用于将本地存储的字符图标的数据上传至资源库中；

显示单元，用于显示页面；其中，所述页面包括组件库和画布；

拖动单元，用于响应于拖动操作，将所述组件库中的字符图标组件拖入到所述画布中；其中，所述字符图标组件设置有图标显示区域；

所述显示单元，还用于响应于针对所述字符图标组件的触发操作时，显示所述资源库的操作界面；

放置单元，用于响应于针对所述操作界面的选择操作时，将选中的字符图标放置在所述图标显示区域中。

第三方面，本申请实施例提供一种计算机存储介质，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行上述的方法步骤。

第四方面，本申请实施例提供一种终端，可包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由所述处理器加载并执行上述的方法步骤。

本申请一些实施例提供的技术方案带来的有益效果至少包括：

将本地存储的字符图标的数据上传至资源库中，在页面编辑过程中，将字符图标组件拖入到页面的画布中，然后基于字符图标组件的触发操作从资源库的控制界面中选中字符图标，将选中的字符图标放置在字符图标组件的字符显示区域中，实现字符图标的上传和复用，用户可以利用字符图标组件方便快捷的将资源库中的字符图标导入到页面上，因此可以提高页面编辑的效率。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例提供的一种字符图标的编辑方法的流程示意图；

图2是本申请实施例提供的上传字符图标的数据的流程示意图；

图3～图7是本申请实施例提供的用户界面示意图；

图8是本申请实施例提供的一种字符图标的编辑装置的结构示意图；

图9是本申请实施例提供的一种终端的结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施例方式作进一步地详细描述。

下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

在本申请的描述中，需要理解的是，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本申请中的具体含义。此外，在本申请的描述中，除非另有说明，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

下面将结合附图1-附图7，对本申请实施例提供的字符图标的编辑方法进行详细介绍。该方法可依赖于计算机程序实现，可运行于基于冯诺依曼体系的字符图标的编辑装置上。该计算机程序可集成在应用中，也可作为独立的工具类应用运行。其中，本申请实施例中的字符图标的编辑装置可以为终端，包括但不限于智能手机、个人电脑、平板电脑、手持设备、车载设备、可穿戴设备、计算设备或连接到无线调制解调器的其它处理设备等。

请参见图1，为本申请实施例提供的一种字符图标的编辑方法的流程示意图。如图1所示，本申请实施例的所述方法可以包括以下步骤：

S101、将本地存储的字符图标的数据上传至资源库中。

其中，编辑装置的存储器中存储有待上传的字符图标，字符图标的格式为SVG(scalable vector graphics，可缩放矢量图形)图标。资源库为数据库，资源库可以部署在本地或互联网中，其他终端设备可以根据一定的权限访问该资源库，实现资源的共享。例如：资源库为mysql数据库。本申请可以将SVG格式的字符图标转换为base64的数据，然后将base64格式的数据上传至资源库中进行存储，在资源库中形成字符图标的一条记录。

在一种可能的实施例中，参见图2所示，将本地存储的字符图标的数据上传至资源库中具体包括：

S1011、显示资源库的操作界面。

其中，在需要上传字符图标时，打开资源库以及通过显示单元显示资源库的操作界面，操作界面为人机交互的图像界面，操作界面上设置有上传按钮和数据库中存储的记录关联的多个字符图标。

进一步的，操作界面中的多个字符图标可以划分为多个组，例如：根据不同的图标类型划分为多个组，便于用户查找。另外，用户上传的字符图标可以单独划分为一个组。

S1012、响应于上传按钮上的触发操作，显示指定路径下的文件夹。

其中，用户可以通过鼠标、键盘或触摸屏执行触发操作，例如：用户通过鼠标单击上传案件执行触发操作，编辑装置响应于该触发操作，显示指定路径下的文件夹，指定路径为默认的文件存储路径，当然用户在操作界面上也可以自主选择文件路径，该指定路径下的文件夹存储有一个或多个待上传的字符图标。

S1013、响应于文件夹中的选择操作，将选择的字符图标的数据上传至资源库中。

其中，选择操作可以通过鼠标、键盘或触摸屏执行选择操作，例如：用户通过鼠标单击文件夹中的字符图标执行选择操作，将选择的SVG格式的字符图标转换为base64格式的数据，然后上传到资源库中。

下面利用图3和图4的用户界面对字符图标的上传过程进行说明：

用户对资源库上设置的上传按钮执行触发操作时，显示图4所示的指定路径下的文件夹“下载”，用户可以根据需求选择不同的路径，文件夹中包括多个字符图标，用户可以对多个字符图标执行选择操作，被选中的字符图标呈高亮显示，已区分其他未选中的字符图标“烟花”，当检测到打开按钮上的触发操作时，将选择的字符图标的数据写入资源库中，形成一条记录，相应的参见图5所示，资源库的操作面板上增加有“烟花”字符图标。

在一个或多个可能的实施例中，还包括：

响应于编辑操作，对资源库的控制面板中的字符图标进行删除或移动。

其中，在对控制面板上的字符图标进行选中时，该字符图标会显示删除标记，例如：删除标记为“×”，在检测到删除标记上的触发操作时，对控制面板中的选中的字符图标进行删除，相应的，资源库中该字符图标的记录也会删除。移动字符图标的方式可以时，对选中的字符图标进行拖动，将字符图标拖动到控制面板上指定的位置。进一步的，编辑装置也可以自动根据字符图标的使用次数进行排序，使用次数越多的字符图标越靠前，相应的，使用次数越少的字符图标越靠后，即根据使用次数进行降序对字符图标排列。

S102、显示页面。

其中，用户需要编辑页面的图标时，通过显示单元显示待编辑的页面，页面包括组件库和画布，组件库中包括多个组件，组件即为控件，用户通过控件之间的交互实现特定的功能，各个组件用于执行不同的功能，画布为页面中执行内容编辑的区域。

S103、响应于拖动操作，将组件库中的字符图标组件拖入到画布中。

其中，拖动操作可以用户通过鼠标、键盘或触摸屏触发的，用户通过拖动操作将组件库中选择的字符图标组件从起始位置拖动到画布上的终止位置。例如：用户通过鼠标执行拖动操作，移动光标位于选择的字符图标组件上，然后按压主鼠标左键拖动字符图标组件，到达画布的指定位置时释放鼠标左键，完成字符图标组件的放置。又例如：用户通过触摸屏执行拖动操作，用户手指移动到选择的字符图标组件上，然后按住字符图标组件拖动字符图标组件，到达画布指定位置时抬起手指，完成字符图标组件的放置。另外，字符图标组件设置有图标显示区域，在完成字符图标组件的拖动操作后，该图标显示区域内可显示默认的字符图标，也可以不显示任何字符图标，后续在显示选中的字符图标。

S104、响应于针对字符图标组件的触发操作时，显示资源库的操作面板。

具体的，触发操作是对字符图标组件上包含的控件的操作，操作类型包括但不限于：鼠标操作、键盘操作和触控操作。资源库的操作面板包括多个字符图标，多个字符图标和资源库中的多个记录一一对应。

在一个或多个可能的实施例中，所述响应于针对所述字符图标组件的触发操作时，显示所述资源库的操作界面，包括：

响应于所述图标显示区域内的双击操作或响应于所述字符图标组件包括的图标设置按钮上的单击操作，显示与所述字符图标组件关联的图标组；其中，所述图标组属于所述资源库关联的字符图标。

其中，控制资源库的控制界面上包括多个字符图标，多个字符图标划分为多个组，字符图标组件关联的图标组为多个组中的一个。

举例来说，参见图5和图6对本申请的字符图标组件的拖动过程进行说明：

图6的页面上包括组件库和画布，组件库包多个组件：标签组件、文本框组件和字符图标组件等，当检测到字符图标组件上的拖动操作时，将字符图标组件拖动到画布上，字符图标组件上设置有矩形的字符显示区域，尺寸为34像素×34像素，字符显示区域中默认显示有“+”字符图标，字符图标组件上设置有图标设置按钮。当检测到图标显示区域内的双击操作时，显示如图7的图标组“我的图标”；或检测到图标设置按钮上的单击操作时，显示如图7的图标组“我的图标”。可以看到，控制界面包含的字符图标划分为：天鹿图标、sdk图标、我的图标等。

S105、响应于针对控制界面的选择操作时，将选中的字符图标放置在所述图标显示区域中。

具体的，控制面板为页面上方设置的用于人机交互的窗口，控制面板中包括多个字符图标，每个字符图标和资源库中的一个数据(记录)对应。选择操作的方式是框选或点选，当检测到某个字符图标上的选择操作时，从资源库中获取该字符图标的数据，将该数据转换为HTML代码，然后将该HTML代码***到页面的代码集中。

参见图6和图7所示，对本申请的编辑字符图标的过程进行说明。图7的控制面板上显示有多个字符图标，当检测到对字符图标“客服”的单击操作时，字符图标的边缘进行加粗显示，当检测到确定按钮上的单击操作时，将字符图标“客服”显示在图7的图标显示区域中，替换原来的“+”字符图标。

在一个或多个可能的实施例中，所述响应于针对所述操作界面的选择操作时，将选中的字符图标放置在所述图标显示区域中，包括：

响应于针对所述操作面板的选择操作，在选中的字符图标上添加选中标记；

获取所述字符显示区域对应的DOM元素的inner HTML属性值；

在所述资源库中获取与所述选中的字符图标的数据，以及将所述选中的字符图标的数据转换为HTML代码；

将所述DOM元素的innerHTML属性值设置为所述HTML代码。

具体的，DOM(Document Object Model，文档对象模型)元素和字符显示区域对应，inner HTML属性值用于获取DOM元素的起始标签和终止标签内的HTML代码，资源库中存储的时base格式的记录，将base格式的记录转换为HTML代码，然后将转换得到的HTML代码替换起始标签和终止标签内的HTML代码，在画布上实现字符图标的添加。

在一个或多个可能的实施例中，所述字符图标组件还包括：属性设置按钮；

所述方法还包括：

响应于所述属性设置按钮的触发操作，对所述字符显示区域内的字符图标进行属性设置；其中，所述属性包括大小、颜色、位置和触发事件中的一种或多种。例如：通过字符图标组件上设置的尺寸调节按钮，实现字符图标大小的调节；通过字符图标组件上设置的颜色调节按钮，实现字符图标颜色的调节；通过设置在字符图标组件上的位置调节按钮，实现字符图标在画布上位置的调节；通过设置在字符图标上的触发时间调节按钮，为字符图标条件特定的触发事件，在满足触发事件时执行相应的操作，例如：在字符图标上添加光标触发事件，当光标移动到字符图标上时，输出特定的提示音。

在本申请实施例中，将本地存储的字符图标的数据上传至资源库中，在页面编辑过程中，将字符图标组件拖入到页面的画布中，然后基于字符图标组件的触发操作从资源库的控制界面中选中字符图标，将选中的字符图标放置在字符图标组件的字符显示区域中，实现字符图标的上传和复用，用户可以利用字符图标组件方便快捷的将资源库中的字符图标导入到页面上，因此可以提高页面编辑的效率。

下述为本申请装置实施例，可以用于执行本申请方法实施例。对于本申请装置实施例中未披露的细节，请参照本申请方法实施例。

请参见图8，其示出了本申请一个示例性实施例提供的字符图标的编辑装置的结构示意图。该字符图标的编辑装置可以通过软件、硬件或者两者的结合实现成为终端的全部或一部分。该装置8包括：上传单元801、显示单元802、拖动单元803和放置单元805。

上传单元801，用于将本地存储的字符图标的数据上传至资源库中；

显示单元802，用于显示页面；其中，所述页面包括组件库和画布；

拖动单元803，用于响应于拖动操作，将所述组件库中的字符图标组件拖入到所述画布中；其中，所述字符图标组件设置有图标显示区域；

所述显示单元802，还用于响应于针对所述字符图标组件的触发操作时，显示所述资源库的操作界面；

放置单元804，用于响应于针对所述操作界面的选择操作时，将选中的字符图标放置在所述图标显示区域中。

在一个或多个可能的实施例中，所述将本地存储的字符图标的数据上传至资源库中包括：

显示所述资源库的操作界面；其中，所述资源库的操作界面设置有上传按钮；

响应于所述上传按钮上的触发操作，显示指定路径下的文件夹；

响应于所述文件夹中的选择操作，将选中的字符图标的数据上传至所述资源库中。

获取所述字符显示区域对应的DOM元素的inner HTML属性值；

将所述DOM元素的inner HTML属性值设置为所述HTML代码。

在一个或多个可能的实施例中，还包括：

编辑单元，用于响应于编辑操作，对所述操作界面中的字符图标进行删除或移动。

装置8还包括：

调节单元，用于响应于所述属性设置按钮的触发操作，对所述字符显示区域内的字符图标进行属性设置；其中，所述属性包括大小、颜色、位置和触发事件中的一种或多种。

在一个或多个可能的实施例中，所述资源库中的字符图标的数据为base64格式。

需要说明的是，上述实施例提供的字符图标的编辑装置在执行字符图标的编辑方法时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的恢复用户数据装置与字符图标的编辑方法实施例属于同一构思，其体现实现过程详见方法实施例，这里不再赘述。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

本申请实施例还提供了一种计算机存储介质，所述计算机存储介质可以存储有多条指令，所述指令适于由处理器加载并执行如上述图1-图7所示实施例的方法步骤，具体执行过程可以参见图1-图7所示实施例的具体说明，在此不进行赘述。

请参见图9，为本申请实施例提供了一种终端的结构示意图。如图9所示，所述终端900可以包括：至少一个处理器901，至少一个网络接口904，用户接口903，存储器905，至少一个通信总线902。

其中，通信总线902用于实现这些组件之间的连接通信。

其中，用户接口903可以包括显示屏(Display)、摄像头(Camera)，可选用户接口903还可以包括标准的有线接口、无线接口。

其中，网络接口904可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。

其中，处理器901可以包括一个或者多个处理核心。处理器901利用各种接口和线路连接整个终端900内的各个部分，通过运行或执行存储在存储器905内的指令、程序、代码集或指令集，以及调用存储在存储器905内的数据，执行终端900的各种功能和处理数据。可选的，处理器901可以采用数字信号处理(Digital Signal Processing，DSP)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)、可编程逻辑阵列(ProgrammableLogicArray，PLA)中的至少一种硬件形式来实现。处理器901可集成中央处理器(CentralProcessing Unit，CPU)、图像处理器(Graphics Processing Unit，GPU)和调制解调器等中的一种或几种的组合。其中，CPU主要处理操作***、用户界面和应用程序等；GPU用于负责显示屏所需要显示的内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到处理器901中，单独通过一块芯片进行实现。

其中，存储器905可以包括随机存储器(Random Access Memory，RAM)，也可以包括只读存储器(Read-Only Memory)。可选的，该存储器905包括非瞬时性计算机可读介质(non-transitory computer-readable storage medium)。存储器905可用于存储指令、程序、代码、代码集或指令集。存储器905可包括存储程序区和存储数据区，其中，存储程序区可存储用于实现操作***的指令、用于至少一个功能的指令(比如触控功能、声音播放功能、图像播放功能等)、用于实现上述各个方法实施例的指令等；存储数据区可存储上面各个方法实施例中涉及到的数据等。存储器905可选的还可以是至少一个位于远离前述处理器901的存储装置。如图9所示，作为一种计算机存储介质的存储器905中可以包括操作***、网络通信模块、用户接口模块以及诈骗电话的识别应用程序。

在图9所示的终端900中，用户接口903主要用于为用户提供输入的接口，获取用户输入的数据；而处理器901可以用于调用存储器905中存储的诈骗电话的识别应用程序，并具体执行图1或图2所示的方法。

本申请实施例和图1或图2的方法实施例属于同一构思，其带来的技术效果也相同，具体过程可参照图1或图2的描述，此处不再赘述。

在本申请实施例中，资源库字符图标管理可以随意上传字符图标并进行管理，可以快捷方便的设置相关属性，如大小、颜色、位置、间距和触发时间等。同时使文件存储单位更小、加载速度更快、更加便于修改调整，而且能够兼容多种终端及浏览器而不失真，因此大大减少了相关设计及开发人员的麻烦，可以提高页面编辑的工作效率。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体或随机存储记忆体等。

以上所揭露的仅为本申请较佳实施例而已，当然不能以此来限定本申请之权利范围，因此依本申请权利要求所作的等同变化，仍属本申请所涵盖的范围。

Claims

1.一种字符图标的编辑方法，其特征在于，包括：

将本地存储的字符图标的数据上传至资源库中；

显示页面；其中，所述页面包括组件库和画布；

响应于针对所述字符图标组件的触发操作时，显示所述资源库的操作界面；

响应于针对所述操作界面的选择操作时，将选中的字符图标放置在所述图标显示区域中。

2.根据权利要求1所述的方法，其特征在于，所述将本地存储的字符图标的数据上传至资源库中包括：

3.根据权利要求1或2所述的方法，其特征在于，所述响应于针对所述字符图标组件的触发操作时，显示所述资源库的操作界面，包括：

4.根据权利要求1或2所述的方法，其特征在于，所述响应于针对所述操作界面的选择操作时，将选中的字符图标放置在所述图标显示区域中，包括：

获取所述字符显示区域对应的DOM元素的inner HTML属性值；

将所述DOM元素的inner HTML属性值设置为所述HTML代码。

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

响应于编辑操作，对所述操作界面中的字符图标进行删除或移动。

6.根据权利要求1或2或5所述的方法，其特征在于，所述字符图标组件还包括：属性设置按钮；

所述方法还包括：

响应于所述属性设置按钮的触发操作，对所述字符显示区域内的字符图标进行属性设置；其中，所述属性包括大小、颜色、位置和触发事件中的一种或多种。

7.根据权利要求6所述的方法，其特征在于，所述资源库中的字符图标的数据为base64格式。

8.一种字符图标的管理装置，其特征在于，包括：

9.一种终端，其特征在于，包括处理器和存储器，其中，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，所述处理器用于调用所述程序指令，执行如权利要求1-7任一项所述的方法。

10.一种计算机可读存储介质，其特征在于，所述计算机存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时使所述处理器执行如权利要求1-7任一项所述的方法。