WO2021218501A1 - 图标的样式风格处理的方法以及装置 - Google Patents

图标的样式风格处理的方法以及装置 Download PDF

Info

Publication number
WO2021218501A1
WO2021218501A1 PCT/CN2021/082665 CN2021082665W WO2021218501A1 WO 2021218501 A1 WO2021218501 A1 WO 2021218501A1 CN 2021082665 W CN2021082665 W CN 2021082665W WO 2021218501 A1 WO2021218501 A1 WO 2021218501A1
Authority
WO
WIPO (PCT)
Prior art keywords
path
main
icon
paths
icons
Prior art date
Application number
PCT/CN2021/082665
Other languages
English (en)
French (fr)
Inventor
张韵叠
刘爱兵
Original Assignee
华为技术有限公司
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 华为技术有限公司 filed Critical 华为技术有限公司
Publication of WO2021218501A1 publication Critical patent/WO2021218501A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons

Definitions

  • This application relates to the field of icon processing, and more specifically, to a method and device for icon style processing.
  • the icons displayed on the display interface of the electronic device are one of the most important elements in the entire display interface design.
  • the present application provides a method and device for processing icon styles.
  • the method can process the paths of each attribute of N icons in batches with corresponding styles, thereby improving the efficiency of icon style processing.
  • a method for processing icon styles including: obtaining N icons, where N is an integer greater than 1; converting the constituent elements of each icon into paths; marking the attributes of all paths of each icon , wherein the attributes of the path include the main path and the inner auxiliary path, or the attributes of the path include the main path and the outer auxiliary path, or the attributes of the path include the main path and the inner auxiliary path.
  • a path and the outer auxiliary path, the inner auxiliary path is inside the main path, and the outer auxiliary path is outside the main path; acquiring a target parameter corresponding to the attribute of the path, the target parameter Including stroke parameters, fill color and/or rounded corner radius; according to the target parameters corresponding to the attributes of the path, the path of each attribute in the N icons is styled and styled.
  • the component elements of each of the obtained N icons are converted into paths, and the attributes of the paths in each icon are marked, and the corresponding styles and styles of the N icons are processed according to the target parameters corresponding to the attributes of the paths. In this way, the path of each attribute of the N icons can be processed in a corresponding style and style, and the efficiency of icon style and style processing can be improved.
  • the main path is the path with the longest length among all paths.
  • the target parameter includes a stroke parameter
  • the path of each attribute in the N icons is styled according to the target parameter corresponding to the attribute of the path.
  • the method includes: stroke the main path of the N icons according to the stroke parameter corresponding to the main path; Stroke the auxiliary path; and/or, stroke the outer auxiliary path of the N icons according to the stroke parameter corresponding to the outer auxiliary path; and/or, according to the stroke parameter corresponding to the intersecting path , Stroke the intersecting paths of the N icons.
  • the stroke parameters include stroke color and/or stroke thickness.
  • the stroke color can be understood as the stroke color.
  • the attributes of the path further include an intersecting path, and the intersecting path is a path with at least one common point between one path and another path;
  • the target parameter corresponding to the attribute, and performing style processing on the path of each attribute in the N icons further includes: stroke the intersection path of the N icons according to the stroke parameter corresponding to the intersection path.
  • the paths of different attributes of each of the N icons are stroked, so that the corresponding stroke style processing can be performed on each attribute path of the N icons in batches. Improve the efficiency of icon style processing.
  • the performing style processing on the path of each attribute in the N icons according to the target parameter corresponding to the attribute of the path further includes: The closed area where the ratio of the area formed by the path to the stroke of the path in each icon is less than the preset value is filled.
  • the attributes of the path further include a closed path and an open path, the closed path is where the start point of the path and the end point of the path overlap, and the open path is The starting point of the path and the ending point of the path do not overlap;
  • the target parameter further includes a fill color, and the target parameter corresponding to the attribute of the path is used to determine the path of each attribute of the N icons.
  • Performing style processing includes: judging whether the main path of the N icons is a closed path, and if the main path is a closed path, the area formed by the main path is determined according to the fill color corresponding to the main path. Filling; if the main path is an open path, stroke the main path according to the fill color corresponding to the main path.
  • the above-mentioned filling includes pure color filling, gradient color filling or pattern filling.
  • the fill color refers to the color of the solid color fill.
  • the fill color refers to the color of the gradient fill.
  • the fill color refers to the color of the pattern fill.
  • main path of the N icons is a closed path icon, use the fill color corresponding to the main path to fill the area formed by the main path; for the icon where the main path of the N icons is an open path icon, use the fill corresponding to the main path Color strokes the main path, so that the main path of N icons can be filled with style processing in batches, thereby improving the efficiency of icon style processing.
  • said performing style style processing on the path of each attribute of the N icons according to the target parameter corresponding to the attribute of the path further includes: judging Whether the outer auxiliary path of the N icons is a closed path; in the case that the outer auxiliary path is a closed path, fill the area formed by the outer auxiliary path according to the fill color corresponding to the outer auxiliary path; When the outer auxiliary path is an open path, the outer auxiliary path is stroked according to the fill color corresponding to the outer auxiliary path.
  • said performing style style processing on the path of each attribute of the N icons according to the target parameter corresponding to the attribute of the path further includes: judging Whether the inner auxiliary paths of the N icons are closed paths; if the inner auxiliary paths are closed paths, determine the first main inner intersection area, and the first main inner intersection area is the area formed by the main path The overlapping area of the area formed by the main path and the area formed by the inner auxiliary path; the main inner intersection area is set as a transparent area; according to the filling color corresponding to the inner auxiliary path, the main inner The intersection area is filled; when the inner auxiliary path is an open path, outline the inner auxiliary path to obtain a closed inner auxiliary path; determine the second main inner intersection area, the second The main inner intersection area is an overlapping area of the area formed by the main path and the area formed by the closed inner auxiliary path in the area formed by the main path; setting the second main inner intersection area as a transparent area; Filling the second main inner intersection area according to the
  • the icon is a closed path, set the intersection area of the area formed by the main path and the area formed by the inner auxiliary path as a transparent area, and use the fill color corresponding to the inner auxiliary path to form the inner auxiliary path Fill the area of the N icons; if the inner auxiliary path of the N icons is an open path icon, first outline the inner auxiliary path to obtain a closed inner auxiliary path, and then stroke the area formed by the main path and the outline
  • the intersection area of the area formed by the inner auxiliary path is set as a transparent area, and the inner auxiliary path is stroked with the fill color corresponding to the inner auxiliary path, so that the inner auxiliary path of the N icons can be filled with style processing in batches, thereby Improve the efficiency of icon style processing.
  • the target parameter further includes a rounded corner radius
  • the target parameter corresponding to the attribute of the path is calculated for each attribute of the N icons.
  • the style and style processing of the path includes: rounding the main paths of the N icons according to the radius of the round corners corresponding to the main path; The inner auxiliary paths of the N icons are rounded; and/or, the outer auxiliary paths of the N icons are rounded according to the radius of the rounded corners corresponding to the outer auxiliary paths.
  • the icon is a scalable vector graphic SVG format icon or a streaming network image PNG format icon.
  • an apparatus for processing icon styles including: an acquisition unit for acquiring N icons, where N is an integer greater than 1, and a conversion unit for converting the constituent elements of each icon into a path
  • the acquiring unit is further configured to acquire target parameters corresponding to the attributes of the path, where the target parameters include stroke parameters, fill colors, and/or corner radius; the processing unit is configured to correspond to the attributes of the path
  • the target parameter is to perform style style processing on the path of each attribute in the N icons.
  • the main path is the path with the longest length among all paths.
  • the target parameter includes a stroke parameter
  • the processing unit is further specifically configured to: according to the stroke parameter corresponding to the main path, Stroke the main path; and/or, stroke the inner auxiliary path of the N icons according to the stroke parameters corresponding to the inner auxiliary path; and/or, stroke the inner auxiliary path corresponding to the outer auxiliary path Parameter, stroke the outer auxiliary path of the N icons.
  • the attributes of the path further include an intersecting path.
  • the intersecting path is a path in which one path and another path have at least one common point, and the processing unit also specifically uses Yu: Stroke the intersecting paths of the N icons according to the stroke parameters corresponding to the intersecting paths.
  • the attributes of the path further include a closed path and an open path, the closed path is where the start point of the path and the end point of the path overlap, and the open path is The start point of the path and the end point of the path do not overlap;
  • the target parameter further includes a fill color
  • the processing unit is further specifically configured to: determine whether the main path of the N icons is a closed path; If the path is a closed path, fill the area formed by the main path according to the fill color corresponding to the main path; if the main path is an open path, fill the area formed by the main path according to the fill color corresponding to the main path. , Stroke the main path.
  • the processing unit is further specifically configured to: determine whether the outer auxiliary path of the N icons is a closed path; in the case that the outer auxiliary path is a closed path , Filling the area formed by the outer auxiliary path according to the filling color corresponding to the outer auxiliary path; in the case that the outer auxiliary path is an open path, according to the filling color corresponding to the outer auxiliary path, Stroke outside the auxiliary path.
  • the processing unit is further specifically configured to: determine whether the internal auxiliary paths of the N icons are closed paths; where the internal auxiliary paths are closed paths In this case, a first main inner intersection area is determined, and the first main inner intersection area is the area formed by the main path and the inner auxiliary path in the area formed by the main path. Set the main inner intersection area as a transparent area; fill the main inner intersection area according to the fill color corresponding to the inner auxiliary path; the inner auxiliary path is an open path In this case, the inner auxiliary path is contoured to obtain a closed inner auxiliary path; a second main inner intersection area is determined, and the second main inner intersection area is the area formed by the main path.
  • the target parameter further includes a rounded corner radius
  • the processing unit is further specifically configured to: align the N icons according to the rounded corner radius corresponding to the main path Round corners of the main path of the N icons; and/or round corners of the inner auxiliary paths of the N icons according to the rounded corner radius corresponding to the inner auxiliary path; and/or, according to the outer auxiliary path corresponding
  • the rounded corner radius of the N icons is rounded.
  • the icon is a scalable vector graphic SVG format icon or a streaming network image PNG format icon.
  • the present application provides an icon style style processing device, the icon style style processing device includes: at least one processor, when program instructions are executed in the at least one processor, the image The processing device executes the method for processing the style and style of the icon in any possible implementation of any one of the foregoing aspects.
  • the present application provides an electronic device including one or more processors and one or more memories.
  • the one or more memories are coupled with one or more processors, and the one or more memories are used to store computer program codes.
  • the computer program codes include computer instructions.
  • the electronic device executes Any one of the possible implementations of any one of the above-mentioned aspects is a method for processing the style of the icon.
  • the present application provides a computer-readable storage medium, including a computer program, which, when run on a computer device, causes the processing unit in the computer device to execute any one of the possible implementations of any of the above aspects.
  • the style and style of the icon is handled.
  • the present application provides a computer program product, when the computer program product runs on an electronic device, a method for making the electronic device execute any one of the possible icon style processing methods in any of the above-mentioned aspects.
  • the present application provides a chip that includes a memory and a processor, the memory is used to store computer instructions, and the processor is used to execute the computer instructions stored in the memory to execute any of the above In terms of any possible icon style processing method.
  • FIG. 1 is a schematic structural diagram of an example of an electronic device provided by an embodiment of the present application.
  • Fig. 2 is a software structure block diagram of an example of an electronic device provided by an embodiment of the present application.
  • Fig. 3 is a schematic diagram of the style of the icon.
  • FIG. 4 is a schematic flowchart of a method for processing the stroke style of an icon provided by an embodiment of the present application.
  • Fig. 5 is a schematic flowchart of parsing a zoomable vector graphic icon provided by an embodiment of the present application.
  • FIG. 6 is a schematic diagram of each path of an example of an icon provided by an embodiment of the present application.
  • FIG. 7 is a schematic diagram of an example of a process of performing stroke style processing on an icon provided by an embodiment of the present application.
  • FIG. 8 is a schematic flowchart of a method for processing icon filling style provided by an embodiment of the present application.
  • FIG. 9 is a schematic flowchart of a method for processing filling styles of different paths of icons according to an embodiment of the present application.
  • FIG. 10 is a schematic diagram of an example of a process of performing filling style processing on an icon provided by an embodiment of the present application.
  • FIG. 11 is a schematic flowchart of an example of contouring stroke style processing on an internal auxiliary path provided by an embodiment of the present application.
  • FIG. 12 is a schematic diagram of an example of a process of contouring stroke style processing on an internal auxiliary path provided by an embodiment of the present application.
  • FIG. 13 is a schematic diagram of another example of a process of performing filling style processing on an icon provided by an embodiment of the present application.
  • FIG. 14 is a schematic diagram of an example of the process of performing duotone style processing on an icon provided by an embodiment of the present application.
  • FIG. 15 is a schematic flowchart of a method for processing the rounded corner radius style of an icon provided by an embodiment of the present application.
  • FIG. 16 is a schematic diagram of an example of a process of rounding corners of an icon provided by an embodiment of the present application.
  • FIG. 17 is a schematic structural diagram of an example of a device for processing icon styles provided by an embodiment of the present application.
  • FIG. 18 is a schematic structural diagram of another example of an apparatus for processing icon styles provided by an embodiment of the present application.
  • the method for processing icon styles provided in this application can be applied to electronic devices, or a separate computer program, which can realize the display of icon styles in the interface of the electronic device.
  • the method for processing the style and style of the icons provided in this application can be applied to mobile phones, tablets, wearable devices, in-vehicle devices, augmented reality (AR)/virtual reality (VR) devices, laptops, and super mobiles.
  • AR augmented reality
  • VR virtual reality
  • laptops and super mobiles.
  • electronic devices such as ultra-mobile personal computers (UMPC), netbooks, and personal digital assistants (PDAs)
  • UMPC ultra-mobile personal computers
  • PDAs personal digital assistants
  • FIG. 1 is a schematic structural diagram of an example of an electronic device provided by an embodiment of the present application.
  • the electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, and an antenna 2.
  • Mobile communication module 150 wireless communication module 160, audio module 170, speaker 170A, receiver 170B, microphone 170C, earphone jack 170D, sensor module 180, buttons 190, motor 191, indicator 192, camera 193, display screen 194, and Subscriber identification module (subscriber identification module, SIM) card interface 195, etc.
  • SIM Subscriber identification module
  • the sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, and ambient light Sensor 180L, bone conduction sensor 180M, etc.
  • the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the electronic device 100.
  • the electronic device 100 may include more or fewer components than those shown in the figure, or combine certain components, or split certain components, or arrange different components.
  • the illustrated components can be implemented in hardware, software, or a combination of software and hardware.
  • the processor 110 may include one or more processing units.
  • the processor 110 may include an application processor (AP), a modem processor, a graphics processing unit (GPU), and an image signal processor. (image signal processor, ISP), controller, memory, video codec, digital signal processor (digital signal processor, DSP), baseband processor, and/or neural-network processing unit (NPU) Wait.
  • AP application processor
  • modem processor modem processor
  • GPU graphics processing unit
  • image signal processor image signal processor
  • ISP image signal processor
  • controller memory
  • video codec digital signal processor
  • DSP digital signal processor
  • NPU neural-network processing unit
  • the different processing units may be independent devices or integrated in one or more processors.
  • the controller may be the nerve center and command center of the electronic device 100.
  • the controller can generate operation control signals according to the instruction operation code and timing signals to complete the control of fetching instructions and executing instructions.
  • a memory may also be provided in the processor 110 to store instructions and data.
  • the processor 110 may include one or more interfaces, for example, the interface may include an integrated circuit (inter-integrated circuit, I2C) interface, an integrated circuit built-in audio (inter-integrated circuit sound, I2S) interface, and pulse Code modulation (PCM) interface, universal asynchronous receiver/transmitter (UART) interface, mobile industry processor interface (MIPI), general-purpose input/output (general-purpose input/ output, GPIO) interface, subscriber identity module (SIM) interface, and/or universal serial bus (USB) interface, etc.
  • I2C integrated circuit
  • I2S integrated circuit sound
  • PCM pulse Code modulation
  • UART universal asynchronous receiver/transmitter
  • MIPI mobile industry processor interface
  • GPIO general-purpose input/output
  • SIM subscriber identity module
  • USB universal serial bus
  • the I2C interface is a bidirectional synchronous serial bus, which includes a serial data line (SDA) and a serial clock line (SCL).
  • the processor 110 may include multiple sets of I2C buses.
  • the processor 110 may be coupled to the touch sensor 180K, charger, flash, camera 193, etc., respectively through different I2C bus interfaces.
  • the processor 110 may couple the touch sensor 180K through an I2C interface, so that the processor 110 and the touch sensor 180K communicate through the I2C bus interface to implement the touch function of the electronic device 100.
  • the MIPI interface can be used to connect the processor 110 with the display screen 194, the camera 193 and other peripheral devices.
  • the MIPI interface includes a camera serial interface (camera serial interface, CSI), a display serial interface (display serial interface, DSI), and so on.
  • the processor 110 and the camera 193 communicate through a CSI interface to implement the shooting function of the electronic device 100.
  • the processor 110 and the display screen 194 communicate through a DSI interface to realize the display function of the electronic device 100.
  • the USB interface 130 is an interface that complies with the USB standard specification, and specifically may be a Mini USB interface, a Micro USB interface, a USB Type C interface, and so on.
  • the USB interface 130 can be used to connect a charger to charge the electronic device 100, and can also be used to transfer data between the electronic device 100 and peripheral devices. It can also be used to connect earphones and play audio through earphones. This interface can also be used to connect other electronic devices, such as AR devices.
  • the interface connection relationship between the modules illustrated in the embodiment of the present application is merely a schematic description, and does not constitute a structural limitation of the electronic device 100.
  • the electronic device 100 may also adopt different interface connection modes in the foregoing embodiments, or a combination of multiple interface connection modes.
  • the charging management module 140 is used to receive charging input from the charger.
  • the charger can be a wireless charger or a wired charger.
  • the power management module 141 is used to connect the battery 142, the charging management module 140 and the processor 110.
  • the power management module 141 receives input from the battery 142 and/or the charging management module 140, and supplies power to the processor 110, the internal memory 121, the external memory, the display screen 194, the camera 193, and the wireless communication module 160.
  • the power management module 141 can also be used to monitor parameters such as battery capacity, battery cycle times, and battery health status (leakage, impedance).
  • the wireless communication function of the electronic device 100 can be implemented by the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor, and the baseband processor.
  • the antenna 1 and the antenna 2 are used to transmit and receive electromagnetic wave signals.
  • Each antenna in the electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve antenna utilization.
  • Antenna 1 can be multiplexed as a diversity antenna of a wireless local area network.
  • the antenna can be used in combination with a tuning switch.
  • the mobile communication module 150 can provide a wireless communication solution including 2G/3G/4G/5G and the like applied to the electronic device 100.
  • the modem processor may include a modulator and a demodulator. Among them, the modulator is used to modulate the low frequency baseband signal to be sent into a medium and high frequency signal. The demodulator is used to demodulate the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After the low-frequency baseband signal is processed by the baseband processor, it is passed to the application processor.
  • the application processor outputs a sound signal through an audio device (not limited to the speaker 170A, the receiver 170B, etc.), or displays an image or video through the display screen 194.
  • the wireless communication module 160 can provide applications on the electronic device 100 including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), bluetooth (BT), and global navigation satellites.
  • WLAN wireless local area networks
  • BT Bluetooth
  • GNSS global navigation satellite system
  • FM frequency modulation
  • NFC near field communication
  • infrared technology infrared, IR
  • the electronic device 100 implements a display function through a GPU, a display screen 194, an application processor, and the like.
  • the GPU is an image processing microprocessor, which is connected to the display screen 194 and the application processor.
  • the GPU is used to perform mathematical and geometric calculations and is used for graphics rendering.
  • the processor 110 may include one or more GPUs that execute program instructions to generate or change display information.
  • the display screen 194 is used to display images, videos, and the like.
  • the display screen 194 includes a display panel.
  • the display panel can use liquid crystal display (LCD), organic light-emitting diode (OLED), active matrix organic light-emitting diode or active-matrix organic light-emitting diode (active-matrix organic light-emitting diode).
  • LCD liquid crystal display
  • OLED organic light-emitting diode
  • active-matrix organic light-emitting diode active-matrix organic light-emitting diode
  • AMOLED flexible light-emitting diode (FLED), Miniled, MicroLed, Micro-oLed, quantum dot light-emitting diode (QLED), etc.
  • the electronic device 100 may include one or N display screens 194, and N is a positive integer greater than one.
  • the electronic device 100 can implement a shooting function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, and an application processor.
  • the ISP is used to process the data fed back by the camera 193.
  • the camera 193 is used to capture still images or videos.
  • the object generates an optical image through the lens and is projected to the photosensitive element.
  • Video codecs are used to compress or decompress digital video.
  • the external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100.
  • the external memory card communicates with the processor 110 through the external memory interface 120 to realize the data storage function. For example, save music, video and other files in an external memory card.
  • the internal memory 121 may be used to store computer executable program code, where the executable program code includes instructions.
  • the internal memory 1321 may include a program storage area and a data storage area.
  • the storage program area can store an operating system, an application program (such as a sound playback function, an image playback function, etc.) required by at least one function, and the like.
  • the storage data area can store data (such as audio data, phone book, etc.) created during the use of the electronic device 1300.
  • the internal memory 1321 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one magnetic disk storage device, a flash memory device, a universal flash storage (UFS), and the like.
  • the processor 110 executes various functional applications and data processing of the electronic device 100 by running instructions stored in the internal memory 121.
  • the electronic device 100 can implement audio functions through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the earphone interface 170D, and the application processor. For example, music playback, recording, etc.
  • the pressure sensor 180A is used to sense the pressure signal and can convert the pressure signal into an electrical signal.
  • the gyro sensor 180B may be used to determine the movement posture of the electronic device 100.
  • the air pressure sensor 180C is used to measure air pressure.
  • the magnetic sensor 180D includes a Hall sensor.
  • the electronic device 100 can use the magnetic sensor 180D to detect the opening and closing of the flip holster.
  • the acceleration sensor 180E can detect the magnitude of the acceleration of the electronic device 100 in various directions (generally three axes).
  • Distance sensor 180F used to measure distance.
  • the electronic device 100 can measure the distance by infrared or laser.
  • the proximity light sensor 180G may include, for example, a light emitting diode (LED) and a light detector such as a photodiode.
  • the light emitting diode may be an infrared light emitting diode.
  • the electronic device 100 emits infrared light to the outside through the light emitting diode.
  • the electronic device 100 uses a photodiode to detect infrared reflected light from nearby objects. When sufficient reflected light is detected, it can be determined that there is an object near the electronic device 100. When insufficient reflected light is detected, the electronic device 100 can determine that there is no object near the electronic device 100.
  • the ambient light sensor 180L is used to sense the brightness of the ambient light.
  • the temperature sensor 180J is used to detect temperature.
  • the bone conduction sensor 180M can acquire vibration signals.
  • the button 190 includes a power-on button, a volume button, and so on.
  • the button 190 may be a mechanical button. It can also be a touch button.
  • the electronic device 100 may receive key input, and generate key signal input related to user settings and function control of the electronic device 100.
  • the motor 191 can generate vibration prompts.
  • the indicator 192 may be an indicator light, which may be used to indicate the charging status, power change, or to indicate messages, missed calls, notifications, and so on.
  • the SIM card interface 195 is used to connect to the SIM card.
  • the SIM card can be inserted into the SIM card interface 195 or pulled out from the SIM card interface 195 to achieve contact and separation with the electronic device 100.
  • the electronic device 100 may support 1 or N SIM card interfaces, and N is a positive integer greater than 1.
  • the fingerprint sensor 180H is used to collect fingerprints.
  • the electronic device 100 can use the collected fingerprint characteristics to implement fingerprint unlocking, access application locks, fingerprint photographs, fingerprint answering calls, and so on.
  • Touch sensor 180K also called “touch panel”
  • the touch sensor 180K may be provided on the display screen 194, and the touch sensor 180K and the display screen 194 form a touch screen, also called a "touch screen”.
  • the touch sensor 180K is used to detect touch operations acting on or near it.
  • the touch sensor can pass the detected touch operation to the application processor to determine the type of touch event.
  • the visual output related to the touch operation can be provided through the display screen 194.
  • the touch sensor 180K may also be disposed on the surface of the electronic device 100, which is different from the position of the display screen 194.
  • the software system of the electronic device 100 may adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture.
  • the embodiments of this application are based on a layered architecture
  • the system is taken as an example to illustrate the software structure of the electronic device 100 by way of example.
  • FIG. 2 is an example of a software structure block diagram of an electronic device 100 provided by an embodiment of the present application.
  • the layered architecture divides the software into several layers, and each layer has a clear role and division of labor. Communication between layers through software interface.
  • the The system is divided into four layers, from top to bottom are the application layer, the application framework layer, the Android runtime and system libraries, and the kernel layer.
  • the application layer can include a series of application packages.
  • the application package may include camera, gallery, information, contacts, weather, music, card package, task card store, settings, photo album, video, browser, Huawei Applications such as malls and desktops.
  • the application framework layer provides an application programming interface (application programming interface, API) and a programming framework for applications in the application layer.
  • the application framework layer includes some predefined functions.
  • the application framework layer can include a window manager, a content provider, a view system, a phone manager, a resource manager, and a notification manager.
  • the window manager is used to manage window programs.
  • the window manager can obtain the size of the display screen, determine whether there is a status bar, lock the screen, take a screenshot, etc.
  • the window manager can participate in the display process of the interface elements of the display screen.
  • the content provider is used to store and retrieve data and make these data accessible to applications.
  • the data may include videos, images, audios, phone calls made and received, browsing history and bookmarks, phone book, etc.
  • the view system includes visual controls, such as controls that display text, controls that display pictures, and so on.
  • the view system can be used to build applications.
  • the display interface can be composed of one or more views.
  • the display of application icons on the display interface, or the display interface including short message notification icons may include a view that displays text and a view that displays pictures.
  • the phone manager is used to provide the communication function of the electronic device 100. For example, the management of the call status (including connecting, hanging up, etc.).
  • the resource manager provides various resources for the application, such as localized strings, icons, pictures, layout files, video files, and so on.
  • the notification manager enables the application to display notification information in the status bar, which can be used to convey notification-type messages, and it can automatically disappear after a short stay without user interaction.
  • the notification manager is used to notify the user that the download is complete, message reminders, and so on.
  • the notification manager can also be a notification that appears in the status bar at the top of the system in the form of a chart or a scroll bar text, such as a notification of an application running in the background, or a notification that appears on the screen in the form of a dialog window.
  • text messages are prompted in the status bar, or notifications can be made by sounding a prompt sound, vibrating, or blinking an indicator light.
  • Android runtime includes core libraries and virtual machines. Android runtime is responsible for the scheduling and management of the Android system.
  • the core library consists of two parts: one part is the function functions that the java language needs to call, and the other part is the core library of Android.
  • the application layer and application framework layer run in a virtual machine.
  • the virtual machine executes the java files of the application layer and the application framework layer as binary files.
  • the virtual machine is used to perform functions such as object life cycle management, stack management, thread management, security and exception management, and garbage collection.
  • the system library can include multiple functional modules. For example: surface manager (surface manager), media library (media libraries), 3D graphics processing library (for example: OpenGL ES), 2D graphics engine (for example: SGL), etc.
  • surface manager surface manager
  • media library media libraries
  • 3D graphics processing library for example: OpenGL ES
  • 2D graphics engine for example: SGL
  • the surface manager is used to manage the display subsystem and provides a combination of 2D and 3D layers for multiple applications.
  • the media library supports playback and recording of a variety of commonly used audio and video formats, as well as still image files.
  • the media library can support multiple audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.
  • the 3D graphics processing library is used to implement 3D graphics drawing, image rendering, synthesis, and layer processing.
  • the 2D graphics engine is a drawing engine for 2D drawing.
  • the surface manager, the three-dimensional graphics processing library, etc. can participate in the process of processing the icon style style of the electronic device, and the specific processing process will not be repeated here.
  • the kernel layer is the layer between hardware and software.
  • the kernel layer contains at least display drivers, sensor drivers, etc.
  • the icon involved in this application may be an icon in a scalable vector graphics (SVG) format, or an icon in a streaming network graphics (portable network graphic, PNG) format.
  • SVG scalable vector graphics
  • PNG streaming network graphic
  • the icons displayed on the display interface of the electronic device are one of the most important elements in the entire display interface design.
  • all paths (paths) can only be processed at once, or only a single path can be processed individually. Therefore, it is less flexible when dealing with icon styles.
  • This application provides a method for processing icon styles.
  • This method can import icons in batches, mark the main path, inner auxiliary path, outer auxiliary path, and/or intersection path of the imported icons, and perform corresponding corresponding paths for the icons.
  • the processing of the style style can quickly generate a set of icons of the expected style style.
  • the colors mentioned in the embodiments of this application are composed of three primary colors of red, green and blue, and one byte (range 0-255) can be used to represent one primary color component, one of which has 2563 colors.
  • the style and style processing of icons involved in the embodiments of the present application may include at least one of the following: stroke style processing of icons, icon filling style processing, icon duotone style processing, and icon rounded corner style processing.
  • the stroked icon style refers to the icon style in which the main body of the icon is linear and the area of the filled area is smaller than the first preset value.
  • Figure 3 it is a schematic diagram of the stroked icon style icon.
  • the icon 301 is an unprocessed icon
  • the icon 3011 is a stroked icon style icon.
  • the icon 302 is an unprocessed icon
  • the icon 3021 is a stroked icon style icon.
  • the filled icon style refers to the icon style in which the main body of the icon is flat and the area of the filled area is larger than the second preset value.
  • icon 301 is an unprocessed icon
  • icon 3012 is an icon filled with icon style.
  • icon 302 is an unprocessed icon
  • icon 3022 is an icon filled with icon style.
  • the two-tone icon style refers to the icon style that strokes the icon with one color and fills the closed area with another color.
  • the icon 301 is an unprocessed icon
  • the icon 3013 is a duotone icon style icon.
  • the icon 302 is an unprocessed icon
  • the icon 3023 is a duotone icon style icon.
  • the rounded corner style of the icon refers to the icon style where the corners of the icon are rounded, and the size of the rounded corners can be represented by the radius of the arc.
  • the icon 303 is an unprocessed icon
  • the icon 3031 is a rounded icon style icon.
  • the icon 302 is an unprocessed icon
  • the icon 3041 is a rounded icon style icon.
  • a method 200 for stroke processing of an icon is provided in this application. As shown in FIG. 4, the method 200 includes step 210 to step 240. Step 210 to step 240 will be described in detail below.
  • Step 210 Import multiple standard SVG icons in batches.
  • FIG. 6 it is an example diagram of 4 standard SVG icons imported in batches provided by an embodiment of the present application.
  • Step 220 Read the SVG icon, and parse the SVG icon.
  • Step 221 Convert all the various constituent elements in the SVG icon into paths
  • various constituent elements in the SVG icon may include a rectangle, a circle, an ellipse, a line, a polyline, a polygon, and the like.
  • Step 222 Calculate the length of each path, and mark the primary path in each SVG unit.
  • the main path represents the most important part of the outline shape of the icon.
  • the main path may be a reference path.
  • the specific form of the main path is not limited in this application.
  • the main path may be the path with the longest length among all the paths; or, the main path may be the path with the largest area in the area formed by each path among all the paths.
  • Step 223 Mark other paths separately.
  • marking other paths may include at least one of the following:
  • the path when a path is inside the main path, the path may be marked as an inner auxiliary path.
  • a path inside the main path can be understood as the path in the internal area formed by the main path.
  • the path when a path is outside the main path, the path may be marked as an outer auxiliary path.
  • a path outside the main path can be understood as the path in the outer area formed by the main path.
  • the intersecting path can be understood as a path with at least one common point between the path and the path.
  • the main path of the icon 401 is a path 4011
  • the inner auxiliary path of the icon 401 is a path 4012
  • the outer auxiliary path of the icon 401 is a path 4013.
  • the main path of the icon 402 is a path 4021
  • the inner auxiliary path of the icon 402 is a path 4022
  • the icon 402 does not have an outer auxiliary path.
  • the main path of the icon 403 is a path 4031
  • the outer auxiliary path of the icon 403 is a path 4032
  • the icon 403 does not have an inner auxiliary path.
  • the main path of the icon 404 is the path 4041
  • the inner auxiliary path of the icon 404 is the path 4042
  • the path 4042a and the path 4042b in the inner auxiliary path 4042 are intersecting path paths.
  • the starting point of the path can be understood as one end of the path, and the end of the path can be understood as the other end of the path.
  • the path is marked as a closed path; when the start point and the end point of the path are inconsistent, the path is marked as an open path.
  • whether the start point and the end point are consistent can be understood as whether the coordinates of the start point and the end point are the same.
  • the coordinates may be two-dimensional coordinates, and the start point and the end point may be consistent, and the coordinates of the two dimensions of the start point may be the same as the coordinates of the corresponding dimension of the end point.
  • the inconsistency between the start point and the end point can be that the coordinates of at least one of the two dimensions of the start point are not the same as the coordinates of the corresponding dimension of the end point.
  • the main path 4011 of the icon 401 is a closed path
  • the inner auxiliary path 4012 of the icon 401 and the outer auxiliary path 4013 of the icon 401 are both open paths.
  • the main path 4021 of the icon 402 and the inner auxiliary path 4022 of the icon 402 are both closed paths.
  • the main path 4031 of the icon 403 and the outer auxiliary path 4032 of the icon 403 are both open paths.
  • the main path 4041 is a closed path
  • the inner auxiliary path 4042 is an open path.
  • Step 230 Set stroke parameters.
  • the aforementioned stroke parameters include stroke color and/or stroke thickness.
  • Method 1 Set the stroke color of all paths of each SVG to the same color.
  • the stroke colors of path 4011, path 4012, path 4013, path 4021, path 4022, path 4031, path 4032, path 4041, and path 4042 are all set to black.
  • Method 2 Set the corresponding stroke color for each type of path of the parsed SVG.
  • the stroke color of the main path marked in each SVG is set to the same color.
  • the stroke colors of the main path 4011, the main path 4021, the main path 4031, and the main path 4041 in FIG. 6 are all set to red.
  • the stroke color of the inner auxiliary path marked in each SVG is set to the same color.
  • the stroke colors of the inner auxiliary path 4012, the inner auxiliary path 4022, and the inner auxiliary path 4042 in FIG. 6 are all set to yellow.
  • the stroke color of the outer auxiliary path marked in each SVG is set to the same color.
  • the stroke colors of the outer auxiliary path 4013 and the outer auxiliary path 4032 in FIG. 6 are both set to gray.
  • the stroke color of each intersecting path marked in the SVG is set to the same color. For example, set the stroke color of the intersecting paths 4042a and 4042b in FIG. 6 to blue.
  • At least one of the above methods 1 and 2 can be implemented.
  • Method A set the stroke thickness of all paths of each SVG to the same thickness.
  • the stroke thickness of path 4011, path 4012, path 4013, path 4021, path 4022, path 4031, path 4032, path 4041, and path 4042 in FIG. 6 are all set to 6 points.
  • the corresponding stroke color and corresponding stroke thickness can be set for each type of path of the parsed SVG.
  • the stroke thickness of the main path marked in each SVG is set to the same thickness.
  • the stroke thickness of the main path 4011, the main path 4021, the main path 4031, and the main path 4041 in FIG. 6 are all set to 4 points.
  • the stroke thickness of the inner auxiliary path marked in each SVG is set to the same thickness.
  • the stroke thickness of the inner auxiliary path 4012, the inner auxiliary path 4022, and the inner auxiliary path 4042 in FIG. 6 are all set to 6 points.
  • the stroke thickness of the outer auxiliary path marked in each SVG is set to the same thickness.
  • the stroke thickness of the outer auxiliary path 4013 and the outer auxiliary path 4032 in FIG. 6 are both set to 5 points.
  • the stroke thickness of the intersecting path marked in each SVG is set to the same thickness.
  • At least one of the above methods A and B can be implemented.
  • method A can be used to set the stroke thickness of all paths of each SVG to a value; then method B can be used to set the stroke thickness of each attribute path of each SVG to Another value, so that you can first set the stroke thickness of all paths of each SVG to a certain value, and then set the stroke thickness of a path of a certain attribute of each SVG twice.
  • Step 240 Perform stroke processing according to the stroke parameters set for the corresponding path of each SVG.
  • step 250 the closed area whose ratio between the area and the stroke is less than a preset value is filled.
  • the closed area can be understood as the area formed by the closed path marked above.
  • FIG. 7 it is a schematic diagram of a process of stroke processing on an icon provided by an embodiment of this application.
  • the description of the stroke processing is performed by importing three icons in batches as an example, and the corresponding stroke thickness is set for each type of path of the parsed SVG in the above step 230.
  • the corresponding stroke thickness of the main path For example, set the corresponding stroke thickness of the main path to 4 points, the corresponding stroke thickness of the inner auxiliary path to 8 points, and the corresponding stroke thickness of the outer auxiliary path to 2 points.
  • the stroke color of all paths to black.
  • the icon 430 shown in (a) in FIG. 7 includes a main path 4301, an outer auxiliary path 4302, and an inner auxiliary path 4303.
  • the icon is not stroked.
  • the thickness of the main path 4301, the outer auxiliary path 4302 and the inner auxiliary path 4303 are all 0.75 points; as shown in the figure on the right in Figure 7 (a) is the stroked icon, where the thickness of the main path 4301 is 4 pounds, the thickness of the outer auxiliary path 4302 is 2 pounds, and the thickness of the inner auxiliary path 4303 is 8 pounds.
  • the icon 431 shown in Figure 7 (b) includes a main path 4311 and an inner auxiliary path 4312.
  • the thickness of 4312 is 0.75 points; the right figure in Figure 7 (b) is the stroked icon, the thickness of the main path 4311 is 4 points, and the thickness of the inner auxiliary path 4312 is 8 points.
  • the icon 432 shown in (c) in FIG. 7 includes a main path 4321 and an outer auxiliary path 4322. As shown in the left diagram in FIG. 7 (c), the icon 432 is not stroked. The thickness of the outer auxiliary path 4322 is 0.75 pounds. As shown in the right figure in (c) of FIG. 7 is the stroked icon 432, in which the thickness of the main path 4321 is 4 points, and the thickness of the outer auxiliary path 4322 is 2 points.
  • the path of the icon is marked as the main path, the inner auxiliary path, the outer auxiliary path and/or the intersecting path, and the icons can be imported in batches, and the corresponding stroke color can be set according to different paths. And the stroke thickness, so that the icons can be stroked in batches and finely, and a set of stroke-like icons that meet the expected design can be quickly generated.
  • This application also provides a method 300 for filling an icon.
  • the method 300 may include step 210 to step 220 and step 310 to step 320 in the method 200 described above.
  • step 210 to step 220 For details of step 210 to step 220, refer to the above description, which will not be repeated here.
  • Step 310 Set the fill color.
  • the above-mentioned filling includes pure color filling, gradient color filling or pattern filling.
  • the fill color refers to the color of the solid color fill.
  • the fill color refers to the color of the gradient fill.
  • the fill color refers to the color of the pattern fill.
  • the filling is a pure color filling as an example for introduction.
  • one or more fill colors can be set.
  • different fill colors are set.
  • Step 320 Determine whether each path is a closed path, and perform corresponding operations according to the result of the determination.
  • this step 320 includes step 321 to step 323.
  • Step 321 Determine whether the main path is a closed path; if the main path is an open path, perform step 3211; if the main path is a closed path, perform step 3212.
  • Step 3211 Stroke the main path using the fill color corresponding to the set main path.
  • Step 322a Determine whether the internal auxiliary path is a closed path; if the internal auxiliary path is a closed path, perform step 3221a; if the internal auxiliary path is an open path, perform step 3222a.
  • Step 3221a using the set fill color corresponding to the inner auxiliary path to fill the closed area corresponding to the inner auxiliary path.
  • Step 3222a Stroke the inner auxiliary path using the fill color corresponding to the set inner auxiliary path.
  • step 322a Before performing the above step 322a, you can also determine whether the icon has an internal auxiliary path. If the icon has an internal auxiliary path, perform steps 322a, 3221a, and step 3222a; if the internal auxiliary path does not exist, no internal auxiliary path exists. The above steps 322a, 3221a, and 3222a need to be performed.
  • step 323a Before performing the above step 323a, you can also determine whether the icon has an external auxiliary path. If the icon has an external auxiliary path, perform steps 323a, 3231a, and 3232a; if the external auxiliary path does not exist, do not execute The above steps 323a, 3231a, and 3232a.
  • step 322a There is no prioritized execution order between step 322a and step 323a.
  • the following (a) in FIG. 10 to (d) in FIG. 10 are all described by taking the execution of step 322a before step 323a as an example.
  • FIG. 10 it is a schematic diagram of a process of filling an icon provided by an embodiment of this application.
  • the description of the filling process is performed by importing nine icons in batches as an example.
  • the nine icons are icon 414, icon 415, icon 416, icon 417, icon 418, icon 419, icon 420, and icon 421.
  • the icon 414 includes a main path 4141, an inner auxiliary path 4142, and an outer auxiliary path 4143.
  • the main path 4141 and the outer auxiliary path 4143 are both open paths, and the inner auxiliary path 4142 is a closed path.
  • Filling the icon 414 includes the above-mentioned steps 3211, 3221a, and 3232a. Specifically, since the main path 4141 is an open path, the main path 4141 is stroked according to the fill color set for the main path. At this time, the icon 414 changes from left to left as shown in (a) in Figure 10 As shown in the second picture from the right.
  • the inner auxiliary path 4142 is a closed path
  • the inner auxiliary path 4142 is filled according to the fill color set for the inner auxiliary path 4142.
  • the icon 414 changes from left to right as shown in (a) in Figure 10 As shown in the third figure from the right.
  • the outer auxiliary path 4143 is an open path
  • the outer auxiliary path 4143 is stroked according to the fill color set for the outer auxiliary path 4143.
  • the icon 414 changes to from left to left as shown in (a) in Figure 10 As shown in the fourth picture from the right.
  • the icon 415 includes a main path 4151, an inner auxiliary path 4152, and an outer auxiliary path 4153.
  • the main path 4151 is an open path
  • the inner auxiliary path 4152 and the outer auxiliary path 4153 are both closed paths.
  • the filling process for the icon 415 includes the above-mentioned steps 3211, 3221a, and 3231a. Specifically, since the main path 4151 is an open path, the main path 4151 is stroked according to the fill color set for the main path.
  • the icon 415 changes from left to left as shown in (b) in Figure 10 As shown in the second picture from the right.
  • the inner auxiliary path 4152 is a closed path
  • the inner auxiliary path 4152 is filled according to the fill color set for the inner auxiliary path 4152.
  • the icon 415 changes to the left side as shown in (b) in Figure 10 As shown in the third figure from the right.
  • the outer auxiliary path 4153 is a closed path, the outer auxiliary path 4153 is filled according to the fill color set for the outer auxiliary path 4153.
  • the icon 415 changes from left to right as shown in (b) in Figure 10 Shown in the fourth picture.
  • the icon 416 includes a main path 4161, an inner auxiliary path 4162, and an outer auxiliary path 4163.
  • the main path 4161 and the inner auxiliary path 4162 are both open paths, and the outer auxiliary path 4163 is a closed path.
  • Filling the icon 416 includes the above-mentioned steps 3211, 3222a, and 3231a. Specifically, since the main path 4161 is an open path, the main path 4161 is stroked according to the fill color set for the main path.
  • the icon 416 changes from left to left as shown in (c) in Figure 10 As shown in the second picture from the right.
  • the inner auxiliary path 4162 is an open path, the inner auxiliary path 4162 is stroked according to the fill color set for the inner auxiliary path 4162.
  • the icon 416 changes to as shown in (c) in Figure 10 As shown in the third figure from left to right.
  • the outer auxiliary path 4163 is a closed path, the outer auxiliary path 4163 is filled according to the fill color set for the outer auxiliary path 4163.
  • the icon 416 changes from left to right as shown in (c) in Figure 10 Shown in the fourth picture.
  • the icon 417 includes a main path 4171, an inner auxiliary path 4172, and an outer auxiliary path 4173.
  • the main path 4171, the inner auxiliary path 4172, and the outer auxiliary path 4173 are all open paths.
  • the filling process for the icon 417 includes the above-mentioned steps 3211, 3222a, and 3232a. Specifically, because the main path 4171 is an open path, the main path 4171 is stroked according to the fill color set for the main path. At this time, the icon 417 changes from left to left as shown in (d) in Figure 10 As shown in the second picture from the right.
  • the inner auxiliary path 4172 is an open path
  • the inner auxiliary path 4172 is stroked according to the fill color set for the inner auxiliary path 4172.
  • the icon 417 changes to as shown in (d) in Figure 10 As shown in the third figure from left to right.
  • the outer auxiliary path 4173 is also an open path, the outer auxiliary path 4173 is stroked according to the fill color set for the outer auxiliary path 4173.
  • the icon 417 changes from left to left as shown in (d) in Figure 10 As shown in the fourth picture from the right.
  • Step 3212 using the set fill color corresponding to the main path to fill the closed area corresponding to the main path.
  • Step 322b determine whether the outer auxiliary path is a closed path; if the outer auxiliary path is a closed path, execute step 3221b; if the outer auxiliary path is an open path, execute step 3222b.
  • Step 3221b using the set fill color corresponding to the outer auxiliary path to fill the closed area corresponding to the outer auxiliary path.
  • Step 3222b Stroke the external auxiliary path using the fill color corresponding to the set external auxiliary path.
  • step 322b Before performing the above step 322b, you can also determine whether the icon has an external auxiliary path. If the icon has an external auxiliary path, execute steps 322b, 3221b, and step 3222b; if the external auxiliary path does not exist, do not execute The above steps 322b, 3221b, and 3222b.
  • Step 323b determine whether the internal auxiliary path is a closed path; if the internal auxiliary path is a closed path, perform steps 3231b and 3232b; if the internal auxiliary path is an open path, perform steps 3231b to 3233b.
  • Step 3231b processing the area formed by the main path and the area formed by the inner auxiliary path as an intersection area.
  • the intersection area of the area formed by the main path and the area formed by the inner auxiliary path in the area formed by the main path is recorded as the main inner intersection area.
  • Step 3232b Set the main inner intersection area to a transparent color, and use the set fill color corresponding to the inner auxiliary path to fill the main inner intersection area.
  • step 323b Before performing the above step 323b, you can also determine whether the icon has an internal auxiliary path. If the icon has an internal auxiliary path, perform steps 323b, 3231b, and 3232b; if the internal auxiliary path does not exist, no The above steps 323b, 3231b, and 3232b need to be performed.
  • the main path 4041 is a closed path
  • the inner auxiliary path 4042 composed of the path 4042a and the path 4042b is an open path.
  • the main path 4041 is filled according to the fill color set for the main path 4041.
  • the inner auxiliary path 4042 is an open path, the inner auxiliary path 4042 will be blocked by the area formed by the filled main path 4041, so that the inner auxiliary path 4042 cannot be distinguished, and an ideal filling effect cannot be obtained. Therefore, it is necessary to perform step 3233b before performing step 3231b to step 3232b.
  • Step 3233b using the set fill color corresponding to the inner auxiliary path to outline and stroke the inner auxiliary path.
  • the inner auxiliary path can be converted into a closed path, and then step 3231b to step 3232b are performed, that is, the area formed by the main path and the area formed by the contoured closed inner auxiliary path are treated as the intersection area, and the main inner intersection area is set to Transparent color, and fill the main inner intersection area with the fill color corresponding to the set inner auxiliary path.
  • steps 322b and 323b have no order of execution.
  • the following (a) in FIG. 13 to (e) in FIG. 13 are all described by taking the execution of step 322b before step 323b as an example.
  • the processing procedure of the outline stroke includes step 1 to step 26.
  • Step 1 Start.
  • Step 2 Take a point from the inner auxiliary path of the non-closed path.
  • Step 3 Determine whether the current point is the starting point.
  • the current point is the point taken in step 2.
  • the current point is the starting point, go to step 4. If the current point is not the starting point, go to step 11.
  • Step 4 Determine whether the current point is the end point. When the current point is the end point, perform step 5 to step 6. If the current point is not the end point, perform step 7 to step 10.
  • Step 5 Convert the current point into a circle. Specifically, a circle is drawn with the current point as the center and the line width as the diameter, and the circle is the result of the outline stroke. For the convenience of description, mark the line width as W.
  • Step 6 the end.
  • Step 7. Determine the form of the current point to the next point.
  • the current point and the next point are points on the inner auxiliary path.
  • the form in which one point reaches another point can be understood as the form in which one point reaches another point along the internal auxiliary path.
  • the form of one point reaching another point may include one point reaching another point along a circular curve and/or one point reaching another point along a straight line, wherein the circular curve and the straight line are the inner auxiliary paths.
  • a circular curve can be understood as an arc.
  • the foregoing form of the current point reaching the next point may include the current point reaching the next point along a circular curve and/or the current point reaching the next point along a straight line.
  • Step 8 Calculate two concentric circles and determine the corresponding points T1 and T2 of the current point on the two concentric circles. Specifically, based on the circular curve formed by the current point and the next point, the radius of the circular curve is denoted as R, and the radius of the original circular curve is R+W/2 and R–W/2 respectively. Draw two concentric circles with the center as the center. The corresponding points of the current point on the two concentric circles are marked as T1 and T2. Among them, the corresponding point of the current point on the concentric circular curve can be understood as the intersection of the line segment connecting the current point and the center of the original circular curve and the concentric circular curve.
  • Step 9 Calculate two parallel lines and determine the corresponding points T1 and T2 of the current point on the two parallel lines. Specifically, on the basis of the line segment formed by the current point and the next point, two parallel line segments are obtained by translating the direction perpendicular to the line segment to both sides by a distance of W/2, and the corresponding points of the current point on the two parallel line segments are denoted as T1. T2. Wherein, the corresponding point of the current point on two parallel line segments can be understood as the intersection of a line segment that passes through the current point and is perpendicular to the line segment and the parallel line segment.
  • Step 10 Write T1 in step 8 or step 9 above into part 1, and write T1 and T2 into part 2.
  • part 1 and part 2 are respectively used to store the two points corresponding to the current point on the two paths derived from the original path during the outline stroke process of the original path.
  • T1 is written in part 2 to connect the points written in part 1 and part 2 to form a closed path later.
  • Step 11 Determine the form from the previous point to the current point.
  • step 12 is executed.
  • step 20 is executed.
  • Step 12 Judge whether the current point is the end point; if the current point is the end point, perform step 13 to step 15. If the current point is not the end point, perform step 16 to step 19.
  • Step 13 Calculate two concentric circles, and determine the points T1 and T2 corresponding to the current point on the two concentric circles. Specifically, based on the circular curve formed by the above point and the current point, the radius of the circular curve is R, and the radius is R+W/2 and R–W/2 respectively, and the center of the original circular curve is Draw two concentric circles for the center of the circle. The corresponding points of the current point on the two concentric circles are marked as T1 and T2. Write T1 in Part 1 and T2 in Part 2.
  • Step 14 Fusion part 1, part 2. Specifically, the points in part 2 are written into part 1 in reverse order, and all the points in part 1 are connected in the order of recording as the path of the outline stroke.
  • Step 16 Determine the form of the current point to the next point.
  • step 17 and step 19 are executed.
  • step 18 and step 19 are executed.
  • Step 17 Calculate two pairs of concentric circles and find the intersection point. Specifically, calculate the two concentric circular curves line11 and line12 of the circular curve formed by the previous point and the current point (the calculation method is the same as step 8), and calculate the two concentric circular curves line21 of the circular curve formed by the current point and the next point , Line22 (the calculation method is the same as in step 8), if line11 and line21 intersect, the intersection point I1 is written into the part 1 corresponding to line11, and the intersection point I2 of the tangent of line12 and line22 at the end point is calculated and written into the part corresponding to line12; If line11 and line22 intersect, the intersection point I1 is written into the part corresponding to line11, and the intersection point I2 of the tangent at the end point of line12 and line21 is calculated and written into part 2 corresponding to line12.
  • Step 18 Calculate two concentric circles and two parallel lines, and find the point of intersection. Specifically, calculate the two parallel line segments line11 and line12 of the line segment formed by the current point and the next point (the calculation method is the same as in step 9), and calculate the two concentric circular curves line21, line22 ( The calculation method is the same as step 8), if line11 and line21 intersect, the intersection point I1 is written into the part corresponding to line11, and the intersection point I2 between the extension of line12 and the tangent of line22 at the end point is calculated and written into the part corresponding to line12; if When line11 and line22 intersect, the intersection point I1 is written into the part corresponding to line11, and the intersection point I2 between the extension of line12 and the tangent of line21 at the endpoint is calculated and written into the part corresponding to line12.
  • Step 19 Write the intersection point in step 17 or step 18 in part 1 and part 2, respectively.
  • step 19 After performing the above step 19, continue to return to step 2, take a point again, and execute according to Figure 11 until the end.
  • Step 20 Determine whether the current point is a terminal. In the case where the current is the end point, step 21 to step 23 are executed. If the current point is not a terminal, perform step 24 to step 26.
  • Step 21 Calculate two parallel lines, and determine the points T1 and T2 corresponding to the current point on the two parallel lines, respectively. Specifically, based on the line segment formed by the current point and the next point, two parallel line segments are obtained by translating the line perpendicular to the line segment by a distance of W/2 to both sides. The corresponding points of the current point on the two parallel line segments are T1, T2. Then determine whether the line segment formed by T1 and the last point in part 1 is parallel to the line segment formed by T2 and the last point in part 2, if they are parallel, part 1 is written in T1 and part 2 is written in T2, otherwise, part 1 is written in T2 Part 2 is written to T1.
  • Step 22 part 1 and part 2 are merged. Write the points in part 2 into part 1 in reverse order, and the path formed by all the points in part 1 is recorded as the outline stroke result.
  • Step 24 Judge the form of the current point to the next point. When the current point reaches the next point along the circular curve, step 25 and step 19 are executed. When the current point reaches the next point in a straight line, step 26 and step 19 are executed.
  • Step 25 Calculate two parallel lines and two concentric circles, and find the point of intersection. Specifically, calculate the two parallel line segments line11 and line12 of the line segment formed by the previous point and the current point (the calculation method is the same as step 9), and calculate the two concentric circular curves line21, line22 of the circular curve formed by the current point and the next point (calculate The method is the same as step 8).
  • intersection point I1 is written into the part 1 corresponding to line11, and the intersection point I2 between the extension of line12 and the tangent of line22 at the end point is calculated and written into part 2 corresponding to line12; if When line11 and line22 intersect, the intersection point I1 is written into part 1 corresponding to line11, and the intersection point I2 between the extension of line12 and the tangent line at the end point of line21 is calculated and written into part 2 corresponding to line12.
  • Step 26 Calculate two pairs of parallel lines and find two intersection points. Specifically, if the previous point, the current point, and the next point are three points and one line, skip the current point without processing, otherwise: calculate the two parallel line segments line11 and line12 of the line segment formed by the previous point and the current point (the calculation method is the same as the step 9) Calculate the two parallel line segments line21 and line22 of the line segment formed by the current point and the next point (the calculation method is the same as step 9), if line11 and line21 intersect, the intersection point I1 is written into the part 1 corresponding to line11, and line12 and line12 are calculated at the same time.
  • intersection point I2 of the extension line of line22 is written into the part 2 corresponding to line12; if line11 and line22 intersect, the intersection point I1 is written into the part 1 corresponding to line11, and the intersection point I2 of the extension line of line12 and line21 is calculated at the same time, and written into line12 Corresponding to Part 2.
  • step 19 After performing the above step 19, continue to return to step 2, take a point again, and execute according to Figure 11 until the end.
  • FIG. 12 it is a schematic diagram of the process of contouring strokes on the inner auxiliary path 4221 of the open path provided by this embodiment of the present application.
  • the line segment 12 formed by points 1 and 2 is used as the basis, and the line segment 12 is perpendicular to it.
  • Points 3 and 4 are also skipped until point 5, which is not the starting point, point 4 is along the circular curve to point 5, which is not the end point, and point 5 is along the circular curve to point 6, to
  • the circular curve 45 formed by points 4 and 5 is used as the basis.
  • the radius of the circular curve 45 is R, and the radius is (R+0.5 times the line width) and (R-0.5 times the line width) respectively.
  • the center of the circular curve 45 is the center of the circle.
  • the corresponding points of point 5 on the two concentric circles are point 5'. And 5".
  • the two concentric circular curves of circular curve 56 are 5'6' and 5"6" respectively.
  • the icon 418 includes a main path 4181 and an outer auxiliary path 4183, the main path 4181 is a closed path, and the outer auxiliary path 4182 is an open path.
  • the filling process for the icon 418 includes the above-mentioned step 3212 and step 3222b. Specifically, since the main path 4181 is a closed path, the main path 4181 is filled according to the fill color set for the main path. At this time, the icon 418 changes from left to right as shown in (a) in Figure 13 This is shown in the second figure.
  • the external auxiliary path 4182 is an open path
  • the external auxiliary path 4183 is stroked according to the fill color set for the external auxiliary path 4183.
  • the icon 418 changes to from left to as shown in (a) in Figure 13 As shown in the third figure from the right.
  • FIG. 13 it is a schematic diagram of an example of the process of filling an icon provided by this embodiment of the present application.
  • the icon 419 includes a main path 4191 and an inner auxiliary path 4192, and both the main path 4191 and the inner auxiliary path 4192 are closed paths.
  • the filling process for the icon 419 includes the above-mentioned step 3212, step 3231b, and step 3232b. Specifically, since the main path 4191 is a closed path, the main path 4191 is filled according to the fill color set for the main path. At this time, the icon 419 changes from left to right as shown in (b) in Figure 13 This is shown in the second figure.
  • the inner auxiliary path 4192 is a closed path, the area formed by the main path and the area formed by the inner auxiliary path are processed as the intersection area to obtain the main inner intersection area (the area formed by the inner auxiliary path 4192 in Figure 13), and The main inner intersection area is set to a transparent color.
  • the icon 419 changes as shown in the third diagram from left to right in (b) of FIG. 13.
  • the fill color corresponding to the set inner auxiliary path 4192 is used to fill the main inner intersection area.
  • the icon 419 changes as shown in the fourth diagram from left to right in (b) of FIG. 13.
  • FIG. 13 it is a schematic diagram of an example of a process of filling an icon provided by an embodiment of this application.
  • the icon 420 includes a main path 4201, an inner auxiliary path 4202, and an outer auxiliary path 4203.
  • the main path 4201, the inner auxiliary path 4202, and the outer auxiliary path 4203 are all closed paths.
  • the filling process for the icon 420 includes the above-mentioned step 3212, step 3221b, step 3231b, and step 3232b. Specifically, since the main path 4201 is a closed path, the main path 4201 is filled according to the fill color set for the main path.
  • the icon 420 changes from left to right as shown in (c) in Figure 13 This is shown in the second figure. Also, because the outer auxiliary path 4203 is a closed path, the outer auxiliary path 4183 is filled according to the fill color set for the outer auxiliary path 4183. At this time, the icon 420 changes from left to right as shown in (c) in Figure 13 As shown in the third figure. Also, because the inner auxiliary path 4202 is a closed path, the area formed by the main path and the area formed by the inner auxiliary path are processed as the intersection area to obtain the main inner intersection area (the area formed by the inner auxiliary path 4202 in Fig. 13), and The main inner intersection area is set to a transparent color.
  • the icon 420 changes as shown in the fourth diagram from left to right in (c) in FIG. 13.
  • the fill color corresponding to the set inner auxiliary path 4202 is used to fill the main inner intersection area.
  • the icon 420 changes as shown in the fifth diagram from left to right in (c) of FIG. 13.
  • FIG. 13 it is a schematic diagram of an example of a process of filling an icon provided by an embodiment of this application.
  • the icon 421 includes a main path 4211 and an inner auxiliary path 4212, the main path 4211 is a closed path, and the inner auxiliary path 4212 is an open path.
  • the filling process for the icon 421 includes the above-mentioned step 3212, step 3233b, step 3231b, and step 3232b. Specifically, since the main path 4211 is a closed path, the main path 4211 is filled according to the fill color set for the main path. At this time, the icon 421 changes from left to right as shown in (d) in Figure 13 This is shown in the second figure.
  • the inner auxiliary path 4212 is an open path
  • the inner auxiliary path 4212 is contoured and stroked (including the above steps 1 to 4, 7, 9, 10 (repeated multiple times in sequence); 11, 20, 21, 22, 23).
  • the icon 421 changes as shown in the third diagram from left to right in (d) of FIG. 13.
  • the area formed by the main path and the area formed by the inner auxiliary path are processed as the intersection area to obtain the main inner intersection area (the area formed by the inner auxiliary path 4212 after the outline stroke processing in Figure 13), and the main inner intersection area is set It is a transparent color.
  • the icon 421 changes as shown in the fourth diagram from left to right in (d) of FIG. 13.
  • the fill color corresponding to the set inner auxiliary path 4212 is used to fill the main inner intersection area.
  • the icon 421 changes as shown in the fifth diagram from left to right in (d) of FIG. 13.
  • FIG. 13 it is a schematic diagram of an example of a process of filling an icon provided by an embodiment of this application.
  • the icon 422 includes a main path 4221, an inner auxiliary path 4222, and an outer auxiliary path 4223.
  • the main path 4221 and the outer auxiliary path 4223 are closed paths, and the inner auxiliary path 4222 is an open path.
  • the filling process of the icon 422 includes the above-mentioned step 3212, step 3221b, step 3233b, step 3231b, and step 3232b. Specifically, since the main path 4221 is a closed path, the main path 4221 is filled according to the fill color set for the main path.
  • the icon 422 changes from left to right as shown in (e) in Figure 13 This is shown in the second figure. Since the external auxiliary path 4223 is a closed path, the external auxiliary path 4123 is filled according to the fill color set for the external auxiliary path 4123. At this time, the icon 420 changes from left to right as shown in (e) in Figure 13 As shown in the third figure. Also, because the inner auxiliary path 4222 is an open path, the inner auxiliary path 4222 is contoured and stroked (including the above steps 1 to 4, 7, 9, 10 (repeated multiple times in sequence); 11, 20, 21, 22, 23). At this time, the icon 422 changes as shown in the fourth diagram from left to right in (e) of FIG. 13.
  • the area formed by the main path and the area formed by the inner auxiliary path are processed as the intersection area to obtain the main inner intersection area (the area formed by the inner auxiliary path 4222 after the outline stroke processing in Figure 13), and the main inner intersection area is set It is a transparent color.
  • the icon 422 changes as shown in the fifth diagram from left to right in (e) of FIG. 13.
  • the fill color corresponding to the set inner auxiliary path 4222 is used to fill the main inner intersection area.
  • the icon 422 changes as shown in the sixth diagram from left to right in (e) of FIG. 13.
  • the path of the icon is marked as the main path, the inner auxiliary path, the outer auxiliary path and/or the intersecting path, and the icons can be imported in batches, and the corresponding fill colors can be set according to different paths.
  • the icons can be filled in batches and finely, and a set of stroke-like icons that meet the expected design can be quickly generated.
  • This application also provides a method for the duotone processing of icons.
  • the method may include step 210 to step 240 and step 310 to step 320 in the method 200 described above.
  • the difference between the corresponding steps in this method and the foregoing steps 210 to 240 and steps 310 to 320 is that the stroke color set in step 230 and the fill color set in step 310 need to be different.
  • FIG. 14 it is a schematic diagram of an example of the process of performing duotone processing on an icon provided by an embodiment of this application.
  • the stroke color used for the stroke processing of the icon 423 is black
  • the fill color used for the filling processing of the icon 423 is gray.
  • This application also provides a method for processing icon radius styles.
  • the method may include step 210 and step 220 involved in the above method 200, and further include step 40 to step 47 shown in FIG. 15.
  • FIG. 15 it is a schematic flowchart of an icon radius style processing provided by this application. Steps 40 to 47 shown in FIG. 15 are to perform corresponding icon radius style processing for each path of the icon, that is, through step 210 and step 220, the main path, inner auxiliary path, and outer auxiliary path of each SVG icon can be marked. The path and/or the intersecting path are then rounded for the corresponding path through steps 40 to 47 shown in FIG. 15.
  • Step 40 Obtain the target fillet radius.
  • the path of the icon is different, and the corresponding target fillet radius can be the same or different.
  • the path of the icon is different, and the corresponding target fillet radius may be the same or different.
  • the target fillet radius corresponding to at least one of the main path, the inner auxiliary path, the outer auxiliary path, or the intersecting path is the same, or the main path
  • the target fillet radius corresponding to each path in, inner auxiliary path, outer auxiliary path, or intersecting path is different.
  • the fillet radius of the path from the outside to the inside in the icon may be sequentially reduced and set.
  • Step 41 Determine whether the angle of the corner of the icon to be processed is rounded or included.
  • the corner of the icon to be processed can be understood as the corner of the main path of the icon to be processed, the corner of the inner auxiliary path of the icon to be processed, the corner of the outer auxiliary path of the icon to be processed, and/or the intersection path of the icon to be processed Corner.
  • the angle of the corner of the icon can be rounded or sharp.
  • the sharp corner can be regarded as a rounded corner with a radius of 0. Adjusting the size of the rounded corner can change the roundness of the icon.
  • step 42 to step 47 are executed; in the case where the corners of the icon to be processed are sharp corners, step 44 to step 47 are executed.
  • Step 42 Calculate the tangents of the rounded corners at the two end points.
  • Step 43 Calculate the intersection of the two tangents, which is the vertex of the sharp corner corresponding to the rounded corner.
  • Step 44 Calculate the target fillet endpoints.
  • Step 45 whether the end point of the target fillet exceeds the corresponding line segment. If the end point of the target fillet does not exceed the corresponding line segment, step 46 is executed; if the end point of the target fillet exceeds the corresponding line segment, step 47 is executed.
  • Step 46 Return the end point of the calculated target fillet.
  • Step 47 return to the original point.
  • step 44 to step 47 will be introduced in detail according to the two cases that the corner of the icon to be processed is rounded and the corner of the icon to be processed is sharp.
  • step 42 Draw the angle bisector of the two tangents obtained in step 42, and calculate the distance between the apex of the sharp corner and the center of the circle according to the angle of the corresponding sharp corner of the rounded corner and the radius of the target round.
  • the target radius draws an arc. If the arc has an intersection with two sides, the original rounded end point is changed; if the arc does not intersect with the two sides, the original rounded end point is returned, that is, the corner of the icon to be processed cannot be rounded according to the target rounding radius Angle treatment.
  • FIG. 16 it is a schematic diagram of an example process of rounding corners of an icon provided by this application.
  • the icon 424 shown in the first image from left to right in Figure 16 (a) has a target rounded corner radius of 8mm.
  • the corners of the icon 424 are rounded, and the angle of the rounded corner is 90°.
  • the radius of the rounded corner is 5mm, and the two end points of the rounded corner are A11 and A12 respectively.
  • the tangents of the rounded corners at the end points A11 and A12 are l1 and l2, respectively, and the intersection point A1 of l1 and l2 is the point corresponding to the rounded corner.
  • the vertex of the angle Draw the angle bisector of l1 and l2, l3, according to the target fillet radius (8mm) and the angle of the sharp corner (90°), calculate the distance between the vertex of the sharp corner and the center of the circle as mm, then take the distance from the vertex mm on l3
  • the point O1 is the center of the target fillet, and the arc is drawn with O1 as the center and the target radius is 8mm.
  • the intersection points of the arc and the corners of the fillet are A11' and A12', then A11' and A12' are the end points of the target fillet respectively.
  • the dotted line shown in the third diagram from left to right in (a) of FIG. 16 is the icon 424 after the rounding process.
  • FIG. 16 it is a schematic diagram of another example of the process of rounding the corners of the icon provided by this application.
  • the icon 425 shown in the first image from left to right in Figure 16 (b) has a target rounded radius of 3mm.
  • the corners of the icon 425 are rounded, and the angle of the rounded corner is 120°.
  • the radius of the rounded corner is 8mm, and the two end points of the rounded corner are A21 and A22 respectively.
  • the tangents of the rounded corners at the end points A21 and A22 are respectively l4 and l5, and the intersection point A2 of l4 and l5 is the corresponding point of the rounded corner.
  • the vertex of the angle Draw the angular bisector of l4 and l5, according to the target fillet radius (3mm) and the angle of the sharp corner (60°), the distance between the vertex of the sharp corner and the center of the circle is calculated to be 6mm, then the distance from the vertex should be 6mm on l3
  • the point O2 is the center of the target fillet, and the arc is drawn with O2 as the center and the target radius is 3mm.
  • the intersection of the arc and the extension of the corner of the fillet is A21' and A22, respectively. ', then A21' and A22' are the end points of the target fillet respectively.
  • the dotted line shown in the third diagram from left to right in (b) of FIG. 16 is the icon 425 after the rounded corner processing.
  • FIG. 16 it is a schematic diagram of another example of the process of rounding the corners of the icon provided by this application.
  • the icon 426 shown in the first image from left to right in (c) of Figure 16 has a target rounded corner radius of 0mm.
  • the corner of the icon 426 is a sharp corner.
  • the apex of the sharp corner is A3.
  • the angle of the angle is 90°.
  • FIG. 16 it is a schematic diagram of another example of the process of rounding the corners of the icon provided by this application.
  • the icon 427 shown in the first image from left to right in (d) in Figure 16 has a target rounded corner radius of 0mm.
  • the corner of the icon 427 is a sharp corner.
  • the apex of the sharp corner is A4.
  • the angle of the angle is 60°.
  • the icon after the corner rounding process shown in FIG. 16 described above shows an example of performing the same target rounding process on four rounded corners. This application does not limit whether the rounded corners of the icon to be processed are subjected to the same target rounded corner processing.
  • FIG. 17 shows a schematic structural diagram of an apparatus 1700 for processing icon styles provided by an embodiment of the present application.
  • the obtaining unit 1710 is used to obtain N icons, where N is an integer greater than 10;
  • the conversion unit 1720 is used to convert the constituent elements of each icon into a path;
  • the marking unit 1730 is used to mark the attributes of all paths of each icon , wherein the attributes of the path include the main path and the inner auxiliary path, or the attributes of the path include the main path and the outer auxiliary path, or the attributes of the path include the main path and the inner auxiliary path.
  • the inner auxiliary path is inside the main path, the outer auxiliary path is outside the main path, the inner auxiliary path is inside the main path, and the outer auxiliary path is inside the main path.
  • the auxiliary path is outside the main path;
  • the obtaining unit 1710 is further configured to obtain target parameters corresponding to the attributes of the path, the target parameters including stroke parameters, fill colors and/or fillet radius;
  • processing The unit 1740 is configured to perform style and style processing on the path of each attribute in the N icons according to the target parameter corresponding to the attribute of the path.
  • the main path is the path with the longest length among all paths.
  • the target parameter includes a stroke parameter
  • the processing unit 1740 is further specifically configured to: stroke the main path of the N icons according to the stroke parameter corresponding to the main path; and/or , Stroke the inner auxiliary path of the N icons according to the stroke parameter corresponding to the inner auxiliary path; and/or, according to the stroke parameter corresponding to the outer auxiliary path, the Stroke outside the auxiliary path.
  • the attribute of the path further includes an intersecting path
  • the intersecting path is a path in which one path and another path have at least one common point
  • the target parameter includes a stroke parameter
  • the processing unit 1740 also specifically uses Yu: Stroke the intersecting path of the N icons according to the stroke thickness corresponding to the intersecting path.
  • the processing unit 1740 is further specifically configured to: the attributes of the path further include a closed path and an open path, the closed path is where the start point of the path and the end point of the path overlap, and the open path is The starting point of the path and the ending point of the path do not overlap; the target parameter further includes a fill color, and the processing unit 1740 is also specifically configured to: determine whether the main path of the N icons is a closed path, and When the main path is a closed path, the area formed by the main path is filled according to the fill color corresponding to the main path; when the main path is an open path, the area formed by the main path is filled according to the corresponding filling color of the main path. Color, stroke the main path.
  • the processing unit 1740 is further specifically configured to: determine whether the outer auxiliary path of the N icons is a closed path; in the case that the outer auxiliary path is a closed path, according to the corresponding external auxiliary path The filling color fills the area formed by the outer auxiliary path; in the case that the outer auxiliary path is an open path, stroke the outer auxiliary path according to the filling color corresponding to the outer auxiliary path.
  • the processing unit 1740 is further specifically configured to: determine whether the inner auxiliary paths of the N icons are closed paths; if the inner auxiliary paths are closed paths, determine the first main inner intersection area, The first main inner intersection area is an overlapping area of the area formed by the main path and the area formed by the inner auxiliary path in the area formed by the main path; setting the main inner intersection area as a transparent area; According to the filling color corresponding to the inner auxiliary path, the main inner intersection area is filled; in the case that the inner auxiliary path is an open path, the inner auxiliary path is contoured and stroked to obtain a closed Inner auxiliary path; determine a second main inner intersection area, the second main inner intersection area is the overlap of the area formed by the main path and the closed inner auxiliary path in the area formed by the main path Area; the second main inner intersection area is set as a transparent area; the second main inner intersection area is filled according to the filling color corresponding to the inner auxiliary path.
  • the target parameter further includes a corner radius
  • the processing unit 1740 is further specifically configured to: perform corner rounding processing on the main path of the N icons according to the corner radius corresponding to the main path; and /Or, perform rounding processing on the internal auxiliary paths of the N icons according to the rounded radius corresponding to the internal auxiliary path; and/or, perform rounding on the N The outer auxiliary path of each icon is rounded.
  • the icon is a scalable vector graphic SVG format icon or a streaming network image PNG format icon.
  • FIG. 18 shows an apparatus 1800 for processing icon styles provided by an embodiment of the present application.
  • the apparatus may include a processor 1810.
  • the device may further include a memory 1820.
  • the device may further include a transceiver 1830.
  • the transceiver may include a transmitter and/or a receiver.
  • the processor 1810, the transceiver 1830, and the memory 1820 communicate with each other through internal connection paths.
  • the related functions implemented by the processing unit 1710 in FIG. 17 may be implemented by the processor 1810.
  • the processor 1810 may be a general-purpose central processing unit (central processing unit, CPU), a microprocessor, an application-specific integrated circuit (ASIC), a dedicated processor, or one or more It is an integrated circuit that implements the technical solutions of the embodiments of the present application.
  • a processor may refer to one or more devices, circuits, and/or processing cores for processing data (for example, computer program instructions).
  • the central processing unit can execute software programs and process the data of the software programs.
  • the processor 1810 may include one or more processors, such as one or more CPUs.
  • the processor is a CPU
  • the CPU may be a single-core CPU or a multi-core CPU.
  • the transceiver 1830 is used to send and receive data and/or signals, and to receive data and/or signals.
  • the transceiver may include a transmitter and a receiver, the transmitter is used to send data and/or signals, and the receiver is used to receive data and/or signals.
  • the transceiver can also be a communication interface.
  • the memory 1820 includes, but is not limited to, random access memory (RAM), read-only memory (ROM), erasable programmable memory (erasable read only memory, EPROM), and read-only memory.
  • RAM random access memory
  • ROM read-only memory
  • EPROM erasable read only memory
  • read-only memory EPROM
  • read-only memory EPROM
  • CD-ROM compact disc
  • the memory 1820 is used to store program codes and/or data, which may be a separate device or integrated in the processor 1810.
  • the processor 1810 is used to control the transceiver and the biometric identification device to perform information transmission.
  • the processor 1810 is used to control the transceiver and the biometric identification device to perform information transmission.
  • the apparatus 1800 may further include an output device and an input device.
  • the output device communicates with the processor 1810 and can display information in a variety of ways.
  • the output device can be a liquid crystal display (LCD), a light emitting diode (LED) display device, a cathode ray tube (CRT) display device, or a projector, etc.
  • the input device communicates with the processor 1810 and can receive user input in a variety of ways.
  • the input device can be a mouse, a keyboard, a touch screen device, or a sensor device.
  • FIG. 18 only shows a simplified design of the device.
  • the device may also contain other necessary components, including but not limited to any number of transceivers, processors, controllers, memories, etc., and all terminals that can implement this application are within the protection scope of this application. within.
  • the device for processing the style and style of the icon in this application may be a chip, for example, a chip that can be used in an electronic device to implement related functions of the processor 1810.
  • the chip can be a field programmable gate array, a dedicated integrated chip, a system chip, a central processing unit, a network processor, a digital signal processing circuit, a microcontroller, and a programmable controller or other integrated chips for realizing related functions.
  • the chip may optionally include one or more memories for storing program codes. When the codes are executed, the processor realizes corresponding functions.
  • the embodiment of the present application also provides a computer-readable storage medium, including a computer program, which when running on a computer device, causes a processing unit in the computer device to perform the above-mentioned icon style processing method.
  • the embodiment of the present application also provides a computer program product.
  • the computer program product runs on an electronic device, the electronic device executes any one of the possible icon style processing methods described above. It should be understood that in the various embodiments of the present application, the size of the sequence number of the above-mentioned processes does not mean the order of execution, and the execution order of each process should be determined by its function and internal logic, and should not correspond to the embodiments of the present application.
  • the implementation process constitutes any limitation.
  • the disclosed system, device, and method can be implemented in other ways.
  • the device embodiments described above are merely illustrative.
  • the division of the units is only a logical function division, and there may be other divisions in actual implementation, for example, multiple units or components may be combined or It can be integrated into another system, or some features can be ignored or not implemented.
  • the displayed or discussed mutual coupling or direct coupling or communication connection may be indirect coupling or communication connection through some interfaces, devices or units, and may be in electrical, mechanical or other forms.
  • the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the objectives of the solutions of the embodiments.
  • the functional units in the various embodiments of the present application may be integrated into one processing unit, or each unit may exist alone physically, or two or more units may be integrated into one unit.
  • the function is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer readable storage medium.
  • the technical solution of the present application essentially or the part that contributes to the existing technology or the part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including Several instructions are used to make a computer device (which may be a personal computer, a server, or a network device, etc.) execute all or part of the steps of the methods described in the various embodiments of the present application.
  • the aforementioned storage media include: U disk, mobile hard disk, read-only memory (read-only memory, ROM), random access memory (random access memory, RAM), magnetic disks or optical disks and other media that can store program codes. .

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

