阅读说明：本技术 字符图标的编辑方法、装置、存储介质及终端 (Method and device for editing character icon, storage medium and terminal ) 是由 张多 曾国栋 于 2021-06-07 设计创作，主要内容包括：本申请公开了一种字符图标的编辑方法、装置、存储介质和终端,该方法包括：将本地存储的字符图标的数据上传至资源库中；显示页面；其中,所述页面包括组件库和画布；响应于拖动操作,将所述组件库中的字符图标组件拖入到所述画布中；其中,所述字符图标组件设置有图标显示区域；响应于针对所述字符图标组件的触发操作时,显示所述资源库的操作界面；响应于针对所述操作界面的选择操作时,将选中的字符图标放置在所述图标显示区域中。本申请通过字符图标的上传和管理提高页面开发的效率。(The application discloses a character icon editing method, a character icon editing device, a storage medium and a terminal, wherein the method comprises the following steps: uploading data of the locally stored character icons to a resource library; displaying a page; wherein the page comprises a component library and a canvas; in response to a drag operation, dragging a character icon component in the component library into the canvas; the character icon assembly is provided with an icon display area; when the triggering operation aiming at the character icon component is responded, displaying an operation interface of the resource library; and when the selection operation for the operation interface is responded, the selected character icon is placed in the icon display area. According to the method and the device, the efficiency of page development is improved through uploading and management of the character icons.)

1. A method for editing a character icon, comprising:

uploading data of the locally stored character icons to a resource library;

displaying a page; wherein the page comprises a component library and a canvas;

in response to a drag operation, dragging a character icon component in the component library into the canvas; the character icon assembly is provided with an icon display area;

when the triggering operation aiming at the character icon component is responded, displaying an operation interface of the resource library;

and when the selection operation for the operation interface is responded, the selected character icon is placed in the icon display area.

2. The method of claim 1, wherein uploading the locally stored data of the character icon into a repository comprises:

displaying an operation interface of the resource library; the operating interface of the resource library is provided with an uploading button;

responding to the trigger operation on the uploading button, and displaying the folder under the specified path;

and responding to the selection operation in the folder, and uploading the data of the selected character icon to the resource library.

3. The method according to claim 1 or 2, wherein the displaying the operation interface of the resource library in response to the triggering operation of the character icon component comprises:

displaying a group of icons associated with the character icon component in response to a double-click operation within the icon display area or in response to a single-click operation on an icon setting button included in the character icon component; and the icon group belongs to the character icons related to the resource library.

4. The method according to claim 1 or 2, wherein the placing of the selected character icon in the icon display area in response to the selection operation for the operation interface comprises:

adding a selection mark on the selected character icon in response to the selection operation of the operation panel;

acquiring an inner HTML attribute value of a DOM element corresponding to the character display area;

acquiring data of the selected character icon from the resource library, and converting the data of the selected character icon into an HTML code;

and setting an inner HTML attribute value of the DOM element as the HTML code.

5. The method of claim 4, further comprising:

and responding to the editing operation, and deleting or moving the character icon in the operation interface.

6. The method of claim 1, 2 or 5, wherein the character icon component further comprises: an attribute setting button;

the method further comprises the following steps:

responding to the triggering operation of the attribute setting button, and performing attribute setting on the character icons in the character display area; wherein the attributes include one or more of size, color, location, and trigger event.

7. The method as claimed in claim 6, wherein the data of the character icons in the resource library is in base64 format.

8. An apparatus for managing character icons, comprising:

the uploading unit is used for uploading the data of the locally stored character icons to a resource library;

a display unit for displaying a page; wherein the page comprises a component library and a canvas;

the dragging unit is used for responding to dragging operation and dragging the character icon components in the component library into the canvas; the character icon assembly is provided with an icon display area;

the display unit is also used for responding to the triggering operation of the character icon component and displaying an operation interface of the resource library;

and the placing unit is used for placing the selected character icon in the icon display area in response to the selection operation of the operation interface.

9. A terminal comprising a processor and a memory, wherein the memory is configured to store a computer program comprising program instructions, and wherein the processor is configured to invoke the program instructions to perform the method of any of claims 1-7.

