Component display method and apparatus, and device

Abstract

The present application discloses a component display method and apparatus, and a device. The method comprises: displaying a first interface comprising a first component displayed in a single level; in response to an operation with respect to the first component, displaying a second interface comprising a first control, the first control being used for triggering hierarchical rendering of component information of the first component; in response to an operation with respect to the first control, performing hierarchical rendering on the component information of the first component to obtain a rendering result, the rendering result being used for characterizing the first component capable of being displayed in multiple levels, and the component information of the first component displayed in multiple levels being adjustable; and displaying a third interface comprising the first component displayed in multiple levels. By means of displaying the first control on an operation interface, hierarchical rendering of the component information of the first component can be triggered, and the component information of the first component displayed in multiple levels is adjustable, enabling the component information of the first component to be layered and rendered as desired to obtain the first component displayed in multiple levels, thereby enriching the display effect of the first component.

Description

Component display methods, apparatus and equipment

[0001] This application claims priority to Chinese Patent Application No. 202410804169.6, filed on June 20, 2024, entitled "Component Display Method, Apparatus and Device", the entire contents of which are incorporated herein by reference. Technical Field

[0002] This application relates to the field of image processing technology, and in particular to component display methods, apparatus and devices. Background Technology

[0003] A component is an interactive element on an electronic device that can produce interactive effects. Components can include icons. Icons are elements in the user interface (UI) of an electronic device's operating system. Icons provide intuitive visual cues, helping users quickly understand and identify specific functions. Icons are commonly used to represent objects such as applications, files, folders, and desktops. In one related technology, icon display typically involves displaying a pre-designed image in a selected location. However, pre-designed images are fixed, which limits the effectiveness of icon display. Summary of the Invention

[0004] This application provides a component display method, apparatus, and device to solve the problems provided by related technologies. The technical solution is as follows:

[0005] Firstly, a component display method is provided, the method comprising: displaying a first interface, the first interface including a first component displayed in a single layer; responding to an operation on the first component, displaying a second interface, the second interface including a first control, the first control being used to trigger layered rendering of component information of the first component; responding to an operation on the first control, performing layered rendering of component information of the first component to obtain a rendering result, the rendering result being used to characterize a first component that can be displayed in multiple layers, the component information of the multi-layered first component being adjustable; and displaying a third interface, the third interface including the first component displayed in multiple layers. In this application, by displaying a first control on the operation interface, layered rendering of component information of the first component can be triggered, and the adjustable component information of the multi-layered first component allows for arbitrary layering and rendering of the component information of the first component, resulting in a multi-layered first component and enriching the display effect of the first component.

[0006] Of course, the first component can be manipulated again to change its display effect, switching it from one multi-layered display to another. In one possible implementation, in response to an operation on the first component on the third interface, the second interface is displayed again. The second interface includes a first control. In response to an operation on the first control, the component information of the first component is rendered in layers to change the display effect of the first component on the third interface, switching it from one multi-layered display to another. A fourth interface is then displayed, including the first component displayed in another multi-layered manner. In this application, since the component information of the multi-layered first component is adjustable, the layering of the component information can be arbitrarily changed to obtain more types of multi-layered first components, making the display effect of the first component richer.

[0007] In one possible implementation, the second interface further includes a second control for inputting rendering requirement information for rendering the first component; the method further includes: in response to an operation on the second control, obtaining the rendering requirement information of the first component; the step of performing layered rendering of the component information of the first component to obtain a rendering result includes: layering the rendering requirement information and the component information of the first component to obtain rendering parameters for each layer; rendering the rendering parameters of each layer to obtain the rendering result corresponding to each layer, wherein the multi-layered first component is obtained by compositing the rendering results corresponding to each layer.

[0008] In this application, the rendering requirements of the first component are input through controls on the interface, allowing users to flexibly input rendering requirements according to their own preferences. By combining the rendering requirements information and component information, the rendering parameters of each layer are determined, and the rendering results of each layer are obtained, resulting in a first component with rich display effects, making the display effect closer to the user's preferences and improving the user experience.

[0009] In addition, the rendering mode based on the combination of component information and input rendering requirements makes the use of components flexible. The same set of parameters can be easily passed between different components, and the same component can also easily switch between different parameters without having to repeatedly and redundantly create components with different parameters.

[0010] In one possible implementation, the rendering requirement information includes motion effect parameters; the rendering requirement information and component information of the first component are layered to obtain rendering parameters for each layer, including: determining the layer where the motion effect parameters of the first component are located; and determining the rendering parameters for each layer based on the layer where the motion effect parameters of the first component are located and the layer where the component information of the first component is located. In this application, the rendering requirement information may include motion effect parameters. By combining the motion effect parameters and component information of the first component, the rendering parameters for each layer are determined, thereby obtaining the rendering results corresponding to each layer, which can achieve a dynamic display effect and make the display effect of the first component richer.

[0011] In one possible implementation, the component information of the first component includes the description information and shape information of the first component. The rendering requirement information further includes text attribute information, which is used to edit the format of the description information of the first component. The step of performing layered rendering on the component information of the first component to obtain a rendering result includes: obtaining the edited description information of the first component based on the text attribute information; obtaining layout information based on the shape information and the edited description information of the first component; and performing layered rendering on the layout information to obtain a rendering result. In this application, by inputting text attribute information on the interface, the shape information and layout information of the description information of the first component are obtained based on the text attribute information. Then, layered rendering is performed on the layout information. This allows both dynamic and static components to use the same set of layout results and rendering parameters after layered rendering combined with mixed text and image information, making the switching between dynamic and static states very natural and smooth.

[0012] In one possible implementation, the layout information includes position identifiers for each piece of information; the step of performing layered rendering on the layout information to obtain a rendering result includes: performing layered rendering on the description information of the first component based on the position identifiers of the description information of the first component to obtain a first result; performing layered rendering on the shape information of the first component based on the position identifiers of the shape information of the first component to obtain a second result; and obtaining a rendering result based on the first result and the second result. In this application, by performing layered rendering on the description information and shape information respectively, the same component can also use different rendering methods, which facilitates the formation of rich rendering results and makes the display effect of the component richer.

[0013] In one possible implementation, the component information of the first component includes the shape information and rendering information of the first component. Before displaying the first interface, the method further includes: constructing the shape information of the first component according to a font mechanism; and constructing the rendering information of the first component according to the shape information, wherein the rendering information includes at least one of the following: layering information, rendering parameters, and animation parameters. In this application, by using a font mechanism to construct the shape information of the component, the vector graphic of the component is integrated and displayed like text. Then, by constructing the rendering information of the component based on the shape information, it is possible to enable the same vector path of the vector graphic to appear in one or more layers, and to use different rendering modes and animation parameters, thus enriching the rendering information of the component and facilitating richer rendering results in subsequent rendering.

[0014] Of course, in one possible implementation, during the application development phase, developers can construct the shape information and rendering information of the first component through the application programming interface (API). After constructing the shape and rendering information of the first component, during the application usage phase, when the device is started or the first component is displayed, the component information of the first component corresponding to the API is called, and the component information of the first component is rendered layer by layer to obtain the rendering result. The rendering result is used to represent the first component that can be displayed in multiple layers, and the multi-layered first component is obtained based on the rendering result. Therefore, in this application, the layered rendering of the component information of the first component can be triggered during the display of the first component, without the need to trigger the layered rendering of the component information of the first component through triggering additional controls, which is simple to operate and easy to implement.

[0015] Of course, after displaying the first component, if one wishes to change its display effect, a second interface is displayed in response to the operation on the first component, as described above. The second interface includes a first control. In response to the operation on the first control, the component information of the first component is rendered in layers to obtain a rendering result. A third interface is then displayed based on the rendering result. The third interface includes the first component displayed in multiple layers. In this application, by displaying the first control on the operation interface, the layered rendering of the component information of the first component can be triggered. The layering of the component information of the first component can be arbitrarily changed to obtain more types of multi-layered displays of the first component, making the display effect of the first component richer.

[0016] In one possible implementation, the shape information of the first component is consistent with the storage format of the font library file. In this application, by making the shape information of the first component consistent with the storage format of the text file, the vector graphic of the component is processed and displayed in the same way as the text, resulting in better compatibility between graphics and text layout.