一种图标的样式风格处理的方法和装置。该方法将获取的N个图标中的每个图标的组成元素转化为路径，标记每个图标中的路径的属性，并根据路径的属性对应的目标参数，对N个图标进行相应的样式风格处理。其中，路径的属性包括主路径、内辅助路径和/或外辅助路径；目标参数包括描边参数、填充色和/或圆角半径。通过该方法可以批量地对N个图标的每种属性的路径进行相应的样式风格进行处理，从而提高图标样式风格处理的效率。

Description

图标的样式风格处理的方法以及装置
本申请要求于2020年04月26日提交中国专利局、申请号为202010337760.7、申请名称为“图标的样式风格处理的方法以及装置”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及图标处理领域，并且更具体地，涉及一种图标的样式风格处理的方法以及装置。
背景技术
随着电子设备的普及，电子设备的显示界面上显示的图标是整个显示界面设计中最重要的元素之一。
在现有技术中，对图标样式风格的处理，只能一次性对所有的路径(path)进行处理，或者只能对单一路径单独处理。因此，在图标样式风格处理时效率低、灵活性较差。
发明内容
本申请提供一种图标的样式风格处理的方法以及装置，该方法可以批量地对N个图标的每种属性的路径进行相应的样式风格进行处理，从而提高图标样式风格处理的效率。
第一方面，提供了一种图标的样式风格处理的方法，包括：获取N个图标，N是大于1的整数；将每个图标的组成元素转化为路径；标记每个图标的所有路径的属性，其中，所述路径的属性包括主路径和内辅助路径，或者，所述路径的属性包括所述主路径和外辅助路径，或者，所述路径的属性包括所述主路径、所述内辅助路径和所述外辅助路径，所述内辅助路径在所述主路径的内部，所述外辅助路径在所述主路径的外部；获取与所述路径的属性对应的目标参数，所述目标参数包括描边参数、填充色和/或圆角半径；根据所述路径的属性对应的目标参数，对所述N个图标中每种属性的路径进行样式风格处理。
将获取的N个图标中的每个图标的组成元素转化为路径，并标记每个图标中的路径的属性，并根据路径的属性对应的目标参数，对N个图标进行相应的样式风格处理。从而可以批量地对N个图标的每种属性的路径进行相应的样式风格进行处理，提高图标样式风格处理的效率。
结合第一方面，在一种可能的实现方式中，所述主路径是所有路径中长度最长的路径。
结合第一方面，在一种可能的实现方式中，所述目标参数包括描边参数，根据所述路径的属性对应的目标参数，对所述N个图标中每种属性的路径进行样式风格处理包括：根据所述主路径对应的描边参数，对所述N个图标的主路径进行描边；和/或，根据所述内辅助路径对应的描边参数，对所述N个图标的内辅助路径进行描边；和/或，根据所述外辅助路径对应的描边参数，对所述N个图标的外辅助路径进行描边；和/或，根据所述相 交路径对应的描边参数，对所述N个图标的相交路径进行描边。
可选地，所述描边参数包括描边色和/或描边粗细。描边色可以理解为是描边颜色。
结合第一方面，在一种可能的实现方式中，所述路径的属性还包括相交路径，所述相交路径是一条路径与另一条路径至少有一个公共点的路径；所述根据所述路径的属性对应的目标参数，对所述N个图标中每种属性的路径进行样式风格处理还包括：根据所述相交路径对应的描边参数，对所述N个图标的相交路径进行描边。
根据不同属性的路径对应的描边参数，对N个图标中的每个图标的不同属性的路径进行描边，从而可以批量地对N个图标中每种属性路径进行相应的描边风格处理，提高图标样式风格处理的效率。
结合第一方面，在一种可能的实现方式中，所述根据所述路径的属性对应的目标参数，对所述N个图标中每种属性的路径进行样式风格处理还包括：对所述每个图标中路径形成的区域的面积与路径的描边的比例小于预设值的闭合区域进行填充。
结合第一方面，在一种可能的实现方式中，所述路径的属性还包括闭合路径和开放路径，所述闭合路径是所述路径的起点和所述路径的终点重合，所述开放路径是所述路径的起点和所述路径的终点不重合；所述目标参数还包括填充色，所述所述根据所述路径的属性对应的目标参数，对所述N个图标中每种属性的路径进行样式风格处理包括：判断所述N个图标的主路径是否是闭合路径，在所述主路径是闭合路径的情况下，根据所述主路径对应的填充色，对所述主路径形成的区域进行填充；在所述主路径是开放路径的情况下，根据所述主路径对应的填充色，对所述主路径进行描边。
可选地，上述填充包括纯色填充、渐变色填充或图案填充。
在纯色填充中，填充色指的是纯色填充的颜色。在渐变色填充中，填充色指的是渐变填充的颜色。在图案填充中，填充色指的是图案填充的颜色。
对N个图标中的主路径是闭合路径的图标，采用主路径对应的填充色对主路径形成的区域进行填充；对N个图标中的主路径是开放路径的图标，采用主路径对应的填充色对主路径进行描边，从而可以批量地对N个图标的主路径进行填充风格处理，从而提高图标样式风格处理的效率。
结合第一方面，在一种可能的实现方式中，所述所述根据所述路径的属性对应的目标参数，对所述N个图标中每种属性的路径进行样式风格处理还包括：判断所述N个图标的外辅助路径是否是闭合路径；在所述外辅助路径是闭合路径的情况下，根据所述外辅助路径对应的填充色，对所述外辅助路径形成的区域进行填充；在所述外辅助路径是开放路径的情况下，根据所述外辅助路径对应的填充色，对所述外辅助路径进行描边。
对N个图标中的外辅助路径是闭合路径的图标，采用外辅助路径对应的填充色对外辅助路径形成的区域进行填充；对N个图标中的外辅助路径是开放路径的图标，采用外辅助路径对应的填充色对外辅助路径进行描边，从而可以批量地对N个图标的外辅助路径进行填充风格处理，从而提高图标样式风格处理的效率。
结合第一方面，在一种可能的实现方式中，所述所述根据所述路径的属性对应的目标参数，对所述N个图标中每种属性的路径进行样式风格处理还包括：判断所述N个图标的内辅助路径是否是闭合路径；在所述内辅助路径是闭合路径的情况下，确定第一主内交集区域，所述第一主内交集区域是所述主路径形成的区域中所述主路径形成的区域和所述 内辅助路径形成的区域的重合的区域；将所述主内交集区域设置为透明区域；根据所述内辅助路径对应的填充色，对所述主内交集区域进行填充；在所述内辅助路径是开放路径的情况下，对所述内辅助路径进行轮廓化描边，以得到闭合的内辅助路径；确定第二主内交集区域，所述第二主内交集区域是所述主路径形成的区域中所述主路径形成的区域和所述闭合的内辅助路径形成的区域的重合的区域；将所述第二主内交集区域设置为透明区域；根据所述内辅助路径对应的填充色，对所述第二主内交集区域进行填充。
对N个图标中的内辅助路径是闭合路径的图标，将主路径形成的区域和内辅助路径形成的区域的交集区域设置为透明区域，并采用内辅助路径对应的填充色对内辅助路径形成的区域进行填充；对N个图标中的内辅助路径是开放路径的图标，先将内辅助路径进行轮廓化描边得到闭合的内辅助路径，再将主路径形成的区域和轮廓化描边后的内辅助路径形成的区域的交集区域设置为透明区域，并采用内辅助路径对应的填充色对内辅助路径进行描边，从而可以批量地对N个图标的内辅助路径进行填充风格处理，从而提高图标样式风格处理的效率。
结合第一方面，在一种可能的实现方式中，所述目标参数还包括圆角半径，所述所述根据所述路径的属性对应的目标参数，对所述N个图标中每种属性的路径进行样式风格处理包括：根据所述主路径对应的圆角半径，对所述N个图标的主路径进行圆角处理；和/或，根据所述内辅助路径对应的圆角半径，对所述N个图标的内辅助路径进行圆角处理；和/或，根据所述外辅助路径对应的圆角半径，对所述N个图标的外辅助路径进行圆角处理。
根据不同属性的路径对应的圆角半径，对N个图标中的每个图标的不同属性的路径进行圆角处理，从而可以批量地对N个图标进行圆角风格处理，从而提高图标样式风格处理的效率。
结合第一方面，在一种可能的实现方式中，所述图标是可缩放的矢量图形SVG格式的图标或流式网络图像PNG格式的图标。
第二方面，提供了一种图标的样式风格处理的装置，包括：获取单元，用于获取N个图标，N是大于1的整数；转化单元，用于将每个图标的组成元素转化为路径；标记单元，用于标记每个图标的所有路径的属性，其中，所述路径的属性包括主路径和内辅助路径，或者，所述路径的属性包括所述主路径和外辅助路径，或者，所述路径的属性包括所述主路径、所述内辅助路径和所述外辅助路径，所述内辅助路径在所述主路径的内部，所述外辅助路径在所述主路径的外部；所述获取单元，还用于获取与所述路径的属性对应的目标参数，所述目标参数包括描边参数、填充色和/或圆角半径；处理单元，用于根据所述路径的属性对应的目标参数，对所述N个图标中每种属性的路径进行样式风格处理。
结合第二方面，在一种可能的实现方式中，所述主路径是所有路径中长度最长的路径。
结合第二方面，在一种可能的实现方式中，所述目标参数包括描边参数，所述处理单元还具体用于：根据所述主路径对应的描边参数，对所述N个图标的主路径进行描边；和/或，根据所述内辅助路径对应的描边参数，对所述N个图标的内辅助路径进行描边；和/或，根据所述外辅助路径对应的描边参数，对所述N个图标的外辅助路径进行描边。
结合第二方面，在一种可能的实现方式中，所述路径的属性还包括相交路径，所述相交路径是一条路径与另一条路径至少有一个公共点的路径，所述处理单元还具体用于：根 据所述相交路径对应的描边参数，对所述N个图标的相交路径进行描边。
结合第二方面，在一种可能的实现方式中，所述路径的属性还包括闭合路径和开放路径，所述闭合路径是所述路径的起点和所述路径的终点重合，所述开放路径是所述路径的起点和所述路径的终点不重合；所述目标参数还包括填充色，所述处理单元还具体用于：判断所述N个图标的主路径是否是闭合路径；在所述主路径是闭合路径的情况下，根据所述主路径对应的填充色，对所述主路径形成的区域进行填充；在所述主路径是开放路径的情况下，根据所述主路径对应的填充色，对所述主路径进行描边。
结合第二方面，在一种可能的实现方式中，所述处理单元还具体用于：判断所述N个图标的外辅助路径是否是闭合路径；在所述外辅助路径是闭合路径的情况下，根据所述外辅助路径对应的填充色，对所述外辅助路径形成的区域进行填充；在所述外辅助路径是开放路径的情况下，根据所述外辅助路径对应的填充色，对所述外辅助路径进行描边。
结合第二方面，在一种可能的实现方式中，所述处理单元还具体用于：判断所述N个图标的内辅助路径是都是否是闭合路；在所述内辅助路径是闭合路径的情况下，确定第一主内交集区域，所述第一主内交集区域是所述主路径形成的区域中所述主路径形成的区域中所述主路径形成的区域和所述内辅助路径形成的区域的重合的区域；将所述主内交集区域设置为透明区域；根据所述内辅助路径对应的填充色，对所述主内交集区域进行填充；在所述内辅助路径是开放路径的情况下，对所述内辅助路径进行轮廓化描边，以得到闭合的内辅助路径；确定第二主内交集区域，所述第二主内交集区域是所述主路径形成的区域中所述主路径形成的区域中所述主路径形成的区域和所述闭合的内辅助路径形成的区域的重合的区域；将所述第二主内交集区域设置为透明区域；根据所述内辅助路径对应的填充色，对所述第二主内交集区域进行填充。
结合第二方面，在一种可能的实现方式中，所述目标参数还包括圆角半径，所述处理单元还具体用于：根据所述主路径对应的圆角半径，对所述N个图标的主路径进行圆角处理；和/或，根据所述内辅助路径对应的圆角半径，对所述N个图标的内辅助路径进行圆角处理；和/或，根据所述外辅助路径对应的圆角半径，对所述N个图标的外辅助路径进行圆角处理。
结合第二方面，在一种可能的实现方式中，所述图标是可缩放的矢量图形SVG格式的图标或流式网络图像PNG格式的图标。
第三方面，本申请提供了一种图标的样式风格处理装置，所述图标的样式风格处理装置包括：至少一个处理器，当程序指令在所述至少一个处理器中执行时，使得所述图像处理装置执行上述任一方面任一项可能的实现中的图标的样式风格处理的方法。
第四方面，本申请提供了一种电子设备，包括一个或多个处理器和一个或多个存储器。该一个或多个存储器与一个或多个处理器耦合，一个或多个存储器用于存储计算机程序代码，计算机程序代码包括计算机指令，当一个或多个处理器执行计算机指令时，使得电子设备执行上述任一方面任一项可能的实现中的图标的样式风格处理的方法。
第五方面，本申请提供了一种计算机可读存储介质，包括计算机程序，当其在计算机设备上运行时，使得所述计算机设备中的处理单元执行上述任一方面任一项可能的实现中的图标的样式风格处理的方法。
第六方面，本申请提供了一种计算机程序产品，当计算机程序产品在电子设备上运行 时，使得电子设备执行上述任一方面任一项可能的图标的样式风格处理的方法。
第七方面，本申请提供了一种芯片，所述芯片包括存储器和处理器，所述存储器用于存储计算机指令，所述处理器用于执行所述存储器中存储的计算机指令，以执行上述任一方面任一项可能的图标的样式风格处理的方法。
附图说明
图1是本申请实施例提供的一例电子设备的结构示意图。
图2是本申请实施例提供的一例电子设备的软件结构框图。
图3是图标的样式风格的示意图。
图4是本申请实施例提供的一种图标的描边风格处理的方法的示意性流程图。
图5是本申请实施例提供的对可缩放的矢量图形图标进行解析的示意性流程图。
图6是本申请实施例提供的一例图标的各个路径示意图。
图7是本申请实施例提供的一例对图标进行描边风格处理的过程示意图。
图8是本申请实施例提供的一种图标的填充风格处理的方法的示意性流程图。
图9是本申请实施例提供的一种图标的不同路径的填充风格处理的方法的示意性流程图。
图10是本申请实施例提供的一例对图标进行填充风格处理的过程示意图。
图11是本申请实施例提供的一例对内辅助路径进行轮廓化描边风格处理的示意性流程图。
图12是本申请实施例提供的一例对内辅助路径进行轮廓化描边风格处理的过程示意图。
图13是本申请实施例提供的另一例对图标进行填充风格处理的过程示意图。
图14是本申请实施例提供的一例对图标进行双色调风格处理的过程示意图。
图15是本申请实施例提供的一种图标的圆角半径风格处理的方法的示意性流程图。
图16是本申请实施例提供的一例对图标进行圆角处理的过程示意图。
图17是本申请实施例提供的一例图标的样式风格的处理的装置的结构示意图。
图18是本申请实施例提供的另一例图标的样式风格的处理的装置的结构示意图。
具体实施方式
下面将结合附图，对本申请中的技术方案进行描述。
本申请提供的图标(icon)的样式风格处理的方法，可以应用于电子设备，也可是单独的计算机程序，该计算机程序可以实现电子设备界面中的图标样式风格的显示。
本申请提供的图标的样式风格处理的方法可以应用于手机、平板电脑、可穿戴设备、车载设备、增强现实(augmented reality，AR)/虚拟现实(virtual reality，VR)设备、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer，UMPC)、上网本、个人数字助理(personal digital assistant，PDA)等电子设备上，本申请实施例对电子设备的具体类型不作任何限制。
示例性的，图1是本申请实施例提供的一例电子设备的结构示意图。电子设备100可以包括处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serial  bus，USB)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块150，无线通信模块160，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180，按键190，马达191，指示器192，摄像头193，显示屏194，以及用户标识模块(subscriber identification module，SIM)卡接口195等。其中传感器模块180可以包括压力传感器180A，陀螺仪传感器180B，气压传感器180C，磁传感器180D，加速度传感器180E，距离传感器180F，接近光传感器180G，指纹传感器180H，温度传感器180J，触摸传感器180K，环境光传感器180L，骨传导传感器180M等。
可以理解的是，本申请实施例示意的结构并不构成对电子设备100的具体限定。在本申请另一些实施例中，电子设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。
处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processing unit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，存储器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。
其中，控制器可以是电子设备100的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。
处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110可以包括一个或多个接口，例如，接口可以包括集成电路(inter-integrated circuit，I2C)接口，集成电路内置音频(inter-integrated circuit sound，I2S)接口，脉冲编码调制(pulse code modulation，PCM)接口，通用异步收发传输器(universal asynchronous receiver/transmitter，UART)接口，移动产业处理器接口(mobile industry processor interface，MIPI)，通用输入输出(general-purpose input/output，GPIO)接口，用户标识模块(subscriber identity module，SIM)接口，和/或通用串行总线(universal serial bus，USB)接口等。
I2C接口是一种双向同步串行总线，包括一根串行数据线(serial data line，SDA)和一根串行时钟线(derail clock line，SCL)。在一些实施例中，处理器110可以包含多组I2C总线。处理器110可以通过不同的I2C总线接口分别耦合触摸传感器180K，充电器，闪光灯，摄像头193等。例如：处理器110可以通过I2C接口耦合触摸传感器180K，使处理器110与触摸传感器180K通过I2C总线接口通信，实现电子设备100的触摸功能。
MIPI接口可以被用于连接处理器110与显示屏194，摄像头193等外围器件。MIPI接口包括摄像头串行接口(camera serial interface，CSI)，显示屏串行接口(display serial interface，DSI)等。在一些实施例中，处理器110和摄像头193通过CSI接口通信，实现电子设备100的拍摄功能。处理器110和显示屏194通过DSI接口通信，实现电子设备100的显示功能。
USB接口130是符合USB标准规范的接口，具体可以是Mini USB接口，Micro USB接口，USB Type C接口等。USB接口130可以用于连接充电器为电子设备100充电，也可以用于电子设备100与外围设备之间传输数据。也可以用于连接耳机，通过耳机播放音 频。该接口还可以用于连接其他电子设备，例如AR设备等。
可以理解的是，本申请实施例示意的各模块间的接口连接关系，只是示意性说明，并不构成对电子设备100的结构限定。在本申请另一些实施例中，电子设备100也可以采用上述实施例中不同的接口连接方式，或多种接口连接方式的组合。
充电管理模块140用于从充电器接收充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。电源管理模块141用于连接电池142，充电管理模块140与处理器110。电源管理模块141接收电池142和/或充电管理模块140的输入，为处理器110，内部存储器121，外部存储器，显示屏194，摄像头193，和无线通信模块160等供电。电源管理模块141还可以用于监测电池容量，电池循环次数，电池健康状态(漏电，阻抗)等参数。
电子设备100的无线通信功能可以通过天线1，天线2，移动通信模块150，无线通信模块160，调制解调处理器以及基带处理器等实现。
天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。
移动通信模块150可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。调制解调处理器可以包括调制器和解调器。其中，调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后，被传递给应用处理器。应用处理器通过音频设备(不限于扬声器170A，受话器170B等)输出声音信号，或通过显示屏194显示图像或视频。无线通信模块160可以提供应用在电子设备100上的包括无线局域网(wireless local area networks，WLAN)(如无线保真(wireless fidelity，Wi-Fi)网络)，蓝牙(bluetooth，BT)，全球导航卫星系统(global navigation satellite system，GNSS)，调频(frequency modulation，FM)，近距离无线通信技术(near field communication，NFC)，红外技术(infrared，IR)等无线通信的解决方案。
电子设备100通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。
显示屏194用于显示图像，视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)，有机发光二极管(organic light-emitting diode，OLED)，有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrix organic light emitting diode的，AMOLED)，柔性发光二极管(flex light-emitting diode，FLED)，Miniled，MicroLed，Micro-oLed，量子点发光二极管(quantum dot light emitting diodes，QLED)等。在一些实施例中，电子设备100可以包括1个或N个显示屏194，N为大于1的正整数。
电子设备100可以通过ISP，摄像头193，视频编解码器，GPU，显示屏194以及应用处理器等实现拍摄功能。其中，ISP用于处理摄像头193反馈的数据。摄像头193用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。视频编解码器用于对数字视频压缩或解压缩。
外部存储器接口120可以用于连接外部存储卡，例如Micro SD卡，实现扩展电子设 备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信，实现数据存储功能。例如将音乐，视频等文件保存在外部存储卡中。
内部存储器121可以用于存储计算机可执行程序代码，所述可执行程序代码包括指令。内部存储器1321可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，至少一个功能所需的应用程序(比如声音播放功能，图像播放功能等)等。存储数据区可存储电子设备1300使用过程中所创建的数据(比如音频数据，电话本等)等。此外，内部存储器1321可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universal flash storage，UFS)等。处理器110通过运行存储在内部存储器121的指令，从而执行电子设备100的各种功能应用以及数据处理。
电子设备100可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，以及应用处理器等实现音频功能。例如音乐播放，录音等。
压力传感器180A用于感受压力信号，可以将压力信号转换成电信号。陀螺仪传感器180B可以用于确定电子设备100的运动姿态。气压传感器180C用于测量气压。磁传感器180D包括霍尔传感器。电子设备100可以利用磁传感器180D检测翻盖皮套的开合。加速度传感器180E可检测电子设备100在各个方向上(一般为三轴)加速度的大小。距离传感器180F，用于测量距离。电子设备100可以通过红外或激光测量距离。接近光传感器180G可以包括例如发光二极管(LED)和光检测器，例如光电二极管。发光二极管可以是红外发光二极管。电子设备100通过发光二极管向外发射红外光。电子设备100使用光电二极管检测来自附近物体的红外反射光。当检测到充分的反射光时，可以确定电子设备100附近有物体。当检测到不充分的反射光时，电子设备100可以确定电子设备100附近没有物体。环境光传感器180L用于感知环境光亮度。温度传感器180J用于检测温度。
骨传导传感器180M可以获取振动信号。按键190包括开机键，音量键等。按键190可以是机械按键。也可以是触摸式按键。电子设备100可以接收按键输入，产生与电子设备100的用户设置以及功能控制有关的键信号输入。马达191可以产生振动提示。指示器192可以是指示灯，可以用于指示充电状态，电量变化，也可以用于指示消息，未接来电，通知等。SIM卡接口195用于连接SIM卡。SIM卡可以通过插入SIM卡接口195，或从SIM卡接口195拔出，实现和电子设备100的接触和分离。电子设备100可以支持1个或N个SIM卡接口，N为大于1的正整数。
指纹传感器180H用于采集指纹。电子设备100可以利用采集的指纹特性实现指纹解锁，访问应用锁，指纹拍照，指纹接听来电等。
触摸传感器180K，也称“触控面板”触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中，触摸传感器180K也可以设置于电子设备100的表面，与显示屏194所处的位置不同。
电子设备100的软件系统可以采用分层架构，事件驱动架构，微核架构，微服务架构，或云架构。本申请实施例以分层架构的
Figure PCTCN2021082665-appb-000001
系统为例，示例性说明电子设备100的 软件结构。
图2是本申请实施例提供的一例电子设备100的软件结构框图。分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将
Figure PCTCN2021082665-appb-000002
系统分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(Android runtime)和系统库，以及内核层。应用程序层可以包括一系列应用程序包。
如图2所示，结合本申请实施例的描述，该应用程序包可以包括相机，图库、信息、联系人、天气、音乐、卡包、任务卡商店、设置、相册、视频、浏览器、华为商城和桌面等应用程序。
应用程序框架层为应用程序层的应用程序提供应用编程接口(application programming interface，API)和编程框架。应用程序框架层包括一些预先定义的函数。
如图2所示，应用程序框架层可以包括窗口管理器，内容提供器，视图系统，电话管理器，资源管理器，通知管理器等。
窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。本申请中，该窗口管理器可以参与显示屏的界面元素的显示过程。
内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频，图像，音频，拨打和接听的电话，浏览历史和书签，电话簿等。
视图系统包括可视控件，例如显示文字的控件，显示图片的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，显示界面上应用图标的显示，或者包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。
电话管理器用于提供电子设备100的通信功能。例如通话状态的管理(包括接通，挂断等)。
资源管理器为应用程序提供各种资源，比如本地化字符串，图标，图片，布局文件，视频文件等等。
通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知用户下载完成，消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息，或者通过发出提示音、振动、指示灯闪烁等方式进行通知。
Android runtime包括核心库和虚拟机。Android runtime负责安卓系统的调度和管理。
核心库包含两部分：一部分是java语言需要调用的功能函数，另一部分是安卓的核心库。
应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理，堆栈管理，线程管理，安全和异常的管理，以及垃圾回收等功能。
系统库可以包括多个功能模块。例如：表面管理器(surface manager)，媒体库(media libraries)，三维图形处理库(例如：OpenGL ES)，2D图形引擎(例如：SGL)等。
表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。
媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可 以支持多种音视频编码格式，例如：MPEG4，H.264，MP3，AAC，AMR，JPG，PNG等。
三维图形处理库用于实现三维图形绘图，图像渲染，合成，和图层处理等。2D图形引擎是2D绘图的绘图引擎。
本申请中，表面管理器、三维图形处理库等可以参与电子设备的图标样式风格处理的过程，此处不再对具体的处理的过程进行赘述。
内核层是硬件和软件之间的层。内核层至少包含显示驱动，传感器驱动等。
为了便于理解，本申请以下实施例将以具有图1和图2所示结构的电子设备为例，结合附图，对本申请实施例提供的图标样式风格的处理方法进行具体阐述。
本申请中涉及的图标，可以是可缩放的矢量图形(scalable vector graphics，SVG)格式的图标，也可以是流式网络图形(portable network graphic，PNG)格式的图标。为了方便描述，以SVG格式的图标为例进行描述。为了方便描述，将SVG格式的图标简化为SVG图标。
随着电子设备的普及，电子设备的显示界面上显示的图标是整个显示界面设计中最重要的元素之一。在图标样式风格的处理中，只能一次性对所有的路径(path)进行处理，或者只能对单一路径单独处理。因此，在图标样式风格处理时灵活性较差。
本申请提供了对图标的样式风格处理的方法，该方法可以批量导入图标，标记导入的图标的主路径、内辅助路径、外辅助路径和/或相交路径，对图标的相应的路径进行相应的样式风格的处理，从而可以快速生成预期的样式风格的一套图标。
本申请实施例中提到的颜色是由红绿蓝三基色组成，可以用1个字节(范围是0～255)来表示一个基色分量，一种有有2563种颜色。
本申请实施例涉及的对于图标的样式风格处理可以包括以下至少一种：图标的描边风格的处理、图标的填充风格的处理、图标双色调风格的处理和图标圆角风格的处理。
其中，描边图标风格指的是图标主体为线状，填充区域的面积小于第一预设值的图标风格。如图3所示，是描边图标风格的图标的示意图。例如，如图3中的(a)所示，图标301是未处理的图标，图标3011是描边图标风格的图标。又例如，如图3中的(b)所示，图标302是未处理的图标，图标3021是描边图标风格的图标。
其中，填充图标风格指的是图标主体为面状，填充区域的面积大于第二预设值的图标风格。例如，如图3中的(c)所示，图标301是未处理的图标，图标3012是填充图标风格的图标。又例如，如图3中的(d)所示，图标302是未处理的图标，图标3022是填充图标风格的图标。
其中，双色调图标风格指的是用一个颜色对图标进行描边，用另一个颜色填充闭合区域的图标风格。例如，如图3中的(e)所示，图标301是未处理的图标，图标3013是双色调图标风格的图标。又例如，如图3中的(f)所示，图标302是未处理的图标，图标3023是双色调图标风格的图标。
其中，图标的圆角风格指的是图标的拐角是圆角的图标风格，圆角的大小可以用圆弧的半径表示。例如，如图3中的(g)所示，图标303是未处理的图标，图标3031是圆角图标风格的图标。又例如，如图3中的(h)所示，图标302是未处理的图标，图标3041是圆角图标风格的图标。
以下，将结合具体的附图，分别介绍上述4种图标样式风格的处理过程。
批量进行图标的描边风格的处理
为了实现上述图标样式风格处理，本申请提供的一种图标的描边处理的方法200，如图4所示，该方法200包括步骤210至步骤240。下面将详细介绍步骤210至步骤240。
步骤210，批量导入多个标准SVG图标。
例如，如图6所示，是本申请实施例提供的批量导入的4个标准SVG图标的示例图。
步骤220，读取SVG图标，将SVG图标进行解析。
具体地，如图5所示，将SVG图标中的所有路径进行分类并批量标注，其可以包括以下步骤221至步骤223：
步骤221，将SVG图标中的各种组成元素全部转化为路径；
示例性地，SVG图标中的各种组成元素可以包括矩形(rectangle)、圆(circle)、椭圆(ellipse)、直线(line)、折线(Polyline)、多边形(Polygon)等。
步骤222，计算各路径的长度，在每个SVG单元中，标记主路径(primary path)。
其中，主路径代表了图标轮廓形状的最主要部分，该主路径可以是一个基准路径，本申请对主路径的具体的形式并不作限定。示例性地，主路径可以是所有路径中长度最长的路径；或者，主路径可以是所有路径中个每条路径形成的区域中区域面积最大的路径。
步骤223，对其他路径分别进行标记。
具体地，对其他路径进行标记可以包括以下至少一种：
(1)根据其他路径与主路径的位置关系，将其他路径标记为内辅助路径、外辅助路径或相交路径。
示例性地，当一条路径在主路径的内部时，可以将该路径标记为内辅助路径。其中，一条路径在主路径的内部可以理解为该路径在主路径形成的内部区域中。
示例性地，当一条路径在主路径的外部时，可以将该路径标记为外辅助路径。其中，一条路径在主路径的外部可以理解为该路径在主路径形成的外部区域中。
其中，相交路径可以理解为路径与路径之间至少有一个公共点的路径。
例如，如图6中的(a)所示，图标401的主路径是路径4011，图标401的内辅助路径是路径4012，图标401的外辅助路径是路径4013。又例如，如图6中的(b)所示，图标402的主路径是路径4021，图标402的内辅助路径是路径4022，图标402不存在外辅助路径。又例如，如图6中的(c)所示，图标403的主路径是路径4031，图标403的外辅助路径是路径4032，图标403不存在内辅助路径。又例如，如图6中的(d)所示，图标404的主路径是路径4041，图标404的内辅助路径是路径4042，且内辅助路径4042中路径4042a和路径4042b是相交路径路径。
(2)根据路径的起点和终点是否一致，标记闭合路径(closed path)和开放路径(open path)。
其中，路径的起点可以理解为是路径的一个端点，路径的终点可以理解为是路径的另一个端点。
具体地，在路径的起点和终点一致的情况下，将该路径标记为闭合路径；在路径的起点和终点不一致的情况下，将该路径标记为开放路径。其中，起点和终点是否一致可以理解为起点的坐标和终点的坐标是否相同。例如，坐标可以是二维坐标，起点和终点一致可以是起点的两个维度的坐标分别和终点的相应的维度的坐标相同。起点和终点不一致可以 是起点的两个维度的坐标中至少有一个维度的坐标和终点的相应维度的坐标不相同。
如图6中的(a)所示，图标401的主路径4011是闭合路径，图标401的内辅助路径4012和图标401的外辅助路径4013都是开放路径。又例如，如图6中的(b)所示，图标402的主路径4021和图标402的内辅助路径4022都是闭合路径。又例如，如图6中的(c)所示，图标403的主路径4031和图标403的外辅助路径4032都是开放路径。又例如，如图6中的(d)所示，主路径4041是闭合路径，内辅助路径4042是开放路径。
步骤230，设定描边参数。
上述描边参数包括描边色和/或描边粗细。
其中，可以通过以下两种方式，设定描边色。
方式1，将每个SVG的所有路径的描边色设置为相同的颜色。
例如，如图6所示，将路径4011、路径4012、路径4013、路径4021、路径4022、路径4031、路径4032、路径4041和路径4042的描边色都设置为黑色。
方式2，针对解析后的SVG的每类路径分别设置相应的描边色。
示例性地，将每个SVG中标记的主路径的描边色设置为相同的颜色。例如，将图6中的主路径4011、主路径4021、主路径4031和主路径4041的描边色都设置为红色。
示例性地，将每个SVG中标记的内辅助路径的描边色设置为相同的颜色。例如，将图6中的内辅助路径4012、内辅助路径4022和内辅助路径4042的描边色都设置为黄色。
示例性地，将每个SVG中标记的外辅助路径的描边色设置为相同的颜色。例如，将图6中的外辅助路径4013和外辅助路径4032的描边色都设置为灰色。
示例性地，将每个SVG中标记的相交路径的描边色设置为相同的颜色。例如，将图6中的相交路径4042a和4042b的描边色都设置为蓝色。
上述方式1和方式2可以执行其中至少一种方式。
其中，可以通过以下两种方式，设定描边粗细。
方式A，将每个SVG的所有路径的描边粗细设置为相同的粗细。
例如，将图6中的路径4011、路径4012、路径4013、路径4021、路径4022、路径4031、路径4032、路径4041和路径4042的描边粗细都设置为6磅。
方式B，可以针对解析后的SVG的每类路径分别设置相应的描边色和相应的描边粗细。
示例性地，将每个SVG中标记的主路径的描边粗细设置为相同的粗细。例如，将图6中的主路径4011、主路径4021、主路径4031和主路径4041的描边粗细都设置为4磅。
示例性地，将每个SVG中标记的内辅助路径的描边粗细设置为相同的粗细。例如，将图6中的内辅助路径4012、内辅助路径4022和内辅助路径4042的描边粗细都设置为6磅。
示例性地，将每个SVG中标记的外辅助路径的描边粗细设置为相同的粗细。例如，将图6中的外辅助路径4013和外辅助路径4032的描边粗细都设置为5磅。
示例性地，将每个SVG中标记的相交路径的描边粗细设置为相同的粗细。例如，将图6中的相交路径4042a和4042b的描边粗细都设置为2磅。
上述方式A和方式B可以执行其中至少一种方式。
在一些实施例中，可以先通过方式A，将每个SVG的所有路径的描边粗细设定为一 个值；再通过方式B将每个SVG的每种属性的路径的描边粗细设定为另一个值，这样可以先将每个SVG的所有路径的描边粗细整体设定到某个值，再将每个SVG的某一属性的路径的描边粗细进行二次设定。
在上述描边色的设定和描边粗细的设定在分开执行的情况下，无先后执行顺序之分。
步骤240，根据每个SVG的相应路径设定的描边参数，进行描边处理。
步骤250，对面积与描边之间的比例小于预设值的闭合区域进行填充。
其中，闭合区域可以理解为上述标记的闭合路径形成的区域。
例如，如图7所示，为本申请实施例提供的对图标进行描边处理的过程示意图。如图7所示，以批量导入三个图标为例进行描边处理的描述，且在上述步骤230中针对解析后的SVG的每类路径分别设置相应的描边粗细。例如，将主路径相应的描边粗细设置为4磅，将内辅助路径相应的描边粗细设置为8磅，以及将外辅助路径相应的描边粗细设置为2磅。且将所有的路径的描边色都设定为黑色。其中，如图7中的(a)所示的图标430包括主路径4301、外辅助路径4302和内辅助路径4303，如图7中的(a)中左边图所示是未描边的图标，其中，主路径4301、外辅助路径4302和内辅助路径4303的粗细都为0.75磅；如图7中的(a)中右边图所示是描边后的图标，其中，主路径4301的粗细为4磅，外辅助路径4302的粗细为2磅，内辅助路径4303的粗细为8磅。如图7中的(b)所示的图标431包括主路径4311和内辅助路径4312，如图7中的(b)中左边图所示是未描边的图标，主路径4311和内辅助路径4312的粗细都为0.75磅；如图7中的(b)中右边图所示是描边后的图标，主路径4311的粗细为4磅，内辅助路径4312的粗细为8磅。如图7中的(c)所示的图标432包括主路径4321和外辅助路径4322，如图7中的(c)中左边图所示是未描边的图标432，其中，主路径4321和外辅助路径4322的粗细都为0.75磅。如图7中的(c)中右边图所示是描边后的图标432，其中，主路径4321的粗细为4磅，外辅助路径4322的粗细为2磅。
通过上述描边处理的方法200，将图标的路径标记为主路径、内辅助路径、外辅助路径和/或相交路径，并可以批量化的导入图标，根据不同的路径，设置相应的描边色和描边粗细，从而可以批量化、精细化地对图标进行描边处理，能够快速生成符合预期设计的一套描边类图标。
批量进行图标的填充风格的处理
本申请还提供给了一种图标的填充处理的方法300。如图8所示，该方法300可以包括上述方法200中的步骤210至步骤220，以及步骤310至步骤320。对于步骤210至步骤220详见上述描述，这里不再赘述。
步骤310，设定填充色。
可选地，上述填充包括纯色填充、渐变色填充或图案填充。
在纯色填充中，填充色指的是纯色填充的颜色。在渐变色填充中，填充色指的是渐变填充的颜色。在图案填充中，填充色指的是图案填充的颜色。在本申请实施例中的附图中均以填充是纯色填充为例进行介绍。
其中，填充色可以设定一个或多个。示例性地，对于不同的路径，设定不同的填充色。
步骤320，判断各个路径是否是闭合路径，并根据判断的结果，进行相应的操作。
具体地，如图9所示，该步骤320包括步骤321至步骤323。
步骤321，判断主路径是否是闭合路径；在主路径是开放路径的情况下，执行步骤3211；在主路径是闭合路径的情况下，执行步骤3212。
步骤3211，采用设定的主路径对应的填充色对主路径进行描边。
步骤322a、判断内辅助路径是否是闭合路径；在内辅助路径是闭合路径的情况下，执行步骤3221a；在内辅助路径是开放路径的情况下，执行步骤3222a。
步骤3221a，采用设定的内辅助路径对应的填充色填充该内辅助路径对应的闭合区域。
步骤3222a，采用设定的内辅助路径对应的填充色对该内辅助路径进行描边。
在执行上述步骤322a之前，还可以判断该图标是否存在内辅助路径，在图标存在内辅助路径存在的情况下，执行步骤322a、步骤3221a以及步骤3222a；在内辅助路径不存在的情况下，不需要执行上述步骤322a、步骤3221a以及步骤3222a。
323a、判断外辅助路径是否是闭合路径；在外辅助路径是闭合路径的情况下，执行步骤3231a；在外辅助路径是开放路径的情况下，执行步骤3232a。
3231a，采用设定的外辅助路径对应的填充色填充该外辅助路径对应的闭合区域；
3232a，采用设定的外辅助路径对应的填充色对该外辅助路径进行描边。
在执行上述步骤323a之前，还可以判断该图标是否存在外辅助路径，在图标存在外辅助路径存在的情况下，执行步骤323a、步骤3231a以及步骤3232a；在外辅助路径不存在的情况下，不执行上述步骤323a、步骤3231a以及步骤3232a。
上述步骤322a和步骤323a之间无先后执行顺序之分。以下的附图10中的(a)至附图10中的(d)都是以步骤322a在步骤323a之前执行为例进行描述。
如图10所示，为本申请实施例提供的对图标进行填充处理的过程示意图。如图10所示，以批量导入九个图标为例进行填充处理的描述，其中，九个图标分别为图标414、图标415、图标416、图标417、图标418、图标419、图标420、图标421和图标422。
例如，如图10中的(a)所示，为本申请实施例提供的对图标进行填充处理的一例过程示意图。其中，图标414包括主路径4141、内辅助路径4142和外辅助路径4143，主路径4141和外辅助路径4143都是开放路径，内辅助路径4142是闭合路径。对该图标414进行填充处理包括上述步骤3211、步骤3221a和步骤3232a。具体地，由于主路径4141是开放路径，因此，根据对主路径设定的填充色对主路径4141进行描边，此时，图标414变化为如图10中的(a)中的从左至右第二个图所示。又由于内辅助路径4142是闭合路径，因此，根据对内辅助路径4142设定的填充色对内辅助路径4142进行填充，此时，图标414变化为如图10中的(a)中的从左至右第三个图所示。又由于外辅助路径4143是开放路径，因此，根据对外辅助路径4143设定的填充色对外辅助路径4143进行描边，此时，图标414变化为如图10中的(a)中的从左至右第四个图所示。
又例如，如图10中的(b)所示，为本申请实施例提供的对图标进行填充处理的一例过程示意图。其中，图标415包括主路径4151、内辅助路径4152和外辅助路径4153，主路径4151是开放路径，内辅助路径4152和外辅助路径4153都是闭合路径。对该图标415进行填充处理包括上述步骤3211、步骤3221a和步骤3231a。具体地，由于主路径4151是开放路径，因此，根据对主路径设定的填充色对主路径4151进行描边，此时，图标415变化为如图10中的(b)中的从左至右第二个图所示。又由于内辅助路径4152是闭合路径，因此，根据对内辅助路径4152设定的填充色对内辅助路径4152进行填充，此时，图 标415变化为如图10中的(b)中的从左至右第三个图所示。又由于外辅助路径4153是闭合路径，因此，根据对外辅助路径4153设定的填充色对外辅助路径4153进行填充，此时，图标415变化为如图10中的(b)中的从左至右第四个图所示。
又例如，如图10中的(c)所示，为本申请实施例提供的对图标进行填充处理的一例过程示意图。其中，图标416包括主路径4161、内辅助路径4162和外辅助路径4163，主路径4161和内辅助路径4162都是开放路径，外辅助路径4163是闭合路径。对该图标416进行填充处理包括上述步骤3211、步骤3222a和步骤3231a。具体地，由于主路径4161是开放路径，因此，根据对主路径设定的填充色对主路径4161进行描边，此时，图标416变化为如图10中的(c)中的从左至右第二个图所示。又由于内辅助路径4162是开放路径，因此，根据对内辅助路径4162设定的填充色对内辅助路径4162进行描边，此时，图标416变化为如图10中的(c)中的从左至右第三个图所示。又由于外辅助路径4163是闭合路径，因此，根据对外辅助路径4163设定的填充色对外辅助路径4163进行填充，此时，图标416变化为如图10中的(c)中的从左至右第四个图所示。
又例如，如图10中的(d)所示，为本申请实施例提供的对图标进行填充处理的一例过程示意图。其中，图标417包括主路径4171、内辅助路径4172和外辅助路径4173，主路径4171、内辅助路径4172和外辅助路径4173都是开放路径。对该图标417进行填充处理包括上述步骤3211、步骤3222a和步骤3232a。具体地，由于主路径4171是开放路径，因此，根据对主路径设定的填充色对主路径4171进行描边，此时，图标417变化为如图10中的(d)中的从左至右第二个图所示。又由于内辅助路径4172是开放路径，因此，根据对内辅助路径4172设定的填充色对内辅助路径4172进行描边，此时，图标417变化为如图10中的(d)中的从左至右第三个图所示。又由于外辅助路径4173也是开放路径，因此，根据对外辅助路径4173设定的填充色对外辅助路径4173进行描边，此时，图标417变化为如图10中的(d)中的从左至右第四个图所示。
步骤3212，采用设定的主路径对应的填充色填充主路径对应的闭合区域。
步骤322b，判断外辅助路径是否是闭合路径；在外辅助路径是闭合路径的情况下，执行步骤3221b；在外辅助路径是开放路径的情况下，执行步骤3222b。
步骤3221b，采用设定的外辅助路径对应的填充色填充外辅助路径对应的闭合区域。
步骤3222b、采用设定的外辅助路径对应的填充色对外辅助路径进行描边。
在执行上述步骤322b之前，还可以判断该图标是否存在外辅助路径，在图标存在外辅助路径存在的情况下，执行步骤322b、步骤3221b以及步骤3222b；在外辅助路径不存在的情况下，不执行上述步骤322b、步骤3221b以及步骤3222b。
步骤323b，判断内辅助路径是否是闭合路径；在内辅助路径是闭合路径的情况下，执行步骤3231b和步骤3232b；在内辅助路径是开放路径的情况下，执行步骤3231b至步骤3233b。
步骤3231b，将主路径形成的区域和内辅助路径形成的区域做交集区域处理。为了方便描述，将主路径形成的区域中主路径形成的区域和内辅助路径形成的区域的交集区域记为主内交集区域。
步骤3232b，将主内交集区域设置为透明颜色，并采用设定的内辅助路径对应的填充色填充该主内交集区域。
在执行上述步骤323b之前，还可以判断该图标是否存在内辅助路径，在图标存在内辅助路径存在的情况下，执行步骤323b、步骤3231b以及步骤3232b；在内辅助路径不存在的情况下，不需要执行上述步骤323b、步骤3231b以及步骤3232b。
例如，如图6中所示的图标404，主路径4041是闭合路径，路径4042a和路径4042b组成的内辅助路径4042是开放路径。具体地，由于主路径4041是闭合路径，因此，根据对主路径4041设定的填充色对主路径4041进行填充。又由于内辅助路径4042是开放路径，因此，内辅助路径4042会被填充后的主路径4041形成的区域遮挡，使得内辅助路径4042无法得到区分，也无法得到理想的填充效果。因此，还需在执行步骤3231b至步骤3232b之前，执行步骤3233b。
步骤3233b，采用设定的内辅助路径对应的填充色对内辅助路径进行轮廓化描边。这样可以将内辅助路径转化为闭合路径，进而再执行步骤3231b至步骤3232b，即将主路径形成的区域和轮廓化后的闭合内辅助路径形成的区域做交集区域处理，将主内交集区域设置为透明颜色，并采用设定的内辅助路径对应的填充色填充该主内交集区域。
上述步骤322b和步骤323b之间无先后执行顺序之分。以下的附图13中的(a)至附图13中的(e)都是以步骤322b在步骤323b之前执行为例进行描述。
其中，如图11所示，是上述3233b中涉及的轮廓化描边的处理过程。该轮廓化描边的处理过程包括步骤1至步骤26。
步骤1，开始。
步骤2，从非闭合路径的内辅助路径中取一点。
步骤3，判断当前点是否为起点。
其中，当前点即为步骤2中取的点。在当前点为起点的情况下，执行步骤4。在当前点不是起点的情况下，执行步骤11。
步骤4，判断当前点是否为终点。在当前点为终点的情况下，执行步骤5至步骤6。在当前点不是终点的情况下，执行步骤7至步骤10。
步骤5，将当前点转化为圆。具体地，以当前点为圆心，线宽为直径画圆，该圆即为轮廓化描边的结果。为了方便描述，将线宽记为W。
步骤6，结束。
步骤7，确定当前点到达下一点的形式。
其中，当前点和下一点都是该内辅助路径上的点。
在本申请中一个点到达另一个点的形式可以理解为一个点沿内辅助路径到达另一点的形式。示例性地，在内辅助路径上，一个点到达另一点的形式可以包括一个点沿圆形曲线达到另一点和/或一个点沿直线到达另一个点，其中，圆形曲线和直线是内辅助路径的一部分，圆形曲线可以理解为是圆弧。上述当前点达到下一点的形式可以包括当前点沿圆形曲线到达下一点和/或当前点沿直线达到下一点。在当前点沿圆形曲线到达下一点的情况下，执行步骤8和步骤10。在当前点沿直线到达下一点的情况下，执行步骤9和步骤10。
步骤8，计算两条同心圆曲线，并确定当前点在两条同心圆曲线上分别对应的点T1和T2。具体地，以当前点与下一点构成的圆形曲线为依据，记该圆形曲线的半径为R，分别以半径R+W/2、R–W/2为半径，以原始圆形曲线的圆心为圆心画两个同心圆，当前 点在两条同心圆曲线上的对应点记为T1、T2。其中，当前点在同心圆曲线上的对应点可以理解为当前点与原始圆形曲线的圆心连接的线段和同心圆曲线的交点。
步骤9，计算两条平行线，并确定当前点在两条平行线上分别对应的点T1和T2。具体地，以当前点与下一点构成的线段为依据，以垂直该线段的方向分别向两边平移W/2距离得到两条平行线段，当前点在两条平行线段上的对应点记为T1、T2。其中，当前点在两条平行线段上的对应点可以理解为经过当前点且垂直于该线段的线段与平行线段的交点。
步骤10，将上述步骤8或步骤9中的T1写入部分1中，以及T1、T2写入部分2中。
在本申请中，部分1和部分2分别用于存储原始路径在轮廓化描边的过程中，在原始路径衍生出来的两条路径上，当前点分别对应的两个点。
其中，将T1写入部分2中是为了后续将部分1和部分2中分别写入的点连接在一起可以形成一个闭合的路径。
执行完上述步骤10之后，继续返回步骤2，重新取一点，并按照图11执行，直到结束。
步骤11，确定上一点到达当前点的形式。在上一点沿圆形曲线到达当前点的情况下，执行步骤12。在上一点直线到达当前点的情况下，执行步骤20。
步骤12，判断当前点是否为终点；在当前点为终点的情况下，执行步骤13至步骤15。在当前点不是终点的情况下，执行步骤16至步骤19。
步骤13，计算两条同心圆曲线，并确定当前点在两条同心圆曲线上分别对应的点T1和T2。具体地，以上一点与当前点构成的圆形曲线为依据，记该圆形曲线的半径为R，分别以半径R+W/2、R–W/2为半径，以原始圆形曲线的圆心为圆心画两个同心圆，当前点在两条同心圆曲线上的对应点记为T1、T2，将T1写入部分1中，将T2写入部分2中。
步骤14，融合部分1，部分2。具体地，将部分2中的点倒序写入部分1中，部分1中的所有点，按记录的次序连接起来的path记为轮廓化描边结果。
步骤15，结束。
步骤16，确定当前点到达下一点的形式。在当前点沿圆形曲线到达下一点的情况下，执行步骤17和步骤19。在当前点沿直线到达下一点的情况下，执行步骤18和步骤19。
步骤17，计算两对同心圆，并求交点。具体地，计算上一点与当前点构成的圆形曲线的两条同心圆曲线line11、line12(计算方式同步骤8一样)，计算当前点与下一点构成的圆形曲线的两条同心圆曲线line21、line22(计算方式同步骤8一样)，若line11与line21相交，则交点I1写入line11对应的部分1中，同时计算line12与line22在端点的切线的交点I2，写入line12对应的part中；若line11与line22相交，则交点I1写入line11对应的part中，同时计算line12与line21在端点的切线的交点I2，写入line12对应的部分2中。
步骤18，计算两条同心圆与两条平行线，求交点。具体地，计算当前点与下一点构成的线段的两条平行线段line11、line12(计算方式同步骤9一样)，计算上一点与当前点构成的圆形曲线的两条同心圆曲线line21、line22(计算方式同步骤8一样)，若line11与line21相交，则交点I1写入line11对应的part中，同时计算line12的延长线与line22在端点的切线的交点I2，写入line12对应的part中；若line11与line22相交，则交点I1 写入line11对应的part中，同时计算line12的延长线与line21在端点的切线的交点I2，写入line12对应的part中。
步骤19，在部分1和部分2中分别写入步骤17或步骤18中的交点。
执行上述步骤19之后，继续返回步骤2，重新取一点，并按照图11执行，直到结束。
步骤20，判断当前点是否为终端。在当前为终点的情况下，执行步骤21至步骤23。在当前点不是终端的情况下，执行步骤24至步骤26。
步骤21，计算两条平行线，并确定当前点在两条平行线上分别对应的点T1和T2。具体地，以当前点与下一点构成的线段为依据，以垂直该线段的方向分别向两边平移W/2距离得到两条平行线段，当前点在两条平行线段上的对应点即为T1、T2。然后判断T1与部分1中的最后一点构成的线段与T2与部分2中的最后一点构成的线段是否平行，若平行则部分1写入T1、部分2写入T2，否则部分1写入T2、部分2写入T1。
步骤22，融合部分1，部分2。将部分2中的点倒序写入部分1中，部分1中的所有点构成的path记为轮廓化描边结果。
步骤23，结束。
步骤24，判断当前点到达下一点的形式。在当前点沿圆形曲线达到下一点的情况下，执行步骤25和步骤19。在当前点直线到达下一点的情况下，执行步骤26和步骤19。
步骤25，计算两条平行线与两条同心圆，求交点。具体地，计算上一点与当前点构成的线段的两条平行线段line11、line12(计算方式同步骤9)，计算当前点与下一点构成的圆形曲线的两条同心圆曲线line21、line22(计算方式同步骤8)，若line11与line21相交，则交点I1写入line11对应的部分1中，同时计算line12的延长线与line22在端点的切线的交点I2，写入line12对应的部分2中；若line11与line22相交，则交点I1写入line11对应的部分1中，同时计算line12的延长线与line21在端点的切线的交点I2，写入line12对应的部分2中。
步骤26，计算两对平行线，求两交点。具体地，若上一点、当前点、下一点三点一线，则跳过当前点不用处理，否则：计算上一点与当前点构成的线段的两条平行线段line11、line12(计算方式同步骤9)，计算当前点与下一点构成的线段的两条平行线段line21、line22(计算方式同步骤9)，若line11与line21相交，则交点I1写入line11对应的部分1中，同时计算line12与line22的延长线的交点I2写入line12对应的部分2中；若line11与line22相交，则交点I1，写入line11对应的部分1中，同时计算line12与line21的延长线的交点I2，写入line12对应的部分2中。
执行上述步骤19之后，继续返回步骤2，重新取一点，并按照图11执行，直到结束。
例如，如图12所示，为本申请实施例提供的对开放路径的内辅助路径4221进行轮廓化描边的过程示意图。首先，在内辅助路径4221上取一点1，该点1为起点且不是终点，该点1沿直线到达下一点2，则以点1和点2构成的线段12为依据，以垂直该线段12的方向，分别向两边移动0.5倍的线宽，得到线段1'2'和线段1”2”，点1在线段1'2'上的对应点为1'，以及点1在线段1”2”上对应的点为1”，将1'记为T1，将1”记为T2，并将T1写入部分1，将T1和T2写入部分2。其次，在内辅助路径4221上取一点2，该点2不是起点，点1是沿直线到达点2，该点2也不是终点，以及该点2沿直线到达点3，且点1、点2和点3在一条直线上，因此，跳过该点2。点3和点4也被跳过，直到点5，该点5 不是起点，点4是沿圆形曲线到达点5，该点5不是终点，以及该点5沿圆形曲线到达点6，以点4与点5构成的圆形曲线45为依据，记该圆形曲线45的半径为R，分别以(R+0.5倍的线宽)和(R-0.5倍的线宽)为半径，以圆形曲线45的圆心为圆心画两个同心圆形曲线(如图中所示的4'5'和4”5”)，点5在该两个同心圆上对应的点分别为点5'和5”。同样的方法，得到圆形曲线56的两个同心圆形曲线分别为5'6'和5”6”，其中，圆形曲线4'5'和圆形曲线5'6'的交点为5'，圆形曲线4”5”和圆形曲线5”6”的交点为5”。则将点5'写入部分1中，将点5”写入部分2中。继续取下一点6，该点6不是起点，点5是沿圆形曲线到达点6，该点6是终点，以点5与点6构成的圆形曲线56为依据，记该圆形曲线56的半径为R，分别以(R+0.5倍的线宽)和(R-0.5倍的线宽)为半径，以圆形曲线56的圆心为圆心画两个同心圆形曲线(如图中所示的5'6'和5”6”)，点6在该两个同心圆上对应的点分别为点6'和6”，将该点将6'记为T1，将6”记为T2，并将T1写入部分1(此时，部分1中的写入的点按顺序分别为1'、2'、3'、4'、5'、6')，将T2写入部分2(此时，部分2中的写入的点按顺序分别为1'、1”、2”、3”、4”、5”、6”)，并部分2中所有写入的点倒序写入部分1中，此时，部分1中的点的顺序为1'、2'、3'、4'、5'、6'、6”、5”、4”、3”、2”、1”、1'，并按顺序连接部分1中的点，形成的路径4221'即为路径4221轮廓化描边的结果。
例如，如图13中的(a)所示，为本申请实施例提供的对图标进行填充处理的一例过程示意图。其中，图标418包括主路径4181和外辅助路径4183，主路径4181是闭合路径，外辅助路径4182是开放路径。对该图标418进行填充处理包括上述步骤3212、步骤3222b。具体地，由于主路径4181是闭合路径，因此，根据对主路径设定的填充色对主路径4181进行填充，此时，图标418变化为如图13中的(a)中的从左至右第二个图所示。又由于外辅助路径4182是开放路径，因此，根据对外辅助路径4183设定的填充色对外辅助路径4183进行描边，此时，图标418变化为如图13中的(a)中的从左至右第三个图所示。
又例如，如图13中的(b)所示，为本申请实施例提供的对图标进行填充处理的一例过程示意图。其中，图标419包括主路径4191和内辅助路径4192，主路径4191和内辅助路径4192都是闭合路径。对该图标419进行填充处理包括上述步骤3212、步骤3231b和步骤3232b。具体地，由于主路径4191是闭合路径，因此，根据对主路径设定的填充色对主路径4191进行填充，此时，图标419变化为如图13中的(b)中的从左至右第二个图所示。又由于内辅助路径4192是闭合路径，因此，将主路径形成的区域和内辅助路径形成的区域做交集区域处理得到主内交集区域(如图13中内辅助路径4192形成的区域)，并将主内交集区域设置为透明颜色，此时，图标419变化为如图13中的(b)中的从左至右第三个图所示。并采用设定的内辅助路径4192对应的填充色填充该主内交集区域，此时，图标419变化为如图13中的(b)中的从左至右第四个图所示。
又例如，如图13中的(c)所示，为本申请实施例提供的对图标进行填充处理的一例过程示意图。其中，图标420包括主路径4201、内辅助路径4202和外辅助路径4203，主路径4201、内辅助路径4202和外辅助路径4203都是闭合路径。对该图标420进行填充处理包括上述步骤3212、步骤3221b、步骤3231b和步骤3232b。具体地，由于主路径4201是闭合路径，因此，根据对主路径设定的填充色对主路径4201进行填充，此时，图标420变化为如图13中的(c)中的从左至右第二个图所示。又由于外辅助路径4203是闭合路 径，因此，根据对外辅助路径4183设定的填充色对外辅助路径4183进行填充，此时，图标420变化为如图13中的(c)中的从左至右第三个图所示。又由于内辅助路径4202是闭合路径，因此，将主路径形成的区域和内辅助路径形成的区域做交集区域处理得到主内交集区域(如图13中内辅助路径4202形成的区域)，并将主内交集区域设置为透明颜色，此时，图标420变化为如图13中的(c)中的从左至右第四个图所示。并采用设定的内辅助路径4202对应的填充色填充该主内交集区域，此时，图标420变化为如图13中的(c)中的从左至右第五个图所示。
又例如，如图13中的(d)所示，为本申请实施例提供的对图标进行填充处理的一例过程示意图。其中，图标421包括主路径4211和内辅助路径4212，主路径4211是闭合路径，内辅助路径4212是开放路径。对该图标421进行填充处理包括上述步骤3212、步骤3233b、步骤3231b和步骤3232b。具体地，由于主路径4211是闭合路径，因此，根据对主路径设定的填充色对主路径4211进行填充，此时，图标421变化为如图13中的(d)中的从左至右第二个图所示。又由于内辅助路径4212是开放路径，因此，将内辅助路径4212进行轮廓化描边处理(包括上述步骤1至4、7、9、10(多次按顺序重复)；11、20、21、22、23)，此时，图标421变化为如图13中的(d)中的从左至右第三个图所示。将主路径形成的区域和内辅助路径形成的区域做交集区域处理得到主内交集区域(如图13中轮廓化描边处理后的内辅助路径4212形成的区域)，并将主内交集区域设置为透明颜色，此时，图标421变化为如图13中的(d)中的从左至右第四个图所示。并采用设定的内辅助路径4212对应的填充色填充该主内交集区域，此时，图标421变化为如图13中的(d)中的从左至右第五个图所示。
又例如，如图13中的(e)所示，为本申请实施例提供的对图标进行填充处理的一例过程示意图。其中，图标422包括主路径4221、内辅助路径4222和外辅助路径4223，主路径4221和外辅助路径4223是闭合路径，内辅助路径4222是开放路径。对该图标422进行填充处理包括上述步骤3212、步骤3221b、步骤3233b、步骤3231b和步骤3232b。具体地，由于主路径4221是闭合路径，因此，根据对主路径设定的填充色对主路径4221进行填充，此时，图标422变化为如图13中的(e)中的从左至右第二个图所示。又由于外辅助路径4223是闭合路径，因此，根据对外辅助路径4123设定的填充色对外辅助路径4123进行填充，此时，图标420变化为如图13中的(e)中的从左至右第三个图所示。又由于内辅助路径4222是开放路径，因此，将内辅助路径4222进行轮廓化描边处理(包括上述步骤1至4、7、9、10(多次按顺序重复)；11、20、21、22、23)，此时，图标422变化为如图13中的(e)中的从左至右第四个图所示。将主路径形成的区域和内辅助路径形成的区域做交集区域处理得到主内交集区域(如图13中轮廓化描边处理后的内辅助路径4222形成的区域)，并将主内交集区域设置为透明颜色，此时，图标422变化为如图13中的(e)中的从左至右第五个图所示。并采用设定的内辅助路径4222对应的填充色填充该主内交集区域，此时，图标422变化为如图13中的(e)中的从左至右第六个图所示。
通过上述描边处理的方法300，将图标的路径标记为主路径、内辅助路径、外辅助路径和/或相交路径，并可以批量化的导入图标，根据不同的路径，设置相应的填充色，从而可以批量化、精细化地对图标进行填充处理，能够快速生成符合预期设计的一套描边类图标。
批量进行图标的双色调风格的处理
本申请还提供给了一种图标的双色调处理的方法。该方法可以包括上述方法200中的步骤210至步骤240，以及步骤310至步骤320。该方法中对应的步骤与上述步骤210至步骤240，以及步骤310至步骤320的区别在于：需要将步骤230中设定的描边的颜色和步骤310中设定的填充的颜色是不一样。其他描述可以参见上述步骤210至步骤240，以及步骤310至步骤320的描述，这里不再赘述。
例如，如图14所示，为本申请实施例提供的对图标进行双色调处理的一例过程示意图。图标423经过双色调处理时，图标423进行描边处理采用的描边色是黑色，图标423进行填充处理采用的填充色是灰色。
批量进行图标的圆角半径风格的处理
本申请还提供给了一种图标半径风格处理的方法。该方法可以包括上述方法200中涉及的步骤210和步骤220，还包括图15所示的步骤40至步骤47。如图15所示，是本申请提供的一种图标半径风格处理的示意性流程图。该图15所示的步骤40至步骤47是针对图标的每种路径进行相应的图标半径风格处理，即通过步骤210和步骤220可以标记出每个SVG图标的主路径、内辅助路径、外辅助路径和/或相交路径，然后针对相应的路径通过图15所示的步骤40至步骤47进行相应的圆角处理。
步骤40，获取目标圆角半径。
图标的路径不同，相应的目标圆角半径可以相同也可以不相同。图标的路径不同，相应的目标圆角半径可以相同也可以不相同可以理解为主路径、内辅助路径、外辅助路径或相交路径中至少一种路径对应的目标圆角半径相同，或者，主路径、内辅助路径、外辅助路径或相交路径中每种路径对应的目标圆角半径都不相同。示例性地，可以根据路径之间的位置关系，将图标中从外到内的路径的圆角半径依次减小设置。
步骤41，判断待处理的图标的拐角的角度是圆角还是夹角。
待处理的图标的拐角可以理解为待处理的图标的主路径的拐角、待处理的图标的内辅助路径的拐角、待处理的图标的外辅助路径的拐角和/或待处理的图标的相交路径的拐角。
图标的拐角的角度可以为圆角或者尖角，尖角可以视为半径为0的圆角，调整圆角大小可以改变图标的圆润程度。
在待处理的图标的拐角是圆角的情况下，执行步骤42至步骤47；在待处理的图标的拐角是尖角的情况下，执行步骤44至步骤47。
步骤42，计算圆角在两端点的切线。
步骤43，计算两切线的交点，即为圆角对应的尖角的顶点。
步骤44，计算目标圆角端点。
步骤45，目标圆角的端点是否超出相应的线段。在目标圆角的端点未超出相应的线段的情况下，执行步骤46；在目标圆角的端点超出相应的线段的情况下，执行步骤47。
步骤46，返回计算的目标圆角的端点。
步骤47，返回原始点。
下面将分别按照待处理的图标的拐角是圆角和待处理的图标的拐角是尖角这两种情况，详细介绍步骤44至步骤47。
情况1，待处理的图标的拐角是圆角
做步骤42中获取的两条切线的角平分线，根据该圆角对应的尖角的角度和目标圆角半径，计算尖角的顶点和圆心的距离，该圆心在角平分线上，并以目标半径画弧。该弧线与两条边有交点，则更改原始圆角端点；该弧线与两条边没有交点，则返回原始圆角端点，即该待处理的图标的拐角不能根据目标圆角半径进行圆角处理。
例如，如图16中的(a)所示，为本申请提供的对图标进行圆角处理的一例过程示意图。如图16中的(a)中从左到右的第一个图所示的图标424，目标圆角半径为8mm，该图标424的拐角是圆角，该圆角的角度是90°，该圆角的半径为5mm，该圆角的两个端点分别为A11和A12。如图16中的(a)中从左到右的第二个图所示，圆角在端点A11和A12的切线分别为l1和l2，l1和l2的交点A1即为该圆角对应的尖角的顶点。做l1和l2的角平分线l3，根据目标圆角半径(8mm)和尖角的角度(90°)，计算得到尖角的顶点与圆心的距离为mm，则该在l3上取距离顶点mm的点O1，该O1即为目标圆角对应的圆心，以O1为圆心，以目标半径为8mm画弧，弧线与圆角的拐角的两条边的交点分别为A11'和A12'，则A11'和A12'分别为目标圆角的端点。则如图16中的(a)中从左到右的第三个图所示的虚线即为进行圆角处理后的图标424。
例如，如图16中的(b)所示，为本申请提供的对图标进行圆角处理的另一例过程示意图。如图16中的(b)中从左到右的第一个图所示的图标425，目标圆角半径为3mm，该图标425的拐角是圆角，该圆角的角度是120°，该圆角的半径为8mm，该圆角的两个端点分别为A21和A22。如图16中的(b)中从左到右的第二个图所示，圆角在端点A21和A22的切线分别为l4和l5，l4和l5的交点A2即为该圆角对应的尖角的顶点。做l4和l5的角平分线l6，根据目标圆角半径(3mm)和尖角的角度(60°)，计算得到尖角的顶点与圆心的距离为6mm，则该在l3上取距离顶点6mm的点O2，该O2即为目标圆角对应的圆心，以O2为圆心，以目标半径为3mm画弧，弧线与圆角的拐角的两条边的延长线的交点分别为A21'和A22'，则A21'和A22'分别为目标圆角的端点。则如图16中的(b)中从左到右的第三个图所示的虚线即为进行圆角处理后的图标425。
情况2，待处理的图标的拐角是尖角
a、计算尖角角度；b、确定圆心。做两条边的角平分线，根据目标半径和夹角角度，可计算得到两条边的交点与圆心的距离，从两条边的交点出发，在角平分线上取目标半径长度的点，该点即为圆心；c、计算圆心两边的投影：圆心向两边分别做垂线，该垂线与相应的边的交点即为圆角的两个端点；d、判断端点超出线段，在端点超出线段的情况下，返回原始顶点，即该待处理的图标的拐角不能根据目标圆角半径进行圆角处理；在端点未超出线段的情况下，更改原始端点。
例如，如图16中的(c)所示，为本申请提供的对图标进行圆角处理的又一例过程示意图。如图16中的(c)中从左到右的第一个图所示的图标426，目标圆角半径为0mm，该图标426的拐角是尖角，该尖角的顶点为A3，该尖角的角度是90°。如图16中的(c)中从左到右的第二个图所示，做尖角的两条边(l7和l8)的角平分线l9，根据目标圆角半径(5mm)和尖角的角度(90°)，计算得到尖角的顶点与圆心的距离为mm，则该在l9上取距离顶点A3为mm的点O3，过圆心O3分别向l7和l8做垂线，垂足分别为A31和A32，则A31和A32即为目标圆角的两个端点。则如图16中的(c)中从左到右的第三个图所示的虚线即为进行圆角处理后的图标426。
例如，如图16中的(d)所示，为本申请提供的对图标进行圆角处理的又一例过程示意图。如图16中的(d)中从左到右的第一个图所示的图标427，目标圆角半径为0mm，该图标427的拐角是尖角，该尖角的顶点为A4，该尖角的角度是60°。如图16中的(d)中从左到右的第二个图所示，做尖角的两条边(l10和l11)的角平分线l12，根据目标圆角半径(5mm)和尖角的角度(60°)，计算得到尖角的顶点与圆心的距离为mm，则该在l12上取距离顶点A3为mm的点O4，过圆心O4分别向l10和l11做垂线，垂足分别为A41和A42，则A41和A42即为目标圆角的两个端点。则如图16中的(d)中从左到右的第三个图所示的虚线即为进行圆角处理后的图标427。
上述图16中示出的圆角处理后的图标示出的是对四个圆角进行相同的目标圆角处理的一例。本申请并不限定待处理的图标的圆角是否进行相同的目标圆角处理。
上述图16中只示出了图标中待处理的圆角相关的路径，图中的图标还可以包括其他路径(图中未示出)，本申请对此并不作限定。
以上，结合图4至图16详细说明了本申请实施例提供的图标的样式风格的处理的方法。以下，结合图17至图18详细说明本申请实施例提供的装置。应理解，装置实施例的描述与方法实施例的描述相互对应，因此，未详细描述的内容可以参见上文方法实施例，为了简洁，部分内容不再赘述。
图17示出了本申请实施例提供的图标的样式风格的处理的装置1700的结构示意图。获取单元1710，用于获取N个图标，N是大于10的整数；转化单元1720，用于将每个图标的组成元素转化为路径；标记单元1730，用于标记每个图标的所有路径的属性，其中，所述路径的属性包括主路径和内辅助路径，或者，所述路径的属性包括所述主路径和外辅助路径，或者，所述路径的属性包括所述主路径、所述内辅助路径和所述外辅助路径，所述内辅助路径在所述主路径的内部，所述外辅助路径在所述主路径的外部，所述内辅助路径在所述主路径的内部，所述外辅助路径在所述主路径的外部；所述获取单元1710，还用于获取与所述路径的属性对应的目标参数，所述目标参数包括描边参数、填充色和/或圆角半径；处理单元1740，用于根据所述路径的属性对应的目标参数，对所述N个图标中每种属性的路径进行样式风格处理。
可选地，所述主路径是所有路径中长度最长的路径。
可选地，所述目标参数包括描边参数，所述处理单元1740还具体用于：根据所述主路径对应的描边参数，对所述N个图标的主路径进行描边；和/或，根据所述内辅助路径对应的描边参数，对所述N个图标的内辅助路径进行描边；和/或，根据所述外辅助路径对应的描边参数，对所述N个图标的外辅助路径进行描边。
可选地，所述路径的属性还包括相交路径，所述相交路径是一条路径与另一条路径至少有一个公共点的路径，所述目标参数包括描边参数，所述处理单元1740还具体用于：根据所述相交路径对应的描边粗细，对所述N个图标的相交路径进行描边。
可选地，所述处理单元1740还具体用于：所述路径的属性还包括闭合路径和开放路径，所述闭合路径是所述路径的起点和所述路径的终点重合，所述开放路径是所述路径的起点和所述路径的终点不重合；所述目标参数还包括填充色，所述处理单元1740还具体用于：判断所述N个图标的主路径是否是闭合路径，在所述主路径是闭合路径的情况下，根据所述主路径对应的填充色，对所述主路径形成的区域进行填充；在所述主路径是开放 路径的情况下，根据所述主路径对应的填充色，对所述主路径进行描边。
可选地，所述处理单元1740还具体用于：判断所述N个图标的外辅助路径是否是闭合路径；在所述外辅助路径是闭合路径的情况下，根据所述外辅助路径对应的填充色，对所述外辅助路径形成的区域进行填充；在所述外辅助路径是开放路径的情况下，根据所述外辅助路径对应的填充色，对所述外辅助路径进行描边。
可选地，所述处理单元1740还具体用于：判断所述N个图标的内辅助路径是否是闭合路径；在所述内辅助路径是闭合路径的情况下，确定第一主内交集区域，所述第一主内交集区域是所述主路径形成的区域中所述主路径形成的区域和所述内辅助路径形成的区域的重合的区域；将所述主内交集区域设置为透明区域；根据所述内辅助路径对应的填充色，对所述主内交集区域进行填充；在所述内辅助路径是开放路径的情况下，对所述内辅助路径进行轮廓化描边，以得到闭合的内辅助路径；确定第二主内交集区域，所述第二主内交集区域是所述主路径形成的区域中所述主路径形成的区域和所述闭合的内辅助路径形成的区域的重合的区域；将所述第二主内交集区域设置为透明区域；根据所述内辅助路径对应的填充色，对所述第二主内交集区域进行填充。
可选地，所述目标参数还包括圆角半径，所述处理单元1740还具体用于：根据所述主路径对应的圆角半径，对所述N个图标的主路径进行圆角处理；和/或，根据所述内辅助路径对应的圆角半径，对所述N个图标的内辅助路径进行圆角处理；和/或，根据所述外辅助路径对应的圆角半径，对所述N个图标的外辅助路径进行圆角处理。
可选地，所述图标是可缩放的矢量图形SVG格式的图标或流式网络图像PNG格式的图标。
图18示出了本申请实施例提供的图标的样式风格的处理的装置1800。该装置可以包括处理器1810。可选地，该装置还可以包括存储器1820。可选地，该装置还可以包括收发器1830。该收发器可以包括发送器和/或接收器。该处理器1810、收发器1830和存储器1820通过内部连接通路互相通信。
图17中的处理单元1710所实现的相关功能可以由处理器1810来实现。
可选地，处理器1810可以是一个通用中央处理器(central processing unit，CPU)，微处理器，特定应用集成电路(application-specific integrated circuit，ASIC)，专用处理器，或一个或多个用于执行本申请实施例技术方案的集成电路。或者，处理器可以指一个或多个设备、电路、和/或用于处理数据(例如计算机程序指令)的处理核。例如，中央处理器可以执行软件程序，处理软件程序的数据。
可选地，该处理器1810可以包括是一个或多个处理器，例如包括一个或多个CPU，在处理器是一个CPU的情况下，该CPU可以是单核CPU，也可以是多核CPU。
该收发器1830用于发送和接收数据和/或信号，以及接收数据和/或信号。该收发器可以包括发射器和接收器，发射器用于发送数据和/或信号，接收器用于接收数据和/或信号。该收发器也可以是通信接口。
该存储器1820包括但不限于是随机存取存储器(random access memory，RAM)、只读存储器(read-only memory，ROM)、可擦除可编程存储器(erasable programmable read only memory，EPROM)、只读光盘(compact disc read-only memory，CD-ROM)，该存储器1820用于存储相关指令及数据。
存储器1820用于存储的程序代码和/或数据，可以为单独的器件或集成在处理器1810中。
一种可能的方式中，所述处理器1810用于控制收发器与生物特征识别装置进行信息传输。具体可参见方法实施例中的描述，在此不再赘述。
在具体实现中，作为一种实施例，装置1800还可以包括输出设备和输入设备。输出设备和处理器1810通信，可以以多种方式来显示信息。例如，输出设备可以是液晶显示器(liquid crystal display，LCD)，发光二级管(light emitting diode，LED)显示设备，阴极射线管(cathode ray tube，CRT)显示设备，或投影仪(projector)等。输入设备和处理器1810通信，可以以多种方式接收用户的输入。例如，输入设备可以是鼠标、键盘、触摸屏设备或传感设备等。
可以理解的是，图18仅仅示出了装置的简化设计。在实际应用中，该装置还可以分别包含必要的其他元件，包含但不限于任意数量的收发器、处理器、控制器、存储器等，而所有可以实现本申请的终端都在本申请的保护范围之内。
在一种可能的设计中，本申请的图标的样式风格处理的装置可以是芯片，例如可以为可用于电子设备中的芯片，用于实现处理器1810的相关功能。该芯片可以为实现相关功能的现场可编程门阵列，专用集成芯片，系统芯片，中央处理器，网络处理器，数字信号处理电路，微控制器，还可以采用可编程控制器或其他集成芯片。该芯片中，可选的可以包括一个或多个存储器，用于存储程序代码，当所述代码被执行时，使得处理器实现相应的功能。
本申请实施例还提供了一种计算机可读存储介质，包括计算机程序，当其在计算机设备上运行时，使得所述计算机设备中的处理单元执行上述图标的样式风格处理的方法。
本申请实施例还提供了一种计算机程序产品，当计算机程序产品在电子设备上运行时，使得电子设备执行上述任一方面任一项可能的图标的样式风格处理的方法。应理解，在本申请的各种实施例中，上述各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。
本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
在本申请所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read-only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。

