Interface display method, electronic device, and storage medium

Abstract

The present application relates to the technical field of terminals., and provides an interface display method, an electronic device, and a storage medium. The method comprises: determining, in a target interface to be displayed, that a first drawing node to be drawn and a plurality of child nodes not obscuring the first drawing node and not obscured by the first drawing node are all drawing nodes to undergo blurring processing in a background; if it is determined that a stored background picture is present, the background picture being a picture subjected to blurring processing on the basis of blurring parameters respectively corresponding to the first drawing node and the plurality of child nodes, then cropping the background picture to obtain background regions respectively corresponding to the positions of the first drawing node and the plurality of child nodes, and obtaining a blurred picture; and, after the blurred picture is drawn at the positions corresponding to the first drawing node and the plurality of child nodes, drawing content of the first drawing node and the plurality of child nodes on an image layer one layer above the blurred picture, and generating and then displaying the target interface. Thus, background blurring is simultaneously performed for the first drawing node and the plurality of child nodes thereof, so that the efficiency of background blurring is improved, and device power consumption is reduced.

Description

Interface display method, electronic device and storage medium

[0001] This application claims priority to the Chinese patent application filed with the State Intellectual Property Office on December 22, 2023, with application number 202311814473.0 and invention name “An interface display method, electronic device and storage medium”, the entire contents of which are incorporated by reference into this application. Technical Field

[0002] The embodiments of the present application relate to the field of terminal technology, and in particular to an interface display method, an electronic device, and a storage medium. Background Art

[0003] In order to achieve better interface display effects, electronic devices blur the background of the interface in scenarios such as the notification bar, status bar, pop-up windows, and cards to increase the quality of the display interface, highlight the design aesthetics of the interface, and enhance the user experience.

[0004] In related technologies, systems typically use real-time background blurring to blur the background of each interface control in the display interface. However, when the display content of the display interface is updated but the interface controls are not, the system must not only obtain the background image corresponding to the background of each interface control, but also blur the obtained background images separately, which has a certain impact on device performance and power consumption.

[0005] Summary of the Invention

[0006] An embodiment of the present application provides an interface display method, an electronic device, and a storage medium. By simultaneously blurring the background of a drawing node to be blurred and multiple sub-nodes that do not obstruct each other, the efficiency of blurring the background of a target interface is improved and the power consumption of the device is reduced.

[0007] To achieve the above objectives, the embodiments of the present application adopt the following technical solutions:

[0008] In a first aspect, a method for displaying an interface is provided, the method comprising:

[0009] Determine a first drawing node to be drawn in a target interface to be displayed as a target drawing node, where the target drawing node refers to a drawing node and multiple subnodes of the drawing node that do not obstruct each other, all of which are drawing nodes whose background is to be blurred. If it is determined that there is a stored background image, and the background image is an image blurred based on blur parameters corresponding to the first drawing node and multiple subnodes, then crop the background areas corresponding to the positions of the first drawing node and multiple subnodes from the background image to obtain a blurred image. After drawing the blurred image to the corresponding positions of the first drawing node and the multiple subnodes, draw the contents of the first drawing node and the multiple subnodes on an upper layer of the blurred image to generate a target interface. Display the target interface, where the target interface includes interface controls corresponding to the first drawing node and the multiple subnodes, and the background area of ​​the interface controls is the blurred image after the blurring.

[0010] It can be understood that the electronic device simultaneously performs background blurring on the first drawing node and multiple sub-nodes of the first drawing node that do not block each other, thereby obtaining a blurred image, thereby improving the efficiency of background blurring and reducing the power consumption of the device.

[0011] Since electronic devices can store blurred background images, they can directly crop the background area corresponding to the position of each target drawing node from the blurred background image, without having to obtain the background image once and blur the obtained background image separately when drawing the target drawing node. By reducing the number of times the background image is obtained and blurred, the purpose of saving system power consumption is achieved.

[0012] As a possible implementation of the first aspect, drawing the first drawing node and the contents of multiple sub-nodes on a layer above the blurred image to generate a target interface includes:

[0013] Determine whether the first drawing node and multiple child nodes are all off-screen rendering nodes;

[0014] If the first drawing node and multiple child nodes are all off-screen rendering nodes, an off-screen image is drawn on the upper layer of the blurred image to generate a target interface. The off-screen image is obtained by pre-drawing the contents of the first drawing node and child nodes off-screen, and the off-screen image is drawn when the target interface is drawn for the first time or when the content of the off-screen rendering node in the target interface is updated.

[0015] This can be understood as follows: when a first drawing node and its multiple, mutually non-blocking child nodes are all off-screen rendering nodes, the contents of the first drawing node and its multiple child nodes are rendered off-screen to produce an off-screen image. When drawing the first drawing node, the first drawing node and its multiple child nodes are determined to be nodes whose background is to be blurred. The electronic device then crops the blurred image corresponding to the positions of the first drawing node and its multiple child nodes from the background image, draws the blurred image on the canvas, and draws the off-screen image on a layer above the blurred image to generate the target interface.

[0016] It can be seen that when the first drawing node and its multiple child nodes are both off-screen rendering nodes and nodes whose background is to be blurred, when drawing the first drawing node and its multiple child nodes, by obtaining off-screen images to replace the original drawing instructions, and blurring the background of the first drawing node and its multiple child nodes at the same time, not only the efficiency of node drawing is improved, but also the efficiency of background blurring is improved, thereby achieving the purpose of reducing device power consumption.

[0017] It also needs to be explained that the electronic device will only draw the off-screen image corresponding to the off-screen rendering node on the off-screen canvas when it draws the off-screen rendering node for the first time or the off-screen rendering content is updated. There is no need to draw the content of the off-screen rendering node every time the target interface is drawn, which improves the drawing efficiency of the target interface.

[0018] As another possible implementation of the first aspect, before drawing the off-screen image on a layer above the blurred image and generating the target interface, the method further includes:

[0019] Traversing to the first drawing node of the target interface, determining whether the first drawing node and multiple child nodes are off-screen rendering nodes based on whether the attribute information of the first drawing node includes an off-screen rendering flag; if the first drawing node and multiple child nodes are off-screen rendering nodes, drawing the contents of the first drawing node and multiple child nodes onto a corresponding off-screen canvas to generate a corresponding off-screen image.

[0020] In other words, if a drawing node requires off-screen rendering, the drawing node's attribute information stores an off-screen rendering flag. The electronic device can traverse each drawing node in the target interface and determine whether the drawing node requires off-screen rendering based on whether the off-screen rendering flag is stored in the drawing node's attribute information. As a result, the electronic device performs off-screen rendering on the first drawing node and its child nodes, generating an off-screen image. When drawing the first drawing node and its child nodes, there is no need to call drawing instructions, reducing the power consumption of node drawing.

[0021] As another possible implementation of the first aspect, the interface display method may further include:

[0022] Determine whether the first drawing node and multiple child nodes are drawing nodes whose backgrounds are to be blurred; if only the first drawing node is the drawing node whose background is to be blurred, store the position information of the first drawing node in the attribute information of the drawing node; if the first drawing node and multiple child nodes are all drawing nodes whose backgrounds are to be blurred, store the position information of the first drawing node and multiple child nodes in the attribute information of the target drawing node.

[0023] Draw the blurred image to the corresponding positions of the first drawing node and multiple child nodes, including:

[0024] According to the position information of the first drawing node and the plurality of sub-nodes stored in the attribute information, the blurred image is drawn to the corresponding positions of the first drawing node and the plurality of sub-nodes.

[0025] When rendering an off-screen rendering node, the position information of the first rendering node whose background is to be blurred is stored in the attribute information of the rendering node. Alternatively, the position information of the first rendering node whose background is to be blurred and its child nodes are stored in the attribute information of the first rendering node. When traversing to the first rendering node during the rendering of the target interface, the background of the first rendering node and its multiple child nodes are blurred simultaneously, thereby improving the efficiency of background blurring.

[0026] As another possible implementation of the first aspect, the attribute information of the first drawing node stores blur parameters corresponding to the first drawing node and the multiple child nodes, respectively, where the blur parameters include a blur radius. The interface display method may further include:

[0027] If it is determined that there is a stored background image, and the background image has not been blurred based on the blur parameters corresponding to the first drawing node and the multiple child nodes, a corresponding blur filter is generated according to the blur radii corresponding to the target drawing node and the multiple child nodes, and the blur filters corresponding to the target drawing node and the multiple child nodes are used to blur the positions corresponding to the first drawing node and the multiple child nodes in the background image to obtain a blurred background image; and the background areas corresponding to the position information of the first drawing node and the multiple child nodes are cropped from the blurred background image to obtain a blurred image.

[0028] The blur radius is used to represent the blurriness of the background image. That is, a larger blur radius indicates a blurrier background image, while a smaller blur radius indicates a clearer background image.

[0029] It can be understood that the electronic device determines that the stored background image has not been blurred, and uses the blur radius corresponding to the first drawing node and multiple sub-nodes to blur corresponding areas in the background image respectively.

[0030] As another possible implementation manner of the first aspect, the position information of the child node is the relative position of the child node and the first drawing node.

[0031] As another possible implementation of the first aspect, the method is applied to an electronic device, the electronic device including an application layer, a framework layer, and a system library, the application layer including a target application, and the method further includes:

[0032] After the electronic device obtains the fuzzy parameters and off-screen rendering identifier of the first drawing node based on the target application in the application layer, the target application sends the fuzzy parameters and off-screen rendering identifier to the corresponding first drawing node in the framework layer; the first drawing node in the framework layer sends the fuzzy parameters and off-screen rendering identifier to the corresponding first drawing node in the system library; after receiving the fuzzy parameters and off-screen rendering identifier, the first drawing node in the system library stores the fuzzy parameters and off-screen rendering identifier in the corresponding attribute information.

