Interface display method, electronic equipment and storage medium

Abstract

The invention provides an interface display method, electronic equipment and a storage medium, and relates to the technical field of terminals. The method comprises the following steps: determining a to-be-drawn first drawing node in a to-be-displayed target interface and a plurality of sub-nodes which are not shielded by each other as drawing nodes of which the background is to be subjected to fuzzy processing; if it is determined that a stored background picture exists, and the background picture is a picture subjected to fuzzy processing based on fuzzy parameters corresponding to the first drawing node and the multiple child nodes, background areas corresponding to the positions of the first drawing node and the multiple child nodes are obtained through cutting from the background picture, and a fuzzy picture is obtained; and drawing the blurred picture to the 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 the previous layer of the blurred picture, generating a target interface, and displaying the target interface. Therefore, background blurring is carried out on the first drawing node and the plurality of sub-nodes at the same time, so that the background blurring efficiency is improved, and the power consumption of equipment is reduced.

Description

Technical Field

[0001] Embodiments of the present application relate to the technical field of terminals, and in particular, to an interface display method, an electronic device, and a storage medium. Background Art

[0002] In order to achieve a better interface display effect, an electronic device blurs the background of the interface in scenarios such as the notification bar, status bar, pop-up window, and card, so as to increase the quality sense of the display interface, highlight the design beauty of the interface, and enhance the user experience.

[0003] In related technologies, the system usually uses a real-time background blur method to blur the background of each interface control in the interface to be displayed. However, when the display content in the interface to be displayed is updated and the interface controls in the interface to be displayed are not updated, the system not only needs to separately obtain the background pictures corresponding to the backgrounds of each interface control, and separately blur the obtained background pictures, thereby causing a certain degree of impact on the device performance and power consumption. Summary of the Invention

[0004] Embodiments of the present application provide an interface display method, an electronic device, and a storage medium. By simultaneously blurring the drawing nodes to be blurred in the background and their multiple non-overlapping child nodes, the efficiency of blurring the background of the target interface is improved, and the power consumption of the device is reduced.

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

[0006] In a first aspect, an interface display method is provided, and the method includes:

[0007] Determine the first drawing node to be drawn in the target interface to be displayed as the target drawing node, where the target drawing node refers to a drawing node and multiple non-overlapping child nodes of the drawing node, and all are drawing nodes whose backgrounds are to be blurred; if it is determined that there is a stored background picture, where the background picture is a picture blurred based on the blur parameters corresponding to the first drawing node and multiple child nodes respectively, then crop the background areas corresponding to the positions of the first drawing node and multiple child nodes from the background picture to obtain a blurred picture; after drawing the blurred picture to the corresponding positions of the first drawing node and multiple child nodes, draw the content of the first drawing node and multiple child nodes on the upper layer of the blurred picture to generate the target interface; display the target interface, where the target interface includes interface controls corresponding to the first drawing node and multiple child nodes, and the background areas of the interface controls are blurred pictures after being blurred.

[0008] It can be understood that the electronic device simultaneously performs background blurring on the first drawing node and multiple non-overlapping child nodes of the first drawing node, obtaining a blurred image, which improves the efficiency of background blurring and reduces the power consumption of the device.

[0009] Since the electronic device can store the background image after blurring processing, it can directly crop the background area corresponding to the position of each target drawing node from the blurred background image, without separately obtaining a background image when drawing the target drawing node and separately performing blurring processing on the obtained background image. By reducing the number of times of obtaining and blurring the background image, the purpose of saving system power consumption is achieved.

[0010] As a possible implementation of the first aspect, draw the content of the first drawing node and multiple child nodes on the upper layer of the blurred image to generate a target interface, including:

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

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

[0013] It can be understood that when the first drawing node and multiple non-overlapping child nodes of the first drawing node are all off-screen rendering nodes, perform off-screen drawing on the content of the first drawing node and multiple child nodes to obtain an off-screen image. When drawing the first drawing node, determine that the first drawing node and its multiple child nodes are nodes whose background is to be blurred. After the electronic device crops the blurred image corresponding to the positions of the first drawing node and its multiple child nodes from the background image, draw the blurred image on the canvas, and draw the off-screen image on the upper layer of the blurred image to generate a target interface.

[0014] 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 multiple child nodes, by obtaining the off-screen image to replace the original drawing instruction and simultaneously performing background blurring on the first drawing node and its multiple child nodes, not only the efficiency of node drawing is improved, but also the efficiency of background blurring is improved, thus achieving the purpose of reducing the device power consumption.

[0015] It should also be explained that the electronic device will draw the off-screen image corresponding to the off-screen rendering node on the off-screen canvas only when the off-screen rendering node is first drawn or the content of the off-screen rendering is updated, without the need to draw the content of the off-screen rendering node every time the target interface is drawn, thus improving the drawing efficiency of the target interface.

[0016] As another possible implementation of the first aspect, before generating the target interface by drawing the off-screen image on the previous layer of the blurred image, the method further includes:

[0017] Traverse to the first drawing node of the target interface, and determine whether the first drawing node and multiple child nodes are off-screen rendering nodes according to 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, draw the content of the first drawing node and multiple child nodes on the corresponding off-screen canvas to generate the corresponding off-screen image.

[0018] That is to say, if a certain drawing node needs to perform off-screen rendering, the off-screen rendering flag is stored in the attribute information of the drawing node. The electronic device can traverse each drawing node of the target interface and determine whether the drawing node performs off-screen rendering according to whether the off-screen rendering flag is stored in the attribute information of the drawing node. Thus, the electronic device performs off-screen rendering on the first drawing node and its child nodes to generate an off-screen image, and there is no need to call the drawing instruction when drawing the first drawing node and its child nodes, reducing the power consumption of node drawing.

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

[0020] Determine whether the first drawing node and multiple child nodes are drawing nodes whose background needs to be blurred; if only the first drawing node is a drawing node whose background needs 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 background needs 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.

[0021] Drawing the blurred image to the corresponding positions of the first drawing node and multiple child nodes includes:

[0022] According to the position information of the first drawing node and multiple child nodes stored in the attribute information, draw the blurred image to the corresponding positions of the first drawing node and multiple child nodes.

[0023] During the process of rendering the 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, or the position information of the first rendering node whose background is to be blurred and its child nodes is stored in the attribute information of the first rendering node. During the process of rendering the target interface, when the first rendering node is traversed, background blurring is performed on the first rendering node and its multiple child nodes simultaneously, improving the efficiency of background blurring.

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

[0025] 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 rendering node and multiple child nodes respectively, a corresponding blur filter is generated according to the blur radii corresponding to the target rendering node and multiple child nodes, and the positions corresponding to the first rendering node and multiple child nodes in the background image are blurred using the blur filters corresponding to the target rendering node and multiple child nodes respectively to obtain a blurred background image; the background regions corresponding to the position information of the first rendering node and multiple child nodes are cropped from the blurred background image to obtain a blurred image.

[0026] Among them, the blur radius is used to characterize the blur degree of the background image. That is, the larger the blur radius, the more blurred the background image; the smaller the blur radius, the clearer the background image.

[0027] It can be understood that the electronic device determines that the stored background image has not been blurred, and the electronic device blurs the corresponding regions in the background image using the blur radii corresponding to the first rendering node and multiple child nodes respectively.

[0028] 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 rendering node.

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

[0030] After the electronic device obtains the blur parameter and off-screen rendering flag of the first rendering node based on the target application at the application layer, the target application sends the blur parameter and off-screen rendering flag to the corresponding first rendering node in the framework layer; the first rendering node in the framework layer sends the blur parameter and off-screen rendering flag to the corresponding first rendering node in the system library; after receiving the blur parameter and off-screen rendering flag, the first rendering node in the system library stores the blur parameter and off-screen rendering flag into the corresponding attribute information.

[0031] It can be understood that the electronic device sends the blur parameter and off-screen rendering flag of the rendering node obtained based on the target application at the application layer to the rendering node corresponding to each interface control. After storing the blur parameter and off-screen rendering flag of the rendering node as parameters into the attribute information corresponding to the rendering node, when the electronic device renders the first rendering node, from the blur parameter and off-screen rendering flag of the first rendering node stored in the attribute information of the first rendering node, it is determined that the first rendering node is a node that has undergone off-screen rendering and whose background is to be blurred. The electronic device directly crops the background area corresponding to the position of the first rendering node from the background image, uses the blurred image as the background of the area of the first rendering node, and directly renders the off-screen image on the upper layer of the blurred image. Since the electronic device can store the off-screen image of off-screen rendering, it can directly obtain the off-screen image without having to repeatedly render the content of the first rendering node and its child nodes. By reducing the number of times of rendering the off-screen rendering node, the purpose of saving system power consumption is achieved.