[0017] In one possible implementation, the first component includes at least one of an icon or a control, which can be applied to a variety of application scenarios and has high applicability.

[0018] In a second aspect, a component display device is provided, the device comprising: a display module for displaying a first interface, the first interface including a first component displayed in a single layer; the display module further comprising, in response to an operation on the first component, displaying a second interface, the second interface including a first control, the first control being used to trigger layered rendering of component information of the first component; a rendering module for, in response to an operation on the first control, performing layered rendering of component information of the first component to obtain a rendering result, the rendering result being used to characterize a first component that can be displayed in multiple layers, the component information of the first component being displayed in multiple layers being adjustable; and the display module further comprising displaying a third interface, the third interface including the first component displayed in multiple layers.

[0019] In one possible implementation, the second interface further includes a second control for inputting rendering requirement information for rendering the first component; the device further includes an acquisition module for acquiring the rendering requirement information of the first component in response to an operation on the second control. The rendering module is used to layer the rendering requirement information and component information of the first component to obtain rendering parameters for each layer; to render the rendering parameters of each layer to obtain the rendering result corresponding to each layer; and the multi-layered first component is obtained by compositing the rendering results corresponding to each layer.

[0020] In one possible implementation, the rendering requirement information includes motion effect parameters; the rendering module is used to determine the layer where the motion effect parameters of the first component are located; and to determine the rendering parameters of each layer based on the layer where the motion effect parameters of the first component are located and the layer where the component information of the first component is located.

[0021] In one possible implementation, the component information of the first component includes the description information and shape information of the first component, and the rendering requirement information further includes the attribute information of the text, which is used to edit the format of the description information of the first component; the rendering module is used to obtain the edited description information of the first component based on the attribute information of the text; to obtain layout information based on the shape information of the first component and the edited description information of the first component; and to perform layered rendering on the layout information to obtain a rendering result.

[0022] In one possible implementation, the layout information includes position identifiers for each piece of information; the rendering module is configured to perform layered rendering of the description information of the first component based on the position identifiers of the description information of the first component to obtain a first result; perform layered rendering of the shape information of the first component based on the position identifiers of the shape information of the first component to obtain a second result; and obtain a rendering result based on the first result and the second result.

[0023] In one possible implementation, the component information of the first component includes the shape information and rendering information of the first component; before displaying the first interface, the device further includes: a construction module, configured to construct the shape information of the first component according to a font mechanism; and to construct the rendering information of the first component according to the shape information of the first component, wherein the rendering information includes at least one of the following: layering information, rendering parameters, and motion effect parameters.

[0024] In one possible implementation, the shape information of the first component is consistent with the storage format of the font library file.

[0025] In one possible implementation, the first component includes at least one of an icon or a control.

[0026] Thirdly, an electronic device is provided, the device including a memory and a processor; the memory stores at least one instruction, the at least one instruction being loaded and executed by the processor to enable the electronic device to implement the method described in the first aspect.

[0027] Fourthly, a computer program (product) is provided, the computer program (product) comprising: computer program code, which, when executed by a computer, causes the computer to perform the methods described in the above aspects.

[0028] Fifthly, a computer-readable storage medium is provided that stores a program or instructions, wherein when the program or instructions are run on a computer, the methods described in the preceding aspects are performed.

[0029] In a sixth aspect, a chip is provided, including a processor for retrieving and executing instructions stored in a memory, causing a communication device on which the chip is mounted to perform the methods described in the preceding aspects.

[0030] In a seventh aspect, another chip is provided, comprising: an input interface, an output interface, a processor, and a memory, wherein the input interface, the output interface, the processor, and the memory are connected via an internal connection path, and the processor is used to execute code in the memory, wherein when the code is executed, the processor is used to perform the methods in the foregoing aspects.

[0031] It should be understood that the beneficial effects of the technical solutions and corresponding possible implementations of the second to seventh aspects of this application can be found in the above description of the technical effects of the first aspect and its corresponding possible implementations, and will not be repeated here. Attached Figure Description

[0032] Figure 1 is a schematic diagram of an interface of an electronic device provided in a related technology;

[0033] Figure 2 is a schematic diagram of an interface of an electronic device provided in an embodiment of this application;

[0034] Figure 3 is a schematic diagram of another interface of an electronic device provided in an embodiment of this application;

[0035] Figure 4 is a schematic diagram of another interface of an electronic device provided in an embodiment of this application;

[0036] Figure 5 is a schematic diagram of another interface of an electronic device provided in an embodiment of this application;

[0037] Figure 6 is a schematic diagram of another interface of an electronic device provided in an embodiment of this application;

[0038] Figure 7 is a structural block diagram of an electronic device provided in an embodiment of this application;

[0039] Figure 8 is a flowchart illustrating a component display method provided in an embodiment of this application;

[0040] Figure 9 is a flowchart illustrating another component display method provided in an embodiment of this application;

[0041] Figure 10 is a flowchart illustrating another component display method provided in an embodiment of this application;

[0042] Figure 11 is a block diagram of a component display device provided in an embodiment of this application;

[0043] Figure 12 is a structural block diagram of an electronic device provided in an embodiment of this application. Detailed Implementation

[0044] The terminology used in the implementation section of this application is for the purpose of explaining specific embodiments of this application only, and is not intended to limit this application.

[0045] In a related art, component display typically involves displaying a pre-designed image at a selected location. For example, Figure 1 is a schematic diagram of an interface of an electronic device provided in a related art. As shown in Figure 1, taking a mobile phone as an example, the component may include icons. The icons of applications displayed on the desktop of the mobile phone 100 are all pre-designed images, and their display effect is fixed. For example, as shown in Figure 1, the display effect of icon 101 of the sports and health application includes consistent line thickness. Therefore, in the related art, because the pre-designed images are fixed, the display effect of the components is fixed, which has significant limitations.

[0046] To address the aforementioned technical problems, this application provides a component display method applicable to electronic devices. The method includes: during the application development phase, developers can construct shape information and rendering information of a first component through an application programming interface (API). The rendering information includes at least one of the following: layering information, rendering parameters, and animation parameters. After constructing the shape information and rendering information of the first component, during the application usage phase, when the device is started or the first component is displayed, the component information of the first component corresponding to the API is called, and layered rendering of the component information of the first component is performed to obtain a rendering result. The rendering result is used to characterize a first component that can be displayed in multiple layers, and a multi-layered first component is obtained based on the rendering result. Therefore, in this application, layered rendering of the component information of the first component can be triggered during the display of the first component, without needing to trigger additional controls to do so. This method is simple to operate and easy to implement.

[0047] Of course, after displaying the first component, if you want to change its display effect, as described above, in response to operations on the first component, display an interface including the first control; in response to operations on the first control, perform layered rendering of the component information of the first component to obtain a rendering result; and display the first component displayed in multiple layers according to the rendering result. In this application, by displaying the first control on the operation interface, layered rendering of the component information of the first component can be triggered, and the layering of the component information of the first component can be arbitrarily changed to obtain more types of multi-layered displays of the first component, making the display effect of the first component richer.

[0048] In this embodiment, the display of the first component during device startup or the first component can be either multi-layered or single-layered. The following description assumes the first component is displayed in a single-layered manner. Therefore, to address the aforementioned technical problems, this embodiment provides another component display method applicable to electronic devices. The method includes: the electronic device displaying a first interface, which includes the first component displayed in a single layer. In response to an operation on the first component, the electronic device displays a second interface, which includes a first control used to trigger layered rendering of the component information of the first component, where the component information represents the first component. In response to an operation on the first control, layered rendering of the component information of the first component is performed, and the electronic device obtains a rendering result. This rendering result characterizes the first component that can be displayed in multiple layers, and the component information of the multi-layered first component is adjustable. The electronic device then displays a third interface, which includes the first component displayed in multiple layers. In this embodiment of the application, by displaying the first control on the operation interface, the component information of the first component can be rendered in layers. The component information of the first component with multiple layers can be adjusted, so that the component information of the first component can be arbitrarily layered and rendered to obtain the first component with multiple layers, thus enriching the display effect of the first component.