Claims (21)

  1. 一种图标的样式风格处理的方法，其特征在于，包括：
    获取N个图标，N是大于1的整数；
    将每个图标的组成元素转化为路径；
    标记每个图标的所有路径的属性，其中，所述路径的属性包括主路径和内辅助路径，或者，所述路径的属性包括所述主路径和外辅助路径，或者，所述路径的属性包括所述主路径、所述内辅助路径和所述外辅助路径，所述内辅助路径在所述主路径的内部，所述外辅助路径在所述主路径的外部；
    获取与所述路径的属性对应的目标参数，所述目标参数包括描边参数、填充色和/或圆角半径；
    根据所述路径的属性对应的目标参数，对所述N个图标中每种属性的路径进行样式风格处理。
  2. 根据权利要求1所述的方法，其特征在于，所述主路径是所有路径中长度最长的路径。
  3. 根据权利要求1或2所述的方法，其特征在于，所述目标参数包括描边参数，所述根据所述路径的属性对应的目标参数，对所述N个图标中每种属性的路径进行样式风格处理包括：
    根据所述主路径对应的描边参数，对所述N个图标的主路径进行描边；和/或，
    根据所述内辅助路径对应的描边参数，对所述N个图标的内辅助路径进行描边；和/或，
    根据所述外辅助路径对应的描边参数，对所述N个图标的外辅助路径进行描边。
  4. 根据权利要求3所述的方法，其特征在于，所述路径的属性还包括相交路径，所述相交路径是一条路径与另一条路径至少有一个公共点的路径；
    所述根据所述路径的属性对应的目标参数，对所述N个图标中每种属性的路径进行样式风格处理还包括：
    根据所述相交路径对应的描边参数，对所述N个图标的相交路径进行描边。
  5. 根据权利要求1至4中任一项所述的方法，其特征在于，所述路径的属性还包括闭合路径和开放路径，所述闭合路径是所述路径的起点和所述路径的终点重合，所述开放路径是所述路径的起点和所述路径的终点不重合；
    所述目标参数还包括填充色，所述根据所述路径的属性对应的目标参数，对所述N个图标中每种属性的路径进行样式风格处理包括：
    判断所述N个图标的主路径是否是闭合路径；
    在所述主路径是闭合路径的情况下，根据所述主路径对应的填充色，对所述主路径形成的区域进行填充；
    在所述主路径是开放路径的情况下，根据所述主路径对应的填充色，对所述主路径进行描边。
  6. 根据权利要求5所述的方法，其特征在于，所述根据所述路径的属性对应的目标 参数，对所述N个图标中每种属性的路径进行样式风格处理还包括：
    判断所述N个图标的外辅助路径是否是闭合路径；
    在所述外辅助路径是闭合路径的情况下，根据所述外辅助路径对应的填充色，对所述外辅助路径形成的区域进行填充；
    在所述外辅助路径是开放路径的情况下，根据所述外辅助路径对应的填充色，对所述外辅助路径进行描边。
  7. 根据权利要求5或6所述的方法，其特征在于，所述根据所述路径的属性对应的目标参数，对所述N个图标中每种属性的路径进行样式风格处理还包括：
    判断所述N个图标的内辅助路径是否是闭合路径；
    在所述内辅助路径是闭合路径的情况下，
    确定第一主内交集区域，所述第一主内交集区域是所述主路径形成的区域中所述主路径形成的区域与所述内辅助路径形成的区域的重合的区域；
    将所述主内交集区域设置为透明区域；
    根据所述内辅助路径对应的填充色，对所述主内交集区域进行填充；
    在所述内辅助路径是开放路径的情况下，
    对所述内辅助路径进行轮廓化描边，以得到闭合的内辅助路径；
    确定第二主内交集区域，所述第二主内交集区域是所述主路径形成的区域和所述闭合的内辅助路径形成的区域的重合的区域；
    将所述第二主内交集区域设置为透明区域；
    根据所述内辅助路径对应的填充色，对所述第二主内交集区域进行填充。
  8. 根据权利要求1至7中任一项所述的方法，其特征在于，所述目标参数还包括圆角半径，所述根据所述路径的属性对应的目标参数，对所述N个图标中每种属性的路径进行样式风格处理包括：
    根据所述主路径对应的圆角半径，对所述N个图标的主路径进行圆角处理；和/或，
    根据所述内辅助路径对应的圆角半径，对所述N个图标的内辅助路径进行圆角处理；和/或，
    根据所述外辅助路径对应的圆角半径，对所述N个图标的外辅助路径进行圆角处理。
  9. 根据权利要求1至8中任一项所述的方法，其特征在于，所述图标是可缩放的矢量图形SVG格式的图标或流式网络图像PNG格式的图标。
  10. 一种图标的样式风格处理的装置，其特征在于，包括：
    获取单元，用于获取N个图标，N是大于1的整数；
    转化单元，用于将每个图标的组成元素转化为路径；
    标记单元，用于标记每个图标的所有路径的属性，其中，所述路径的属性包括主路径和内辅助路径，或者，所述路径的属性包括所述主路径和外辅助路径，或者，所述路径的属性包括所述主路径、所述内辅助路径和所述外辅助路径，所述内辅助路径在所述主路径的内部，所述外辅助路径在所述主路径的外部；
    所述获取单元，还用于获取与所述路径的属性对应的目标参数，所述目标参数包括描边参数、填充色和/或圆角半径；
    处理单元，用于根据所述路径的属性对应的目标参数，对所述N个图标中每种属性的 路径进行样式风格处理。
  11. 根据权利要求10所述的装置，其特征在于，所述主路径是所有路径中长度最长的路径。
  12. 根据权利要求10或11所述的装置，其特征在于，所述目标参数包括描边参数，所述处理单元还具体用于：
    根据所述主路径对应的描边参数，对所述N个图标的主路径进行描边；和/或，
    根据所述内辅助路径对应的描边参数，对所述N个图标的内辅助路径进行描边；和/或，
    根据所述外辅助路径对应的描边参数，对所述N个图标的外辅助路径进行描边。
  13. 根据权利要求12所述的装置，其特征在于，所述路径的属性还包括相交路径，所述相交路径是一条路径与另一条路径至少有一个公共点的路径；
    所述处理单元还具体用于：
    根据所述相交路径对应的描边参数，对所述N个图标的相交路径进行描边。
  14. 根据权利要求10至13中任一项所述的装置，其特征在于，所述路径的属性还包括闭合路径和开放路径，所述闭合路径是所述路径的起点和所述路径的终点重合，所述开放路径是所述路径的起点和所述路径的终点不重合；
    所述目标参数还包括填充色，所述处理单元还具体用于：
    判断所述N个图标的主路径是否是闭合路径；
    在所述主路径是闭合路径的情况下，根据所述主路径对应的填充色，对所述主路径形成的区域进行填充；
    在所述主路径是开放路径的情况下，根据所述主路径对应的填充色，对所述主路径进行描边。
  15. 根据权利要求14所述的装置，其特征在于，所述处理单元还具体用于：
    判断所述N个图标的外辅助路径是否是闭合路径；
    在所述外辅助路径是闭合路径的情况下，根据所述外辅助路径对应的填充色，对所述外辅助路径形成的区域进行填充；
    在所述外辅助路径是开放路径的情况下，根据所述外辅助路径对应的填充色，对所述外辅助路径进行描边。
  16. 根据权利要求14或15所述的装置，其特征在于，所述处理单元还具体用于：
    判断所述N个图标的内辅助路径是否是闭合路径；
    在所述内辅助路径是闭合路径的情况下，
    确定第一主内交集区域，所述第一主内交集区域是所述主路径形成的区域中所述主路径形成的区域中所述主路径形成的区域和所述内辅助路径形成的区域的重合的区域；
    将所述主内交集区域设置为透明区域；
    根据所述内辅助路径对应的填充色，对所述主内交集区域进行填充；
    在所述内辅助路径是开放路径的情况下，
    对所述内辅助路径进行轮廓化描边，以得到闭合的内辅助路径；
    确定第二主内交集区域，所述第二主内交集区域是所述主路径形成的区域中所述主路径形成的区域中所述主路径形成的区域和所述闭合的内辅助路径形成的区域的重合的区 域；
    将所述第二主内交集区域设置为透明区域；
    根据所述内辅助路径对应的填充色，对所述第二主内交集区域进行填充。
  17. 根据权利要求10至16中任一项所述的装置，其特征在于，所述目标参数还包括圆角半径，所述处理单元还具体用于：
    根据所述主路径对应的圆角半径，对所述N个图标的主路径进行圆角处理；和/或，
    根据所述内辅助路径对应的圆角半径，对所述N个图标的内辅助路径进行圆角处理；和/或，
    根据所述外辅助路径对应的圆角半径，对所述N个图标的外辅助路径进行圆角处理。
  18. 根据权利要求10至17中任一项所述的装置，其特征在于，所述图标是可缩放的矢量图形SVG格式的图标或流式网络图像PNG格式的图标。
  19. 一种图标的样式风格处理装置，其特征在于，所述图标的样式风格处理装置包括：至少一个处理器，当程序指令在所述至少一个处理器中执行时，使得所述图像处理装置执行如权利要求1至9中任一项所述的方法。
  20. 一种计算机可读存储介质，其特征在于，包括计算机程序，当其在计算机设备上运行时，使得所述计算机设备中的处理单元执行如权利要求1至9中任一项所述的方法。
  21. 一种芯片，其特征在于，所述芯片包括存储器和处理器，所述存储器用于存储计算机指令，所述处理器用于执行所述存储器中存储的计算机指令，以执行如权利要求1至9中任一项所述的方法。