[0032] In addition, the electronic device can also send the image identifier obtained based on the target application at the application layer to the rendering node corresponding to each interface control. After storing the icon identifier as a parameter into the attribute information corresponding to the rendering node, after the electronic device determines the target rendering node, it obtains the background image from the position indicated by the icon identifier stored in the attribute information of the target rendering node. The electronic device directly crops the background area corresponding to the position of the target rendering node from the background image, and uses the target image as the background of the area corresponding to the control of the target rendering node. Since the electronic device can store the background image after blur processing, it can directly crop the background area corresponding to the position of each target rendering node from the background image after blur processing, without having to obtain a background image separately when rendering the target rendering node and perform blur processing on the obtained background image. By reducing the number of times of obtaining and blur processing the background image, the purpose of saving system power consumption is achieved.

[0033] 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 blur parameter and off-screen rendering flag of the first rendering node based on the target application in the application layer, the target application sends the blur parameter and off-screen rendering flag to the corresponding first rendering node in the framework layer. The first rendering node in the framework layer sends the blur parameter and off-screen rendering flag to the corresponding first rendering node in the system library. After receiving the blur parameter and off-screen rendering flag, the first rendering node in the system library stores the blur parameter and off-screen rendering flag in the corresponding attribute information.

[0034] In a third aspect, the present application provides an electronic device, including: one or more processors; a 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 is caused to execute the interface display method according to any one of the above first aspects.

[0035] In a fourth aspect, the present application provides a computer-readable storage medium, in which instructions are stored, when the instructions are run on an electronic device, the electronic device is caused to execute the interface display method according to any one of the first aspects.

[0036] In a fifth aspect, the present application provides a computer program product, the computer program product includes computer instructions, when the computer instructions are run on an electronic device, the electronic device is caused to execute the interface display method according to any one of the first aspects.

[0037] It can be understood that the electronic devices described in the above 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 elaborated here. Description of the Drawings

[0038] Figure 1 It is an example diagram of drawing an interface in the related art;

[0039] Figure 2 It is a schematic structural diagram of an electronic device provided by an embodiment of the present application;

[0040] Figure 3 It is a software structure diagram of an electronic device provided by an embodiment of the present application;

[0041] Figure 4 It is a schematic structural diagram of a rendering tree provided by an embodiment of the present application;

[0042] Figure 5 It is an example diagram of an interface provided by an embodiment of the present application;

[0043] Figure 6 This is an example diagram of the coordinate information of the drawing node provided by the embodiment of the present application in the screen coordinate system;

[0044] Figure 7 This is a schematic flowchart of an interface display method provided by the embodiment of the present application;

[0045] Figure 8 This is an example diagram of off-screen rendering provided by the embodiment of the present application;

[0046] Figure 9 This is an example diagram of interface drawing provided by the embodiment of the present application;

[0047] Figure 10 This is another example diagram of interface drawing provided by the embodiment of the present application;

[0048] Figure 11 This is an example diagram of background blurring provided by the embodiment of the present application;

[0049] Figure 12 This is another example diagram of interface drawing provided by the embodiment of the present application. Detailed implementation manners

[0050] Next, the technical solutions in the embodiments of the present application will be described in conjunction with the accompanying drawings in the embodiments of the present application. Among them, in the description of the embodiments of the present application, unless otherwise specified, " / " means "or". For example, A / B can mean A or B; herein, "and / or" is only a description of the association relationship of associated objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists alone, A and B exist simultaneously, and B exists alone.

[0051] Hereinafter, the terms "first" and "second" are only used for descriptive purposes and cannot be construed as indicating or implying relative importance or implicitly specifying the quantity of the indicated technical features. Thus, the features defined with "first" and "second" may explicitly or implicitly include one or more of such features. In the description of the embodiments of the present application, unless otherwise specified, the meaning of "a plurality" is two or more.

[0052] In the embodiments of the present application, words such as "exemplary" or "for example" are used to represent examples, illustrations or explanations. Any embodiment or design solution described as "exemplary" or "for example" in the embodiments of the present application should not be construed as being more preferred or more advantageous than other embodiments or design solutions. Rather, the use of words such as "exemplary" or "for example" is intended to present relevant concepts in a specific manner.

[0053] In related technologies, in order to achieve a better interface display effect, in some scenarios, an electronic device blurs the background area of an interface control displayed in an interface. Among them, the interface control and the drawing node correspond to each other. In the process of the electronic device blurring the background area of the drawing node, the electronic device usually traverses to each drawing node corresponding to the interface control, sequentially obtains the background image corresponding to the drawing node, blurs the obtained background image, and then blurs the background area of the drawing node according to the blurred background image.

[0054] When the content to be displayed in the interface to be displayed is updated while the controls in the interface are not updated, the interface controls still need to be redrawn when the interface is drawn. When the number of interface controls drawn by the electronic device is large, it will cause the electronic device to execute a large number of drawing instructions, thereby having a certain impact on the performance and power consumption of the device.

[0055] Exemplarily, as Figure 1 shown, when the electronic device draws the interface of the gallery application, when the content in area 106 is updated, the electronic device needs to redraw the interface. In this case, the electronic device needs to blur the background areas of the control 102, the search toolbar 103, and the control 104 in area 101 respectively, and draw the contents of the control 102, the search toolbar 103, and the control 104 respectively. The electronic device also needs to blur the background areas of the "photo" control, the "album" control, the "moment" control, and the "discovery" control in area 105 respectively, and draw the contents of these four controls respectively.

[0056] An embodiment of the present application provides an interface display method. In this method, the electronic device determines that the first drawing node to be drawn in the target interface to be displayed is the target drawing node. If it is determined that there is a stored background image, and the background image is a blurred image based on the blurred parameters corresponding to the first drawing node and multiple child nodes respectively, then the background areas corresponding to the positions of the first drawing node and the multiple child 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 child nodes, the contents of the first drawing node and the multiple child nodes are drawn on the upper layer of the blurred image to generate the target interface; the target interface is displayed, and the target interface includes the interface controls corresponding to the first drawing node and the multiple child nodes, and the background area of the interface control is the blurred image after being blurred.

[0057] The above-mentioned target drawing node refers to a drawing node and multiple non-overlapping child nodes of the drawing node that are all drawing nodes whose backgrounds are to be blurred.

[0058] Accordingly, the electronic device simultaneously performs background blurring on the first drawing node and multiple non-overlapping child nodes of the first drawing node, obtaining a blurred image, which improves the efficiency of background blurring and reduces the power consumption of the device.

[0059] Exemplarily, the interface display method provided in the embodiments of the present application can be applied to electronic devices with a display screen, such as 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, etc. The embodiments of the present application do not impose any limitations in this regard.

[0060] As Figure 2 shown, Figure 2 FIG. is a schematic structural diagram of an electronic device provided in an embodiment of the present application.

[0061] 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, a headphone 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, a barometric 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.

[0062] It can be understood that the structure illustrated in the embodiments of the present application does 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 those shown in the figure, or combine certain components, or split certain components, or have different component arrangements. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0063] 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), etc. Among them, different processing units may be independent devices or integrated in one or more processors.

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

[0065] A memory may also be provided in the processor 110 for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory may save the instructions or data that the processor 110 has just used or recycled. If the processor 110 needs to use the instruction or data again, it can directly call it from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0066] 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, etc.

[0067] It can be understood that the interface connection relationships between the modules illustrated in the embodiments of the present application are only illustrative and do 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 in the above embodiments, or a combination of multiple interface connection methods.

[0068] The wireless communication function of the electronic device 100 can be implemented by the antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modulation and demodulation processor, baseband processor, etc.

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

[0070] The mobile communication module 150 can provide solutions for wireless communications including 2G / 3G / 4G / 5G, etc. applied to the electronic device 100. The mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves by the antenna 1, filter, amplify, etc. 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 through the antenna 1 for radiation. In some embodiments, at least some functional modules of the mobile communication module 150 can be disposed in the processor 110. In some embodiments, at least some functional modules of the mobile communication module 150 and at least some modules of the processor 110 can be disposed in the same device.