[0049] In some embodiments, a component may include at least one of an icon or a control. No specific limitation is made in this application embodiment. For example, taking an icon as an example, Figure 2 is a schematic diagram of an interface of an electronic device provided in this application embodiment. As shown in Figure 2, following the above example, when an operation (such as a press operation) is performed on the icon 201 of the sports and health application displayed on the electronic device 100, the electronic device 100 displays the interface 301 shown in Figure 3, and the interface 301 displays a control 3011 (i.e., the first control). The control 3011 is used to trigger the selection of a rendering mode. The control 3011 includes options for multi-layer rendering and single-layer rendering. As shown in Figure 2, when the multi-layer rendering option is selected and the "OK" control is clicked, the display interface of the electronic device 100 jumps from the interface 301 shown in Figure 3 to the desktop shown in Figure 4. Another display effect of the icon 101 of the sports and health application is displayed on the desktop, that is, the display effect of icon 401 includes: part of the icon's lines are thick lines, and another part of the lines are thin lines. This display effect is obtained by the electronic device 100 performing layered rendering of the icon information of the above-mentioned icon. As can be seen, the shape and text of the icon can display different effects. Compared to the display effect of icon 101 of the sports and health application in Figure 1, the display effect shown in Figure 4 has a greater sense of layering and a richer display effect.

[0050] Of course, control 3011 is not limited to the form shown in Figure 3, but can also be in the form shown in Figure 5. In Figure 5, control 3011 may include rendering mode selection, rendering color selection, and rendering color selection for each layer, etc. This application embodiment does not impose specific limitations. Therefore, in this application embodiment, the display interface of the components provided is not limited to the interfaces listed above, but can also be other display interfaces, and this application embodiment does not impose specific limitations.

[0051] In other embodiments, the second interface is not limited to displaying the first control; other controls may also be displayed. In some embodiments, the second interface may further include a second control, which is used to input rendering requirement information for rendering the first component. The rendering requirement information may include, but is not limited to, component attribute information, text attribute information, and animation parameters. The component attribute information can be used to edit the component's component information; for example, the component attribute information may include at least one of the following: color, size, and background. The text attribute information can be used to edit the format of the component's description information; for example, the text attribute information may include at least one of the following: font, font weight, font size, and color. The animation parameters may include, but are not limited to, animation type, animation trigger mode, animation playback timing, and animation playback count. Of course, in other embodiments, the component attribute information, text attribute information, and animation parameters included in the rendering requirement information can be input through corresponding controls. That is, the second interface may also include multiple controls, each of which is used to input different information. Therefore, the number of controls on the second interface is not limited in this embodiment; the controls need to be set according to actual needs in specific implementation.

[0052] For example, as shown in Figure 5, the electronic device 100 displays an interface 301. The interface 301 displays not only control 3011, but also controls 3012 and 3013. Control 3012 is used to set the animation mode. For example, the animation mode can be understood as the icon 101 being able to display animation effects, such as blinking, gradual left-side display, zooming in, or zooming out. Control 3013 can be used to set the font mode. For example, the font size and weight can be changed. For instance, the font size of the description information "Sports and Health" corresponding to icon 101 can be changed from size 5 to size 4. Another example is changing the font size of the description information "Sports and Health" corresponding to icon 101 from thin to thick. Of course, the font itself can also be changed, such as changing the font of the description information "Sports and Health" corresponding to icon 101 from SimSun to KaiTi. The embodiments of this application are not limited to the above examples; other examples may exist, which will not be listed here. In practical implementation, by setting the various controls in Figure 5 and clicking the "OK" control, the display interface of the electronic device 100 jumps from interface 301 shown in Figure 5 to the desktop shown in Figure 6. Another display effect of the sports and health application icon 601 is displayed on the desktop. This display effect includes: the heart-shaped curve is a thick, black line; the wavy curve is a thin, gray line; and the font weight corresponding to the icon's name is bolded. Therefore, in this embodiment, the display effect of components can be set according to preferences, improving the user experience. Furthermore, by inputting adjustment parameters into the electronic device and combining them with the inherent component information, the display effect of the components is comprehensively adjusted, making the display effect more layered and richer.

[0053] The component display method provided in this application can be applied to scenarios including, but not limited to, application icon display, taskbar display, application interface display, and control center display. No specific limitations are imposed in this application.

[0054] Figure 7 is a structural block diagram of an electronic device provided in an embodiment of this application.

[0055] As shown in Figure 7, the electronic device 100 may include a processor 710, a memory 720, a universal serial bus (USB) interface 730, a charging management module 740, a power management module 741, a battery 742, an antenna 1, a wireless communication module 760, a display screen 770, and a sensor module 750, etc. The sensor module 750 may include a pressure sensor 750A, a touch sensor 750B, etc.

[0056] It is understood that the structures illustrated in the embodiments of this application do not constitute a specific limitation on the electronic device. In other embodiments of this application, the electronic device may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0057] The processor 710 may include one or more processing units, such as an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural network processing unit (NPU). These different processing units may be independent devices or integrated into one or more processors.

[0058] The controller can generate operation control signals based on the instruction opcode and timing signals to complete the control of instruction fetching and execution.

[0059] The processor 710 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 710 is a cache memory. This memory can store instructions or data that the processor 710 has just used or that are used repeatedly. If the processor 710 needs to use the instruction or data again, it can directly retrieve it from the memory. This avoids repeated accesses, reduces the waiting time of the processor 710, and thus improves the efficiency of the system.

[0060] The charging management module 740 receives charging input from a charger. The charger can be a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 740 receives charging input from the wired charger via a USB interface 730. In some wireless charging embodiments, the charging management module 740 receives wireless charging input via the wireless charging coil of the electronic device. While charging the battery 742, the charging management module 740 can also supply power to the electronic device via the power management module 741.

[0061] The power management module 741 connects the battery 742, the charging management module 740, and the processor 710. The power management module 741 receives input from the battery 742 and / or the charging management module 740, providing power to the processor 710, memory 720, display 770, and wireless communication module 760, etc. The power management module 741 can also monitor parameters such as battery capacity, battery cycle count, and battery health status (leakage current, impedance). In some other embodiments, the power management module 741 may also be located within the processor 710. In still other embodiments, the power management module 741 and the charging management module 740 may be located in the same device.

[0062] The wireless communication function of electronic devices can be realized through antenna 1, wireless communication module 760, modem processor and baseband processor, etc.

[0063] Antenna 1 is used to transmit and receive electromagnetic wave signals. Each antenna in an electronic device can be used to cover one or more communication frequency bands. Different antennas can also be reused to improve antenna utilization. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In some other embodiments, the antenna can be used in conjunction with a tuning switch.

[0064] The wireless communication module 760 can provide solutions for wireless communication applications in electronic devices, including wireless local area networks (WLANs) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), and infrared (IR) technologies. The wireless communication module 760 can be one or more devices integrating at least one communication processing module. The wireless communication module 760 receives electromagnetic waves via antenna 1, performs frequency modulation and filtering of the electromagnetic wave signals, and sends the processed signal to processor 710. The wireless communication module 760 can also receive signals to be transmitted from processor 710, perform frequency modulation and amplification, and convert them into electromagnetic waves for radiation via antenna 1. In some embodiments, the wireless communication module 760 receives application information sent by a server.

[0065] Electronic devices implement display functions through a GPU, a display screen 770, and an application processor. The GPU is a microprocessor for image processing, connecting the display screen 770 and the application processor. The GPU performs mathematical and geometric calculations and is used for graphics rendering. The processor 710 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0066] The display screen 770 is used to display images, videos, etc. The display screen 770 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a Miniled LED, a MicroLED, a Micro-OLED, a quantum dot light-emitting diode (QLED), etc. In some embodiments, the electronic device may include one or N displays 770, where N is a positive integer greater than 1.