PCT/CN2021/082665 2020-04-26 2021-03-24 图标的样式风格处理的方法以及装置 WO2021218501A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202010337760.7 2020-04-26
CN202010337760.7A CN111638878B (zh) 2020-04-26 2020-04-26 图标的样式风格处理的方法以及装置

Publications (1)

Publication Number Publication Date
WO2021218501A1 true WO2021218501A1 (zh) 2021-11-04

Family

ID=72328755

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2021/082665 WO2021218501A1 (zh) 2020-04-26 2021-03-24 图标的样式风格处理的方法以及装置

Country Status (2)

Country Link
CN (1) CN111638878B (zh)
WO (1) WO2021218501A1 (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111638878B (zh) * 2020-04-26 2023-06-02 华为终端有限公司 图标的样式风格处理的方法以及装置
CN114780182B (zh) * 2022-03-11 2024-05-10 北京百度网讯科技有限公司 切换图标风格的方法、装置、设备、介质及产品

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101872486A (zh) * 2010-06-14 2010-10-27 何金奎 平面构成图形的电脑制作方法
US20130120391A1 (en) * 2008-04-18 2013-05-16 Donald P. Brown Triangulation for Accelerated Multi-Resolution Rendering of Stroked Paths
CN108009346A (zh) * 2017-11-29 2018-05-08 上海电科智能系统股份有限公司 根据dxf格式工程图快速绘制svg格式地图的方法
CN108961359A (zh) * 2018-05-17 2018-12-07 长沙八思量信息技术有限公司 激光打标系统及其闭合图形的填充算法、存储介质
CN111638878A (zh) * 2020-04-26 2020-09-08 华为终端有限公司 图标的样式风格处理的方法以及装置

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
GB2400780B (en) * 2003-04-17 2006-07-12 Research In Motion Ltd System and method of converting edge record based graphics to polygon based graphics
CN102681778A (zh) * 2012-04-25 2012-09-19 中兴通讯股份有限公司 一种对桌面图标进行批量管理的方法及数字移动设备
CN106294504A (zh) * 2015-06-09 2017-01-04 阿里巴巴集团控股有限公司 一种网页图标的显示方法和装置
CN107423066A (zh) * 2017-07-27 2017-12-01 深圳依偎控股有限公司 一种应用程序图标样式的修改方法和修改装置
CN110321190B (zh) * 2019-04-19 2022-04-29 珠海天燕科技有限公司 一种桌面中图标优化的方法及装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130120391A1 (en) * 2008-04-18 2013-05-16 Donald P. Brown Triangulation for Accelerated Multi-Resolution Rendering of Stroked Paths
CN101872486A (zh) * 2010-06-14 2010-10-27 何金奎 平面构成图形的电脑制作方法
CN108009346A (zh) * 2017-11-29 2018-05-08 上海电科智能系统股份有限公司 根据dxf格式工程图快速绘制svg格式地图的方法
CN108961359A (zh) * 2018-05-17 2018-12-07 长沙八思量信息技术有限公司 激光打标系统及其闭合图形的填充算法、存储介质
CN111638878A (zh) * 2020-04-26 2020-09-08 华为终端有限公司 图标的样式风格处理的方法以及装置

Also Published As

Publication number Publication date
CN111638878B (zh) 2023-06-02
CN111638878A (zh) 2020-09-08

Similar Documents

Publication Publication Date Title
WO2021120914A1 (zh) 一种界面元素的显示方法及电子设备
WO2020253758A1 (zh) 一种用户界面布局方法及电子设备
EP3971818A1 (en) Picture processing method and apparatus
WO2021218501A1 (zh) 图标的样式风格处理的方法以及装置
WO2021115091A1 (zh) 一种文本识别方法及装置
WO2022166619A1 (zh) 二维码识别方法及相关装置
WO2022095744A1 (zh) Vr显示控制方法、电子设备及计算机可读存储介质
WO2021213351A1 (zh) 图片加载方法及相关装置
WO2021052488A1 (zh) 一种信息处理方法及电子设备
WO2023216957A1 (zh) 一种目标定位方法、系统和电子设备
WO2023066165A1 (zh) 动画效果显示方法及电子设备
CN114022570B (zh) 相机间外参的标定方法及电子设备
WO2023005751A1 (zh) 渲染方法及电子设备
WO2023016059A1 (zh) 数据传输控制方法及相关装置
WO2022095983A1 (zh) 一种防止手势误识别的方法及电子设备
US20240211509A1 (en) Image Data Invoking Method and System for Application, Electronic Device, and Storage Medium
WO2022042285A1 (zh) 一种应用程序界面显示的方法及电子设备
KR20150069155A (ko) 전자 장치의 터치 인디케이터 디스플레이 방법 및 그 전자 장치
CN114758601A (zh) 屏幕显示颜色调整方法及电子设备
WO2023202444A1 (zh) 一种输入方法及装置
CN117148959B (zh) 眼动追踪的帧率调整方法及相关装置
WO2023078133A1 (zh) 视频播放方法和装置
CN116700655B (zh) 一种界面显示方法及电子设备
WO2022022381A1 (zh) 生成涂鸦图案的方法、装置、电子设备及存储介质
CN117036206B (zh) 一种确定图像锯齿化程度的方法及相关电子设备

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 21797837

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 21797837

Country of ref document: EP

Kind code of ref document: A1