[0071] The wireless communication module 160 may provide solutions for wireless communications applied to the electronic device 100, including wireless local area networks (WLANs) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite systems (GNSSs), frequency modulation (FM), near field communication (NFC), infrared (IR), etc. The wireless communication module 160 may be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, performs frequency modulation and filtering processing on the electromagnetic wave signals, and sends the processed signals to the processor 110. The wireless communication module 160 may also receive signals to be sent from the processor 110, perform frequency modulation and amplification on them, and convert them into electromagnetic waves through the antenna 2 for radiation.

[0072] 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, such that electronic device 100 can communicate with a network and other devices through wireless communication technologies. The wireless communication technologies 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 technologies, etc. GNSS may include global positioning system (GPS), global navigation satellite system (GLONASS), beidou navigation satellite system (BDS), quasi-zenith satellite system (QZSS), and / or satellite based augmentation systems (SBAS).

[0073] Electronic device 100 implements a display function through a GPU, display screen 194, and an application processor, etc. The GPU is a microprocessor for image processing, and is connected to 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, which execute program instructions to generate or change display information.

[0074] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. The display panel can adopt 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, a quantum dot light-emitting diode (QLED), etc. In some embodiments, the electronic device 100 may include one or N display screens 194, where N is a positive integer greater than 1.

[0075] The electronic device 100 can implement the shooting function through the ISP, the camera 193, the video codec, the GPU, the display screen 194, the application processor, etc.

[0076] 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, etc.

[0077] The video codec is used to compress or decompress digital videos. The electronic device 100 can support one or more video codecs. In this way, the electronic device 100 can play or record videos in multiple coding formats, such as: Moving Picture Experts Group (MPEG) 1, MPEG2, MPEG3, MPEG4, etc.

[0078] The NPU is a neural-network (NN) computing processor. By learning from the biological neural network structure, such as learning from the transmission mode between human brain neurons, it can quickly process the input information and can also continuously self-learn. Through the NPU, applications such as the intelligent cognition of the electronic device 100 can be realized, such as: image recognition, face recognition, speech recognition, text understanding, etc.

[0079] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external memory interface 120 to implement the data storage function. For example, files such as music and videos are saved in the external memory card.

[0080] 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 can include a program storage area and a data storage area. Among them, the program storage area can store the operating system, application programs required for at least one function (such as the sound playback function, the image playback function, etc.). The data storage area can store the data created during the use of the electronic device 100 (such as audio data, phone book, etc.). In addition, the internal memory 121 can include a high-speed random access memory, and can also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc.

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

[0082] The keys 190 include a power-on key, volume keys, etc. The keys 190 can be mechanical keys or touch keys. The electronic device 100 can receive key inputs and generate key signal inputs related to the user settings and function controls of the electronic device 100.

[0083] The motor 191 can generate a vibration prompt.

[0084] The indicator 192 can be an indicator light, which can be used to indicate the charging state, the change in battery power, and can also be used to indicate messages, missed calls, notifications, etc.

[0085] The SIM card interface 195 is used to connect the SIM card.

[0086] The software system of the electronic device can adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservices architecture, or a cloud architecture. In the embodiments of the present invention, taking the Android system with a layered architecture as an example, the software structure of the electronic device is exemplarily described.

[0087] Figure 3 This is a software structure diagram of the electronic device provided in the embodiments of this application.

[0088] It can be understood that the layered architecture divides the software into several layers, and each layer has a clear role and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the system can include an application layer (abbreviated as the application layer), an application framework layer (abbreviated as the framework layer), system libraries, and a hardware abstraction layer.

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

[0090] As Figure 3 shown, the application packages may include system applications. Among them, the system applications refer to the applications pre-installed in the electronic device before leaving the factory. Exemplarily, the system applications may include programs such as camera, gallery, calendar, music, short message, memo, and weather.

[0091] The application packages may also include third-party applications, which refer to the applications installed by the user after downloading the installation packages from the application store (or application market). For example, map applications, food delivery applications, reading applications (such as e-books), social applications, and travel applications, etc.

[0092] The above application framework layer provides application programming interfaces (APIs) and programming frameworks for the applications in the application layer. The application framework layer includes some predefined functions.

[0093] As Figure 3 shown, the application framework layer may include a window manager, a content provider, a view system, a telephone manager, a resource manager, a notification manager, and a render node, etc.

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

[0095] The content provider is used to store and obtain data, and make this data accessible to the applications. The data may include videos, images, audio, dialed and received calls, browsing history and bookmarks, phone book, etc.

[0096] The view system includes visible controls, such as controls for displaying text, controls for displaying pictures, etc. The view system can be used to build applications. The display interface can be composed of one or more views. For example, the display interface including the SMS notification icon may include a view for displaying text and a view for displaying pictures.

[0097] The telephone manager is used to provide the communication function of the electronic device. For example, the management of call status (including answering, hanging up, etc.).

[0098] The resource manager provides various resources for the applications, such as localized strings, icons, pictures, layout files, video files, etc.

[0099] The notification manager enables an application to display notification information in the status bar. It can be used to convey messages of the notification type, and can automatically disappear after a short stay without user interaction. For example, the notification manager is used to inform that a download is completed, message reminders, etc. The notification manager can also be a notification that appears in the system top status bar in the form of a chart or scroll bar text, such as a notification of a background-running application, or a notification that appears on the screen in the form of a dialog window. For example, it can prompt text information in the status bar, emit a prompt sound, vibrate the mobile phone, blink the indicator light, etc.

[0100] The system library may include drawing nodes, a rendering pipeline, an image rendering module, etc.

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

[0102] In the embodiment of the present application, the interface displayed by the electronic device can be implemented by a RenderTree. This tree structure contains several drawing nodes, and each drawing node contains corresponding control image drawing logic. Each drawing node can be set with various attributes. For example, a drawing node can set a background effect attribute to add a background effect to the background content included in the control image corresponding to the node.

[0103] Exemplarily, Figure 4 FIG. is a schematic structural diagram of a rendering tree provided by an embodiment of the present application. As Figure 4 shown, it is assumed that interface A can be implemented by drawing nodes 1 to 5.

[0104] The rendering pipeline is a channel for transporting data.

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

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

[0107] In the embodiment of the present application, when each application in the application layer performs interface layout, it can obtain a background picture and, after setting the blur parameters and off-screen rendering flags of each drawing node in the target interface to be drawn by invoking the background blur ability, send the blur parameters, off-screen rendering flags of each drawing node, and the picture identifier of the corresponding background picture to the framework layer. Among them, the blur parameters include, but are not limited to, a blur radius and shape features (such as, a rounded rectangle, a circle, or a rhombus, etc.). The blur radius is used to represent the blur degree of the picture, and the value of the blur radius is the value extended outward from a certain pixel point.

[0108] The background picture refers to a picture used to blur the background area of the drawing node. The picture identifier of the background picture carries the storage address of the background picture.

[0109] The off-screen rendering flag is used to indicate whether off-screen rendering is required for the drawing node. For example, when the off-screen rendering flag is 1, it means that off-screen rendering is required for the drawing node and its child nodes. When the off-screen rendering flag is 0, it means that off-screen rendering is not required for the drawing node and its child nodes.

[0110] In the embodiments 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 herein. The above shape feature refers to the shape of the background image after processing.

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

[0112] After receiving the blur parameter, the off-screen rendering flag, and the image identifier of the background image of each drawing node sent by the framework layer, the system library stores the blur parameter, the off-screen rendering flag, and the image identifier as parameters in the attribute information of the drawing node. Among them, the image identifier is used to indicate the storage location of the background image.

[0113] In a possible case of the embodiments of the present application, when 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 the blur parameter, the system library can blur the background area of the drawing node according to the background image.

[0114] Next, taking the above application as a gallery application and taking the scenario of displaying a target interface during the process of starting the gallery application on a mobile phone as an example, an exemplary description of the interface display method in the embodiments of the present application will be given.

[0115] In the embodiments of the present application, during the process of starting the gallery application on a mobile phone, when the gallery application layouts the target interface to be displayed according to the application layout file, the gallery application can generate blur parameters corresponding to each interface control according to the display effect design of each interface control in the application layout file. Among them, the interface control refers to a control whose background is to be blurred and whose background image resource changes infrequently.

[0116] Exemplarily, as Figure 5 shown, the interface control can be some controls in the gallery application. For example, the interface control can be Figure 5 the controls 501 and 502 shown in (a) of Figure 5 . The interface control can also be some controls in the notification bar. For example, Figure 5The control 504 shown in (c) therein.