10. A computer-readable storage medium, characterized in that the computer storage medium stores a computer program comprising program instructions that, when executed by a processor, cause the processor to perform the method according to any of claims 1-7.

Technical Field

The present application relates to the field of computer technologies, and in particular, to a method and an apparatus for editing a character icon, a storage medium, and a terminal.

Background

In server/browser communication, a page designed for man-machine interaction is needed, and the page includes various icons, such as: in a complex page design, a developer needs to design a large number of icons, and how to improve the development efficiency of a page is a problem to be solved urgently at present.

Disclosure of Invention

The embodiment of the application provides a character icon editing method, a character icon editing device, a storage medium and a terminal, and the efficiency of page development is improved through multiplexing of page elements. The technical scheme is as follows:

in a first aspect, an embodiment of the present application provides a method for editing a character icon, where the method includes:

displaying a page; wherein the page comprises a component library and a canvas;

in response to a drag operation, dragging a character icon component in the component library into the canvas; the character icon assembly is provided with an icon display area;

displaying a resource library in response to a triggering operation for the character icon component;

and in response to the selection operation of the resource library, placing the selected character icon in the icon display area.

In a second aspect, an embodiment of the present application provides an apparatus for editing a character icon, where the apparatus includes:

the uploading unit is used for uploading the data of the locally stored character icons to a resource library;

a display unit for displaying a page; wherein the page comprises a component library and a canvas;

the dragging unit is used for responding to dragging operation and dragging the character icon components in the component library into the canvas; the character icon assembly is provided with an icon display area;

the display unit is also used for responding to the triggering operation of the character icon component and displaying an operation interface of the resource library;

and the placing unit is used for placing the selected character icon in the icon display area in response to the selection operation of the operation interface.

In a third aspect, embodiments of the present application provide a computer storage medium storing a plurality of instructions adapted to be loaded by a processor and to perform the above-mentioned method steps.

In a fourth aspect, an embodiment of the present application provides a terminal, which may include: a processor and a memory; wherein the memory stores a computer program adapted to be loaded by the processor and to perform the above-mentioned method steps.

The beneficial effects brought by the technical scheme provided by some embodiments of the application at least comprise:

the method comprises the steps of uploading data of locally stored character icons to a resource library, dragging a character icon assembly into a canvas of a page in the page editing process, selecting the character icons from a control interface of the resource library based on the triggering operation of the character icon assembly, placing the selected character icons in a character display area of the character icon assembly, achieving uploading and multiplexing of the character icons, and enabling a user to conveniently and quickly guide the character icons in the resource library into the page by using the character icon assembly, so that the page editing efficiency can be improved.

Drawings

In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present application, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.

Fig. 1 is a schematic flowchart of a method for editing a character icon according to an embodiment of the present application;

fig. 2 is a schematic flow chart of uploading data of a character icon according to an embodiment of the present application;

3-7 are schematic diagrams of user interfaces provided by embodiments of the present application;

fig. 8 is a schematic structural diagram of an apparatus for editing a character icon according to an embodiment of the present application;

fig. 9 is a schematic structural diagram of a terminal according to an embodiment of the present application.

Detailed Description

In order to make the objects, technical solutions and advantages of the present application more clear, embodiments of the present application will be described in further detail below with reference to the accompanying drawings.

When the following description refers to the accompanying drawings, like numbers in different drawings represent the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present application. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the application, as detailed in the appended claims.

In the description of the present application, it is to be understood that the terms "first," "second," and the like are used for descriptive purposes only and are not to be construed as indicating or implying relative importance. The specific meaning of the above terms in the present application can be understood in a specific case by those of ordinary skill in the art. Further, in the description of the present application, "a plurality" means two or more unless otherwise specified. "and/or" describes the association relationship of the associated objects, meaning that there may be three relationships, e.g., a and/or B, which may mean: a exists alone, A and B exist simultaneously, and B exists alone. The character "/" generally indicates that the former and latter associated objects are in an "or" relationship.