[0067] In some examples, display screen 770 displays a first application, such as a settings application. When the user clicks the icon of the settings application, touch sensor 750B or pressure sensor 750A can detect the user action. At this time, processor 710 responds to the user action, generates first refresh information, and allocates the first refresh information to the settings application to trigger the settings application process. The UI thread in the settings application process receives the first refresh information at a first moment, and the first refresh information is used to refresh the content displayed on the screen of the electronic device. The UI thread obtains the attribute information of the first frame image at the first moment, and predicts the attribute information of the frame image at a future second moment, based on the correspondence between the first moment, refresh cycle, time, and frame image attribute information. When the attribute information of the first frame image and the attribute information of the second frame image meet a first condition, the UI thread determines that the second frame image is a non-keyframe, so that processor 710 does not draw the second frame image when the second moment arrives.

[0068] The memory 720 can be used to store computer executable program code, which includes instructions. The memory 720 may include a program storage area and a data storage area. The program storage area may store the operating system, at least one application program required for a function (such as sound playback, image playback, etc.), etc. The data storage area may store data created during the use of the electronic device (such as audio data, phonebook, etc.). Furthermore, the memory 720 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc. The processor 710 executes various functional applications and data processing of the electronic device by running instructions stored in the memory 720 and / or instructions stored in memory disposed within the processor.

[0069] Pressure sensor 750A is used to sense pressure signals and convert them into electrical signals. In some embodiments, pressure sensor 750A can be disposed on display screen 770. There are many types of pressure sensors 750A, such as resistive pressure sensors, inductive pressure sensors, and capacitive pressure sensors. A capacitive pressure sensor may include at least two parallel plates with conductive material. When force is applied to pressure sensor 750A, the capacitance between the electrodes changes. The electronic device determines the pressure intensity based on the change in capacitance. When a touch operation is applied to display screen 770, the electronic device detects the intensity of the touch operation based on pressure sensor 750A. The electronic device can also calculate the touch position based on the detection signal from pressure sensor 750A. In some embodiments, touch operations applied to the same touch position but with different touch operation intensities can correspond to different operation commands. For example: when a touch operation with an intensity less than a first pressure threshold is applied to the SMS application icon, a command to view an SMS is executed. When a touch operation with an intensity greater than or equal to the first pressure threshold is applied to the SMS application icon, a command to create a new SMS is executed.

[0070] Touch sensor 750B, also known as a "touch device," can be located on display screen 770. The touch sensor 750B and display screen 770 together form a touchscreen, also known as a "touchscreen." Touch sensor 750B is used to detect touch operations applied to or near it. The touch sensor can transmit the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through display screen 770. In other embodiments, touch sensor 750B may also be located on the surface of the electronic device, in a different position than display screen 770.

[0071] Of course, electronic devices may also include other functional units, and this application embodiment does not limit this.

[0072] Furthermore, the actions, terms, etc., involved in the various embodiments of this application can be referenced interchangeably without limitation. The message names or parameter names in the messages in the embodiments of this application are merely examples, and other names may be used in specific implementations without limitation.

[0073] The aforementioned electronic devices may be mobile phones, tablets, laptops, desktop computers, ultra-mobile personal computers (UMPCs), handheld computers, netbooks, personal digital assistants (PDAs), etc. The specific form of the electronic devices is not specifically limited in the embodiments of this application.

[0074] The technical solutions involved in the following embodiments can all be implemented in a device with the structure shown in Figure 7.

[0075] Figure 8 is a flowchart illustrating a component display method provided in an embodiment of this application. As shown in Figure 8, the method can be described in detail in the following two stages. The method may include S801-S807 (some steps are optional).

[0076] The first stage is the preparation stage of component information.

[0077] Components can include icons and controls. The information preparation process for icons and controls is the same or similar; the following explanation uses icons as an example.

[0078] S801, Construct icon information.

[0079] Icon information is used to represent an icon. For example, icon information may include at least one of the following: icon shape information, icon description information, icon layering information, and icon parameter information.

[0080] The shape information of an icon can be understood as the information of the icon's geometric shape, such as the line information that makes up the geometric shape of the icon.

[0081] The description information of an icon can be understood as information used to explain the icon's function or name. For example, the description information for a sports application could be "Sports and Health". Similarly, the description information for a music application could be "Music".