[0033] It can be understood that the electronic device obtains the blur parameters and off-screen rendering identifier of the drawing node based on the target application of the application layer and sends them to the drawing node corresponding to each interface control. After storing the blur parameters and off-screen rendering identifier of the drawing node as parameters in the attribute information corresponding to the drawing node, the electronic device determines that the first drawing node is a node that has been off-screen rendered and the background is to be blurred from the blur parameters and off-screen rendering identifier of the first drawing node stored in the attribute information of the first drawing node during the process of drawing the first drawing node. The electronic device directly crops the background area corresponding to the position of the first drawing node from the background image, uses the blurred image as the background of the area of ​​the first drawing node, and directly draws the off-screen image on the upper layer of the blurred image. Since the electronic device can store the off-screen image drawn off-screen, it can directly obtain the off-screen image without repeatedly drawing the content of the first drawing node and its child nodes. By reducing the number of times the off-screen rendering node is drawn, the purpose of saving system power consumption is achieved.

[0034] In addition, the electronic device can also send the image identifier obtained based on the target application of the application layer to the drawing node corresponding to each interface control, and after storing the icon identifier as a parameter in the attribute information corresponding to the drawing node, the electronic device determines the target drawing node and obtains the background image from the position indicated by the icon identifier stored in the attribute information of the target drawing node. The electronic device directly crops the background area corresponding to the position of the target drawing node from the background image and uses the target image as the background of the area corresponding to the control of the target drawing node. Since the electronic device can store the blurred background image, it can directly crop the background area corresponding to the position of each target drawing node from the blurred background image, without having to obtain the background image once each time the target drawing node is drawn and blurring the obtained background image. By reducing the number of times the background image is obtained and blurred, the purpose of saving system power consumption is achieved.

[0035] In a second aspect, the present application provides an electronic device, including an application layer, a framework layer, and a system library. The application layer includes a target application. After the electronic device obtains the fuzzy parameters and off-screen rendering identifier of the first drawing node based on the target application of the application layer, the target application sends the fuzzy parameters and off-screen rendering identifier to the corresponding first drawing node of the framework layer. The first drawing node of the framework layer sends the fuzzy parameters and off-screen rendering identifier to the corresponding first drawing node in the system library. After receiving the fuzzy parameters and off-screen rendering identifier, the first drawing node in the system library stores the fuzzy parameters and off-screen rendering identifier in the corresponding attribute information.

[0036] In a third aspect, the present application provides an electronic device comprising: one or more processors; a memory; wherein the memory stores one or more computer programs, and the one or more computer programs include instructions, which, when executed by the electronic device, enable the electronic device to execute an interface display method as described in any one of the first aspects above.

[0037] In a fourth aspect, the present application provides a computer-readable storage medium, in which instructions are stored. When the instructions are executed on an electronic device, the electronic device executes the interface display method as described in any one of the first aspects.

[0038] In a fifth aspect, the present application provides a computer program product, which includes computer instructions. When the computer instructions are executed on an electronic device, the electronic device executes the interface display method as described in any one of the first aspects.

[0039] It can be understood that the electronic devices described in the second and third aspects, the computer storage medium described in the fourth aspect, and the computer program product described in the fifth aspect are all used to execute the corresponding methods provided above. Therefore, the beneficial effects that can be achieved can refer to the beneficial effects in the corresponding methods provided above, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] FIG1 is an example diagram of a drawing interface in the related art;

[0041] FIG2 is a schematic structural diagram of an electronic device provided in an embodiment of the present application;

[0042] FIG3 is a software structure diagram of an electronic device provided in an embodiment of the present application;

[0043] FIG4 is a schematic diagram of the structure of a rendering tree provided in an embodiment of the present application;

[0044] FIG5 is an example diagram of an interface provided in an embodiment of the present application;

[0045] FIG6 is an example diagram of coordinate information of a drawing node in a screen coordinate system provided by an embodiment of the present application;

[0046] FIG7 is a flow chart of an interface display method provided in an embodiment of the present application;

[0047] FIG8 is an example diagram of off-screen rendering provided by an embodiment of the present application;

[0048] FIG9 is an example diagram of an interface drawing provided by an embodiment of the present application;

[0049] FIG10 is an example diagram of another interface drawing provided by an embodiment of the present application;

[0050] FIG11 is an example diagram of background blur provided by an embodiment of the present application;

[0051] FIG12 is an example diagram of another interface drawing provided in an embodiment of the present application. DETAILED DESCRIPTION

[0052] The following describes the technical solutions in the embodiments of the present application in conjunction with the accompanying drawings. In the description of the embodiments of the present application, unless otherwise specified, " / " represents "or." For example, A / B can represent A or B. "And / or" in this document is merely a description of the association relationship between associated objects, indicating that three relationships can exist. For example, A and / or B can represent: A exists alone, A and B exist simultaneously, or B exists alone.

[0053] In the following, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of the technical features indicated. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features. In the description of the embodiments of this application, unless otherwise specified, "plurality" means two or more.

[0054] In the embodiments of this application, words such as "exemplary" or "for example" are used to indicate examples, illustrations, or descriptions. Any embodiment or design described as "exemplary" or "for example" in the embodiments of this application should not be interpreted as being preferred or advantageous over other embodiments or designs. Rather, the use of words such as "exemplary" or "for example" is intended to present the relevant concepts in a concrete manner.

[0055] In related technologies, in order to achieve a better interface display effect, in some scenarios, electronic devices will blur the background area of ​​the interface controls displayed in the interface. The interface controls correspond to the drawing nodes. When an electronic device blurs the background area of ​​a drawing node, it typically traverses the drawing node corresponding to each interface control, obtains the background image corresponding to the drawing node in turn, blurs the obtained background image, and then blurs the background area of ​​the drawing node based on the blurred background image.

[0056] When drawing an interface in a scenario where the content displayed on the display interface is updated but the controls in the interface are not updated, the interface controls still need to be redrawn. When an electronic device draws a large number of interface controls, it will cause the electronic device to execute more drawing instructions, which will have a certain impact on the performance and power consumption of the device.

[0057] For example, as shown in Figure 1, when an electronic device is drawing the interface of a gallery application, the electronic device needs to redraw the interface when the content of area 106 is updated. In this case, the electronic device needs to blur the background areas of control 102, search toolbar 103, and control 104 in area 101, and draw the content of control 102, search toolbar 103, and control 104 respectively. The electronic device also needs to blur the background areas of the "Photos" control, "Album" control, "Moments" control, and "Discover" control in area 105, and draw the content of these four controls respectively.

[0058] An embodiment of the present application provides an interface display method, in which an electronic device determines that a first drawing node to be drawn in a target interface to be displayed is a target drawing node. If it is determined that there is a stored background image, and the background image is an image that has been blurred based on blur parameters corresponding to the first drawing node and multiple sub-nodes, background areas corresponding to the positions of the first drawing node and multiple sub-nodes are cropped from the background image to obtain a blurred image; after drawing the blurred image to the corresponding positions of the first drawing node and the multiple sub-nodes, the contents of the first drawing node and the multiple sub-nodes are drawn on an upper layer of the blurred image to generate a target interface; and the target interface is displayed, where the target interface includes interface controls corresponding to the first drawing node and the multiple sub-nodes, and the background area of ​​the interface controls is the blurred image that has been blurred.

[0059] The target drawing node refers to a drawing node and multiple sub-nodes of the drawing node that do not block each other, and are all drawing nodes whose backgrounds are to be blurred.

[0060] Thus, the electronic device simultaneously performs background blurring on the first drawing node and multiple sub-nodes of the first drawing node that do not block each other, thereby obtaining a blurred image, improving the efficiency of background blurring and reducing the power consumption of the device.

[0061] For example, the interface display method provided in the embodiments of the present application can be applied to mobile phones, tablet computers, personal computers (PCs), personal digital assistants (PDAs), smart watches, netbooks, wearable electronic devices, augmented reality (AR) devices, virtual reality (VR) devices, vehicle-mounted devices, smart cars, smart speakers, and other electronic devices with display screens, and the embodiments of the present application do not impose any restrictions on this.

[0062] As shown in FIG2 , FIG2 is a structural diagram of an electronic device provided in an embodiment of the present application.

[0063] The electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0064] It should be understood that the structures illustrated in the embodiments of the present application do not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may include more or fewer components than shown, or may combine or separate certain components, or arrange the components differently. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0065] The processor 110 may include one or more processing units. For example, the processor 110 may include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU). The different processing units may be independent devices or integrated into one or more processors.

[0066] The controller may be the nerve center and command center of the electronic device 100. The controller may generate an operation control signal according to the instruction operation code and the timing signal to complete the control of fetching and executing instructions.

[0067] Processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in processor 110 is a cache memory. This memory can store instructions or data that have just been used or are being recycled by processor 110. If processor 110 needs to use the same instruction or data again, it can directly retrieve it from the memory. This avoids duplicate accesses, reduces processor 110 latency, and thus improves system efficiency.

[0068] In some embodiments, the processor 110 may include one or more interfaces. The interfaces may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a subscriber identity module (SIM) interface, and / or a universal serial bus (USB) interface.

[0069] It is understood that the interface connection relationship between the modules illustrated in the embodiments of the present application is merely an illustrative illustration and does not constitute a structural limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may also adopt different interface connection methods from the above embodiments, or a combination of multiple interface connection methods.

[0070] The wireless communication function of the electronic device 100 can be implemented through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor and the baseband processor.

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