The method for editing a character icon provided in the embodiment of the present application will be described in detail below with reference to fig. 1 to 7. The method may be implemented in dependence on a computer program, executable on an editing device based on character icons of the von neumann architecture. The computer program may be integrated into the application or may run as a separate tool-like application. The editing apparatus of the character icon in the embodiment of the present application may be a terminal, including but not limited to a smartphone, a personal computer, a tablet computer, a handheld device, an in-vehicle device, a wearable device, a computing device, or other processing device connected to a wireless modem.

Fig. 1 is a schematic flow chart illustrating an editing method for a character icon according to an embodiment of the present disclosure. As shown in fig. 1, the method of the embodiment of the present application may include the steps of:

s101, uploading data of the locally stored character icons to a resource library.

The memory of the editing device stores character icons to be uploaded, and the format of the character icons is SVG (scalable vector graphics). The resource library is a database, can be deployed in local or internet, and other terminal devices can access the resource library according to certain authority to realize resource sharing. For example: the resource library is a mysql database. The method and the device can convert the character icons in the SVG format into the data of base64, upload the data in the base64 format to the resource library for storage, and form a record of the character icons in the resource library.

In a possible embodiment, referring to fig. 2, uploading the data of the locally stored character icon to the repository specifically includes:

and S1011, displaying an operation interface of the resource library.

When the character icons need to be uploaded, the resource library is opened, an operation interface of the resource library is displayed through the display unit, the operation interface is a human-computer interaction image interface, and the operation interface is provided with an uploading button and a plurality of character icons related to records stored in the database.

Further, the plurality of character icons in the operation interface may be divided into a plurality of groups, for example: the icons are divided into a plurality of groups according to different icon types, so that the user can conveniently search the icons. In addition, the character icons uploaded by the user may be individually divided into one group.

And S1012, responding to the trigger operation on the uploading button, and displaying the folder under the specified path.

Wherein, the user can execute the trigger operation through the mouse, the keyboard or the touch screen, for example: the user clicks the uploading case through a mouse to execute a trigger operation, the editing device responds to the trigger operation, a folder under an appointed path is displayed, the appointed path is a default file storage path, the user can also independently select the file path on an operation interface, and one or more character icons to be uploaded are stored in the folder under the appointed path.

And S1013, responding to the selection operation in the folder, and uploading the data of the selected character icon to a resource library.

Wherein, the selection operation may be performed by a mouse, a keyboard, or a touch screen, for example: and the user performs selection operation by clicking the character icon in the folder through a mouse, converts the selected character icon in the SVG format into data in the base64 format, and uploads the data to the resource library.

The process of uploading the character icons is explained below using the user interface of fig. 3 and 4:

when a user executes a trigger operation on an upload button arranged on a resource library, a folder 'download' under a specified path shown in fig. 4 is displayed, the user can select different paths according to requirements, the folder comprises a plurality of character icons, the user can execute a selection operation on the plurality of character icons, the selected character icons are highlighted, other unselected character icons 'fireworks' are distinguished, when the trigger operation on an open button is detected, data of the selected character icons are written into the resource library to form a record, correspondingly, the record is shown in fig. 5, and the 'fireworks' character icons are additionally arranged on an operation panel of the resource library.

In one or more possible embodiments, the method further comprises:

and responding to the editing operation, and deleting or moving the character icon in the control panel of the resource library.

When a character icon on the control panel is selected, the character icon displays a deletion mark, for example: the deletion mark is x, when the trigger operation on the deletion mark is detected, the selected character icon in the control panel is deleted, and correspondingly, the record of the character icon in the resource library is also deleted. When the character icon is moved, the selected character icon is dragged, and the character icon is dragged to the designated position on the control panel. Further, the editing apparatus may also automatically sort the character icons according to the number of times of use, and the character icons with more times of use are closer to the front, and correspondingly, the character icons with less times of use are closer to the back, that is, the character icons are arranged in descending order according to the number of times of use.

And S102, displaying a page.

When a user needs to edit the icon of the page, the page to be edited is displayed through the display unit, the page comprises a component library and a canvas, the component library comprises a plurality of components, the components are controls, the user realizes specific functions through interaction among the controls, each component is used for executing different functions, and the canvas is an area for executing content editing in the page.

S103, in response to the dragging operation, dragging the character icon components in the component library into the canvas.