[0082] The layering information of an icon is used to distinguish its hierarchical structure, mainly representing the layering of the icon's vector shapes. In other words, an icon can be composed of one or more vector shapes, and the path of the same vector shape can appear in the same layer or different layers. Similarly, the same vector shape of an icon can be rendered with different parameters, so different parameters can appear in the same layer or different layers. To put it another way, the layering information of an icon can be understood as the association between the icon's information (such as the icon's shape information, description information, and parameter information) and layers. For example, the icon's shape information is associated with the first layer, and the icon's description information is associated with the second layer. Or, the first part of the icon's shape information is associated with the first layer, and the second part of the icon's shape information is associated with the second layer. Of course, other situations may exist, such as the icon's parameter information being associated with the first layer, and the icon's shape information being associated with the second layer, etc., which are not specifically limited in this embodiment.

[0083] The icon's parameter information may include at least one of the following: the icon's rendering parameters and the icon's animation parameters. The rendering parameters may include at least one of the following: the pixel value of each pixel and its transparency. The icon's animation parameters may include the animation categories supported by the icon and the control parameters corresponding to each animation category. For example, the animation category may include a left fade-in, and correspondingly, the control parameters may include the duration of the icon's fade-in from the left and the parameter changes during the fade-in process. As another example, the animation category may include blinking, and correspondingly, the control parameters may include the icon's blinking frequency and the pixel values ​​of each pixel when the icon blinks. Of course, the embodiments in this application are not limited to the above examples.

[0084] The icon information can be constructed in the following ways.

[0085] In implementation method one, S801 can be implemented as follows: S8011, construct the shape information of the icon. In this step, the icon can be designed by a designer, who designs the shape and other information of the icon. S8012, construct the rendering information of the icon based on the shape information. The rendering information is information other than the shape information. The rendering information can include the icon's description information, the icon's layer information, and the icon's parameter information, etc. In this step, the icon's rendering information can also be designed by a designer. The icon information mentioned above includes the shape information of the icon constructed in S8011 and the rendering information of the icon constructed in S8012.

[0086] In the second implementation method, S801 can be implemented as follows: S8013, construct the icon's shape information according to the font mechanism. The font mechanism refers to constructing the icon's shape information in the same way as constructing font shape information. For example, an icon is formed from a vector graphic consisting of paths of one or more vector shapes, thus obtaining the icon's shape information. Optionally, the icon's shape information can be stored in the format of a font library file. S8014, construct the icon's rendering information based on the icon's shape information. The rendering information may include the icon's description information, layer information, and parameter information, etc. The implementation of S8014 can be found in the relevant description in S8012 above, and will not be repeated here. The icon information mentioned above includes the icon's shape information constructed in S8013 and the icon's rendering information constructed in S8014.

[0087] In this embodiment, the shape information of the component is constructed using a font mechanism, and the vector graphic of the component is integrated and displayed like text. Then, the rendering information of the component is constructed based on its shape information. This allows the same vector path of the vector graphic to appear in one or more layers, and different rendering modes and animation parameters to be used, enriching the component's rendering information and facilitating richer rendering results in subsequent rendering.

[0088] S802, Parse icon information.

[0089] This can be understood as obtaining the preset animation design parameters corresponding to the icon. The preset animation design parameters here include, but are not limited to, one or more of the following: whether the icon supports the animation, the animation layering of the icon, the specific behavior parameters of each layer of animation, the specific action curve of each layer of animation, and in special cases, no animation design parameters may be included.

[0090] In one possible implementation, S802 can be implemented as follows: S8021, parse the outline of the icon to obtain the vector graphic corresponding to the icon. The outline of the icon describes information such as its shape, size, and position. S8022, parse the rendering information of the icon, which includes the icon's layer information and parameter information. The parameter information may include rendering parameters and animation parameters. For example, if the rendering information includes layer information, then S8022 can be implemented by parsing the layer to which the path of the vector shape in the icon belongs. If the rendering information includes rendering parameters, then S8022 can be implemented by: pre-designing one or more rendering modes, each rendering mode corresponding to different layer information and different rendering parameters (such as pixel values, transparency, etc.); parsing the icon's layer information and rendering parameters according to the rendering mode. If the rendering information includes animation parameters, then S8022 can be implemented by: pre-designing one or more animation types, each animation type including one or more control parameters; parsing the animation types that the icon can support and their control parameters according to the animation type.

[0091] In summary, icon information includes one or more of the following: First, icon shape information, which is built based on a font mechanism, its storage format is basically consistent with the font library file, its shape conforms to the preset icon shape, and is composed of one or more vector paths; in this embodiment, by making the shape information of the first component consistent with the storage format of the text file, the vector graphics of the component are integrated and displayed in the same way as the text, making the compatibility of graphic and text layout better. Second, icon layering information, which mainly describes the layering of vector shapes. Each layer of the icon can be composed of one or more vector paths, and the same vector path can appear in one or more layers. The same icon can use the same set or multiple sets of layering information under different rendering methods and different animation parameters. Third, default rendering parameters, which describe the color of each layer of the icon in different rendering modes (which may or may not include transparency). Fourth, animation parameters, which describe which animation types each icon supports and the control parameters corresponding to the animation types.

[0092] S803, Store icon information.

[0093] The second stage is the application stage of component information.

[0094] S804. Display a first interface, the first interface including a first component displayed in a single hierarchy.

[0095] Single-level display can be understood as the components being displayed in a single format. For example, the first component may be displayed only in blue, or the lines of the first component may be displayed in bold, or the first component may be displayed statically. These examples will not be listed in detail in the embodiments of this application.

[0096] For example, as shown in Figure 2, the first component is the icon of a sports and health application. The electronic device 100 displays a desktop (i.e., the first interface), and icon 201 (i.e., the first component) is displayed on the desktop. At this time, the lines on icon 201 are all the same color.

[0097] S805. In response to an operation on the first component, a second interface containing a first control is displayed, wherein the first control is used to trigger layered rendering of the component information of the first component.

[0098] Operations on the first component can be understood as direct operations and indirect operations. Direct operations on the first component refer to operations performed within the area where the first component is located. For example, if the first component is an icon, a direct operation could include clicking the icon; or, a direct operation could include pressing the icon. Indirect operations on the first component refer to operations performed in areas other than the area where the first component is located. For example, if the first component is an icon, an indirect operation could include double-clicking an area outside the icon; or, an indirect operation could include settings operations performed on the first component within the settings interface of a settings application.

[0099] The display format of the first control is not specifically limited. For example, the first control can be an input box control, a selection control, a drop-down option control, an confirmation control, etc. Of course, the first control can also be other forms of control, such as an add control. No specific limitations are made in the embodiments of this application.

[0100] Following the example above, electronic device 100 receives a press operation on icon 201 shown in FIG2. In response to the press operation, electronic device displays interface 301 (i.e., the second interface) shown in FIG3, on which control 3011 (i.e., the first control) is displayed. Control 3011 is used to trigger layered rendering of icon information of icon 201.

[0101] Of course, the second interface can also be a settings interface. That is, S805 is also implemented as follows: in response to an operation on the settings application, a settings interface (i.e., the second interface) is displayed for setting. This settings interface displays the permission items of each application. These permission items may include a first control. By setting the first control under each application, different display effects can be set for different applications, meeting users' personalized needs, providing high flexibility, and improving user experience. Of course, the settings interface can also directly display the first control. By operating the first control, components of all applications on the electronic device can be uniformly set. Multiple applications on the electronic device can be uniformly set, achieving a one-click setting effect and reducing operations. Of course, the above-mentioned settings interface may also include the second control described below, which is not specifically limited in this embodiment.

[0102] S806. In response to the operation on the first control, the component information of the first component is rendered in layers to obtain a rendering result. The rendering result represents the first component that can be displayed in multiple layers, and the component information of the first component that can be displayed in multiple layers is adjustable.

[0103] The operation on the first control is determined by the first control itself. For example, if the first control is an input box control, then the operation on the first control is to input "render using multi-level rendering mode" into the input box control. For example, if the first control is a selection control, then the operation on the first control is to select the selection control used to represent the multi-level rendering mode. No specific limitations are made in the embodiments of this application.

[0104] Multi-layered display can be understood as displaying multiple forms. For example, the display color of the first component can be multiple colors, such as red, yellow, and blue; or, the lines displayed in the first component can be of varying thickness, such as some lines being thin and others being thick; or, the first component can be dynamically displayed, such as flashing or moving. These are not all listed in the embodiments of this application.

[0105] In one possible implementation, in response to an operation on the first control, a multi-layer rendering mode is determined, and the first component is rendered using the multi-layer rendering mode to obtain a rendering result. In one example, in response to an operation on the first control, the electronic device layers the component information of the first component according to the multi-layer rendering mode. The rules for layering the component information are not specifically limited and can be set according to actual needs. Then, the electronic device renders the layered component information layer by layer. Finally, the rendering result of the first component is obtained. Following the above example, the electronic device receives a click operation on the control 3011 shown in Figure 3. At this time, the electronic device determines the multi-layer rendering mode and, according to the multi-layer rendering mode, layers and renders the icon information of the sports and health application. For example, the icon information may include a first vector shape and its lines being thick lines, and a second vector shape and its lines being thin lines. Then, the electronic device can layer the icon information according to the multi-layer rendering mode to obtain: the first layer is the first vector shape and its thick lines, and the second layer is the second vector shape and its thin lines. Then, the electronic device renders each layer separately to obtain the display effect of the sports and health application icon shown in Figure 4.

[0106] S807, Display a third interface, the third interface including a first component displayed in a multi-level manner.

[0107] Using the example above, as shown in Figure 4, the electronic device displays a desktop (i.e., the third interface), where the icons of the sports and health application are displayed on the desktop, with some lines being thick and others being thin.

[0108] In this embodiment of the application, by displaying the first control on the operation interface, the component information of the first component can be rendered in layers. The component information of the first component with multiple layers can be adjusted, so that the component information of the first component can be arbitrarily layered and rendered to obtain the first component with multiple layers, thus enriching the display effect of the first component.

[0109] In some embodiments, the second interface in S805 is not limited to displaying the first control; other controls may also be displayed. For example, the second interface may further include a second control, which is used to input rendering requirement information for rendering the first component. The rendering requirement information may include, but is not limited to, component attribute information, text attribute information, and animation parameters. The component attribute information can be used to edit the component's component information; for example, the component attribute information may include at least one of the following: color, size, and background. The text attribute information can be used to edit the format of the component's description information; for example, the text attribute information may include at least one of the following: font, font weight, font size, and color. The animation parameters may include, but are not limited to, animation type, animation trigger mode, animation playback timing, and animation playback count. Of course, in other embodiments, the component attribute information, text attribute information, and animation parameters included in the rendering requirement information can be input through corresponding controls. That is, the second interface may also include multiple controls, each of which is used to input different information. Therefore, the number of controls on the second interface is not limited in this embodiment; the controls need to be set according to actual needs during specific implementation.

[0110] The component display method provided in this application embodiment is described in light of the different rendering requirements. Figures 9 and 10 are schematic flowcharts of another component display method provided in this application embodiment. As shown in Figures 9 and 10, the method may include S801-S803 shown in Figure 8, and may also include S904-S908 (some steps are optional).

[0111] S904. Display a first interface, the first interface including a first component displayed in a single hierarchy.

[0112] The implementation of S904 can be found in the relevant description of S804, and will not be repeated here.

[0113] S905. In response to the operation on the first component, a second interface is displayed. The second interface also includes a second control, which is used to input rendering requirement information for rendering the first component.

[0114] The second control can be a text input control, such as an input box control. Alternatively, it can be a voice input control. Or, it can be a gesture input control, with different gestures corresponding to different rendering requirements. For example, swiping an icon from left to right would correspondingly require a left-to-right gradient animation. Similarly, tapping the icon's name to enlarge it would require increasing the font size of the icon's name.

[0115] In this embodiment of the application, by setting a second control, the user input and the component information pre-stored in the first stage can be efficiently coordinated to realize flexible calling capabilities such as rendering mode adjustment, layered color assignment, and preset animation effects.

[0116] S906. In response to the operation on the second control, the rendering request information for the first component is provided.

[0117] S907. Perform layered rendering of the component information of the first component to obtain the rendering result.

[0118] In one possible implementation, as shown in Figure 9, S907 can be implemented as follows: S9071, the rendering requirement information and component information of the first component are layered to obtain the rendering parameters of each layer. Example 1: The rendering requirement information includes motion effect parameters. Then, S9071 can be implemented as follows: Determine the layer where the motion effect parameters of the first component are located. For example, if the motion effect parameters include playback timing, then determine the layer where the playback timing of the first component is located based on the layering information corresponding to the component information of the first component; determine the rendering parameters of each layer based on the layer where the motion effect parameters of the first component are located and the layer where the component information of the first component is located. That is, the rendering parameters distributed on each layer for rendering the first component can be determined. For example, the motion effect parameters obtained through S906 and the parsed icon information are combined to determine the final behavior of the icon. When the control of the two sets of parameters on the animation effect is contradictory, the handling methods include, but are not limited to: playing the animation effect according to the behavior control parameters input in S905 (default mode); playing the animation effect according to the parameters agreed upon by the preset resources in S802; adaptively combining the intersection or union parameters of the two to play the animation effect; not playing the animation effect; etc. S9072, render the rendering parameters of each layer to obtain the rendering result corresponding to each layer. The first component of the multi-layer display is obtained by compositing the rendering results corresponding to each layer.

[0119] Accordingly, S908 displays a third interface, which includes a first component displayed in a multi-layered manner.

[0120] Following the example above, as shown in Figure 6, the electronic device displays a desktop (i.e., the third interface). On the desktop, the icon for the sports and health application has three parts: some lines are black, some are medium gray, and some are light gray. Additionally, the light gray wavy line of the icon can extend from the bottom to the right into the icon area, achieving a dynamic effect. Of course, the display effects described above are not the only possibilities in this embodiment.

[0121] In this embodiment of the application, the rendering requirement information may include motion effect parameters. By combining the motion effect parameters of the first component and the component information of the first component, the rendering parameters of each layer are determined, and the rendering results corresponding to each layer are obtained, which can achieve dynamic display effects and make the display effect of the first component richer.

[0122] In another possible implementation, as shown in Figure 10, the rendering requirement information also includes text attribute information, which is used to edit the format of the description information of the first component. Then, S907 can be implemented as follows: S9074. Obtain the edited description information of the first component based on the text attribute information. S9075. Obtain layout information based on the shape information of the first component and the edited description information of the first component. S9076. Perform layered rendering on the layout information to obtain the rendering result. In this embodiment, by inputting text attribute information on the interface, the shape information of the first component and the layout information of the description information of the first component are obtained based on the text attribute information. Then, the layout information is rendered in layers. This layered rendering, combined with the mixed text and image information, allows both dynamic and static components to use the same set of layout results and rendering parameters, making the switching between dynamic and static states very natural and smooth.

[0123] For example, the layout information includes the position identifiers of each piece of information. Accordingly, S9076 can be implemented as follows: separating and rendering the description information and shape information in the layout information to obtain the rendering result of the first component. For example, based on the position identifiers of the description information of the first component, the description information of the first component is rendered in layers to obtain a first result; based on the position identifiers of the shape information of the first component, the shape information of the first component is rendered in layers to obtain a second result; based on the first result and the second result, the rendering result of the first component is obtained. Following the above example, the font of the description information "Sports Health" of the icon in the sports and health application is drawn as KaiTi 14pt with a bold weight. The rendering information of the icon may include a first vector shape and its color being black, a second vector shape and its color being medium gray, and a third vector shape and its color being light gray. Then, the electronic device can obtain the component information in layers according to the multi-layer rendering mode: the first layer is the first vector shape and its color, the second layer is the second vector shape and its color, and the third layer is the third vector shape and its color. Afterwards, the electronic device renders each layer separately to obtain the display effect of the first component shown in Figure 6.

[0124] In this embodiment of the application, by rendering the description information and shape information in layers, the same component can also be rendered in different ways, which facilitates the formation of rich rendering results and makes the display effect of the component rich.

[0125] In another possible implementation, the component's description information and shape information are linked. For example, if the description information of a sports and health application is "Sports and Health," and its font size is 4, then the corresponding icon size of the sports and health application is 48px * 48px. As another example, if the description information of a sports and health application is "Sports and Health," and its font size is 5, then the corresponding icon size is 32px * 32px. Therefore, when the input text attribute information is "Change the font size to 5," then the icon's shape information is changed simultaneously with the change in the icon's description information, resulting in the sports and health application's name "Sports and Health" having a font size of 5 and an icon size of 32px * 32px. Of course, this embodiment is not limited to the relationships listed above; other relationships are also possible. For example, if the description information of a sports and health application is "Sports and Health," and its font weight is bolded, then the lines on the sports and health application's icon are also thickened accordingly. Therefore, this embodiment is not limited to the relationship between description information and shape information, and can be set according to the actual situation during implementation.

[0126] Accordingly, S908 displays a third interface, which includes a first component displayed in a multi-layered manner.

[0127] Following the example above, as shown in Figure 6, the electronic device displays a desktop (i.e., the third interface). The icon for the sports and health application on the desktop has three parts: some lines are black, some are medium gray, and some are light gray. Additionally, the font of the description information "Sports and Health" corresponding to the sports and health application icon has changed from 12pt to 14pt, and the font weight has been increased to bold.

[0128] In this embodiment of the application, the rendering requirements of the first component are input through the controls on the interface, so that the user can flexibly input the rendering requirements according to his or her own preferences. By combining the rendering requirements information and the component information, the rendering parameters of each layer are determined, and the rendering results of each layer are obtained, thereby obtaining a first component with rich display effects, making the display effect closer to the user's preferences and improving the user experience.

[0129] In addition, the rendering mode based on the combination of component information and input rendering requirements makes the use of components flexible. The same set of parameters can be easily passed between different components, and the same component can also easily switch between different parameters without having to repeatedly and redundantly create components with different parameters.

[0130] As shown in Figure 11, this application embodiment also provides a component display device. The device 1000 includes: a display module 1010 for displaying a first interface, the first interface including a first component displayed in a single layer; the display module 1010 is also used to display a second interface in response to an operation on the first component, the second interface including a first control, the first control being used to trigger layered rendering of the component information of the first component; a rendering module 1020 for performing layered rendering of the component information of the first component in response to an operation on the first control, obtaining a rendering result, the rendering result being used to characterize a first component that can be displayed in multiple layers, the component information of the first component displayed in multiple layers being adjustable; and the display module 1010 is also used to display a third interface, the third interface including the first component displayed in multiple layers.

[0131] In one possible implementation, the second interface further includes a second control for inputting rendering requirement information for rendering the first component; the device 1000 further includes an acquisition module 1030 for acquiring the rendering requirement information of the first component in response to the operation of the second control. A rendering module 1020 is used to layer the rendering requirement information and component information of the first component to obtain rendering parameters for each layer; to render the rendering parameters of each layer to obtain the rendering result corresponding to each layer; and the multi-layered first component is obtained by compositing the rendering results corresponding to each layer.

[0132] In one possible implementation, the rendering requirement information includes motion effect parameters; the rendering module 1020 is used to determine the layer where the motion effect parameters of the first component are located; and the rendering parameters of each layer are determined based on the layer where the motion effect parameters of the first component are located and the layer where the component information of the first component is located.

[0133] In one possible implementation, the component information of the first component includes the description information and shape information of the first component, and the rendering requirement information also includes the attribute information of the text, which is used to edit the format of the description information of the first component; the rendering module 1020 is used to obtain the edited description information of the first component based on the attribute information of the text; obtain the layout information based on the shape information and the edited description information of the first component; and perform layered rendering on the layout information to obtain the rendering result.

[0134] In one possible implementation, the layout information includes position identifiers of each piece of information; the rendering module 1020 is used to perform layered rendering of the description information of the first component according to the position identifiers of the description information of the first component to obtain a first result; to perform layered rendering of the shape information of the first component according to the position identifiers of the shape information of the first component to obtain a second result; and to obtain a rendering result based on the first result and the second result.

[0135] In one possible implementation, the component information of the first component includes the shape information and the rendering information of the first component; before displaying the first interface, the device 1000 further includes: a construction module 1040, used to construct the shape information of the first component according to the font mechanism; and to construct the rendering information of the first component according to the shape information of the first component, wherein the rendering information includes at least one of the following: layering information, rendering parameters and motion effect parameters.

[0136] In one possible implementation, the shape information of the first component is consistent with the storage format of the font library file.

[0137] In one possible implementation, the first component includes at least one of an icon or a control.

[0138] It should be understood that the device shown in Figure 11 is only illustrated by the division of the above-described functional modules. In practical applications, the functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above. Furthermore, the device and method embodiments provided in the above embodiments belong to the same concept, and their specific implementation process is detailed in the method embodiments, which will not be repeated here.

[0139] Referring to FIG12, FIG12 shows a schematic diagram of the structure of an electronic device 1100 provided in an exemplary embodiment of this application. The electronic device 1100 shown in FIG12 is used to perform the operations involved in the component display method shown in FIG8-FIG10 above. The electronic device 1100 can be implemented by a general bus architecture. As shown in FIG12, the electronic device 1100 includes at least one processor 1101, a memory 1103, and at least one communication interface 1104.

[0140] Processor 1101 may be, for example, a general-purpose central processing unit (CPU), a digital signal processor (DSP), a network processor (NP), a graphics processing unit (GPU), a neural-network processing unit (NPU), a data processing unit (DPU), a microprocessor, or one or more integrated circuits for implementing the solutions of this application. For example, processor 1101 includes an application-specific integrated circuit (ASIC), a programmable logic device (PLD), or other programmable logic devices, transistor logic devices, hardware components, or any combination thereof. A PLD may be, for example, a complex programmable logic device (CPLD), a field-programmable gate array (FPGA), generic array logic (GAL), or any combination thereof. It can implement or execute the various logic blocks, modules, and circuits described in connection with the embodiments of this application. A processor may also be a combination that implements computational functions, such as including one or more microprocessor combinations, a combination of a DSP and a microprocessor, etc.

[0141] Optionally, the electronic device 1100 also includes a bus. The bus is used to transfer information between the components of the electronic device 1100. The bus can be a peripheral component interconnect (PCI) bus or an extended industry standard architecture (EISA) bus, etc. Buses can be categorized as address buses, data buses, control buses, etc. For ease of illustration, only one thick line is used in Figure 11, but this does not indicate that there is only one bus or one type of bus.

[0142] Memory 1103 may be, for example, read-only memory (ROM) or other types of static storage devices capable of storing static information and instructions; random access memory (RAM) or other types of dynamic storage devices capable of storing information and instructions; electrically erasable programmable read-only memory (EEPROM); compact disc read-only memory (CD-ROM) or other optical disc storage, optical disc storage (including compressed optical discs, laser discs, optical discs, digital versatile optical discs, Blu-ray discs, etc.); magnetic disk storage media or other magnetic storage devices; or any other medium capable of carrying or storing desired program code in the form of instructions or data structures and accessible by a computer, but not limited thereto. Memory 1103 may exist independently and be connected to processor 1101 via a bus. Memory 1103 may also be integrated with processor 1101.

[0143] Communication interface 1104 uses any transceiver-like device for communicating with other devices or communication networks, such as Ethernet, Radio Access Network (RAN), or Wireless Local Area Network (WLAN). Communication interface 1104 may include wired and wireless communication interfaces. Specifically, communication interface 1104 may be an Ethernet interface, a Fast Ethernet (FE) interface, a Gigabit Ethernet (GE) interface, an Asynchronous Transfer Mode (ATM) interface, a WLAN interface, a cellular network communication interface, or a combination thereof. The Ethernet interface may be an optical interface, an electrical interface, or a combination thereof. In this embodiment, communication interface 1104 can be used by electronic device 1100 to communicate with other devices.

[0144] In a specific implementation, as one embodiment, processor 1101 may include one or more CPUs, such as CPU0 and CPU1 shown in FIG12. Each of these processors may be a single-core processor or a multi-core processor. Here, processor may refer to one or more devices, circuits, and / or processing cores for processing data (e.g., computer program instructions).

[0145] In a specific implementation, as one embodiment, electronic device 1100 may include multiple processors, such as processor 1101 and processor 1105 as shown in FIG12. Each of these processors may be a single-core processor (single-CPU) or a multi-core processor (multi-CPU). Here, a processor may refer to one or more devices, circuits, and / or processing cores for processing data (such as computer program instructions).

[0146] In a specific implementation, as one embodiment, the electronic device 1100 may further include an output device and an input device. The output device communicates with the processor 1101 and can display information in various ways. For example, the output device may 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 1101 and can receive user input in various ways. For example, the input device may be a mouse, a keyboard, a touchscreen device, or a sensing device, etc.

[0147] In some embodiments, memory 1103 is used to store program code 1110 for executing the solution of this application, and processor 1101 can execute the program code 1110 stored in memory 1103. That is, electronic device 1100 can implement the component display method provided in the method embodiment through processor 1101 and program code 1110 in memory 1103. Program code 1110 may include one or more software modules. Optionally, processor 1101 itself may also store program code or instructions for executing the solution of this application.

[0148] In a specific embodiment, the electronic device 1100 of this application embodiment may correspond to the computing device in the above-described method embodiments.

[0149] The steps of the component display method shown in Figures 8-10 are completed by the integrated logic circuits of the hardware or by software instructions in the processor of the electronic device 1100. The steps of the method disclosed in the embodiments of this application can be directly manifested as being executed by the hardware processor, or by a combination of hardware and software modules in the processor. The software modules can be located in random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, registers, or other mature storage media in the art. Since the storage medium is located in memory, the processor reads information from the memory and, in conjunction with its hardware, completes the steps of the above method; to avoid repetition, these will not be described in detail here.

[0150] This application also provides an electronic device, which includes a processor for loading and executing at least one instruction to enable the electronic device to implement the component display method provided in this application. Optionally, the device further includes a memory coupled to the processor for storing at least one instruction.

[0151] This application also provides a computer-readable storage medium storing at least one instruction, which is loaded and executed by a processor to enable a computer to implement any of the component display methods described above.

[0152] This application also provides a computer program (product) that, when executed by a computer, causes the processor or computer to perform the corresponding steps and / or processes in the above method embodiments.

[0153] This application also provides a chip including a processor for calling and executing instructions stored in a memory, causing a communication device equipped with the chip to perform any of the component display methods described above.

[0154] This application embodiment also provides another chip, including: an input interface, an output interface, a processor, and a memory. The input interface, the output interface, the processor, and the memory are connected through an internal connection path. The processor is used to execute code in the memory. When the code is executed, the processor is used to execute any of the component display methods described above.

[0155] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in this application are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium accessible to a computer or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid-state disk).

