Detailed Description
In the following description, for purposes of explanation and not limitation, specific details are set forth such as the particular system architecture, techniques, etc., in order to provide a thorough understanding of the embodiments of the present application. It will be apparent, however, to one skilled in the art that the present application may be practiced in other embodiments that depart from these specific details. In other instances, detailed descriptions of well-known systems, devices, circuits, and methods are omitted so as not to obscure the description of the present application with unnecessary detail.
It should be understood that the terms "comprises" and/or "comprising," when used in this specification and the appended claims, specify the presence of stated features, integers, steps, operations, elements, and/or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and/or groups thereof.
It should also be understood that the term "and/or" as used in the present specification and the appended claims refers to any and all possible combinations of one or more of the associated listed items, and includes such combinations.
As used in the present description and the appended claims, the term "if" may be interpreted as "when..once" or "in response to a determination" or "in response to detection" depending on the context. Similarly, the phrase "if a determination" or "if a [ described condition or event ] is detected" may be interpreted in the context of meaning "upon determination" or "in response to determination" or "upon detection of a [ described condition or event ]" or "in response to detection of a [ described condition or event ]".
Furthermore, the terms "first," "second," "third," and the like in the description of the present specification and in the appended claims, are used for distinguishing between descriptions and not necessarily for indicating or implying a relative importance.
Reference in the specification to "one embodiment" or "some embodiments" or the like means that a particular feature, structure, or characteristic described in connection with the embodiment is included in one or more embodiments of the application. Thus, appearances of the phrases "in one embodiment," "in some embodiments," "in other embodiments," and the like in the specification are not necessarily all referring to the same embodiment, but mean "one or more but not all embodiments" unless expressly specified otherwise. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless expressly specified otherwise.
It should be understood that the sequence numbers of the steps in the following embodiments do not mean the order of execution, and the execution order of the processes should be determined by the functions and the internal logic, and should not be construed as limiting the implementation process of the embodiments of the present application.
In order to illustrate the technical scheme of the application, the following description is made by specific examples.
The method for managing custom icons provided in the first embodiment of the present application can be applied in an application environment as shown in fig. 1, in which a client communicates with a server, a user can provide conditions, requirements, operation instructions, etc. for managing custom icons for the server by operating the client, and the server is configured to execute the method for managing custom icons according to related content sent by the client.
The client includes, but is not limited to, a palm computer, a desktop computer, a notebook computer, an ultra-mobile personal computer (UMPC), a netbook, a cloud terminal, a Personal Digital Assistant (PDA), and other computer devices. The server may be an independent server, or may be a cloud server that provides cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery networks (Content Delivery Network, CDN), and basic cloud computing services such as big data and artificial intelligence platforms.
Referring to fig. 2, a flow chart of a custom icon management method according to a second embodiment of the present application is shown, where the custom icon management method can be applied to the server in fig. 1.
As shown in fig. 2, the custom icon management method may include the following steps:
Step S201, importing a target file, extracting an icon set object from the target file, and respectively carrying out standardization processing on each icon object in the icon set object to obtain a standardized icon object.
Optionally, removing redundant attribute of each icon object in the icon set object to obtain a non-redundant icon object;
and carrying out standardized structure processing on the non-redundant icon object to obtain a standardized icon object.
The target file is a file containing a plurality of icons, and common formats such as an SVG icon library file, ICONFONT font file and the like. The corresponding interface or tool may read these files and load the file contents into memory for subsequent processing.
For example, a JavaScript fetch API may be used in Web development to read a remote SVG file.
After the target file is successfully imported, each icon needs to be identified and extracted from the file content, and the icons are combined into an icon set object. The icon set object may be represented by an array, list, or like data structure, where each element is an icon object. Taking an SVG file as an example, the < SVG > tag and the subelements of each icon are found out by analyzing the XML structure of the SVG, and the < SVG > tag and the subelements are packaged into an icon object.
The icon object contains some attributes that have no effect in actual use, which may be left over during the icon design or editing process. For example, unused style classes, annotation information, unnecessary transformation attributes and the like may exist in the SVG icon, and clearing the redundant attributes can reduce the storage space occupied by the icon object and improve the processing efficiency. At the same time, the interference of the redundant information on the subsequent operation can be avoided.
For example, redundant attributes may cause unnecessary errors or confusion when performing copying, modifying, etc. operations of the icons.
The content of the standardized structure is mainly to unify and normalize the structure of the non-redundant icon objects. Including the size (e.g., width, height) of the unified icon, the coordinate system, the naming and format of the style attributes, and the like. After the standardized structure is processed, all icon objects have a consistent structure, so that subsequent batch operation and management are convenient. For example, the width and height of all icons are unified to a certain fixed value, or the origin of coordinates of the icons is unified to the upper left corner.
For example, in a financial transaction scenario, various icons may be used to represent different financial indicators, such as stock rise and fall icons, risk level icons, etc., when generating a financial statement. A large number of icons may be used in the financial transaction interface to represent various operating buttons, transaction status, etc. Various icons may be used to highlight features and advantages of the product when designing financial product promotional material.
For example, in a medical image icon processing scenario, various icons may be used in a medical image diagnostic system to mark different lesions, anatomical structures, etc. information. By importing the target file containing the icon information and carrying out standardized processing on the icon set, the image diagnosis labels among different doctors can be more unified.
Step S202, obtaining target color information of each standardized icon object, and carrying out color adjustment on the standardized icon object according to the target color information of any standardized icon object to obtain an adjusted icon object.
Optionally, code compression is performed on each standardized icon object to obtain a compressed icon object.
The method comprises the steps of obtaining target color information of each compressed icon object, and carrying out color adjustment on the compressed icon objects according to the target color information of any compressed icon object to obtain adjusted icon objects.
The target color information refers to a color setting to be finally presented by the icon. It may be a preset fixed color, for example, the icon is required to be red, blue, etc., or may be a color dynamically generated according to a certain rule, for example, the color is determined according to the position of the icon in the page, the operation state of the user, etc.
The specific manner of acquisition depends on the manner in which the icon objects are stored and managed. If the icon object is stored in the database, the target color information may be associated with the icon object as a field, and may be directly obtained by querying from the database. For SVG icons, the target color information may be stored in a CSS style sheet or defined in an inline style within a < style > tag, which may be obtained by parsing the XML structure of the SVG or an associated CSS file.
For each standardized icon object, modifying the color attribute of the standardized icon object according to the acquired target color information.
Taking SVG icons as an example, colors in SVG are typically defined by fill (fill color) and stroke (stroked color) attributes. Therefore, it is necessary to traverse the SVG element to find all the attributes related to the color definition, replacing its value with the target color.
The code compression is mainly used for reducing the size of the icon file and improving the loading speed. In the icon object, there are unnecessary spaces, line breaks, notes, redundant attribute definitions, etc., which can be removed by code compression. For SVG icons, there are many open-sourced tools and libraries that can implement code compression, such as SVGO (SVG Optimizer). The SVG file can be processed through a series of optimization rules, unnecessary elements and attributes are removed, and paths are merged and the like.
Although the target color information may have been acquired before compression, since code compression may change the structure and storage manner of the icon object, it is necessary to re-acquire the target color information of the compressed icon object. The acquisition is similar to that previously obtained without code compression. And modifying the color attribute of the compressed icon object according to the target color information by using the same color adjustment method as that when the code compression is not performed, and finally obtaining the adjusted icon object.
For example, in a financial data visualization scenario, for example, by acquiring target color information of an icon object and performing color adjustment, the color of the icon can be updated in real time according to changes of market quotations, so that investors can more intuitively know financial market dynamics. In the visual of financial risk assessment, icons are used for representing different risk levels, and color adjustment can dynamically change the colors of the icons according to the risk assessment result, such as a green icon for low risk and a red icon for high risk, so that risk information is clear at a glance.
For example, in a medical information display scene, icons are used in medical information systems such as an electronic medical record system and a medical scheduling system to represent different functional modules and information types, and important warning information icons are adjusted to be in striking colors so as to avoid information from being ignored.
Step S203, respectively generating a corresponding front-end display file for each adjusted icon object in a preset format, converting each front-end display file to obtain a corresponding display assembly, and dynamically rendering each display assembly to obtain a corresponding dynamic icon.
The preset format is a file format suitable for being displayed at the front end, and different formats are suitable for different scenes and requirements.
For example, HTML can be used to construct a page structure where an icon is located, CSS is used to set the style of the icon, SVG is a format that supports vector graphics presentation itself, and can be used directly embedded in HTML.
And for each adjusted icon object, converting the icon object into corresponding file content according to the requirement of a preset format. Taking SVG icon as an example, since the adjusted icon object may already include modification of attributes such as color, it is just needed to directly store it as a file in the correct SVG XML format. If the HTML and CSS files are generated, the information of the icon object needs to be combined with the HTML tags and CSS style rules.
For example, SVG icons are embedded into the < SVG > tag of HTML and are styled by CSS.
The presentation component is a reusable code module that encapsulates presentation logic and styles of icons together for convenient reuse in different pages or items. In front-end development, componentized frameworks act, vue, etc., are available that provide a mechanism for creating and using components. By converting the front-end presentation file into a presentation component, maintainability and reusability of the code may be improved. When the icon needs to be modified or updated, only the code of the component needs to be modified, and no modification is needed at every place where the icon is used.
Dynamic rendering refers to changing the display effect of icons in real time according to different conditions or user interactions. For example, the color, size, transparency, and other properties of the icon are changed according to a user's mouse-over, click, and other operations, or the color of the icon is automatically switched according to the state of the page (e.g., day mode, night mode).
For example, in a financial product recommendation scene, dynamic animation icons are used for displaying the income situation of financial products, the change of investment combinations and the like, so that customers can know the operation mechanism of the products more clearly. In the customer service interface, dynamic icons guide customer operations, providing assistance and prompts.
For example, in a medical image analysis scene, in a medical image such as CT or MRI, a doctor needs to label and analyze a lesion region, an anatomical structure, or the like. The labeling icons can be processed according to a preset format, and dynamic icons are generated and displayed on the image. Namely, the labeling icons of the tumor area attract the attention of doctors through dynamic flickering or color change, and meanwhile, the sizes of the icons are dynamically adjusted according to the growth condition of the tumor, so that the doctors are helped to observe the development of the tumor more intuitively.
According to the embodiment of the application, the target file is imported, the icon set object is extracted from the target file, each icon object in the icon set object is subjected to standardization processing to obtain the standardized icon object, the target color information of each standardized icon object is obtained, color adjustment is carried out on the standardized icon object according to the target color information of the standardized icon object aiming at any standardized icon object to obtain the adjusted icon object, the corresponding front-end display file is respectively generated for each adjusted icon object in a preset format, each front-end display file is converted to obtain the corresponding display assembly, and dynamic rendering is carried out on each display assembly to obtain the corresponding dynamic icon. The method can be applied to the technical field of front-end image processing, the financial and technological field and the digital medical field, and the dynamic icon is obtained by importing the target file to extract the icon set object, standardizing, obtaining standardized icon target color information to perform color adjustment, generating the front-end display file in a preset format, converting and rendering. Thus, the color adjustment is automatically carried out on the icons so as to customize the management of the icons and obtain dynamic icons.
Referring to fig. 3, a flowchart of a custom icon management method according to a third embodiment of the present application is shown. As shown in fig. 3, the acquiring of the target color information of each standardized icon object in the above step S202 may include the steps of:
Step S301, each standardized icon object is parsed to obtain an icon file name corresponding to the standardized icon object.
Step S302, detecting whether the icon file name contains a preset suffix.
Optionally, if it is detected that the icon file name does not include the preset suffix, it is determined currentColor as the target color information.
In front-end development, currentColor is used to facilitate unified color management. When the color of a group of icons or elements needs to be changed, only the color attribute value of the common parent element needs to be modified, and all colors of the child elements using currentColor are changed correspondingly, so that the color attribute of each element does not need to be modified one by one.
And currentColor is determined as target color information, so that the icon has higher flexibility when displayed at the front end. The icon is no longer fixed to a certain color, but can be dynamically changed according to the color attribute value of the context in which it is located. For example, under different topics, the color of the icon can be automatically adapted only by modifying the color attribute of the parent element
Step S303, if it is detected that the icon file name includes a preset suffix, an original color value of the corresponding standardized icon object is obtained, and the original color value is determined to be the target color information.
The standardized icon object is a data structure containing various information of icons, such as icon data stored in a program in the form of objects or in a database or a file system. Parsing is to extract key information of the icon file name from the icon object.
The preset suffixes are preset filename suffixes for identifying specific types or states, and the suffixes can be used for representing that the icons have a specific color or style.
The original color value is a color value possessed by the icon object itself. For SVG icons, the color values are defined by fill (fill color) and stroke (stroked color) attributes. These color values may be obtained by parsing the XML structure of the SVG.
When the icon file name is detected to contain the preset suffix, the obtained original color value is used as target color information. These original color values are then used to modify the color of the icon object when color adjustments are made. For example, in color adjustment, the fill and spoke attribute values of the icon are replaced with these original color values.
In this embodiment, the target color information is accurately obtained according to the characteristics of the icon file name, so as to provide a basis for subsequent color adjustment.
Referring to fig. 4, a flowchart of a custom icon management method according to a fourth embodiment of the present application is shown. As shown in fig. 4, in step S203, generating a corresponding front-end presentation file for each adjusted icon object in a preset format, may include the following steps:
Step S401, compiling processing is carried out on each adjusted icon object based on a compiling tool preset, and a content file in a preset format is obtained.
Step S402, generating a type definition file for the content file, and combining the content file and the type definition file to obtain a front-end display file.
The preset compiling tool is a tool specially designed for converting the icon object into a specific preset format, and the content file and the type definition file are combined, so that a front-end developer can obtain better development experience when using the icon. The specific manner of incorporation depends on the construction tool and development environment of the project.
For example, in project construction using Webpack, the content file and the type definition file may be processed by configuring the corresponding loader.
According to the embodiment, the adjusted icon object is converted into the file suitable for front-end display, so that convenience is brought to front-end development.
Referring to fig. 5, a flowchart of a custom icon management method according to a fifth embodiment of the present application is shown. As shown in fig. 5, the step S203 of dynamically rendering each display component to obtain a corresponding dynamic icon may include the following steps:
Step S501, loading each display assembly by using a preset loading tool to obtain a loaded display assembly.
Step S502, dynamically rendering the loaded display assembly by using a preset rendering tool to obtain a corresponding dynamic icon.
The preset loading tool is used for reading the display component from a storage position (such as a file system, a network server and the like) of the display component into a current running environment, and the preset rendering tool is used for converting the loaded display component into an actual DOM element so that the display component is visible in a browser.
Dynamic rendering means changing the display effect of icons according to different conditions or data at run-time. For example, the color, size, shape, etc. of the icon is dynamically updated according to user interactions, changes in real-time data, etc.
According to the embodiment, the display assembly is converted into the dynamic icon, so that richer and strong-interactivity interface experience is provided for the user.
Fig. 6 shows a block diagram of a custom icon management apparatus according to a sixth embodiment of the present application, which corresponds to the custom icon management method of the above embodiment, and the custom icon management apparatus may be applied to the server in fig. 1.
Referring to fig. 6, the custom icon management apparatus includes:
The preprocessing module 61 is configured to import a target file, extract an icon set object from the target file, and perform normalization processing on each icon object in the icon set object to obtain a normalized icon object;
The color adjustment module 62 is configured to obtain target color information of each standardized icon object, and perform color adjustment on the standardized icon object according to the target color information of the standardized icon object for any standardized icon object, to obtain an adjusted icon object;
The icon management module 63 is configured to generate a corresponding front-end display file for each adjusted icon object in a preset format, convert each front-end display file to obtain a corresponding display assembly, and dynamically render each display assembly to obtain a corresponding dynamic icon.
Optionally, the preprocessing module 61 includes:
And the redundancy elimination unit is used for eliminating the redundancy attribute of each icon object in the icon set object to obtain a non-redundancy icon object.
And the standardized processing unit is used for carrying out standardized structure processing on the non-redundant icon object to obtain a standardized icon object.
Optionally, the custom icon management device further includes:
And the code compression module is used for carrying out standardization processing on each icon object in the icon set object to obtain standardized icon objects, and then carrying out code compression on each standardized icon object to obtain compressed icon objects.
The compressed icon adjusting module is used for acquiring the target color information of each compressed icon object, and carrying out color adjustment on the compressed icon objects according to the target color information of any compressed icon object to obtain adjusted icon objects.
Optionally, the color adjustment module 62 includes:
the icon file name acquisition unit is used for analyzing each standardized icon object to obtain the icon file name of the corresponding standardized icon object;
An icon file detection unit, configured to detect whether a preset suffix is included in the icon file name;
And the target color determining unit is used for acquiring an original color value of the corresponding standardized icon object if the icon file name contains the preset suffix, and determining the original color value as target color information.
Optionally, the custom icon management device further includes:
And the preset suffix detection module is used for determining currentColor as target color information if the icon file name is detected to not contain the preset suffix after the icon file name is detected to contain the preset suffix.
Optionally, the icon management module 63 includes:
the content file acquisition unit is used for compiling each adjusted icon object based on a preset compiling tool to obtain a content file in a preset format;
The front-end display unit is used for generating a type definition file of the content file, and combining the content file and the type definition file to obtain a front-end display file.
Optionally, the icon management module 63 further includes:
The loading unit is used for loading each display assembly by using a preset loading tool to obtain loaded display assemblies;
And the dynamic icon acquisition unit is used for dynamically rendering the loaded display assembly by using a preset rendering tool to obtain a corresponding dynamic icon.
It should be noted that, because the content of information interaction, execution process and the like between the modules, units and sub-units is based on the same concept as the method embodiment of the present application, specific functions and technical effects thereof may be referred to in the method embodiment section, and will not be described herein.
Fig. 7 is a schematic structural diagram of a computer device according to a seventh embodiment of the present application. As shown in fig. 7, the computer device of this embodiment includes at least one processor (only one is shown in fig. 7), a memory, and a computer program stored in the memory and executable on the at least one processor, the processor implementing any of the various custom icon management methods or steps in the custom icon management method embodiments described above when executing the computer program.
The computer device may include, but is not limited to, a processor, a memory. It will be appreciated by those skilled in the art that fig. 7 is merely an example of a computer device and is not intended to be limiting, and that a computer device may include more or fewer components than shown, or may combine certain components, or different components, such as may also include a network interface, a display screen, an input device, and the like.
The Processor may be a CPU, but may also be other general purpose processors, digital signal processors (DIGITAL SIGNAL processors, DSPs), application SPECIFIC INTEGRATED Circuits (ASICs), off-the-shelf Programmable gate arrays (Field-Programmable GATE ARRAY, FPGA) or other Programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
The memory includes a readable storage medium, an internal memory, etc., where the internal memory may be the memory of the computer device, the internal memory providing an environment for the execution of an operating system and computer-readable instructions in the readable storage medium. The readable storage medium may be a hard disk of a computer device, and in other embodiments may be an external storage device of a computer device, for example, a plug-in hard disk, a smart memory card (SMART MEDIA CARD, SMC), a Secure Digital (SD) card, a flash memory card (FLASH CARD), etc. that are provided on a computer device. Further, the memory may also include both internal storage units and external storage devices of the computer device. The memory is used to store an operating system, application programs, boot loader (BootLoader), data, and other programs such as program codes of computer programs, and the like. The memory may also be used to temporarily store data that has been output or is to be output.
It will be apparent to those skilled in the art that, for convenience and brevity of description, only the above-described division of the functional units and modules is illustrated, and in practical application, the above-described functional distribution may be performed by different functional units and modules according to needs, i.e. the internal structure of the apparatus is divided into different functional units or modules to perform all or part of the above-described functions. The functional units and modules in the embodiment may be integrated in one processing unit, or each unit may exist alone physically, or two or more units may be integrated in one unit, where the integrated units may be implemented in a form of hardware or a form of a software functional unit. In addition, the specific names of the functional units and modules are only for distinguishing from each other, and are not used for limiting the protection scope of the present application. The specific working process of the units and modules in the above device may refer to the corresponding process in the foregoing method embodiment, which is not described herein again. The integrated units, if implemented in the form of software functional units and sold or used as stand-alone products, may be stored in a computer readable storage medium. Based on such understanding, the present application may implement all or part of the flow of the method of the above-described embodiment, and may be implemented by a computer program to instruct related hardware, and the computer program may be stored in a computer readable storage medium, where the computer program, when executed by a processor, may implement the steps of the method embodiment described above. Wherein the computer program comprises computer program code, which may be in the form of source code, object code, executable files or in some intermediate form, etc. The computer readable medium can include at least any entity or device capable of carrying computer program code, recording medium, computer Memory, read-Only Memory (ROM), random access Memory (Random Access Memory, RAM), electrical carrier signals, telecommunications signals, and software distribution media. Such as a U-disk, removable hard disk, magnetic or optical disk, etc. In some jurisdictions, computer readable media may not be electrical carrier signals and telecommunications signals in accordance with legislation and patent practice.
The present application may also be implemented as a computer program product for implementing all or part of the steps of the method embodiments described above, when the computer program product is run on a computer device, causing the computer device to execute the steps of the method embodiments described above.
In the foregoing embodiments, the descriptions of the embodiments are emphasized, and in part, not described or illustrated in any particular embodiment, reference is made to the related descriptions of other embodiments.
Those of ordinary skill in the art will appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, or combinations of computer software and electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the solution. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present application.
In the embodiments provided by the present application, it should be understood that the disclosed apparatus/computer device and method may be implemented in other manners. For example, the apparatus/computer device embodiments described above are merely illustrative, e.g., the division of modules or units is merely a logical functional division, and there may be additional divisions when actually implemented, e.g., multiple units or components may be combined or integrated into another system, or some features may be omitted or not performed. Alternatively, the coupling or direct coupling or communication connection shown or discussed may be an indirect coupling or communication connection via interfaces, devices or units, which may be in electrical, mechanical or other forms.
The units described as separate units may or may not be physically separate, and units shown as units may or may not be physical units, may be located in one place, or may be distributed over a plurality of network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.
The foregoing embodiments are merely for illustrating the technical solution of the present application, but not for limiting the same, and although the present application has been described in detail with reference to the foregoing embodiments, it should be understood by those skilled in the art that the technical solution described in the foregoing embodiments may be modified or substituted for some of the technical features thereof, and that these modifications or substitutions should not depart from the spirit and scope of the technical solution of the embodiments of the present application and should be included in the protection scope of the present application.