The dragging operation can be triggered by a mouse, a keyboard or a touch screen, and the user drags the character icon component selected in the component library from the starting position to the ending position on the canvas through the dragging operation. For example: and the user executes dragging operation through the mouse, moves a cursor to be positioned on the selected character icon component, then presses the left key of the main mouse to drag the character icon component, releases the left key of the mouse when reaching the specified position of the canvas, and finishes the placement of the character icon component. Another example is: and the user executes dragging operation through the touch screen, the finger of the user moves to the selected character icon component, then the character icon component is pressed and dragged, the finger is lifted when the finger reaches the specified position of the canvas, and the placement of the character icon component is completed. In addition, the character icon component is provided with an icon display area, after the dragging operation of the character icon component is completed, default character icons can be displayed in the icon display area, or any character icon can not be displayed, and the selected character icon is displayed subsequently.

And S104, when the triggering operation of the character icon assembly is responded, displaying an operation panel of the resource library.

Specifically, the trigger operation is an operation on a control contained on the character icon component, and the operation types include, but are not limited to: mouse operation, keyboard operation and touch operation. The operation panel of the resource library comprises a plurality of character icons, and the character icons are in one-to-one correspondence with the records in the resource library.

In one or more possible embodiments, the displaying the operation interface of the resource library in response to the triggering operation for the character icon component includes:

displaying a group of icons associated with the character icon component in response to a double-click operation within the icon display area or in response to a single-click operation on an icon setting button included in the character icon component; and the icon group belongs to the character icons related to the resource library.

The control interface of the control resource library comprises a plurality of character icons, the character icons are divided into a plurality of groups, and the icon group associated with the character icon assembly is one of the groups.

For example, the dragging process of the character icon component of the present application is explained with reference to fig. 5 and 6:

the page of FIG. 6 includes a component library and canvas thereon, the component library comprising a plurality of components: the electronic device comprises a label component, a text box component, a character icon component and the like, wherein when the dragging operation on the character icon component is detected, the character icon component is dragged to a canvas, a rectangular character display area is arranged on the character icon component, the size of the character display area is 34 pixels multiplied by 34 pixels, a '+' character icon is displayed in the character display area by default, and an icon setting button is arranged on the character icon component. When a double-click operation within the icon display area is detected, the group of icons "my icon" as in fig. 7 is displayed; or when a one-click operation on the icon set button is detected, the group of icons "my icon" as in fig. 7 is displayed. It can be seen that the control interface includes character icons divided into: a deer icon, an sdk icon, a my icon, etc.

And S105, when the selection operation of the control interface is responded, placing the selected character icon in the icon display area.

Specifically, the control panel is a window arranged above the page and used for human-computer interaction, the control panel comprises a plurality of character icons, and each character icon corresponds to one data (record) in the resource library. The selection operation mode is frame selection or click selection, when the selection operation on a certain character icon is detected, the data of the character icon is obtained from a resource library, the data is converted into HTML codes, and then the HTML codes are inserted into a code set of a page.

Referring to fig. 6 and 7, a process of editing a character icon according to the present application will be described. The control panel of fig. 7 displays a plurality of character icons, and when a single-click operation on the character icon "customer service" is detected, the edges of the character icons are displayed in bold, and when a single-click operation on the decision button is detected, the character icon "customer service" is displayed in the icon display area of fig. 7, replacing the original "+" character icon.

In one or more possible embodiments, the placing the selected character icon in the icon display area in response to the selection operation for the operation interface includes:

adding a selection mark on the selected character icon in response to the selection operation of the operation panel;

acquiring an inner HTML attribute value of a DOM element corresponding to the character display area;

acquiring data of the selected character icon from the resource library, and converting the data of the selected character icon into an HTML code;

and setting the InnerHTML attribute value of the DOM element as the HTML code.

Specifically, a DOM (Document Object Model) element corresponds to a character display area, an inner HTML attribute value is used for acquiring HTML codes in a start tag and an end tag of the DOM element, a record in a base format is stored in a resource library, the record in the base format is converted into the HTML codes, the HTML codes in the start tag and the end tag are replaced by the converted HTML codes, and the addition of character icons is realized on a canvas.