[0156] It should be noted that all information (including but not limited to user device information, user personal information, etc.), data (including but not limited to data used for analysis, stored data, displayed data, etc.), and signals involved in this application have been authorized by the user or fully authorized by all parties, and the collection, use, and processing of related data must comply with the relevant laws, regulations, and standards of the relevant countries and regions. For example, the setting results involved in this application were obtained with full authorization.

[0157] Those skilled in the art will recognize that the method steps and modules described in conjunction with the embodiments disclosed herein can be implemented in software, hardware, firmware, or any combination thereof. To clearly illustrate the interchangeability of hardware and software, the steps and components of each embodiment have been generally described in terms of functionality in the foregoing description. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0158] Those skilled in the art will understand that all or part of the steps of the above embodiments can be implemented by hardware or by a program instructing related hardware. The program can be stored in a computer-readable storage medium, such as a read-only memory, a disk, or an optical disk.

[0159] When implemented using software, it can be implemented wholly or partially as a computer program product. This computer program product includes one or more computer program instructions. As an example, the methods of this application embodiment can be described in the context of machine-executable instructions, such as program modules that execute on a device on a real or virtual processor of the target. Generally, program modules include routines, programs, libraries, objects, classes, components, data structures, etc., which perform specific tasks or implement specific abstract data structures. In various embodiments, the functionality of program modules can be combined or divided among the described program modules. The machine-executable instructions for the program modules can execute within a local or distributed device. In a distributed device, the program modules can reside on both local and remote storage media.