[0117] In the application layout file of the above gallery application, the code logic of the drawing nodes corresponding to each control, the association relationships (such as parent-child relationships) between the drawing nodes corresponding to each control, the interface controls whose backgrounds are to be blurred, and the timing of blurring the backgrounds of the interface controls are recorded. The timing of blurring the backgrounds of the above interface controls can be the moment when the interface control is displayed on the display screen, or the moment when the mobile phone detects that the interface control slides on the desktop. Here, the timing of blurring the backgrounds of the interface controls is not limited.

[0118] It should be noted that in the embodiments of the present application, when the gallery application layouts the display effect of the target interface to be displayed, the specific application layout file is not limited, and it can also be set according to actual application requirements.

[0119] In the embodiments of the present application, the gallery application can generate the blur parameters corresponding to each interface control according to the design of the display effects of each interface control in the application layout file, and store the blur parameters as the attribute information of the drawing nodes corresponding to each interface control in the structure of the drawing nodes.

[0120] In one embodiment, the gallery application can set at least one parameter such as the horizontal blur radius, vertical blur radius, saturation, or color value layer information according to the design of the display effect of the interface control to be blurred in the application layout file. Then, the gallery application generates the blur parameters corresponding to the interface control according to at least one parameter such as the horizontal blur radius, vertical blur radius, saturation, or color value layer information. After the gallery application generates 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 located in the framework layer. For example, the gallery application can use the blur parameters as the input parameters of the setHnBlurParameters interface and send them to the drawing node corresponding to the interface control in the framework layer. After the drawing node corresponding to the interface control in the framework layer receives the blur parameters, it sends the blur parameters to the drawing node corresponding to the same control in the system library through the JNI interface. Then, the drawing node of the system library stores the blur parameters as the attribute information of the drawing node corresponding to the interface control in the structure of the drawing node. The drawing node of the system library corresponding to the above interface control and the drawing node of the framework layer are different manifestations of the drawing node at different levels of the system software architecture. That is, the drawing node of the system library and the drawing node of the framework layer point to the content of the same control.

[0121] In another embodiment, the gallery application can also set parameters such as saturation or color value layer information for the interface controls that do not require blurring according to the display effect design of the interface controls in the application layout file. Then, the gallery application generates blurring parameters for the interface controls that do not require blurring according to parameters such as saturation or color value layer information. Similarly, the gallery application stores the blurring parameters of the interface control that does not require blurring in the structure body of the drawing node in the system library corresponding to the control. The specific storage process can refer to the above process of storing the blurring parameters of the target interface control, which will not be elaborated here.

[0122] In yet another embodiment, the gallery application can also set whether each interface control needs to perform off-screen rendering according to the display effect design of the interface controls in the application layout file. Among them, off-screen rendering refers to rendering the interface control corresponding to the drawing node in a new buffer area outside the current screen buffer. That is, a new canvas for off-screen rendering is created. For example, assuming that the off-screen rendering flag is 1, it means that off-screen rendering needs to be performed on the drawing node and its child nodes, and the off-screen rendering flag is 0, which means that off-screen rendering does not need to be performed on the drawing node and its child nodes. Similarly, the gallery application stores the off-screen rendering flag corresponding to the drawing node in the structure body of the drawing node in the system library corresponding to the interface control. The specific storage process can refer to the above process of storing the blurring parameters of the interface control, which will not be elaborated here.

[0123] It should be noted that the above setting of the off-screen rendering flag to 0 or 1 is only an exemplary description, and the embodiments of the present application do not limit this. For example, the gallery application can also set the off-screen rendering flag to TRUE, indicating that off-screen rendering needs to be performed on the drawing node and its child nodes, and set the off-screen rendering flag to FALSE, indicating that off-screen rendering does not need to be performed on the drawing node and its child nodes.

[0124] In the embodiments of the present application, after the drawing node of the system library receives the blurring parameters, the image rendering module of the system library can generate a blurring filter according to the blurring radius in the blurring parameters, and store the generated blurring filter and the blurring parameters as parameters in the attribute information of the drawing node. Among them, the blurring filter is used to blur the background image in the storage address carried by the picture identifier in the attribute information of the drawing node.

[0125] Optionally, the image rendering module may adopt an image blurring algorithm (such as, Gaussian blurring algorithm, Kawase blurring algorithm, or radial blurring algorithm, etc.) to generate a blurring filter according to the horizontal blurring radius and the vertical blurring radius. For example, the image rendering module adopts the Gaussian blurring algorithm to generate a Gaussian blurring filter according to the blurring radius. The working principle of the Gaussian blurring filter is as follows: for each pixel point on a picture, with this pixel point as the center, the RGB components of the surrounding pixel points are weighted and averaged, and the RGB components after the weighted average are used to replace the RGB components of this pixel point, and then this pixel point is redrawn to obtain the Gaussian blurring effect.

[0126] It should be explained that after the mobile phone obtains the background picture for blurring the background area of the interface control based on the gallery application, the mobile phone may store the picture identifier of the background picture as a parameter in the attribute information of each rendering node. The picture identifier is used to indicate the storage address of the background picture. For example, the picture identifier may carry the storage address of the background picture. Thus, when blurring the background area of the target rendering node in the target interface of the gallery application, the background picture can be directly obtained from the storage location indicated by the picture identifier in the attribute information of the target rendering node, without re-obtaining the background picture from the application layer, thereby saving a part of the power consumption of the system.

[0127] Exemplarily, when the gallery application first renders the target interface of the application, after the gallery application determines the background pictures of each interface control in the target interface according to the application layout file, the gallery application may transfer the picture identifier of the background picture as a parameter to the system library. For example, the gallery application may use the picture identifier as the input parameter of the setHnBlurParameters interface and send it to the rendering node corresponding to the interface control. After receiving the picture identifier, the rendering node of the interface control may send the picture identifier to the rendering node of the framework layer. After receiving the picture identifier, the rendering node of the framework layer sends the picture identifier to the rendering node of the system library through JNI. The rendering node of the system library stores the picture identifier as the attribute information of the rendering node corresponding to the interface control in the structure body of the rendering node of the system library. Thus, the system library can obtain the background picture from the storage address of the background picture indicated by the picture identifier stored in the attribute information of each rendering node, without obtaining the background picture from the application layer, saving a part of the power consumption of the system.

[0128] For the convenience of subsequent introduction, in the embodiments of the present application, the picture used for blurring the background of the interface control is named the background picture. Of course, naming the picture as the background picture here is only an exemplary description and is not limited here. The background picture obtained by the above gallery application may be a blurred picture or a clear picture, which is not limited here either.

[0129] In an embodiment of the present application, when the gallery application is launched, the main thread of the gallery application will be launched together with the gallery application. The main thread can call the Render Thread to draw and render the background image corresponding to the interface control, so as to blur the background of the interface control. Among them, the Render Thread is a rendering thread used to share the drawing tasks of the main thread to reduce the burden on 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 as to avoid rendering jams when the main thread has time-consuming operations and improve the fluency of rendering.

[0130] In an embodiment of the present application, both the main thread and the Render Thread 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 be able to work independently of each other, thereby achieving the maximum degree of parallelism and saving the startup time of the gallery application. Among them, the view information of the application window maintained by the Render Thread is 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 (DisplayList), property information (Property) of each drawing node, and the background image referenced in the display list (i.e., the Bitmap referenced by the Display List).

[0131] Exemplarily, the main thread can call the synFrameState function to synchronize the application window information to the Render Thread. For example, the main thread can call the synFrameState function to synchronize the property information of the drawing nodes in the framework layer to the property information of the drawing nodes in the system library.

[0132] The main thread synchronizes the maintained Display List to the Display List maintained by the Render Thread, enabling 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 interface display of the application window more fluent.

[0133] In the embodiments of the present application, each drawing node may include two attributes. 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 nodes 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, off-screen rendering identification, 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.

[0134] The position information of the drawing node may refer to the position information of the drawing node in the screen coordinate system. In the embodiments 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 at 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 side of the screen, 0 represents the leftmost edge, StartY is calculated from the uppermost side of the screen, 0 represents the uppermost edge, EndX is calculated from the leftmost side of the screen, 0 represents the leftmost edge, and EndY is calculated from the uppermost side of the screen, 0 represents the uppermost edge. Figure 6 It is an example diagram of the coordinate information of the drawing node provided by the embodiments of the present application in the screen coordinate system. Figure 6 The left side of the drawing node in it is 10, the upper side is 10, the right side is 60, and the lower side is 60. The coordinate information of this drawing node is (10, 10, 60, 60).