In one or more possible embodiments, the character icon component further includes: an attribute setting button;

the method further comprises the following steps:

responding to the triggering operation of the attribute setting button, and performing attribute setting on the character icons in the character display area; wherein the attributes include one or more of size, color, location, and trigger event. For example: the size of the character icon is adjusted through a size adjusting button arranged on the character icon component; the color of the character icon is adjusted through a color adjusting button arranged on the character icon component; the position of the character icon on the canvas is adjusted through a position adjusting button arranged on the character icon assembly; through a trigger time adjusting button arranged on the character icon, a trigger event specific to the character icon condition is executed when the trigger event is met, for example: and adding a cursor triggering event on the character icon, and outputting a specific prompt tone when the cursor moves to the character icon.

In the embodiment of the application, the locally stored data of the character icons is uploaded to the resource library, in the page editing process, the character icon components are dragged into a canvas of a page, then the character icons are selected from a control interface of the resource library based on the triggering operation of the character icon components, the selected character icons are placed in a character display area of the character icon components, the uploading and multiplexing of the character icons are achieved, a user can conveniently and quickly guide the character icons in the resource library into the page by using the character icon components, and therefore the page editing efficiency can be improved.

The following are embodiments of the apparatus of the present application that may be used to perform embodiments of the method of the present application. For details which are not disclosed in the embodiments of the apparatus of the present application, reference is made to the embodiments of the method of the present application.

Please refer to fig. 8, which illustrates a schematic structural diagram of an apparatus for editing a character icon according to an exemplary embodiment of the present application. The character icon editing means may be implemented by software, hardware, or a combination of both as all or a part of the terminal. The device 8 comprises: an upload unit 801, a display unit 802, a drag unit 803, and a drop unit 805.

An uploading unit 801, configured to upload data of locally stored character icons to a resource library;

a display unit 802 for displaying a page; wherein the page comprises a component library and a canvas;

a dragging unit 803, configured to, in response to a dragging operation, drag a character icon component in the component library into the canvas; the character icon assembly is provided with an icon display area;

the display unit 802 is further configured to display an operation interface of the resource library in response to a trigger operation for the character icon component;

a placing unit 804, configured to place the selected character icon in the icon display area in response to a selection operation for the operation interface.

In one or more possible embodiments, the uploading the data of the locally stored character icon to the repository includes:

displaying an operation interface of the resource library; the operating interface of the resource library is provided with an uploading button;

responding to the trigger operation on the uploading button, and displaying the folder under the specified path;

and responding to the selection operation in the folder, and uploading the data of the selected character icon to the resource library.

In one or more possible embodiments, the displaying the operation interface of the resource library in response to the triggering operation for the character icon component includes:

displaying a group of icons associated with the character icon component in response to a double-click operation within the icon display area or in response to a single-click operation on an icon setting button included in the character icon component; and the icon group belongs to the character icons related to the resource library.

In one or more possible embodiments, the placing the selected character icon in the icon display area in response to the selection operation for the operation interface includes:

adding a selection mark on the selected character icon in response to the selection operation of the operation panel;

acquiring an inner HTML attribute value of a DOM element corresponding to the character display area;

acquiring data of the selected character icon from the resource library, and converting the data of the selected character icon into an HTML code;

and setting an inner HTML attribute value of the DOM element as the HTML code.

In one or more possible embodiments, the method further comprises:

and the editing unit is used for responding to editing operation and deleting or moving the character icons in the operation interface.

In one or more possible embodiments, the character icon component further includes: an attribute setting button;

the device 8 further comprises:

the adjusting unit is used for responding to the triggering operation of the attribute setting button and carrying out attribute setting on the character icons in the character display area; wherein the attributes include one or more of size, color, location, and trigger event.

In one or more possible embodiments, the data of the character icons in the resource library is in base64 format.

It should be noted that, when the editing apparatus for character icons provided in the above embodiments executes the editing method for character icons, only the division of the above functional modules is taken as an example, and in practical applications, the above functions may be distributed by different functional modules according to needs, that is, the internal structure of the device may be divided into different functional modules to complete all or part of the above described functions. In addition, the apparatus for recovering user data provided by the above embodiment and the embodiment of the editing method for character icons belong to the same concept, and details of implementation processes thereof are referred to in the embodiment of the method, and are not described herein again.