[0072] The mobile communication module 150 can provide solutions for wireless communications including 2G / 3G / 4G / 5G applied to the electronic device 100. The mobile communication module 150 may include at least one filter, a switch, a power amplifier, a low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves from the antenna 1, and filter, amplify, and process the received electromagnetic waves, and transmit them to the modulation and demodulation processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modulation and demodulation processor, and convert it into electromagnetic waves for radiation through the antenna 1. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the processor 110. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the same device as at least some of the modules of the processor 110.

[0073] The wireless communication module 160 can provide wireless communication solutions including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR), etc., which are applied to the electronic device 100. The wireless communication module 160 can be one or more devices that integrate at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, frequency modulates and filters the electromagnetic wave signals, and sends the processed signals to the processor 110. The wireless communication module 160 can also receive the signal to be sent from the processor 110, frequency modulate it, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2.

[0074] In some embodiments, antenna 1 of electronic device 100 is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, so that electronic device 100 can communicate with a network and other devices via wireless communication technology. Wireless communication technology may include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), wideband code division multiple access (WCDMA), time-division code division multiple access (TD-SCDMA), long term evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technology. GNSS may include the global positioning system (GPS), the global navigation satellite system (GLONASS), the Beidou navigation satellite system (BDS), the quasi-zenith satellite system (QZSS) and / or the satellite based augmentation system (SBAS).

[0075] Electronic device 100 implements display functionality through a GPU, display screen 194, and an application processor. A GPU is a microprocessor for image processing that connects display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. Processor 110 may include one or more GPUs that execute program instructions to generate or modify display information.

[0076] Display screen 194 is used to display images, videos, and the like. Display screen 194 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, a MicroLED, a Micro-oLed, or a quantum dot light-emitting diode (QLED). In some embodiments, electronic device 100 may include one or N display screens 194, where N is a positive integer greater than one.

[0077] The electronic device 100 can implement a shooting function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, and an application processor.

[0078] The digital signal processor is used to process digital signals. In addition to processing digital image signals, it can also process other digital signals. For example, when the electronic device 100 selects a frequency point, the digital signal processor is used to perform Fourier transform on the frequency point energy.

[0079] Video codecs are used to compress or decompress digital video. Electronic device 100 may support one or more video codecs. This allows electronic device 100 to play or record videos in various encoding formats, such as Moving Picture Experts Group (MPEG) 1, MPEG2, MPEG3, and MPEG4.

[0080] The NPU is a neural network (NN) computing processor. Drawing on the structure of biological neural networks, such as the transmission patterns between neurons in the human brain, it rapidly processes input information and can continuously self-learn. The NPU can enable intelligent cognitive applications in electronic device 100, such as image recognition, face recognition, speech recognition, and text comprehension.

[0081] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 via the external memory interface 120 to implement data storage functions. For example, files such as music and videos can be stored on the external memory card.

[0082] The internal memory 121 can be used to store computer executable program codes, and the executable program codes include instructions. The processor 110 executes various functional applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 121. The internal memory 121 may include a program storage area and a data storage area. Among them, the program storage area can store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc. The data storage area can store data created during the use of the electronic device 100 (such as audio data, a phone book, etc.), etc. In addition, the internal memory 121 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0083] The electronic device 100 can implement audio functions such as music playback and recording through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone jack 170D, and the application processor.

[0084] The buttons 190 include a power button, a volume button, and the like. The buttons 190 may be mechanical buttons or touch buttons. The electronic device 100 may receive key inputs and generate key signal inputs related to user settings and function control of the electronic device 100.

[0085] Motor 191 can generate vibration prompts.

[0086] The indicator 192 may be an indicator light, which may be used to indicate the charging status, power level changes, messages, missed calls, notifications, etc.

[0087] The SIM card interface 195 is used to connect a SIM card.

[0088] The software system of the electronic device can adopt a layered architecture, an event-driven architecture, a micro-kernel architecture, a micro-service architecture, or a cloud architecture. In the embodiment of the present invention, the Android system with a layered architecture is used as an example to illustrate the software structure of the electronic device.

[0089] FIG3 is a software structure diagram of an electronic device provided in an embodiment of the present application.

[0090] It is understood that a layered architecture divides software into several layers, each with distinct roles and divisions of labor. Layers communicate with each other via software interfaces. In some embodiments, the system may include an application layer (abbreviated as the application layer), an application framework layer (abbreviated as the framework layer), a system library, and a hardware abstraction layer.

[0091] The above application layer may include a series of application packages.

[0092] As shown in Figure 3, the application package may include system applications. System applications refer to applications that are installed in the electronic device before leaving the factory. For example, system applications may include programs such as camera, gallery, calendar, music, short message, memo, and weather.

[0093] Application packages can also include third-party applications, which are applications that users install by downloading the installation package from an app store (or app market). Examples include map applications, food delivery applications, reading applications (such as e-books), social applications, and travel applications.

[0094] The application framework layer provides an application programming interface (API) and a programming framework for the applications in the application layer. The application framework layer includes some predefined functions.

[0095] As shown in FIG3 , the application framework layer may include a window manager, a content provider, a view system, a phone manager, a resource manager, a notification manager, and a rendering node (RenderNode).

[0096] The window manager is used to manage window programs. The window manager can obtain the display size, determine whether there is a status bar, lock the screen, take screenshots, etc.

[0097] Content providers are used to store and retrieve data and make it accessible to applications. Data can include videos, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.

[0098] The view system includes visual controls, such as those for displaying text and images. The view system is used to build applications. A display interface can consist of one or more views. For example, a display interface containing a text notification icon might include a view for displaying text and a view for displaying images.

[0099] The phone manager is used to provide communication functions for electronic devices, such as call status management (including answering, hanging up, etc.).

[0100] The resource manager provides various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.

[0101] The Notification Manager allows applications to display notifications in the status bar. These messages can be displayed briefly and then disappear automatically, without requiring user interaction. For example, the Notification Manager can be used to notify users of completed downloads and message reminders. The Notification Manager can also display notifications in the top status bar as icons or scrolling text, such as notifications from background applications, or as dialog windows on the screen. Examples include displaying text messages in the status bar, emitting alert sounds, vibrating the phone, or flashing indicator lights.

[0102] The system library can include drawing nodes, rendering pipelines, and image rendering modules.

[0103] Among them, the drawing node is used to represent each element in the interface.

[0104] In embodiments of the present application, the interface displayed by an electronic device can be implemented using a render tree (RenderTree). This tree structure contains a number of drawing nodes, each of which contains the corresponding control image drawing logic. Each drawing node can be assigned various properties. For example, a drawing node can be assigned a background effect property to add background effects to the background content of the control image corresponding to the node.

[0105] For example, Figure 4 is a schematic diagram of a rendering tree structure provided by an embodiment of the present application. As shown in Figure 4 , it is assumed that interface A can be implemented by rendering nodes 1 to 5 .

[0106] The rendering pipeline is the channel used to transmit data.

[0107] The image rendering module provides the ability to draw pictures and shapes.

[0108] In an embodiment of the present application, the hardware abstraction layer may include a graphics processor and a display screen.

[0109] In an embodiment of the present application, when each application is performing interface layout, the application layer can obtain the background image and set the blur parameters and off-screen rendering flags of each drawing node in the target interface to be drawn by calling the background blur capability, and then send the blur parameters, off-screen rendering flags of each drawing node and the image flag of the corresponding background image to the framework layer. Among them, the blur parameters include but are not limited to blur radius and shape features (for example, rounded rectangle, circle or diamond, etc.). The blur radius is used to characterize the degree of blur of the image, and the value of the blur radius is the value of the outward expansion of a certain pixel point.

[0110] The background image is an image used to blur the background area of ​​the drawing node. The image identifier of the background image carries the storage address of the background image.

[0111] The off-screen rendering flag is used to indicate whether the drawing node needs to be rendered off-screen. For example, if the off-screen rendering flag is 1, it means that the drawing node and its subnodes need to be rendered off-screen, and if the off-screen rendering flag is 0, it means that the drawing node and its subnodes do not need to be rendered off-screen.

[0112] In the embodiment of the present application, the background image obtained by the application layer can be a clear image that has not been blurred, or a blurred image, which is not limited here. The above-mentioned shape feature refers to the shape of the background image after processing.

[0113] After receiving the blur parameters and background image sent by the application layer, the framework layer sends the blur parameters and background image to the system library through the Java native interface (JNI).

[0114] After receiving the blur parameters, off-screen rendering flag, and background image ID of each drawing node from the framework layer, the system library stores the blur parameters, off-screen rendering flag, and image ID as parameters in the drawing node's attribute information. The image ID indicates the storage location of the background image.

[0115] In one possible case of an embodiment of the present application, the system library determines that the background image indicated by the image identifier stored in the attribute information of the drawing node is an image processed based on blur parameters, and the system library can blur the background area of ​​the drawing node according to the background image.

[0116] The following takes the above-mentioned application as a gallery application and the scenario in which the target interface is displayed during the process of starting the gallery application on a mobile phone as an example to exemplarily describe the interface display method of an embodiment of the present application.

[0117] In an embodiment of the present application, when a mobile phone launches a gallery application and the gallery application lays out the target interface to be displayed according to the application layout file, the gallery application can generate blur parameters corresponding to each interface control based on the display effect design of each interface control in the target interface as specified in the application layout file. The interface control refers to a control whose background is to be blurred and whose background image resource does not change frequently.

[0118] For example, as shown in FIG5 , the interface controls may be some controls in the gallery application, for example, the interface controls may be controls 501 and 502 shown in FIG5 (a). The interface controls may also be some controls in the notification bar, for example, control 503 shown in FIG5 (b), or controls displayed on the desktop, for example, control 504 shown in FIG5 (c).