[0135] To ensure thread safety and avoid two threads operating on the same attribute of a drawing node simultaneously, before the RenderThread renders each frame of the background image, the Render Thread may synchronize the attribute information in the Stagingproperty attribute of each drawing node to the attribute information of the property attribute. When the RenderThread blurs the background image according to the blur parameter subsequently, the Render Thread directly calls the blur parameter included in the attribute information of the property attribute.

[0136] During the process of the Render Thread synchronizing the property information in the Staging property of each rendering node to the property information in the property, the Render Thread also synchronizes the generated blur filter in the above process to the corresponding rendering node, so that when the Render Thread blurs the background image subsequently, the Render Thread can call the blur filter to blur the background image to achieve the blur effect.

[0137] In the embodiment of the present application, after the Display List of the gallery application window is constructed, the main thread sends a rendering instruction to the Render Thread. After receiving the rendering instruction from the main thread, the Render Thread draws each interface control in the target interface to be displayed of the gallery application on the canvas of the display screen. The following combines Figure 7 to introduce in detail the process of the Render Thread drawing each interface control in the target interface. As Figure 7 shown, this process may include steps S701 to S715.

[0138] S701, traverse the rendering nodes of the target interface to be displayed.

[0139] S702, when the first rendering node is traversed, synchronize the property information of the first rendering node.

[0140] Among them, the first rendering node is any rendering node in the target interface to be displayed.

[0141] In the embodiment of the present application, when the Render Thread draws each interface control in each frame of the target interface, the Render Thread traverses each rendering node in turn according to the tree structure of the node tree of the rendering nodes.

[0142] Exemplarily, when the rendering node traversed by the Render Thread is the first rendering node, the Render Thread can synchronize the property information of the first rendering node in the framework layer to the property information of the same first rendering node in the system library. Among them, 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.

[0143] Here, for the process of the Render Thread synchronizing the property information of the first rendering node, reference can be made to the process of storing the blur parameters of the interface control in the structure body of the rendering node corresponding to the control in the above embodiment, which will not be elaborated here.

[0144] S703, whether the first rendering node needs off-screen rendering.

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

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

[0147] If the Render Thread determines that the first rendering node needs off-screen rendering according to the off-screen rendering flag stored in the attribute information of the first rendering node, then S704 is executed.

[0148] Exemplarily, if the Render Thread determines that the off-screen rendering flag stored in the attribute information of the first rendering node is the preset flag 1, the Render Thread determines that the first rendering node needs off-screen rendering and marks the first rendering node as an off-screen rendering node. If the Render Thread determines that the off-screen rendering flag stored in the attribute information of the first rendering node is the preset flag 2, the Render Thread determines that the first rendering node does not need off-screen rendering. For example, if the Render Thread determines that the off-screen rendering flag stored in the attribute information of the first rendering node is 1, it means that the rendering node and its child nodes need off-screen rendering. If the Render Thread determines that the off-screen rendering flag stored in the attribute information of the first rendering node is 0, it means that the rendering node and its child nodes do not need off-screen rendering.

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

[0150] In an embodiment of the present application, when the Render Thread determines that the first rendering node is an off-screen rendering node, the Render Thread can mark the first rendering node so as to identify the first rendering node as an off-screen rendering node according to the mark information. Then, the Render Thread stores the first rendering node in the off-screen rendering node queue so that when the target interface is rendered subsequently, the rendering nodes in the off-screen rendering node queue are preferentially rendered. For example, the Render Thread stores the first rendering node in the buffer queue that needs off-screen rendering, and then the Render Thread stores the buffer queue in the attribute information of the first rendering node.

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

[0152] In a possible case, each off-screen rendering node corresponds to an off-screen canvas. The Render Thread stores the address pointer of the off-screen canvas in the attribute information of the first drawing node. When the Render Thread draws the content of the first drawing node, the Render Thread obtains the off-screen canvas of the first drawing node from the storage location pointed to by the address pointer according to the address pointer of the off-screen canvas stored in the attribute information of the first drawing node, so as to draw the content of the first drawing node in the off-screen canvas.

[0153] It should be explained here that if the first drawing node is an off-screen rendering node and the multiple child nodes of the first drawing node do not overlap each other, the multiple child nodes of the first drawing node also need off-screen rendering. When performing off-screen drawing on the first drawing node, the first drawing node and its multiple non-overlapping child nodes are drawn onto an off-screen canvas at the same time to generate a corresponding off-screen image.

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

[0155] S705, determine whether all drawing nodes have been traversed.

[0156] The Render Thread traverses each drawing node in turn according to the tree structure of the drawing nodes. If the Render Thread has traversed all the drawing nodes corresponding to all the controls of the to-be-displayed interface, 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, the Render Thread can determine all the drawing nodes that need background blur and the dirty areas for background blur content update.

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

[0158] S706, determine the off-screen rendering node queue.

[0159] Among them, the off-screen rendering node queue stores all the drawing nodes that need off-screen rendering corresponding to the target interface to be displayed.

[0160] S707, whether the off-screen rendering node has drawn for the first time or updated the drawn content.

[0161] In the embodiments 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 drawn content.

[0162] In a possible case, if the Render Thread determines that the content of a certain 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 drawn 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, step S708 is executed.

[0163] 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 have not updated the drawn content, the Render Thread executes the drawing process of the drawing nodes in steps S712 to S715.

[0164] That is to say, the Render Thread has already pre-drawn the content 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.

[0165] It can be understood that when 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 have not updated the content to be drawn, the Render Thread determines that there is no need to redraw the content of the off-screen rendering nodes on the off-screen canvas.

[0166] S708, draw the off-screen rendering node on the off-screen canvas corresponding to the off-screen rendering node to obtain the drawn content.

[0167] In an embodiment, when the Render Thread determines that the off-screen rendering node is drawn for the first time or has updated the drawn 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.

[0168] In another embodiment, when the Render Thread determines that the off-screen rendering node or its child node is drawn for the first time or has updated the drawn content, 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.

[0169] Exemplarily, such asFigure 8 The picture 801 shown in (a) in [Chinese] is the content of the off-screen rendering node and its sub-nodes drawn by the Render Thread. Figure 8 The picture 802 shown in (b) in [Chinese] is the content of another off-screen rendering node and its sub-nodes drawn by the Render Thread.

[0170] S709, whether all off-screen rendering nodes have been traversed.

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

[0172] 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 canvases corresponding to the traversed off-screen rendering nodes.

[0173] S710, generate an off-screen picture according to the drawing content of all off-screen rendering nodes in the off-screen rendering node queue on the corresponding off-screen canvases.

[0174] In a possible case of the embodiment of the present application, after the Render Thread draws the corresponding content on the off-screen canvases respectively corresponding to each off-screen rendering node, the Render Thread can generate the corresponding off-screen pictures according to the content drawn on the off-screen canvases corresponding to each off-screen rendering node. That is, the content corresponding to the off-screen rendering node and its sub-nodes is drawn on the off-screen picture corresponding to each off-screen rendering node. Thus, when the drawing content of an off-screen rendering node in the off-screen rendering node queue is updated, there is no need to re-perform off-screen drawing on all off-screen rendering nodes, which improves the efficiency of interface drawing and saves system power consumption.

[0175] In another possible case of the embodiment of the present application, after the Render Thread draws the corresponding content on the off-screen canvases respectively corresponding to each off-screen rendering node, the Render Thread generates an off-screen picture according to the position information of each off-screen rendering node and the content on the off-screen canvases respectively corresponding to all off-screen rendering nodes. Thus, when the interface controls in the target interface to be displayed do not update, the Render Thread off-screen draws the drawing nodes corresponding to each control into an off-screen picture, avoiding the problem that when the content displayed in the interface to be displayed is updated, re-drawing the controls causes too many drawing instructions, affecting the drawing efficiency and device power consumption, and improving the efficiency of interface drawing.

[0176] Exemplarily, such as Figure 8The off-screen image 803 shown in (c) is generated by the Render Thread based on 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.

[0177] In another possible case of the embodiments 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 on the same off-screen canvas. Optionally, the Render Thread can draw the content of all off-screen rendering nodes to the corresponding positions on the off-screen canvas according to the position information of each off-screen rendering node in the off-screen rendering queue, so as to generate an off-screen image. Thereby, the storage space for storing multiple off-screen canvases is saved, and it is not necessary to fuse the content of multiple off-screen rendering nodes, improving the efficiency of interface drawing.