[0160] Computer program code used to implement the methods of the embodiments of this application may be written in one or more programming languages. This computer program code may be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable component display device, such that when executed by the computer or other programmable component display device, the program code causes the functions / operations specified in the flowcharts and / or block diagrams to be implemented. The program code may be executed entirely on a computer, partially on a computer, as a standalone software package, partially on a computer and partially on a remote computer, or entirely on a remote computer or server.

[0161] In the context of the embodiments of this application, computer program code or related data may be carried by any suitable carrier to enable a device, apparatus, or processor to perform the various processes and operations described above. Examples of carriers include signals, computer-readable media, etc.

[0162] Examples of signals may include electrical, optical, radio, sound, or other forms of propagation signals, such as carrier waves, infrared signals, etc.

[0163] A machine-readable medium can be any tangible medium that contains or stores programs for or relating to an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. Machine-readable media can include, but are not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination thereof. More detailed examples of machine-readable storage media include electrical connections with one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0164] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and modules described above can be found in the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0165] In the embodiments provided in this application, it should be understood that the disclosed systems, devices, and methods can be implemented in other ways. For example, the device embodiments described above are merely illustrative; for instance, the division of modules is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple modules or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the couplings or direct couplings or communication connections shown or discussed may be indirect couplings or communication connections through some interfaces, devices, or modules, or they may be electrical, mechanical, or other forms of connection.