[0119] The application layout file for the gallery app contains the code logic for the drawing nodes corresponding to each control, the relationships between the drawing nodes corresponding to each control (e.g., parent-child relationships), the UI controls whose backgrounds are to be blurred, and the timing for blurring the backgrounds of these UI controls. The timing for blurring the backgrounds of these UI controls can be when the UI controls are displayed on the screen or when the phone detects the UI controls sliding across the desktop. There is no specific limit on the timing for blurring the backgrounds of these UI controls.

[0120] It should be explained that, in the embodiment of the present application, when the gallery application lays out the display effect of the target interface to be displayed, it is not limited to a specific application layout file and can also be set according to actual application requirements.

[0121] In an embodiment of the present application, the gallery application can generate fuzzy parameters corresponding to each interface control based on the design of the display effect of each interface control in the application layout file, and store the fuzzy parameters as attribute information of the drawing node corresponding to each interface control in the structure of the drawing node.

[0122] In one embodiment, the gallery application can set at least one parameter, such as a horizontal blur radius, a vertical blur radius, and saturation or color layer information, based on the design of the display effect of the interface control to be blurred in the application layout file. The gallery application then generates blur parameters corresponding to the interface control based on the at least one parameter, such as the horizontal blur radius, the vertical blur radius, the saturation or color layer information. After generating the blur parameters corresponding to the interface control, the gallery application can call an interface to send the blur parameters to the drawing node corresponding to the interface control in the framework layer. For example, the gallery application can send the blur parameters as input parameters to the setHnBlurParameters interface to the drawing node corresponding to the interface control in the framework layer. After receiving the blur parameters, the drawing node corresponding to the interface control in the framework layer sends the blur parameters to the drawing node corresponding to the same control in the system library via the JNI interface. The drawing node in the system library then stores the blur parameters as attribute information of the drawing node corresponding to the interface control within a structure of the drawing node. The drawing node in the system library corresponding to the interface control and the drawing node in the framework layer represent different representations of the drawing node at different levels of the system software architecture. That is, the drawing node in the system library and the drawing node in the framework layer refer to the content of the same control.

[0123] In another embodiment, the gallery application may also set parameters such as saturation or color value layer information for the interface controls that do not require blurring based on the design of the display effects of the interface controls that do not require blurring in the application layout file. Then, the gallery application generates blur parameters for the interface controls that do not require blurring based on the parameters such as saturation or color value layer information. Similarly, the gallery application stores the blur parameters of the interface controls that do not require blurring in the structure of the drawing node in the system library corresponding to the control. The specific storage process can be referred to the above-mentioned process of storing the blur parameters of the target interface controls, which will not be repeated here.

[0124] In another embodiment, the gallery application can also set whether each interface control needs to be rendered off-screen according to the design of the display effect of the interface control in the application layout file. Among them, off-screen rendering refers to opening a new buffer area outside the current screen buffer area to render the interface control corresponding to the drawing node. That is, create a new canvas for off-screen rendering. For example, assuming that the off-screen rendering flag is 1, it means that the drawing node and its sub-nodes need to be rendered off-screen, and the off-screen rendering flag is 0, which means that the drawing node and its sub-nodes do not need to be rendered off-screen. Similarly, the gallery application stores the off-screen rendering flag corresponding to the drawing node in the structure of the drawing node in the system library corresponding to the interface control. The specific storage process can be referred to the above-mentioned process of storing the fuzzy parameters of the interface control, which will not be repeated here.

[0125] It should be noted that setting the off-screen rendering flag to 0 or 1 is merely an example description and is not limited to this in the embodiments of this application. For example, a gallery application may also set the off-screen rendering flag to TRUE to indicate that off-screen rendering is required for the drawing node and its subnodes, and set the off-screen rendering flag to FALSE to indicate that off-screen rendering is not required for the drawing node and its subnodes.

[0126] In this embodiment of the present application, after a drawing node in the system library receives the blur parameter, the system library's image rendering module can generate a blur filter based on the blur radius in the blur parameter and store the generated blur filter and blur parameter as parameters in the drawing node's attribute information. The blur filter is used to blur the background image at the storage address carried by the image identifier in the drawing node's attribute information.

[0127] Optionally, the image rendering module can use an image blur algorithm (such as a Gaussian blur algorithm, a Kawase blur algorithm, or a radial blur algorithm, etc.) to generate a blur filter based on the horizontal blur radius and the vertical blur radius. For example, the image rendering module uses a Gaussian blur algorithm to generate a Gaussian blur filter based on the blur radius. The working principle of the Gaussian blur filter is: for each pixel on an image, with this pixel as the center, the RGB components of the surrounding pixels are weighted averaged to replace the RGB components of this pixel, and the pixel is redrawn to obtain a Gaussian blur effect.

[0128] It should be explained that after the mobile phone obtains the background image used to blur the background area of ​​the interface control based on the gallery application, the mobile phone can store the picture identifier of the background image as a parameter in the attribute information of each drawing node. Among them, the picture identifier is used to indicate the storage address of the background image. For example, the picture identifier can carry the storage address of the background image. Therefore, when blurring the background area of ​​the target drawing node in the target interface of the gallery application, the background image can be directly obtained from the storage location indicated by the picture identifier in the attribute information of the target drawing node, without the need to re-obtain the background image from the application layer, thereby saving part of the system's power consumption.

[0129] For example, when the gallery application draws the target interface of the application for the first time, after the gallery application determines the background image of each interface control in the target interface according to the application layout file, it can pass the picture identifier of the background image as a parameter to the system library. For example, the gallery application can send the picture identifier as the input parameter of the setHnBlurParameters interface to the drawing node corresponding to the interface control. After the drawing node of the interface control receives the picture identifier, the drawing node of the interface control can send the picture identifier to the drawing node of the framework layer. After the drawing node of the framework layer receives the picture identifier, it sends the picture identifier to the drawing node of the system library through JNI. The drawing node of the system library stores the picture identifier as the attribute information of the drawing node corresponding to the interface control in the structure of the drawing node of the system library. In this way, the system library can obtain the background image from the storage address of the background image indicated by the picture identifier stored in the attribute information of each drawing node, without having to obtain the background image from the application layer, thereby saving part of the power consumption of the system.

[0130] For the sake of convenience in the following description, the image used to blur the background of the interface control in the embodiment of this application is named "background image". Of course, naming the image used as the background as the background image here is only for illustrative purposes and is not intended to be limiting. The background image obtained by the above-mentioned gallery application can be a blurred image or a clear image, which is not limited here.

[0131] In an embodiment of the present application, when the gallery application is started, the main thread of the gallery application will be started together with the gallery application, and the main thread can call the rendering thread (Render Thread) to draw and render the background image corresponding to the interface control to achieve blurred background processing of the interface control. Among them, the Render Thread is a rendering thread used to share the drawing task of the main thread to reduce the burden of the main thread. Here, the main thread can call the Render Thread to determine whether the interface control to be drawn needs to be blurred, and can also call the Render Thread to draw and render the background image corresponding to the interface control, so that when the main thread has time-consuming operations, it avoids the situation where the rendering is stuck, thereby improving the smoothness of the rendering.

[0132] In an embodiment of the present application, the main thread and the Render Thread each maintain a copy of the application window view information. The purpose of the main thread and the Render Thread each maintaining a copy of the application window view information is to avoid interfering with each other, thereby achieving maximum parallelism and saving the startup time of the gallery application. Among them, the view information of the application window maintained by the Render Thread comes from the main thread. Therefore, when the view information of the application window maintained by the main thread changes, it is necessary to synchronize the changed view information of the application window to the Render Thread. Among them, the view information of the application window may include the display list (Display List) of each drawing node, property information (Property) and the background image referenced in the display list (i.e., the Bitmap referenced by the Display List).

[0133] For example, the main thread can call the synFrameState function to synchronize the application window information with the Render Thread. For example, the main thread can call the synFrameState function to synchronize the attribute information of the drawing node of the frame layer with the attribute information of the drawing node of the system library.

[0134] The main thread synchronizes the display list it maintains with the display list maintained by the render thread, allowing the main thread and the render thread to execute in parallel. This means that while the render thread is rendering the display list of the current frame of the application window, the main program can prepare the display list of the next frame of the application window, making the application window interface display smoother.

[0135] In an embodiment of the present application, each drawing node may include two properties. For example, a drawing node may include a Stagingproperty attribute and a property attribute. Among them, the parameters in the Stagingproperty attribute are parameters synchronized from the attribute information of the drawing node in the framework layer. For example, the main thread calls the synFrameState function to synchronize the attribute information of each drawing node in the framework layer to the attribute information of the Stagingproperty attribute of the corresponding drawing node in the system library. The attribute information of the Stagingproperty attribute includes but is not limited to the off-screen rendering flag, the blur radius of the drawing node, the position information of the drawing node, the size of the drawing node, and the shape of the drawing node.

[0136] The position information of the drawing node may refer to the position information of the drawing node in the screen coordinate system. In an embodiment of the present application, the position information of the drawing node may be the coordinate value of the drawing node relative to the screen. The screen coordinate system is a two-dimensional coordinate system established on the screen, and the coordinate origin of the screen coordinate system may be in the upper left corner of the entire screen. The position information of the drawing node in the screen coordinate system may be expressed as (StartX, StartY, EndX, EndY), where StartX is calculated from the leftmost edge of the screen, 0 represents the leftmost edge, StartY is calculated from the topmost edge of the screen, 0 represents the topmost edge, EndX is calculated from the leftmost edge of the screen, 0 represents the leftmost edge, and EndY is calculated from the topmost edge of the screen, 0 represents the topmost edge. Figure 6 is an example diagram of the coordinate information of the drawing node in the screen coordinate system provided in an embodiment of the present application. The left side of the drawing node in Figure 6 is 10, the top is 10, the right side is 60, and the bottom is 60. The coordinate information of the drawing node is (10, 10, 60, 60).