The above-mentioned serial numbers of the embodiments of the present application are merely for description and do not represent the merits of the embodiments.

An embodiment of the present application further provides a computer storage medium, where the computer storage medium may store a plurality of instructions, where the instructions are suitable for being loaded by a processor and executing the method steps in the embodiments shown in fig. 1 to 7, and a specific execution process may refer to specific descriptions of the embodiments shown in fig. 1 to 7, which are not described herein again.

Please refer to fig. 9, which provides a schematic structural diagram of a terminal according to an embodiment of the present application. As shown in fig. 9, the terminal 900 may include: at least one processor 901, at least one network interface 904, a user interface 903, memory 905, at least one communication bus 902.

Wherein a communication bus 902 is used to enable connective communication between these components.

The user interface 903 may include a Display screen (Display) and a Camera (Camera), and the optional user interface 903 may also include a standard wired interface and a wireless interface.

The network interface 904 may optionally include a standard wired interface, a wireless interface (e.g., WI-FI interface), among others.

Processor 901 may include one or more processing cores, among other things. The processor 901 interfaces with various interfaces and circuitry throughout the various parts of the terminal 900 to perform various functions of the terminal 900 and process data by executing or performing instructions, programs, code sets or instruction sets stored in the memory 905, as well as invoking data stored in the memory 905. Optionally, the processor 901 may be implemented in at least one hardware form of Digital Signal Processing (DSP), Field-Programmable Gate Array (FPGA), and Programmable Logic Array (PLA). The processor 901 may integrate one or a combination of a Central Processing Unit (CPU), a Graphics Processing Unit (GPU), a modem, and the like. Wherein, the CPU mainly processes an operating system, a user interface, an application program and the like; the GPU is used for rendering and drawing the content required to be displayed by the display screen; the modem is used to handle wireless communications. It is understood that the modem may not be integrated into the processor 901, but may be implemented by a single chip.

The Memory 905 may include a Random Access Memory (RAM) or a Read-Only Memory (Read-Only Memory). Optionally, the memory 905 includes a non-transitory computer-readable medium. The memory 905 may be used to store instructions, programs, code, sets of codes, or sets of instructions. The memory 905 may include a program storage area and a data storage area, wherein the program storage area may store instructions for implementing an operating system, instructions for at least one function (such as a touch function, a sound playing function, an image playing function, etc.), instructions for implementing the above-described method embodiments, and the like; the storage data area may store data and the like referred to in the above respective method embodiments. The memory 905 may optionally be at least one memory device located remotely from the processor 901. As shown in fig. 9, the memory 905, which is one type of computer storage medium, may include therein an operating system, a network communication module, a user interface module, and a fraud phone identification application.

In the terminal 900 shown in fig. 9, the user interface 903 is mainly used for providing an input interface for a user to obtain data input by the user; and the processor 901 may be used to invoke the identification application of the fraudulent phone stored in the memory 905 and to specifically execute the method shown in fig. 1 or fig. 2.

The embodiment of the present application and the embodiment of the method in fig. 1 or fig. 2 belong to the same concept, and the technical effects thereof are also the same, and the specific process may refer to the description in fig. 1 or fig. 2, and will not be described again here.

In the embodiment of the application, the character icons of the resource library can be uploaded and managed at will, and relevant attributes such as size, color, position, space, trigger time and the like can be set quickly and conveniently. Meanwhile, the file storage unit is smaller, the loading speed is higher, modification and adjustment are more convenient, and the file storage unit can be compatible with various terminals and browsers without distortion, so that the trouble of related design and developers is greatly reduced, and the working efficiency of page editing can be improved.

It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by a computer program, which can be stored in a computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. The storage medium may be a magnetic disk, an optical disk, a read-only memory or a random access memory.

The above disclosure is only for the purpose of illustrating the preferred embodiments of the present application and is not to be construed as limiting the scope of the present application, so that the present application is not limited thereto, and all equivalent variations and modifications can be made to the present application.