[0178] S711, if the off-screen rendering node needs background blurring, store the position information of the off-screen rendering node in the attribute information.

[0179] In the embodiments of the present application, the Render Thread can determine whether the off-screen rendering node is a rendering node to be background-blurred according to the attribute information of the off-screen rendering node. Optionally, after the Render Thread obtains the attribute information of each off-screen rendering node in the target interface to be displayed in the gallery application, the Render Thread can determine whether the attribute information of each off-screen rendering node includes a blur filter and / or blur parameters, so as to determine whether each off-screen rendering node needs background blurring.

[0180] In a possible case, if the Render Thread determines that the attribute information of the off-screen rendering node does not include a blur filter and / or blur parameters, the Render Thread determines that there is no need to perform background blurring on the off-screen rendering node. In this case, the Render Thread normally draws the off-screen rendering node on the canvas of the display screen, and then, the Render Thread continues to determine whether the next rendering node is a rendering node to be background-blurred.

[0181] It can be understood that when the gallery application does not set the blur parameters of the off-screen rendering node, after the attribute information of the off-screen rendering node is passed to the system library through the framework layer, the attribute information of the off-screen rendering node received by the system library does not include the blur parameters, and the system library will not generate a blur filter according to the blur parameters. In this case, the Render Thread determines to normally draw the off-screen rendering node on the canvas of the display screen.

[0182] In another possible scenario, if the Render Thread determines that the attribute information of the off-screen rendering node includes a blur filter and / or blur parameters, the Render Thread determines that the off-screen rendering node is a rendering node whose background is to be blurred. That is, the Render Thread determines to perform background blurring on the off-screen rendering node before rendering the off-screen rendering node on the canvas of the display screen.

[0183] It can be understood that when the gallery application sets the blur parameters of the off-screen rendering node, after the attribute information of the off-screen rendering node is passed through the framework layer to the system library by the gallery application, 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.

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

[0185] In some embodiments, when the Render Thread determines that multiple non-overlapping child nodes of the off-screen rendering node are rendering nodes whose backgrounds are to be blurred, the Render Thread stores the relative position information of the multiple non-overlapping child nodes of the off-screen rendering node with respect to the off-screen rendering node, and the pointer positions of each child node in the attribute information of the corresponding parent node of each child node, that is, stores them in the attribute information of the off-screen rendering node.

[0186] When the Render Thread traverses to a certain off-screen rendering node and determines that the off-screen rendering node and its child nodes need to be blurred in the background, the Render Thread can store the position information of the off-screen rendering node, the pointer positions of its child nodes, and the position information of the child nodes with respect to the off-screen rendering node in the attribute information of the rendering node.

[0187] It can be understood that during the process of the Render Thread traversing the off-screen rendering nodes, after the Render Thread determines the off-screen rendering node whose background is to be blurred, the Render Thread stores the position information of the off-screen rendering node whose background is to be blurred in the attribute information of the off-screen rendering node. In this way, during the subsequent rendering process, the background areas corresponding to all the off-screen rendering nodes to be blurred can be blurred simultaneously according to the position information in the attribute information, thereby saving the time for blurring the backgrounds of multiple off-screen rendering nodes and improving the efficiency of background blurring.

[0188] Here, the process by which the Render Thread determines whether multiple non-overlapping child nodes of the off-screen rendering node are drawing nodes to be background-blurred can refer to the above process of determining whether the off-screen rendering node is a drawing node to be background-blurred, which will not be elaborated here.

[0189] Exemplarily, still as shown in (a) of Figure 5 The Render Thread determines that the nodes corresponding to the control 501 and the control 502 are non-overlapping child nodes, and the Render Thread determines that the nodes corresponding to the control 501 and the control 502 are child nodes to be background-blurred. The Render Thread stores the position information of both the control 501 and the control 502 in the attribute information of the corresponding parent node.

[0190] S712, Traverse the drawing nodes of the target interface to be displayed, and the first drawing node is traversed.

[0191] S713, Determine whether the first drawing node has performed off-screen rendering.

[0192] S714, Determine whether the first drawing node requires background blurring.

[0193] 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.

[0194] It should be explained that during the above process of the Render Thread traversing the drawing nodes of the target interface, all off-screen rendering nodes in the off-screen rendering queue, as well as the nodes to be background-blurred and their child nodes in each off-screen rendering node, have been determined. The Render Thread stores the pointer positions of the child nodes to be background-blurred and the position information relative to the parent node in the attribute information of the parent node. When the Render Thread traverses the drawing nodes of the target interface, the Render Thread only needs to traverse the parent nodes of the target interface and does not need to traverse the child nodes of each drawing node.

[0195] After the Render Thread traverses to the first drawing node to be background-blurred, the first drawing node and its child nodes can be background-blurred according to the pointer positions of the child nodes stored in the attribute information of the first drawing node and the position information relative to the first drawing node. Here, by performing background blurring on the first drawing node and its child nodes simultaneously, the efficiency of background blurring is improved and the power consumption of the system is reduced.

[0196] Here, taking the case where the Render Thread traverses to the first drawing node as an example, it illustrates how to draw the content of the traversed drawing node.

[0197] After the Render Thread traverses to the first drawing node, the Render Thread determines whether the first drawing node has been off-screen rendered and whether background blurring is required.

[0198] Here, the Render Thread can determine whether the first drawing node has been off-screen rendered and whether background blurring is required simultaneously. Or, the Render Thread can first determine whether the first drawing node has been off-screen rendered and then determine whether background blurring is required for the first drawing node. Or, the Render Thread can first determine whether background blurring is required for the first drawing node and then determine whether the first drawing node has been off-screen rendered. That is, the execution order of the above steps S713 and S714 is not limited in the embodiments of the present application.

[0199] In one embodiment, if the Render Thread determines that the first drawing node has been off-screen rendered and background blurring processing is required for the first drawing node, step S715 is executed.

[0200] In another embodiment, if the Render Thread determines that the first drawing node has been off-screen rendered but background blurring processing is not required 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 off-screen rendering the content of the first drawing node, when drawing the content of the first drawing node on the main canvas, there is no need to call the drawing instruction to repeatedly draw the first drawing node, improving the drawing efficiency of the target interface and reducing the system power consumption.

[0201] Exemplarily, as Figure 9 shown, if the Render Thread determines that the drawing node in the interface to be displayed has been off-screen rendered but background blurring processing is not required for the drawing node in the interface to be displayed, the Render Thread directly draws the pre-off-screen rendered off-screen image 902 on the canvas 901 to obtain the 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.

[0202] In yet another embodiment, if the Render Thread determines that the first rendering node does not perform off-screen rendering, but background blurring needs to be performed on the first rendering node, then after the Render Thread uses the background blurring algorithm to perform background blurring on the background area corresponding to the first rendering node, the content of the first rendering node is drawn on the upper layer of the blurred background area. Here, the specific implementation of the Render Thread using the background blurring algorithm to perform background blurring on the background area corresponding to the first rendering node will be introduced in detail later and will not be elaborated here.

[0203] Exemplarily, as Figure 10 shown, assume that the Render Thread determines that none of the rendering nodes in the interface to be displayed perform off-screen rendering. When the Render Thread traverses each rendering node, it determines whether each rendering node needs background blurring. After the Render Thread determines the area and shape information corresponding to the rendering node that needs background blurring, the Render Thread draws the blurred image on the canvas. For example, Figure 10 the blurred image is drawn on the canvas 1001 in, and the canvas 1002 with the blurred image drawn is obtained. Then, the Render Thread draws the content of the interface to be displayed on the upper layer of the blurred image, and the interface 1003 to be displayed is obtained.

[0204] In yet another embodiment, if the Render Thread determines that the first rendering node does not perform off-screen rendering, but background blurring needs to be performed on the first rendering node and its multiple non-overlapping child nodes, then the Render Thread uses the background blurring algorithm to perform background blurring on the positions corresponding to the first rendering node and its multiple child nodes. After obtaining a blurred image, the content of the first rendering node and its multiple child nodes is drawn on the upper layer of the blurred image. Here, the Render Thread simultaneously performs background blurring on the positions corresponding to the first rendering node and its multiple child nodes using the background blurring algorithm, which improves the efficiency of background blurring and reduces the power consumption of background blurring. In yet another embodiment, if the Render Thread determines that the first rendering node does not perform off-screen rendering and background blurring does not need to be performed on the first rendering node, then the Render Thread normally draws the content of the first rendering node on the canvas.