[0137] To ensure thread safety and prevent two threads from operating the same property of a drawing node simultaneously, the Render Thread can synchronize the property information in the StagingProperty attribute of each drawing node with the property attribute before rendering each frame of the background image. When the Render Thread subsequently blurs the background image based on the blur parameters, the Render Thread directly calls the blur parameters included in the property attribute information.

[0138] In the process of the above-mentioned Render Thread synchronizing the attribute information in the Stagingproperty attribute of each drawing node to the attribute information of the property attribute, the Render Thread also synchronizes the blur filter generated in the above process to the corresponding drawing node, so that when the Render Thread subsequently blurs the background image, the Render Thread can call the blur filter to blur the background image to achieve a blur effect.

[0139] In this embodiment of the present application, after the Display List for the gallery application window is constructed, the main thread sends a rendering instruction to the render thread. Upon receiving the rendering instruction from the main thread, the render thread draws the various interface controls of the gallery application's target interface to be displayed on the display's canvas. The following detailed description of the process by which the render thread draws the various interface controls in the target interface is provided in conjunction with Figure 7. As shown in Figure 7, this process may include steps S701 through S715.

[0140] S701: traverse the drawing nodes of the target interface to be displayed.

[0141] S702: When traversing to a first drawing node, synchronize attribute information of the first drawing node.

[0142] The first drawing node is any drawing node in the target interface to be displayed.

[0143] In the embodiment of the present application, when the Render Thread draws each interface control in the target interface of each frame, the Render Thread traverses each drawing node in sequence according to the tree structure of the node tree of the drawing node.

[0144] For example, when the rendering thread traverses to the first rendering node, the rendering thread can synchronize the attribute information of the first rendering node in the framework layer with the attribute information of the same first rendering node in the system library. The first rendering node in the framework layer and the first rendering node in the system library point to the content of the same control.

[0145] Here, the process of synchronizing the attribute information of the first drawing node by the Render Thread can refer to the process of storing the fuzzy parameters of the interface control into the structure of the drawing node in the system library corresponding to the control in the above embodiment, which will not be repeated here.

[0146] S703: Whether the first drawing node requires off-screen rendering.

[0147] In the embodiment of the present application, the Render Thread determines whether the first drawing node requires off-screen rendering according to the off-screen rendering flag stored in the attribute information of the first drawing node.

[0148] If the Render Thread determines that the first drawing node does not need off-screen rendering according to the off-screen rendering identifier stored in the attribute information of the first drawing node, the Render Thread continues to traverse other drawing nodes of the target interface.

[0149] If the Render Thread determines, based on the off-screen rendering flag stored in the attribute information of the first rendering node, that the first rendering node requires off-screen rendering, S704 is executed.

[0150] Exemplarily, if the Render Thread determines that the off-screen rendering identifier stored in the attribute information of the first drawing node is the preset identifier 1, the Render Thread determines that the first drawing node needs to be rendered off-screen and marks the first drawing node as an off-screen rendering node. If the Render Thread determines that the off-screen rendering identifier stored in the attribute information of the first drawing node is the preset identifier 2, the Render Thread determines that the first drawing node does not need to be rendered off-screen. For example, the Render Thread determines that the off-screen rendering identifier stored in the attribute information of the first drawing node is 1, indicating that the drawing node and its child nodes need to be rendered off-screen. The Render Thread determines that the off-screen rendering identifier stored in the attribute information of the first drawing node is 0, indicating that the drawing node and its child nodes do not need to be rendered off-screen.

[0151] S704 : Determine that the first rendering node is an off-screen rendering node, store the first rendering node in an off-screen rendering node list, and generate an off-screen canvas corresponding to the off-screen rendering node.

[0152] In an embodiment of the present application, the render thread determines that a first drawing node is an off-screen rendering node. The render thread may mark the first drawing node to identify the first drawing node as an off-screen rendering node based on the marking information. The render thread then stores the first drawing node in an off-screen rendering node queue so that when subsequently rendering the target interface, the drawing nodes in the off-screen rendering node queue are given priority. For example, the render thread stores the first drawing node in a buffer queue that requires off-screen rendering, and then stores the buffer queue in the attribute information of the first drawing node.

[0153] After the Render Thread determines that the first rendering node is an off-screen rendering node, the Render Thread generates an off-screen canvas corresponding to the off-screen rendering node. The off-screen canvas is a canvas used for off-screen rendering of the first rendering node and its child nodes.

[0154] In one possible scenario, each off-screen rendering node corresponds to an off-screen canvas. The render thread stores an address pointer of the off-screen canvas in the attribute information of the first rendering node. When the render thread renders the content of the first rendering node, the render thread retrieves the off-screen canvas of the first rendering node from the storage location pointed to by the address pointer of the off-screen canvas stored in the attribute information of the first rendering node, and renders the content of the first rendering node on the off-screen canvas.

[0155] It's important to explain that if the first drawing node is an off-screen rendering node and its multiple child nodes do not obstruct each other, then the multiple child nodes of the first drawing node also need to be rendered off-screen. When rendering the first drawing node off-screen, the first drawing node and its multiple non-obstructing child nodes are simultaneously drawn onto an off-screen canvas to generate the corresponding off-screen image.

[0156] In another possible case, the Render Thread can draw the contents of all off-screen rendering nodes on the same off-screen canvas.

[0157] S705: Determine whether all drawing nodes have been traversed.

[0158] The render thread traverses each drawing node in sequence according to the drawing node tree structure. Once the render thread has traversed all the drawing nodes corresponding to the controls on the interface to be displayed, the render thread can determine all the off-screen rendering nodes in the off-screen rendering node queue. After the render thread has traversed all the drawing nodes, it can determine all the drawing nodes that need background blur and the dirty areas for background blur content update.

[0159] If the Render Thread has not traversed all the drawing nodes corresponding to the controls of the interface to be displayed, the Render Thread continues to traverse the drawing nodes, that is, loops through the above steps S701 to S704.

[0160] S706: Determine the off-screen rendering node queue.

[0161] The off-screen rendering node queue stores all drawing nodes that need off-screen rendering and correspond to the target interface to be displayed.

[0162] S707: Whether the off-screen rendering node draws or updates the drawing content for the first time.

[0163] In an embodiment of the present application, when the Render Thread draws the content of the target interface, the Render Thread first determines whether each off-screen rendering node in the off-screen rendering node queue is drawn for the first time or an off-screen rendering node has updated the drawing content.

[0164] In one possible case, if the Render Thread determines that the content of an off-screen rendering node in the off-screen rendering node queue is being drawn for the first time, or an off-screen rendering node has updated its drawing content, the Render Thread draws the corresponding content on the off-screen canvas corresponding to the off-screen rendering node in the off-screen rendering queue, that is, executing step S708.

[0165] In another possible case, if the Render Thread determines that all off-screen rendering nodes in the off-screen rendering node queue are not drawn for the first time and the drawing content is not updated, the Render Thread executes the drawing process of the drawing nodes from step S712 to step S715.

[0166] That is to say, the Render Thread has pre-drawn the contents of all off-screen rendering nodes in the off-screen rendering node queue on the off-screen canvas and generated the corresponding off-screen images.

[0167] It can be understood that the Render Thread determines that all off-screen rendering nodes in the off-screen rendering node queue are not drawn for the first time and the content to be drawn has not been updated. The Render Thread determines that there is no need to redraw the content of the off-screen rendering node on the off-screen canvas.

[0168] S708 , drawing the off-screen rendering node on the off-screen canvas corresponding to the off-screen rendering node to obtain drawing content.

[0169] In one embodiment, when the Render Thread determines that the off-screen rendering node is rendering for the first time or has updated the rendering content, the Render Thread draws the content corresponding to the off-screen rendering node on the off-screen canvas corresponding to the off-screen rendering node.

[0170] In another embodiment, the Render Thread determines that the off-screen rendering node or its child nodes has drawn or updated the rendering content for the first time, and the Render Thread draws the content corresponding to the off-screen rendering node and its child nodes on the off-screen canvas corresponding to the off-screen rendering node.

[0171] For example, picture 801 shown in FIG8(a) is the content of an off-screen rendering node and its subnodes drawn by the Render Thread, and picture 802 shown in FIG8(b) is the content of another off-screen rendering node and its subnodes drawn by the Render Thread.

[0172] S709: Whether all off-screen rendering nodes have been traversed.

[0173] In one embodiment, if the Render Thread determines that all off-screen rendering nodes have been traversed, the Render Thread executes step S710.

[0174] In another embodiment, if the Render Thread determines that all off-screen rendering nodes have been traversed, the Render Thread continues to traverse the off-screen rendering nodes and draws the content of the off-screen rendering nodes on the off-screen canvas corresponding to the traversed off-screen rendering nodes.

[0175] S710 : Generate an off-screen image according to the drawing contents of all off-screen rendering nodes in the off-screen rendering node queue on the corresponding off-screen canvas.

[0176] In one possible scenario of an embodiment of the present application, after the render thread draws the corresponding content on the off-screen canvas corresponding to each off-screen render node, it can generate a corresponding off-screen image based on the content drawn on the off-screen canvas corresponding to each off-screen render node. That is, the off-screen image corresponding to each off-screen render node contains the content corresponding to that off-screen render node and its child nodes. Therefore, when the drawn content of an off-screen render node in the off-screen render node queue is updated, there is no need to re-draw the off-screen for all off-screen render nodes, thereby improving interface drawing efficiency and saving system power consumption.

[0177] In another possible scenario of the embodiment of the present application, after the Render Thread draws the corresponding content on the off-screen canvas corresponding to each off-screen rendering node, the Render Thread generates an off-screen image based on the position information of each off-screen rendering node and the content on the off-screen canvas corresponding to all off-screen rendering nodes. Thus, when the interface controls in the target interface to be displayed are not updated, the Render Thread draws the drawing nodes corresponding to each control off-screen into an off-screen image, avoiding the problem of redrawing the controls when the content displayed in the interface to be displayed is updated, resulting in excessive drawing instructions, affecting drawing efficiency and device power consumption, and improving the efficiency of interface drawing.