[0166] The modules described as separate components may or may not be physically separate. Similarly, the components shown as modules may or may not be physical modules; they may be located in one place or distributed across multiple network modules. Some or all of the modules can be selected to achieve the purpose of the embodiments of this application, depending on actual needs.

[0167] Furthermore, the functional modules in the various embodiments of this application can be integrated into one processing module, or each module can exist physically separately, or two or more modules can be integrated into one module. The integrated modules described above can be implemented in hardware or as software functional modules.

[0168] If the integrated module is implemented as a software functional module and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0169] In this application, the terms "first," "second," etc., are used to distinguish identical or similar items that have substantially the same function and purpose. It should be understood that there is no logical or temporal dependency between "first," "second," and "nth," nor does it limit the quantity or order of execution. It should also be understood that although the following description uses the terms "first," "second," etc., to describe various elements, these elements should not be limited by the terms. These terms are merely used to distinguish one element from another. For example, without departing from the various examples described, a first image can be referred to as a second image, and similarly, a second image can be referred to as a first image. Both the first image and the second image can be images, and in some cases, they can be separate and distinct images.

[0170] It should also be understood that, in the various embodiments of this application, the sequence number of each process does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0171] In this application, the term "at least one" means one or more, and the term "multiple" means two or more. For example, multiple second messages refer to two or more second messages. The terms "system" and "network" are often used interchangeably in this document.

[0172] It should be understood that the terminology used in the description of the various examples herein is for the purpose of describing particular examples only and is not intended to be limiting. As used in the description of the various examples and the appended claims, the singular forms “a” and “the” are intended to include the plural forms as well, unless the context clearly indicates otherwise.

[0173] It should also be understood that the term "and / or" as used herein refers to and covers any and all possible combinations of one or more of the associated listed items. The term "and / or" describes an association between related objects, indicating that three relationships can exist; for example, A and / or B can represent: A alone, A and B simultaneously, or B alone. Additionally, the character " / " in this application generally indicates that the preceding and following related objects are in an "or" relationship.

[0174] It should also be understood that the term “comprising” (also referred to as “includes”, “including”, “comprises” and / or “comprising”) as used in this specification specifies the presence of the stated features, integers, steps, operations, elements, and / or components, but does not exclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and / or groups thereof.

[0175] It should also be understood that the terms “if” and “if” can be interpreted as meaning “when” or “upon”, or “in response to determination” or “in response to detection”. Similarly, depending on the context, the phrases “if determination…” or “if detection [the stated condition or event]” can be interpreted as meaning “when determination…”, or “in response to determination…”, or “when detection [the stated condition or event]” or “in response to detection [the stated condition or event]”.

[0176] It should be understood that determining B based on A does not mean determining B solely based on A; B can also be determined based on A and / or other information.

[0177] It should also be understood that the phrases "an embodiment," "an embodiment," and "a possible implementation" used throughout the specification mean that a specific feature, structure, or characteristic related to an embodiment or implementation is included in at least one embodiment of this application. Therefore, the phrases "in an embodiment," "an embodiment," or "a possible implementation" appearing throughout the specification do not necessarily refer to the same embodiment. Furthermore, these specific features, structures, or characteristics can be combined in any suitable manner in one or more embodiments.

Claims

1. A component display method, characterized in that, The method includes: Displaying a first interface, the first interface including a first component displayed in a single hierarchy; In response to an operation on the first component, a second interface is displayed. The second interface includes a first control, which is used to trigger layered rendering of the component information of the first component. In response to the operation on the first control, the component information of the first component is rendered in layers to obtain a rendering result. The rendering result is used to characterize the first component that can be displayed in multiple layers, and the component information of the first component that can be displayed in multiple layers is adjustable. The third interface is displayed, which includes a first component displayed in a multi-level manner.

2. The method according to claim 1, characterized in that, The second interface further includes a second control, which is used to input rendering requirements information for rendering the first component; the method further includes: In response to an operation on the second control, obtain the rendering requirement information of the first component; The step of performing layered rendering of the component information of the first component to obtain the rendering result includes: The rendering requirements information and component information of the first component are layered to obtain the rendering parameters of each layer. The rendering parameters of each layer are rendered to obtain the rendering result corresponding to each layer. The first component of the multi-layer display is obtained by compositing the rendering results corresponding to each layer.

3. The method according to claim 2, characterized in that, The rendering requirements include motion effect parameters; The rendering requirements information and component information of the first component are layered to obtain the rendering parameters of each layer, including: Determine the layer containing the animation parameters of the first component; The rendering parameters of each layer are determined based on the layer containing the animation parameters of the first component and the layer containing the component information of the first component.

4. The method according to claim 2 or 3, characterized in that, The component information of the first component includes the description information and shape information of the first component. The rendering requirement information also includes the attribute information of the text, which is used to edit the format of the description information of the first component. The step of performing layered rendering of the component information of the first component to obtain the rendering result includes: Based on the attribute information of the text, the edited description information of the first component is obtained; Based on the shape information of the first component and the description information of the edited first component, the layout information is obtained; The layout information is rendered in layers to obtain the rendering result.

5. The method according to claim 4, characterized in that, The layout information includes the position identifiers of each piece of information; the layered rendering of the layout information to obtain the rendering result includes: Based on the location identifier of the description information of the first component, the description information of the first component is rendered in layers to obtain the first result; Based on the position identifier of the shape information of the first component, the shape information of the first component is rendered in layers to obtain the second result; Based on the first result and the second result, the rendering result is obtained.

6. The method according to any one of claims 1-5, characterized in that, The component information of the first component includes the shape information and rendering information of the first component; before displaying the first interface, the method further includes: Based on the font mechanism, construct the shape information of the first component; Based on the shape information of the first component, the rendering information of the first component is constructed, and the rendering information includes at least one of the following: layering information, rendering parameters, and motion effect parameters.

7. The method according to claim 6, characterized in that, The shape information of the first component is consistent with the storage format of the font library file.

8. The method according to any one of claims 1-7, characterized in that, The first component includes at least one of an icon or a control.

9. A component display device, characterized in that, The device includes: A display module is used to display a first interface, the first interface including a first component displayed in a single hierarchy; The display module is further configured to display a second interface in response to an operation on the first component. The second interface includes a first control, which is configured to trigger layered rendering of the component information of the first component. A rendering module is used to respond to the operation of the first control, perform layered rendering of the component information of the first component, and obtain a rendering result. The rendering result is used to characterize the first component that can be displayed in multiple layers, and the component information of the first component that can be displayed in multiple layers is adjustable. The display module is also used to display a third interface, which includes a first component displayed in a multi-layered manner.

10. An electronic device, characterized in that, The device includes a memory and a processor; the memory stores at least one instruction, which is loaded and executed by the processor to enable the electronic device to perform the method of any one of claims 1-8.

Images