[0205] For the specific method of how the Render Thread determines whether the off-screen rendering node needs background blurring here, refer to the process of determining whether the off-screen rendering node needs background blurring in step S714 above, which will not be elaborated here.

[0206] S715, perform background blurring on the background area corresponding to the position of the first drawing node, and draw an off-screen image on the upper layer of the blurred background area.

[0207] If the Render Thread determines that the first drawing node has performed off-screen rendering and the first drawing node needs to be background-blurred, the Render Thread can use the blurring parameters stored in the attribute information of the first drawing node to perform background blurring 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 has been pre-rendered off-screen on the upper layer of the blurred background area, thus completing 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 content of other drawing nodes of the gallery application on the canvas until all drawing nodes are drawn on the canvas.

[0208] The following will introduce the process of the Render Thread performing background blurring on the background area corresponding to the position of the first drawing node. In the embodiments of the present application, when the Render Thread uses the background image at the storage address indicated by the image identifier stored in the attribute information of the first drawing node to perform background blurring on the first drawing node, it first determines whether to blur the background image using the blurring parameters included in the attribute information of the first drawing node.

[0209] Optionally, the Render Thread can determine whether to blur the background image based on whether the background image received by the system library is the first image passed down by the gallery application.

[0210] In the embodiments 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 through the JNI interface. If the Render Thread determines that the system library has received the image identifier of the background image through the JNI interface for the first time, the Render Thread sets the flag bit to the first preset value. After the Render Thread blurs the background image, it sets the flag bit to the second preset value.

[0211] For example, if the Render Thread determines that the system library has received the image identifier of the background image through the JNI interface for the first time, the Render Thread can set the flag bit to 0. After the Render Thread blurs the background image, it sets the flag bit to 1. The value of the above flag bit is used to indicate whether the image identifier of the background image is the first one received by the system library.

[0212] It should be noted that the above setting of the flag bit to 0 or 1 by the Render Thread is only an exemplary description, and the embodiments of the present application do not limit this. For example, when the Render Thread determines that the system library first receives the picture identifier of the background picture through the JNI interface, the Render Thread can also set the flag bit to TRUE; after the Render Thread blurs the background picture, the Render Thread can set the flag bit to FALSE.

[0213] In a possible case, if the Render Thread determines that the value of the flag bit is the first preset value, the Render Thread determines that the JNI interface first receives the picture identifier of the background picture. That is to say, the Render Thread determines that the background picture has not been used to blur the background of the first drawing node. In this case, the Render Thread determines to blur the background picture using the blur parameter included in the attribute information of the first drawing node.

[0214] In another possible case, if the Render Thread determines that the value of the flag bit is the second preset value, the Render Thread determines that the picture identifier of the background picture is not first passed down by the gallery application, that is, the Render Thread has used the background picture to blur the background of the first drawing node. That is to say, the background picture is a picture after blurring.

[0215] In the embodiments of the present application, when the Render Thread determines that the background picture is a picture after blurring, the Render Thread can determine whether the background picture is a picture processed based on the blur parameter of the first drawing node, so as to determine whether to blur the background picture using the blur parameter of the first drawing node according to the judgment result.

[0216] As a possible implementation, the Render Thread can obtain the blur parameter from the attribute information of the first drawing node, and determine whether the blur parameter for blurring the background picture is the same as the blur parameter of the first drawing node, so as to determine whether to blur the background picture again.

[0217] 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 for blurring the background image, the Render Thread determines that there is no need to blur the background image using the blur parameter of the first drawing node. If the Render Thread determines that the blur parameter corresponding to the first drawing node is different from the blur parameter for blurring 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 to blur the background image using the blur parameter corresponding to the first drawing node.

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

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

[0220] In a possible case of an embodiment of the present application, when the Render Thread determines that the background image is a blurred image and there is no need to blur the background image, the Render Thread can crop the background area corresponding to the position of the first drawing node from the background image. Then, the Render Thread draws the background area as the background at the position corresponding to the first drawing node on the canvas, so as to use the first background area as the background of the first drawing node to achieve the effect of blurring the background of the first drawing node.

[0221] Exemplarily, as Figure 11 shown, assume Figure 11 (a) in shows a canvas 1101 of a display screen, Figure 11 (b) in is the background image 1103. The Render Thread determines that the position of a certain drawing node on the canvas is the area 1102 in Figure 11 (a). The Render Thread crops from the background image 1103 in Figure 11 (b) and corresponds toFigure 11 The background region 1104 at the same position as the region 1102 in (a) of [reference]. Then, the Render Thread performs background blurring on the drawing node using the background region 1104, that is, the Render Thread crops the background region 1104 from the background image 1103 and uses the background region 1104 as the background of the drawing node to draw it on the canvas 1101 of the display screen. After the Render Thread performs background blurring on the drawing node, the display effect on the canvas of the display screen is as shown in Figure 11 (c) of [reference].

[0222] In another possible case of the embodiment of the present application, when the Render Thread determines that the background image has not been blurred, or the blur parameter for blurring the background image is different from the blur parameter of the first drawing node, the Render Thread determines to blur the background image using the blur parameter of the first drawing node. After the Render Thread blurs the background image using the blur parameter of the first drawing node to obtain a background blurred image, the Render Thread can crop the background region corresponding to the position of the first drawing node from the background image. Then, the Render Thread draws the background region as the background at the position corresponding to the first drawing node on the canvas, so as to use the background region as the background of the first drawing node, thereby achieving the effect of performing background blurring on the first drawing node.

[0223] In the embodiment of the present application, when the Render Thread determines that the first drawing node is a node to be background-blurred, the Render Thread determines the sub-node to be background-blurred corresponding to the first drawing node according to whether the pointer position of its sub-node and the position information of the sub-node relative to the first drawing node are stored in the attribute information of the first drawing node. Then, the Render Thread crops the background regions corresponding to the position of the first drawing node and the position information of the sub-node to be background-blurred from the background image to obtain a blurred image. After the Render Thread draws the blurred image at the positions corresponding to the first drawing node and its sub-nodes on the canvas, the Render Thread draws the off-screen image of the first drawing node pre-rendered off-screen 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.

[0224] Exemplarily, as shown in Figure 12As shown, after the Render Thread crops the background regions corresponding to the positions of the off-screen rendering node 1 and its child nodes whose backgrounds are to be blurred, the positions of the off-screen rendering node 2 and its child nodes whose backgrounds are to be blurred from the background image respectively, the Render Thread draws the backgrounds of the background regions 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 regions 1202 and 1203 corresponding to the drawing nodes on the canvas 1201. After that, the Render Thread draws the off-screen images 1204 of the off-screen rendering node 1 and the off-screen rendering node 2 that were pre-rendered off-screen onto the upper layer of the background region, 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 drawn on the canvas as shown in Figure 12 in the to-be-displayed interface 1205.

[0225] In a possible case in the embodiment of the present application, when the pre-drawn off-screen images include the interface controls corresponding to all off-screen rendering nodes and their child nodes, the Render Thread can draw the blurred images of the off-screen rendering nodes to be blurred among all off-screen rendering nodes to the corresponding positions, and then draw the off-screen images onto the upper layer of the blurred images, thus completing the drawing of the entire target interface.

[0226] When actually drawing the target interface to be displayed of 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 takes the background region as the background of the drawing node, draws it to the position corresponding to the drawing node on the canvas, and then draws the off-screen image of the drawing node onto the layer above the background region. Figure 12 The drawing of the entire background image of the target interface to be displayed on the canvas is not shown in

[0227] In the 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 on the canvas of the display screen, the Render Thread sends the Vsync signal to the SurfaceFlinger function. After receiving the Vsync signal, the SurfaceFlinger function synthesizes the background image of the target interface to be displayed, the layers of each drawing node and the corresponding background regions, and the off-screen images corresponding to the off-screen rendering nodes, and sends the synthesized image to the display screen for display to implement the display of the target interface of the gallery application.

[0228] Exemplarily, the Surface Flinger function can call the message handling function handleMessageRefresh to implement the synthesis of images and the process of displaying the synthesized images on the display screen.