[0178] Exemplarily, the off-screen image 803 shown in (c) of FIG8 is generated by the Render Thread according to the image 801 drawn on the off-screen canvas, the image 802 drawn on another off-screen canvas, and the position information of each off-screen rendering node.

[0179] In another possible scenario of an embodiment of the present application, the Render Thread can also draw the content of all off-screen rendering nodes in the off-screen rendering node queue onto the same off-screen canvas. Optionally, based on the position information of each off-screen rendering node in the off-screen rendering queue, the Render Thread can draw the content of all off-screen rendering nodes to corresponding positions on the off-screen canvas to generate a single off-screen image. This saves storage space required to store multiple off-screen canvases, eliminates the need to merge the content of multiple off-screen rendering nodes, and improves interface drawing efficiency.

[0180] S711: If the off-screen rendering node requires background blur, store the position information of the off-screen rendering node in the attribute information.

[0181] In an embodiment of the present application, the Render Thread may determine, based on the attribute information of the off-screen rendering node, whether the off-screen rendering node is a drawing node whose background is to be blurred. Optionally, after obtaining the attribute information of each off-screen rendering node in the target interface to be displayed in the gallery application, the Render Thread may determine whether the attribute information of each off-screen rendering node includes a blur filter and / or blur parameters to determine whether each off-screen rendering node requires background blur processing.

[0182] In one possible scenario, if the Render Thread determines that the off-screen render node's attribute information does not include a blur filter and / or blur parameters, then the Render Thread determines that background blurring is not required for the off-screen render node. In this case, the Render Thread draws the off-screen render node normally on the display's canvas and then proceeds to determine whether the next render node is a render node for which background blurring is to be performed.

[0183] This means that when the gallery application doesn't set blur parameters for the off-screen rendering node, the gallery application passes the off-screen rendering node's attribute information to the system library through the framework layer. However, the received off-screen rendering node attribute information does not include the blur parameters, and the system library does not generate a blur filter based on the blur parameters. In this case, the Render Thread determines that the off-screen rendering node is drawn normally on the display's canvas.

[0184] In another possible scenario, if the render thread determines that the off-screen rendering node's attribute information includes a blur filter and / or blur parameters, the render thread determines that the off-screen rendering node is a rendering node for which background blurring is to be performed. That is, the render thread determines to perform background blurring on the off-screen rendering node before drawing the off-screen rendering node on the canvas of the display screen.

[0185] It can be understood that when the gallery application sets the blur parameters of the off-screen rendering node, the gallery application passes the attribute information of the off-screen rendering node to the system library through the framework layer. The attribute information of the off-screen rendering node received by the system library includes the blur parameters. After the system library generates a blur filter based on the blur parameters of the off-screen rendering node, the Render Thread determines that the attribute information of the off-screen rendering node includes the blur filter and / or blur parameters.

[0186] In the embodiment of the present application, the Render Thread determines that the off-screen rendering node is a drawing node whose background is to be blurred, and the Render Thread stores the position information of the off-screen rendering node in the attribute information of the off-screen rendering node.

[0187] In some embodiments, the render thread determines that multiple non-intersecting child nodes of an off-screen rendering node are drawing nodes whose background is to be blurred. The render thread stores the relative position information of the multiple non-intersecting child nodes of the off-screen rendering node relative to the off-screen rendering node, as well as the pointer position of each child node, in the attribute information of the parent node corresponding to each child node, that is, in the attribute information of the off-screen rendering node.

[0188] When the Render Thread traverses an off-screen rendering node and determines that the off-screen rendering node and its child nodes need to be blurred, the Render Thread can store the position information of the off-screen rendering node, the pointer position of its child nodes, and the position information of the child nodes relative to the off-screen rendering node in the attribute information of the drawing node.

[0189] It can be understood that when the Render Thread traverses the off-screen rendering nodes, after determining the off-screen rendering node whose background needs to be blurred, the Render Thread stores the location information of the off-screen rendering node whose background needs to be blurred in the attribute information of the off-screen rendering node. In this way, during the subsequent drawing process, the background areas corresponding to all off-screen rendering nodes to be blurred can be blurred simultaneously based on the location information in the attribute information, thereby saving the time of blurring the background of multiple off-screen rendering nodes and improving the efficiency of background blurring.

[0190] Here, the process of Render Thread determining whether multiple non-interfering child nodes of an off-screen rendering node are drawing nodes to be blurred for the background can be referred to the above process of determining whether an off-screen rendering node is a drawing node to be blurred for the background, which will not be repeated here.

[0191] For example, still as shown in (a) in Figure 5, the Render Thread determines that the nodes corresponding to control 501 and control 502 are child nodes that do not obstruct each other, and the Render Thread determines that the nodes corresponding to control 501 and control 502 are child nodes whose background is to be blurred. The Render Thread stores the position information of control 501 and control 502 in the attribute information of the corresponding parent node.

[0192] S712: Traverse the drawing nodes of the target interface to be displayed and traverse to a first drawing node.

[0193] S713: Determine whether the first drawing node performs off-screen rendering.

[0194] S714: Determine whether the first drawing node requires background blur.

[0195] When the Render Thread draws each interface control of the target interface on the canvas corresponding to the target interface, the Render Thread traverses the drawing nodes of the target interface in sequence according to the node tree structure of the drawing nodes of the target interface.

[0196] It's important to explain that, while traversing the target interface's drawing nodes, the Render Thread has already determined all off-screen rendering nodes in the off-screen rendering queue, as well as the node with the background to be blurred and its child nodes within each off-screen rendering node. The Render Thread stores the pointer position of the child node with the background to be blurred, as well as its position relative to the parent node, in the parent node's attribute information. When traversing the target interface's drawing nodes, the Render Thread only needs to traverse the target interface's parent node, not the child nodes of each drawing node.

[0197] After the render thread traverses the first drawing node whose background is to be blurred, it can perform background blurring on the first drawing node and its child nodes based on the pointer positions of the child nodes stored in the first drawing node's attribute information and their positions relative to the first drawing node. By simultaneously blurring the background of the first drawing node and its child nodes, the efficiency of the background blurring process is improved and system power consumption is reduced.

[0198] Here, the Render Thread traversing to the first drawing node is taken as an example to illustrate how to draw the content of the traversed drawing node.

[0199] After the Render Thread traverses to the first drawing node, the Render Thread determines whether the first drawing node is rendered off-screen and whether background blur is required.

[0200] Here, the Render Thread can simultaneously determine whether the first drawing node has performed off-screen rendering and whether background blur is required. Alternatively, the Render Thread can first determine whether the first drawing node has performed off-screen rendering and then determine whether background blur is required for the first drawing node. Alternatively, the Render Thread can first determine whether the first drawing node has performed off-screen rendering and then determine whether background blur is required for the first drawing node. In other words, the order of executing steps S713 and S714 above is not limited in the embodiments of the present application.

[0201] In one embodiment, if the Render Thread determines that the first rendering node performs off-screen rendering and needs to perform background blur processing on the first rendering node, step S715 is executed.

[0202] In another embodiment, if the Render Thread determines that the first drawing node is rendered off-screen but does not require background blur processing for the first drawing node, the Render Thread can draw the off-screen image corresponding to the first drawing node and directly draw the off-screen image of the first drawing node on the main canvas. Thus, by performing off-screen rendering on the content of the first drawing node, there is no need to call drawing instructions to repeatedly draw the first drawing node when drawing the content of the first drawing node on the main canvas, thereby improving the drawing efficiency of the target interface and reducing system power consumption.

[0203] For example, as shown in FIG9 , if the Render Thread determines that the drawing nodes in the interface to be displayed have been rendered off-screen, but background blurring is not required for the drawing nodes in the interface to be displayed, the Render Thread directly draws the pre-rendered off-screen image 902 on canvas 901 to obtain drawing content 903. Then, the Render Thread repeatedly traverses all nodes and draws the display content of the interface to be displayed on the drawing content 903 to obtain the interface to be displayed 904.

[0204] In yet another embodiment, if the render thread determines that the first drawing node is not performing off-screen rendering but requires background blurring for the first drawing node, the render thread uses a background blurring algorithm to blur the background area corresponding to the first drawing node, and then renders the content of the first drawing node on the layer above the blurred background area. The specific implementation of the render thread using the background blurring algorithm to blur the background area corresponding to the first drawing node will be described in detail later and is not further elaborated here.

[0205] For example, as shown in FIG10 , assuming that the Render Thread determines that none of the drawing nodes in the interface to be displayed are rendered off-screen, the Render Thread, when traversing each drawing node, determines whether each drawing node requires background blur. After the Render Thread determines the area and shape information corresponding to the drawing node requiring background blur, the Render Thread draws the blurred image on the canvas, such as canvas 1001 in FIG10 , to obtain canvas 1002 on which the blurred image is drawn. Then, the Render Thread draws the content of the interface to be displayed on the layer above the blurred image, to obtain interface to be displayed 1003.

[0206] In yet another embodiment, if the Render Thread determines that the first drawing node is not being rendered off-screen, but background blur processing is required for the first drawing node and its multiple non-intersecting child nodes, the Render Thread uses a background blur algorithm to perform background blur processing on the positions corresponding to the first drawing node and its multiple child nodes. After obtaining a blurred image, the content of the first drawing node and its multiple child nodes is drawn on the upper layer of the blurred image. Here, the Render Thread uses the background blur algorithm to simultaneously perform background blur processing on the positions corresponding to the first drawing node and its multiple child nodes, thereby improving the efficiency of background blurring and reducing the power consumption of background blurring. In yet another embodiment, if the Render Thread determines that the first drawing node is not being rendered off-screen and background blurring processing is not required for the first drawing node, the Render Thread draws the content of the first drawing node normally on the canvas.

[0207] The specific method for the Render Thread to determine whether the off-screen rendering node requires background blur can be found in the process of determining whether the off-screen rendering node requires background blur in step S714 above, which will not be repeated here.

[0208] S715 , performing background blurring processing on the background area corresponding to the position of the first drawing node, and drawing an off-screen image on a layer above the blurred background area.

[0209] If the Render Thread determines that the first drawing node has been rendered off-screen and that the background of the first drawing node needs to be blurred, the Render Thread can use the blur parameters stored in the attribute information of the first drawing node to perform background blur on the background area corresponding to the position of the first drawing node on the canvas of the display screen, and draw the off-screen image corresponding to the first drawing node that was previously rendered off-screen on the upper layer of the blurred background area to complete the drawing of the first drawing node. Then, the Render Thread continues to traverse other drawing nodes of the interface to be displayed to draw the contents of other drawing nodes of the gallery application on the canvas until all drawing nodes are completed on the canvas.

[0210] The following describes the process by which the render thread performs background blurring on the background area corresponding to the position of the first drawing node. In this embodiment of the present application, the render thread uses the background image stored at the storage address indicated by the image identifier stored in the attribute information of the first drawing node. When blurring the background of the first drawing node, the render thread first determines whether to use the blur parameters included in the attribute information of the first drawing node to blur the background image.

[0211] Optionally, the Render Thread may determine whether to perform blurring on the background image based on whether the background image received by the system library is an image delivered by the gallery application for the first time.

[0212] In an embodiment of the present application, after the gallery application sends the image identifier of the background image to the framework layer, the framework layer sends the image identifier of the background image to the system library via the JNI interface. If the render thread determines that this is the first time the system library has received the image identifier of the background image via the JNI interface, the render thread sets the flag to a first preset value. After blurring the background image, the render thread sets the flag to a second preset value.

[0213] For example, if the render thread determines that the system library has received the image ID of the background image for the first time through the JNI interface, the render thread can set the flag bit to 0. After blurring the background image, the render thread sets the flag bit to 1. The value of the flag bit indicates whether the image ID of the background image is received by the system library for the first time.

[0214] It should be noted that the Render Thread setting the flag to 0 or 1 is merely an example and is not intended to be limiting in the present embodiments. For example, when the Render Thread determines that the system library has received the image identifier of the background image for the first time via the JNI interface, the Render Thread may set the flag to TRUE. After the Render Thread has blurred the background image, the Render Thread may set the flag to FALSE.

[0215] In one possible scenario, if the render thread determines that the flag value is a first preset value, the render thread determines that the JNI interface has received the image identifier of the background image for the first time. In other words, the render thread determines that the background image has not been used to perform background blur processing on the first drawing node. In this case, the render thread determines to use the blur parameters included in the attribute information of the first drawing node to blur the background image.

[0216] In another possible scenario, if the Render Thread determines that the flag value is the second preset value, the Render Thread determines that the image identifier of the background image is not the first image passed down by the image library application, that is, the Render Thread has used the background image to perform background blur processing on the first drawing node. In other words, the background image is a blurred image.

[0217] In an embodiment of the present application, when the Render Thread determines that the background image is a blurred image, the Render Thread can determine whether the background image is an image processed based on the blur parameters of the first rendering node, and determine whether to use the blur parameters of the first rendering node to blur the background image according to the judgment result.

[0218] As a possible implementation, the Render Thread may obtain blur parameters from the attribute information of the first rendering node, and determine whether the blur parameters used to blur the background image are the same as those of the first rendering node, so as to determine whether to blur the background image again.

[0219] In an embodiment of the present application, after the Render Thread determines that the background image is a blurred image, the Render Thread obtains the blur parameter included in the attribute information of the first drawing node. If the Render Thread determines that the blur parameter corresponding to the first drawing node is the same as the blur parameter used to blur the background image, the Render Thread determines that it is not necessary to use the blur parameter of the first drawing node to blur the background image. If the Render Thread determines that the blur parameter corresponding to the first drawing node is different from the blur parameter used to blur the background image, that is, the Render Thread determines that the blur parameter of the first drawing node has changed. In this case, the Render Thread determines that the blur parameter corresponding to the first drawing node is used to blur the background image.

[0220] In an embodiment of the present application, when the Render Thread uses the blur parameter corresponding to the first drawing node to blur the background image, the Render Thread sends a rendering instruction to the graphics processor. The graphics processor blurs the background image through the blur filter in the attribute information of the first drawing node to obtain a blurred background image, and stores the blurred background image.

[0221] Here, the graphics processor may send the blurred background image to the storage location of the background image for storage, or may use the blurred background image to replace the background image stored in the storage location to save storage memory, which is not limited here.

[0222] In one possible scenario of an embodiment of the present application, if the render thread determines that the background image is a blurred image and does not need to be blurred, the render thread can crop the background image to obtain a background area corresponding to the position of the first drawing node. The render thread then draws the background area as the background at the position corresponding to the first drawing node on the canvas, using the first background area as the background of the first drawing node, thereby achieving the effect of blurring the background of the first drawing node.

[0223] For example, as shown in FIG11 , assume that FIG11 (a) shows a canvas 1101 of a display screen, and FIG11 (b) is a background image 1103. The Render Thread determines that the position of a certain drawing node on the canvas is the area 1102 in FIG11 (a). The Render Thread cuts out a background area 1104 from the background image 1103 in FIG11 (b), which is located at the same position as the area 1102 in FIG11 (a). Then, the Render Thread uses the background area 1104 to perform background blur processing on the drawing node. That is, the Render Thread cuts out the background area 1104 from the background image 1103, uses the background area 1104 as the background of the drawing node, and draws it into the canvas 1101 of the display screen. After the Render Thread performs background blur processing on the drawing node, the display effect on the canvas of the display screen is shown in FIG11 (c).

[0224] In another possible scenario of the embodiment of the present application, when the Render Thread determines that the background image has not been blurred, or the blur parameters for blurring the background image are different from the blur parameters of the first drawing node, the Render Thread determines to use the blur parameters of the first drawing node to blur the background image. After the Render Thread uses the blur parameters of the first drawing node to blur the background image and obtains the blurred background image, the Render Thread can obtain the background area corresponding to the position of the first drawing node by cropping from the background image. Then, the Render Thread draws the background area as the background to the position corresponding to the first drawing node on the canvas, so as to use the background area as the background of the first drawing node, thereby achieving the effect of blurring the background of the first drawing node.

[0225] In an embodiment of the present application, when the Render Thread determines that the first drawing node is a node whose background is to be blurred, the Render Thread determines the child node whose background is to be blurred corresponding to the first drawing node based on whether the pointer position of its child node and the position information of the child node relative to the first drawing node are stored in the attribute information of the first drawing node. Then, the Render Thread cuts out the background area corresponding to the position of the first drawing node and the position information of the child node whose background is to be blurred from the background image to obtain a blurred image. Then, after the Render Thread draws the blurred image to the position corresponding to the first drawing node and its child nodes on the canvas, the Render Thread draws the off-screen image of the first drawing node that has been rendered off-screen in advance on the layer above the blurred image, completing the drawing of the first drawing node. Then, the Render Thread continues to traverse other drawing nodes of the target interface to be displayed to draw other drawing nodes on the canvas until all drawing nodes are drawn on the canvas.

[0226] Exemplarily, as shown in FIG12 , after the Render Thread obtains the background of the background area corresponding to the position of the off-screen rendering node 1 and the position of its background child node to be blurred, and the position of the off-screen rendering node 2 and the position of its background child node to be blurred, the Render Thread draws the background of the background area corresponding to the positions of the off-screen rendering node 1 and its child nodes, and the off-screen rendering node 2 and its child nodes, onto the areas 1202 and 1203 corresponding to the drawing nodes on the canvas 1201, the Render Thread draws the off-screen images 1204 of the off-screen rendering node 1 and the off-screen rendering node 2 that have been pre-rendered off-screen onto the upper layer of the background area, and continues to traverse other drawing nodes of the target interface to be displayed to draw other drawing nodes of the gallery application on the canvas, until all drawing nodes are completed on the canvas, such as the interface to be displayed 1205 in FIG12 .

[0227] In one possible case in an embodiment of the present application, when the pre-drawn off-screen image includes all off-screen rendering nodes and interface controls corresponding to their child nodes, the Render Thread can draw the blurred images of all off-screen rendering nodes to be blurred in the corresponding positions, and then draw the off-screen image on the upper layer of the blurred image to complete the drawing of the entire target interface.

[0228] When actually drawing the target interface to be displayed in the gallery application, the render thread first draws the entire background image of the target interface to be displayed on the canvas. Then, the render thread uses the background area as the background of the drawing node, draws it to the corresponding position on the canvas, and then draws the off-screen image of the drawing node to a layer above the background area. Figure 12 does not show the drawing of the entire background image of the target interface to be displayed on the canvas.

[0229] In an embodiment of the present application, after the Render Thread determines that all drawing nodes in the target interface to be displayed of the gallery application are drawn in the canvas of the display screen, the Render Thread sends a Vsync signal to the Surface Flinger function. After receiving the Vsync signal, the Surface Flinger function synthesizes the background image of the target interface to be displayed, the layers of each drawing node and the corresponding background area, and the off-screen image corresponding to the off-screen rendering node, and sends the synthesized image to the display screen for display, so as to realize the display of the target interface of the gallery application.