[0229] In summary, in the embodiment of the present application, in a scenario where the interface controls and the background of the target interface to be drawn do not change frequently, the Render Thread can perform off-screen rendering and drawing on the interface controls with infrequent changes to obtain off-screen images. Each time the Render Thread draws the target interface, it directly draws the off-screen images on the main canvas without redrawing the interface controls that remain unchanged, reducing the executed drawing instructions and the device power consumption, thereby improving the performance of the device.

[0230] In addition, the Render Thread can simultaneously perform background blurring on the drawing nodes to be blurred in the background of the target interface to be drawn and their child nodes to obtain a blurred image. It can be seen that the Render Thread simultaneously performs background blurring on multiple drawing nodes, which not only improves the efficiency of background blurring but also reduces the power consumption of the device.

[0231] During the process of performing background blurring on the drawing nodes to be blurred in the background, 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, without obtaining a background image each time when drawing each drawing node and performing blurring processing on the obtained background image. This not only reduces the number of times of obtaining the background image but also reduces the number of times of performing blurring processing on the background image, thereby effectively reducing the device power consumption.

[0232] Alternatively, if the Render Thread determines that the background image stored in the attribute information of the drawing node has not been blurred by the blur parameters of the drawing node, the Render Thread can blur the background image stored in the attribute information of the drawing node according to the blur parameters in the attribute information of the drawing node, and crop the background area from the blurred background image as the background of the drawing node. It can be seen that the Render Thread does not need to obtain the background image from the application layer again, saving the time for obtaining the background image and achieving the purpose of reducing the device power consumption.

[0233] It can be understood that, in order to implement the above functions, the above electronic devices, etc., include the corresponding hardware structures and / or software modules for executing 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 in this article, the embodiments of the present application can be implemented in the form of hardware or a combination of hardware and computer software. Whether a certain function is executed in the way of hardware or computer software driving hardware depends on the specific application and design constraints of the technical solution. Professional technicians 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.

[0234] The embodiments of the present application can perform the division of function modules on the above electronic devices, etc. according to the above method examples. For example, each function module can be divided corresponding to each function, or two or more functions can be integrated into one processing module. The above integrated module can be implemented in the form of hardware or in the form of a software function module. It should be noted that the division of modules in the embodiments of the present invention is illustrative, only a logical function division, and there can be other division methods in actual implementation.

[0235] In the case of dividing each function module corresponding to each function, a possible composition schematic diagram of the electronic device involved in the above embodiment. The electronic device may include: a display unit, a transmission unit, a processing unit, etc. It should be noted that all relevant contents of each step involved in the above method embodiment can be cited to the function description of the corresponding function module, and will not be repeated here.

[0236] The embodiments of the present application also provide an electronic device, including one or more processors and one or more memories. The one or more memories are coupled to the one or more processors. The one or more memories are used to store computer program code, and the computer program code includes computer instructions. When the one or more processors execute the computer instructions, the electronic device is caused to execute the above relevant method steps to implement the interface display method in the above embodiments.

[0237] The embodiments of the present application also provide a computer-readable storage medium, in which computer instructions are stored. When the computer instructions run on the electronic device, the electronic device is caused to execute the above relevant method steps to implement the interface display method in the above embodiments.

[0238] The embodiments of the present application also provide a computer program product, which includes computer instructions. When the computer instructions run on the electronic device, the electronic device is caused to execute the above relevant method steps to implement the interface display method in the above embodiments.

[0239] In addition, an embodiment of the present application further provides a device, which may specifically be a chip, a component, or a module. The device may include a processor and a memory connected to each other. The memory is used to store computer-executable instructions. When the device runs, the processor may execute the computer-executable instructions stored in the memory so that the device executes the interface display method executed by the electronic device in the above method embodiments.

[0240] 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 method provided above. Therefore, the beneficial effects that can be achieved can refer to the beneficial effects in the corresponding method provided above, and will not be elaborated here.

[0241] Through the description of the above embodiments, those skilled in the art can clearly understand that for the convenience and conciseness of description, only the above division of each functional module is used as an example. In actual applications, the above functions can be allocated to different functional modules according to needs, that is, the internal structure of the device is divided into different functional modules to complete all or part of the functions described above. The specific working processes of the systems, devices, and units described above can refer to the corresponding processes in the foregoing method embodiments and will not be elaborated here.

[0242] In each embodiment of the present application, each functional unit may be integrated into a processing unit, or each unit may exist physically alone, or two or more units may be integrated into one unit. The above integrated unit may be implemented in the form of hardware or in the form of a software functional unit.

[0243] If the above integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it may be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the embodiment of the present application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, may be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) or a processor to execute all or part of the steps of the methods described in various embodiments of the present application. The foregoing 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 disc.

[0244] The above is only the specific implementation manner of the present application, but the protection scope of the present application is not limited thereto. Any changes or substitutions within the technical scope disclosed in the present application should be covered by the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claims.

Claims

1. An interface display method, characterized in that, The method includes: Determining 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 non-overlapping child nodes of the drawing node, and all of them are drawing nodes whose backgrounds are to be blurred; If it is determined that there is a stored background image, which is an image obtained by blurring based on the blur parameters corresponding to the first drawing node and the multiple child nodes respectively, then cropping background regions corresponding to the positions of the first drawing node and the multiple child nodes from the background image to obtain a blurred image; After drawing the blurred image at the corresponding positions of the first drawing node and the multiple child nodes, drawing the content of the first drawing node and the multiple child nodes on the layer above the blurred image to generate the target interface; Displaying the target interface, where the target interface includes interface controls corresponding to the first drawing node and the multiple child nodes, and the background regions of the interface controls are the blurred images after blur processing.

2. The method according to claim 1, wherein The step of drawing the content of the first drawing node and the multiple child nodes on the layer above the blurred image to generate the target interface includes: Judging whether the first drawing node and the multiple 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, then drawing an off-screen image on the layer above the blurred image to generate the target interface, where the off-screen image is obtained by performing off-screen drawing on the content of the first drawing node and the child nodes in advance, 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 nodes in the target interface is updated.

3. The method according to claim 2, characterized in that Before the step of drawing the off-screen image on the layer above the blurred image to generate the target interface, the method further includes: Traversing to the first drawing node of the target interface, and judging whether the first drawing node and the multiple child nodes are the off-screen rendering nodes according to 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, then drawing the content of the first drawing node and the multiple child nodes onto corresponding off-screen canvases to generate corresponding off-screen images.

4. The method according to any one of claims 1 to 3, characterized in that The method further includes: Judging whether the first drawing node and the multiple 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, then storing the position information of the first drawing node into the attribute information of the drawing node; If the first drawing node and the multiple child nodes are all drawing nodes whose backgrounds are to be blurred, then storing the position information of the first drawing node and the multiple child nodes into the attribute information of the target drawing node. The step of drawing the blurred image at the corresponding positions of the first drawing node and the multiple child nodes includes: According to the position information of the first drawing node and the multiple child nodes stored in the attribute information, draw the blurred picture to the corresponding positions of the first drawing node and the multiple child nodes.

5. The method according to any one of claims 1 to 4, characterized in that The attribute information of the first drawing node stores the blur parameters corresponding to the first drawing node and the multiple child nodes respectively. The blur parameters include a blur radius. The method further includes: If it is determined that there is a stored background picture and the background picture has not been blurred based on the blur parameters corresponding to the first drawing node and the multiple child nodes respectively, generate corresponding blur filters according to the blur radii corresponding to the target drawing node and the multiple child nodes. The blur radius is used to characterize the blur degree of the background picture; Use the blur filters corresponding to the target drawing node and the multiple child nodes respectively to blur the positions corresponding to the first drawing node and the multiple child nodes in the background picture to obtain the blurred background picture; Crop the background regions corresponding to the position information of the first drawing node and the multiple child nodes respectively from the blurred background picture to obtain the blurred picture.

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 includes an application layer, a framework layer, and a system library. The application layer includes a target application. The method further includes: After the electronic device obtains the blur parameter and the off-screen rendering flag of the first drawing node based on the target application in the application layer, the target application sends the blur parameter and the off-screen rendering flag to the corresponding first drawing node in the framework layer; The first drawing node in the framework layer sends the blur parameter and the off-screen rendering flag to the corresponding first drawing node in the system library; After receiving the blur parameter and the off-screen rendering flag, the first drawing node in the system library stores the blur parameter and the off-screen rendering flag into the corresponding attribute information.

8. An electronic device, characterized in that, Includes: One or more processors; A memory; Wherein, the memory stores one or more computer programs. 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-7.

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

Images