[0230] Exemplarily, the Surface Flinger function may call the message processing function handleMessageRefresh to implement the process of synthesizing the image and displaying the synthesized image on the display screen.

[0231] In summary, in the embodiments of the present application, in scenarios where the interface controls and background of the target interface to be drawn do not change frequently, the Render Thread can perform off-screen rendering on the infrequently changing interface controls to obtain an off-screen image. Each time the Render Thread draws the target interface, the off-screen image is directly drawn on the main canvas, eliminating the need to redraw the fixed interface controls. This reduces the number of drawing instructions executed, lowers device power consumption, and thus improves device performance.

[0232] Furthermore, the Render Thread can simultaneously blur the background of the target interface's drawing node and its child nodes, resulting in a blurred image. This simultaneous blurring of multiple drawing nodes improves background blurring efficiency and reduces device power consumption.

[0233] In the process of blurring the background of the drawing node whose background is to be blurred, the Render Thread can directly crop the background area from the background image stored in the attribute information of the drawing node as the background of the drawing node. There is no need to obtain the background image once when drawing each drawing node and blur the obtained background image. This not only reduces the number of times the background image is obtained, but also reduces the number of times the background image is blurred, thereby effectively reducing the power consumption of the device.

[0234] Alternatively, if the Render Thread determines that the background image stored in the drawing node's attribute information has not been blurred using the drawing node's blur parameters, the Render Thread can blur the background image stored in the drawing node's attribute information based on the blur parameters in the drawing node's attribute information and crop the background area from the blurred background image to serve as the drawing node's background. This eliminates the need for the Render Thread to retrieve the background image from the application layer again, saving time and reducing device power consumption.

[0235] It is understandable that, in order to realize the above functions, the above-mentioned electronic devices and the like include hardware structures and / or software modules corresponding to the execution of each function. Those skilled in the art should easily realize that, in combination with the units and algorithm steps of each example described in the embodiments disclosed herein, the embodiments of the present application can be implemented in the form of hardware or a combination of hardware and computer software. Whether a function is executed in the form of hardware or computer software driving hardware depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of the embodiments of the present invention.

[0236] The embodiment of the present application can divide the functional modules of the above-mentioned electronic device etc. according to the above-mentioned method example. For example, each functional module can be divided corresponding to each function, or two or more functions can be integrated into one processing module. The above-mentioned integrated module can be implemented in the form of hardware or in the form of software functional modules. It should be noted that the division of modules in the embodiment of the present invention is schematic and is only a logical function division. There may be other division methods in actual implementation.

[0237] A schematic diagram of a possible configuration of the electronic device involved in the above embodiment, in which each functional module is divided according to its function, may include a display unit, a transmission unit, and a processing unit. It should be noted that all relevant content of each step involved in the above method embodiment can be referred to in the functional description of the corresponding functional module and will not be repeated here.

[0238] An embodiment of the present application further provides an electronic device comprising one or more processors and one or more memories. The one or more memories are coupled to the one or more processors and are configured to store computer program code, which includes computer instructions. When the one or more processors execute the computer instructions, the electronic device executes the aforementioned related method steps to implement the interface display method of the aforementioned embodiment.

[0239] An embodiment of the present application also provides a computer-readable storage medium, which stores computer instructions. When the computer instructions are executed on an electronic device, the electronic device executes the above-mentioned related method steps to implement the interface display method in the above-mentioned embodiment.

[0240] An embodiment of the present application further provides a computer program product, which includes computer instructions. When the computer instructions are executed on an electronic device, the electronic device executes the above-mentioned related method steps to implement the interface display method in the above-mentioned embodiment.

[0241] In addition, an embodiment of the present application also provides a device, which can specifically be a chip, component or module, and the device may include a connected processor and memory; wherein the memory is used to store computer-executable instructions, and when the device is running, the processor can execute the computer-executable instructions stored in the memory to enable the device to execute the interface display method executed by the electronic device in the above-mentioned method embodiments.

[0242] Among them, the electronic device, computer-readable storage medium, computer program product or device provided in this embodiment are all used to execute the corresponding methods provided above. Therefore, the beneficial effects that can be achieved can refer to the beneficial effects in the corresponding methods provided above, and will not be repeated here.

[0243] Through the description of the above embodiments, those skilled in the art will clearly understand that for the sake of convenience and brevity, only the division of the above functional modules is used as an example. In actual applications, the above 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. The specific working processes of the above-described systems, devices, and units can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0244] The functional units in the various embodiments of the present application may be integrated into a single processing unit, or each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or software functional units.

[0245] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the embodiment of the present application is essentially 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, and the computer software product is stored in a storage medium, including a number of instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) or a processor to perform all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: various media that can store program codes, such as flash memory, mobile hard disk, read-only memory, random access memory, magnetic disk or optical disk.

[0246] The above is only a specific embodiment of the present application, but the scope of protection of this application is not limited to this. Any changes or substitutions within the technical scope disclosed in this application should be included in the scope of protection of this application. Therefore, the scope of protection of this application should be based on the scope of protection of the claims.

Claims

1. An interface display method, characterized in that: The method comprises: Determine a first drawing node to be drawn in a target interface to be displayed as a target drawing node, where the target drawing node refers to a drawing node and a plurality of sub-nodes of the drawing node that do not obstruct each other, all of which are drawing nodes whose backgrounds are to be blurred; If it is determined that a stored background image exists, and the background image is a blurred image based on the blur parameters corresponding to the first drawing node and the plurality of child nodes, then cropping the background image to obtain background areas corresponding to the positions of the first drawing node and the plurality of child nodes, thereby obtaining a blurred image; After drawing the blurred image to corresponding positions of the first drawing node and the plurality of sub-nodes, drawing the contents of the first drawing node and the plurality of sub-nodes on a layer above the blurred image to generate the target interface; The target interface is displayed, where the target interface includes the first drawing node and interface controls corresponding to the multiple sub-nodes, and the background area of the interface controls is the blurred image after the blurring process.

2. The method according to claim 1, characterized in that Drawing the first drawing node and the contents of the plurality of sub-nodes on a layer above the blurred image to generate the target interface includes: Determining whether the first rendering node and the plurality of child nodes are all off-screen rendering nodes; If the first drawing node and the multiple child nodes are all the off-screen rendering nodes, an off-screen image is drawn on a layer above the blurred image to generate the target interface, where the off-screen image is obtained by pre-drawing the contents of the first drawing node and the child nodes off-screen, and the off-screen image is drawn when the target interface is drawn for the first time or when the contents of the off-screen rendering node in the target interface are updated.

3. The method according to claim 2, characterized in that Before drawing the off-screen image on the upper layer of the blurred image to generate the target interface, the method further includes: Traversing to a first drawing node of the target interface, and determining whether the first drawing node and the plurality of child nodes are the off-screen rendering nodes based on whether the attribute information of the first drawing node includes an off-screen rendering flag; If the first drawing node and the multiple child nodes are the off-screen rendering nodes, the contents of the first drawing node and the multiple child nodes are drawn onto a corresponding off-screen canvas to generate a corresponding off-screen image.

4. The method according to any one of claims 1 to 3, characterized in that The method further comprises: Determining whether the first drawing node and the plurality of child nodes are drawing nodes whose backgrounds are to be blurred; If only the first drawing node is a drawing node whose background is to be blurred, storing the position information of the first drawing node in the attribute information of the drawing node; If the first drawing node and the plurality of child nodes are all drawing nodes whose backgrounds are to be blurred, the position information of the first drawing node and the plurality of child nodes are stored in the attribute information of the target drawing node. Drawing the blurred image to corresponding positions of the first drawing node and the plurality of child nodes includes: The blurred image is drawn to corresponding positions of the first drawing node and the plurality of child nodes according to the position information of the first drawing node and the plurality of child nodes stored in the attribute information.

5. The method according to any one of claims 1 to 4, characterized in that The attribute information of the first drawing node stores blur parameters corresponding to the first drawing node and the plurality of child nodes, the blur parameters including blur radius. The method further includes: If it is determined that a stored background image exists and the background image has not been blurred based on the blur parameters corresponding to the first drawing node and the plurality of child nodes, generating a corresponding blur filter based on the blur radii corresponding to the target drawing node and the plurality of child nodes, wherein the blur radii are used to represent the blur degree of the background image; Using blur filters corresponding to the target drawing node and the multiple child nodes, respectively, to blur positions corresponding to the first drawing node and the multiple child nodes in the background image, to obtain the blurred background image; The background areas corresponding to the position information of the first drawing node and the plurality of sub-nodes are cropped from the blurred background image to obtain the blurred image.

6. The method according to claim 4 or 5, characterized in that The position information of the child node is the relative position of the child node and the first drawing node.

7. The method according to any one of claims 1 to 6, characterized in that The method is applied to an electronic device, the electronic device including an application layer, a framework layer, and a system library, the application layer including a target application, and the method further comprising: After the electronic device obtains the blur parameter and the off-screen rendering flag of the first drawing node based on the target application of the application layer, the target application sends the blur parameter and the off-screen rendering flag to the corresponding first drawing node of the framework layer; The first rendering node of the framework layer sends the blur parameter and the off-screen rendering flag to the corresponding first rendering node in the system library; After receiving the blur parameter and the off-screen rendering flag, the first rendering node in the system library stores the blur parameter and the off-screen rendering flag in corresponding attribute information.

8. An electronic device, characterized in that: include: one or more processors; Memory; Wherein, one or more computer programs are stored in the memory, and the one or more computer programs include instructions. When the instructions are executed by the electronic device, the electronic device executes the interface display method according to any one of claims 1 to 7.

9. A computer-readable storage medium storing instructions, characterized in that: When the instruction is executed on an electronic device, the electronic device executes the interface display method according to any one of claims 1 to 7.

Images