Control background rendering method and device, electronic equipment and storage medium

Abstract

The invention relates to a control background rendering method and device, electronic equipment and a storage medium, and the method comprises the steps: determining a parent layer control of a to-be-rendered control as a first parent control, determining a parent layer control of the first parent control as a second parent control, carrying out the screenshot of a main canvas interface of a terminal based on the second parent control, so as to generate first screenshot data, and drawing the first parent control on a preset interface corresponding to the second parent control, performing screenshot on the updated preset interface to generate second screenshot data, and performing fuzzy color mixing processing on the first screenshot data and the second screenshot data based on a first preset control position of the to-be-rendered control in the main canvas interface to obtain a second preset control position of the to-be-rendered control. Generating a first background image of the to-be-rendered control, and drawing the first background image on a preset interface according to the first preset control position. Therefore, background blurring and color mixing can be provided for the control in one process, the control editing efficiency is improved, and background blurring rendering of the off-screen control is more accurate.

Description

Technical Field

[0001] The present disclosure relates to the field of electronic technology, and in particular to a control background rendering method, device, electronic device and storage medium. Background Art

[0002] In the related technology, the use of blur in the system display only blurs the entire control, and the control background blur only blurs the background across layers, that is, blurring the background of specific areas of other layers under the current layer, but it is not possible to set background blur and color mixing for different controls in the system. Summary of the invention

[0003] In order to overcome the problems existing in the related art, the present disclosure provides a control background rendering method, device, electronic device and storage medium.

[0004] According to a first aspect of an embodiment of the present disclosure, a control background rendering method is provided, which is applied to a terminal and includes:

[0005] When it is determined that the control to be rendered is an off-screen control, determining that the parent layer control of the control to be rendered is a first parent control, and the parent layer control of the first parent control is a second parent control;

[0006] Taking a screenshot of the main canvas interface of the terminal based on the second parent control to generate first screenshot data, wherein the first screenshot data includes the second parent control but does not include the first parent control;

[0007] Drawing the first parent control onto a preset interface corresponding to the second parent control, and taking a screenshot of the updated preset interface to generate second screenshot data;

[0008] Based on a first preset control position of the control to be rendered in the main canvas interface, performing fuzzy color mixing processing on the first screenshot data and the second screenshot data to generate a first background image of the control to be rendered;

[0009] The first background image is drawn on the preset interface according to the first preset control position.

[0010] Optionally, the performing fuzzy color mixing processing on the first screenshot data and the second screenshot data based on a first preset control position of the control to be rendered in the main canvas interface to generate a first background image of the control to be rendered includes:

[0011] Based on the first preset control position, intercepting the first screenshot data and the second screenshot data to generate multiple frames of background images;

[0012] Perform fuzzy color mixing processing on the multiple frames of background images to generate a first background image of the control to be rendered.

[0013] Optionally, performing fuzzy color mixing processing on the multiple frames of background images to generate a first background image of the control to be rendered includes:

[0014] Performing weighted averaging on each pixel in each background image of the multiple background images and surrounding pixels to generate multiple blurred background images;

[0015] The first background image is generated by performing weighted averaging on pixels of the multiple frames of blurred background images.

[0016] Optionally, the method further comprises:

[0017] In response to the completion of drawing of the child control corresponding to the second parent control in the preset interface, taking a screenshot of the preset interface based on the position of the first preset control to generate a second background image of the control to be rendered;

[0018] According to the first preset control position, the second background image is drawn on the main canvas interface.

[0019] Optionally, taking a screenshot of the main canvas interface of the terminal based on the second parent control to generate first screenshot data includes:

[0020] Obtaining a second preset control position of the first parent control in the main canvas interface;

[0021] Before drawing the first parent control in the second parent control, a screenshot of the main canvas interface is taken based on the second preset control position to generate the first screenshot data.

[0022] Optionally, taking a screenshot of the main canvas interface based on the second preset control position to generate the first screenshot data includes:

[0023] Acquire third screenshot data of the second parent control on the preset interface, and acquire an initial background image of the terminal;

[0024] Based on a third preset control position of the second parent control in the main canvas interface, performing fuzzy color mixing processing on the third screenshot data and the initial background image to generate the main canvas interface;

[0025] The main canvas interface is screenshotted based on the second preset control position to generate the first screenshot data.

[0026] Optionally, the method further comprises:

[0027] In response to the terminal being in a background blur mode, determining a multi-layer parent control of the control to be rendered;

[0028] When it is determined that there is an off-screen parent control in the multi-layer parent control, the control to be rendered is determined to be the off-screen control.

[0029] According to a second aspect of an embodiment of the present disclosure, a control background rendering device is provided, which is applied to a terminal, and the device includes:

[0030] A determination module is configured to, when determining that the control to be rendered is an off-screen control, determine that the parent layer control of the control to be rendered is a first parent control, and the parent layer control of the first parent control is a second parent control;

[0031] a first generating module, configured to take a screenshot of the main canvas interface of the terminal based on the second parent control to generate first screenshot data, wherein the first screenshot data includes the second parent control but does not include the first parent control;

[0032] A second generating module is configured to draw the first parent control onto a preset interface corresponding to the second parent control, and take a screenshot of the updated preset interface to generate second screenshot data;

[0033] A third generating module is configured to perform fuzzy color mixing processing on the first screenshot data and the second screenshot data based on a first preset control position of the control to be rendered in the main canvas interface, so as to generate a first background image of the control to be rendered;

[0034] An execution module is configured to draw the first background image on the preset interface according to the first preset control position.

[0035] According to a third aspect of an embodiment of the present disclosure, there is provided an electronic device, including:

[0036] processor;

[0037] a memory for storing processor-executable instructions;

[0038] Among them, the processor is configured to execute the executable instructions to implement the steps of any one of the control background rendering methods in the first aspect of the present disclosure.

[0039] According to a fourth aspect of an embodiment of the present disclosure, a computer-readable storage medium is provided, on which computer program instructions are stored. When the program instructions are executed by a processor, the steps of the control background rendering method provided in the first aspect of the present disclosure are implemented.

[0040] The technical solution provided by the embodiments of the present disclosure may have the following beneficial effects:

[0041] Through the above scheme, when it is determined that the control to be rendered is an off-screen control, the parent layer control of the control to be rendered is determined to be the first parent control, and the parent layer control of the first parent control is determined to be the second parent control, and the main canvas interface of the terminal is screenshotted based on the second parent control to generate the first screenshot data, wherein the first screenshot data includes the second parent control but does not include the first parent control, the first parent control is drawn to the preset interface corresponding to the second parent control, and the updated preset interface is screenshotted to generate the second screenshot data, and based on the first preset control position of the control to be rendered in the main canvas interface, the first screenshot data and the second screenshot data are blurred and mixed to generate the first background image of the control to be rendered, and the first background image is drawn on the preset interface according to the first preset control position. Therefore, when the off-screen control is included in the parent control of the control, background blur and color mixing can be provided for the control in one process, which improves the control editing efficiency and makes the background blur of the off-screen control more accurate.

[0042] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the present disclosure.

[0044] Figure 1 The diagram is a schematic diagram of a method for drawing an off-screen control according to an exemplary embodiment.

[0045] Figure 2 The present invention is a flowchart of a control background rendering method according to an exemplary embodiment.

[0046] Figure 3 The diagram is a layout diagram of an off-screen control according to an exemplary embodiment.

[0047] Figure 4 It is a schematic diagram of a screenshot of a main canvas interface according to an exemplary embodiment.

[0048] Figure 5 It is a schematic diagram of a background image generating method according to an exemplary embodiment.

[0049] Figure 6 The figure is a schematic diagram showing a control background rendering effect according to an exemplary embodiment.

[0050] Figure 7 The figure is a flow chart of a method for generating a background image according to an exemplary embodiment.

[0051] Figure 8The present invention is a block diagram of a control background rendering device according to an exemplary embodiment.

[0052] Fig. 9 is a block diagram of an electronic device 900 according to an exemplary embodiment. DETAILED DESCRIPTION

[0053] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present disclosure. Instead, they are merely examples of devices and methods consistent with some aspects of the present disclosure as detailed in the appended claims.

[0054] It should be noted that all actions of acquiring signals, information or data in the present disclosure are carried out in compliance with the relevant data protection laws and policies of the country where the device is located and with the authorization given by the owner of the corresponding device.

[0055] The present disclosure is applied to the terminal application development system, and the UI interface of the terminal is developed and drawn. The UI interface includes multiple icons, each of which is used to display and operate to the user, and receives the user's click command on the interface, so as to jump to the corresponding application. In this embodiment, the application process for the user to click on the UI interface is used as the control of the UI interface, and each control has its own tile. In the process of UI interface development, when drawing a control in the system, it is necessary to distinguish whether the control needs to be off-screen, wherein the off-screen control refers to the space drawn outside the screen. Usually, the off-screen control is outside the screen or hidden in a certain position on the screen, and the user cannot directly see or interact with it. The off-screen control is used to complete the data preloading, background calculation, animation effect and other operations in the terminal. The drawing of the off-screen control is to first draw the control content on the interface bound to the control, and then draw the screenshot of the interface on the canvas passed in from the parent control of the off-screen control. Among them, the parent control is the upper control of the off-screen control, and the user needs to click the parent control first and then select the off-screen control in the parent control to realize the click on the off-screen control. Typically, during the UI interface development and drawing phase, when drawing an off-screen control, you need to first draw the parent control of the off-screen control, and then draw the content of the off-screen control in the parent control after the parent control is drawn.

[0056] For example, Figure 1 is a schematic diagram of a method for drawing an off-screen control according to an exemplary embodiment. Figure 1 As shown, in this embodiment, the drawing of the non-off-screen control is to directly draw the control content onto the canvas passed in from the parent control, for example, Figure 1In the content of process 2, the child controls 1 to N of the parent control are all non-off-screen controls. During the drawing process, the contents of the child controls 1 to N are drawn to the canvas of the parent control, thereby completing the drawing of each child control in the parent control. The drawing of the off-screen control is to complete process 1 first: complete the drawing of all off-screen controls in the rendering layer of the system, and then draw the contents of the off-screen control to the interface bound to the control. When drawing the contents of the parent control, when an off-screen control is encountered during the drawing, a screenshot is taken from the interface corresponding to the off-screen control, and then the screenshot is drawn to the canvas, thereby realizing the drawing of the off-screen control.

[0057] Among them, process 1 is before process 2, so the content of the parent control of the off-screen control cannot be obtained in process 1. The content of the parent control corresponding to the off-screen control can only be obtained in process 2. Therefore, when it is necessary to blur the background of the off-screen control, it is impossible to obtain the content of the parent control corresponding to the current off-screen parent control, that is, it is impossible to blur the background of the off-screen control.

[0058] In view of this, the present embodiment proposes a method for drawing off-screen controls, which moves process 1 in the above embodiment to process 2. During the execution of process 2, when the process flows to process 1, the off-screen control in process 1 can obtain the contents of all ancestors in the corresponding parent control canvas in process 2, so that the off-screen control can complete the background blur processing and realize the blurred background rendering of the off-screen control.

[0059] Figure 2 is a flowchart of a control background rendering method according to an exemplary embodiment. Figure 2 As shown, the method is used in a terminal and includes the following steps.

[0060] In step S11, when it is determined that the control to be rendered is an off-screen control, it is determined that the parent control of the control to be rendered is a first parent control, and the parent control of the first parent control is a second parent control.

[0061] This embodiment is applied to the scenario of blurring the background of off-screen controls in UI interface development. Usually, when blurring the background of a control, it is necessary to determine the content of the upper-level control corresponding to the control, that is, the background image of the upper-level control, and render the control background based on the background image to achieve the background blur of the control. However, based on the drawing logic of the off-screen control in the related technology, the content information of the corresponding off-screen parent control cannot be obtained during the drawing process of the off-screen control, resulting in the inability to blur the background of the off-screen control. Therefore, in this embodiment, the background of the off-screen control is rendered.

[0062] For example, during the UI interface editing process, controls are edited based on a preset editing order. When it is determined that the current control to be rendered is an off-screen control, the parent control of the control to be rendered is determined to be the first parent control, and the parent control of the first parent control is determined to be the second parent control. Usually, the off-screen controls are located at least three levels above the hierarchy. Therefore, it is necessary to determine the content of the first parent control in the upper layer corresponding to the off-screen control, and the content of the second parent control in the upper layer corresponding to the first parent control. For example, after determining that the current control to be rendered is an off-screen control, the parent control of the off-screen control, that is, the off-screen parent control, and the upper parent control of the off-screen parent control are determined from the current UI interface.

[0063] It is worth mentioning that, in this embodiment, taking the off-screen control located in the third-layer interface of the current UI interface as an example, when determining the parent control of the off-screen control, the first parent control on the corresponding second-layer interface and the second parent control on the corresponding first-layer interface are determined, wherein the first-layer interface is the bottom-layer control of the UI interface. However, in this embodiment, there is no limitation on the number of layers of the UI interface layer where the off-screen control is located. The off-screen control can also be located on a higher-level UI interface. When it is located on a higher-level UI interface, it is necessary to determine the parent controls of all parent layers of the off-screen control until the bottom-layer control. For example, when the off-screen control is located on the fifth layer, it is necessary to determine the parent control 1 of the off-screen control on the fourth layer, the parent control 2 on the third layer, the parent control 2 on the second layer, and the parent control 4 on the first layer, thereby determining all other parent controls of the off-screen control on the UI interface: parent control 1-parent control 4.

[0064] For example, Figure 3 is a layout diagram of an off-screen control according to an exemplary embodiment. Figure 3 As shown, the off-screen control is located in the fourth layer of the UI interface. The underlying window is the underlying component of the window system in the operating system that is responsible for managing and displaying the graphical interface. The underlying window is the interface provided by the operating system to other applications for creating and managing windows. This window is the window system where the current control to be rendered is located. The parent control is used to edit and manage the off-screen parent control. The off-screen parent control is used to edit and manage the child control therein, where the child control is the control to be rendered. Each layer of window may include multiple parent controls, and each corresponding parent control may include multiple off-screen parent controls, and each off-screen parent control may also include multiple controls.

[0065] Optionally, in some implementations, before the above step S11, the method further includes:

[0066] In response to the terminal being in a background blur mode, determining a multi-layer parent control of the control to be rendered;

[0067] When it is determined that there is an off-screen parent control in the multi-layer parent control, the control to be rendered is determined to be an off-screen control.

[0068] For example, in this embodiment, it is first determined whether the current terminal is in the background blur mode. When the control is edited in this mode, the background of the control is blurred and rendered. When the terminal is in the background blur mode, it is determined whether there is an off-screen parent control in the parent control of the control to be rendered. When there is an off-screen parent control in the parent control of the control to be rendered, it is determined that the current control to be rendered is an off-screen control.

[0069] In step S12, a screenshot is taken of the main canvas interface of the terminal based on the second parent control to generate first screenshot data, wherein the first screenshot data includes the second parent control but does not include the first parent control;

[0070] For example, in this embodiment, the off-screen control is located at the third layer of the UI interface, the first parent control is located at the second layer of the UI interface, and the second parent control is located at the bottom layer of the UI interface. Therefore, the second parent control is drawn on the main canvas interface of the terminal. During the drawing process of the UI interface, the controls are drawn one by one according to the preset drawing rules. During the drawing process, each child control of the second control is judged. If the child control is a non-off-screen control, the content of the child control is drawn to the main canvas interface corresponding to the second control based on the preset rules; when it is determined that there is an off-screen control in the first parent control of the second control, based on the image range of the second parent control on the terminal UI interface, the main canvas interface is screenshotted to generate the first screenshot data. Among them, the time point when the above-mentioned screenshot action occurs during the UI interface editing process is during the process of drawing the content of the second parent control and before drawing the first parent control in the second parent control. When it is determined that there is an off-screen control in the first parent control that needs to be blurred background rendered, the image of the second parent control in the main canvas interface is screenshotted to generate the first screenshot data. Therefore, the first screenshot data includes the spatial image edited by the current second parent control and the background of the current second parent control on the main canvas interface.

[0071] Optionally, in some implementations, the above step S12 includes:

[0072] Get the second preset control position of the first parent control in the main canvas interface;

[0073] Before drawing the first parent control in the second parent control, a screenshot of the main canvas interface is taken based on the second preset control position to generate first screenshot data.

[0074] For example, in this embodiment, the second preset control position of the first parent control in the main canvas interface is determined to facilitate drawing the content of the first parent control in the main canvas interface. Before drawing the first parent control in the second parent control, the main canvas interface is screenshotted based on the second preset control position to generate first screenshot data, thereby obtaining a background screenshot of the first parent control in the main canvas interface.

[0075] Optionally, in some implementations, the above step of “taking a screenshot of the main canvas interface based on the second preset control position to generate first screenshot data” includes:

[0076] Obtain the third screenshot data of the second parent control on the preset interface, and obtain the initial background image of the terminal;

[0077] Based on the third preset control position of the second parent control in the main canvas interface, fuzzy color mixing processing is performed on the third screenshot data and the initial background image to generate the main canvas interface;

[0078] A screenshot of the main canvas interface is taken based on the second preset control position to generate first screenshot data.

[0079] For example, in this embodiment, the main canvas interface is generated by performing fuzzy color mixing between the preset background of the second parent control and the initial background. Therefore, in this embodiment, the third screenshot data of the second parent control on the preset interface and the initial background image of the terminal on the main canvas interface are first obtained. Based on the third preset control position of the second parent control in the main canvas interface, the third screenshot data and the initial background image are fuzzy color mixed to generate the main canvas interface.

[0080] In step S13, the first parent control is drawn onto a preset interface corresponding to the second parent control, and a screenshot of the updated preset interface is taken to generate second screenshot data;

[0081] For example, the rendering layer of the terminal includes a preset interface bound to the second parent control, and the preset interface is used to draw the off-screen data of the second parent control. When it is determined that there is an off-screen control in the first parent control, it is determined that the first parent control needs to be drawn through the preset interface. In this embodiment, the first parent control is drawn on the preset interface bound to the second parent control to achieve off-screen drawing of the first parent control, and after the first parent control is drawn, the preset interface is taken a screenshot to generate second screenshot data. It should be noted that the second screenshot data includes the spatial content of the first parent control and the control background image set for the first parent control in the preset interface.

[0082] For example, Figure 4 is a schematic diagram showing a screenshot of a main canvas interface according to an exemplary embodiment. Figure 4As shown, during the drawing process of the second parent control, when drawing from the main canvas interface to the first parent control, a screenshot of the main canvas interface is taken based on the currently drawn second parent control to generate first screenshot data. Figure 4 As shown, the first screenshot data includes the background image content of the current window and the background content of the second parent control. The image background presented in the second parent control area of ​​the main canvas interface is the image background of the control to be rendered after the preset background content of the second parent control and the background image content of the current window are superimposed.

[0083] In step S14, based on a first preset control position of the control to be rendered in the main canvas interface, fuzzy color mixing processing is performed on the first screenshot data and the second screenshot data to generate a first background image of the control to be rendered.

[0084] For example, in this embodiment, the first screenshot data includes the background image of the second parent control in the main canvas interface, and the second screenshot data includes the background image of the first parent control in the preset interface corresponding to the second parent control, that is, the first screenshot data and the second screenshot data include the background content of all parent controls of the control to be rendered. The first screenshot data and the second screenshot data are subjected to fuzzy color mixing processing to generate the first background image of the control to be rendered. The fuzzy color mixing processing based on the first screenshot data and the second screenshot data is to fuzzy the first screenshot data and the second screenshot data, and then mix the blurred first screenshot data and the second screenshot data, so as to generate the first background image of the control to be rendered.

[0085] For example, Figure 5 is a schematic diagram of a background image generation method according to an exemplary embodiment. Figure 5 As shown, after the above steps generate mixed color screenshots of the underlying window and the current window, the background screenshot of the parent control, and the background screenshot of the off-screen parent control, the above screenshots are used as materials for drawing the fuzzy mixed color background of the control, and the content at the position of the control to be rendered is captured. After generating multiple frames of screenshot data, the multiple frames of screenshot data are fuzzy mixed color processed to generate the background image of the control to be rendered.

[0086] In step S15, a first background image is drawn on the preset interface according to the first preset control position.

[0087] For example, the first background image of the rendering control obtained in the above steps is drawn on the preset interface corresponding to the second parent control, thereby completing the background rendering of the control to be rendered. After the other child controls in the first parent control are drawn to the preset interface of the second parent control, a screenshot of the preset interface is taken, and the generated image is drawn at the corresponding position of the main canvas interface, thereby realizing the drawing of the first parent control and the second parent control.

[0088] Optionally, in one implementation, after the above step S15, the method further includes:

[0089] In response to the completion of drawing of the child control corresponding to the second parent control in the preset interface, taking a screenshot of the preset interface based on the position of the first preset control to generate a second background image of the control to be rendered;

[0090] According to the first preset control position, the second background image is drawn on the main canvas interface.

[0091] For example, after all child controls of the second parent control are drawn into the bound preset interface, based on the first preset control position of the control to be rendered in the main canvas interface, the preset interface of the second parent control is screenshotted to generate the second background image of the control to be rendered. Then, according to the first preset control position, the second background image is drawn onto the group canvas interface, thereby realizing the background rendering of the control to be rendered. Afterwards, the control content of the control to be rendered is drawn into the second background image, thereby realizing the drawing of the control to be rendered in the UI interface.

[0092] For example, Figure 6 is a schematic diagram showing a control background rendering effect according to an exemplary embodiment. Figure 6 As shown, according to the position of the control to be rendered in the main canvas interface and the background image of the control to be rendered determined in the above steps, the control to be rendered is drawn in the off-screen parent control of the main canvas interface, thereby realizing the background rendering of the control to be rendered.

[0093] Through the above scheme, when it is determined that the control to be rendered is an off-screen control, the parent layer control of the control to be rendered is determined to be the first parent control, and the parent layer control of the first parent control is determined to be the second parent control, and the main canvas interface of the terminal is screenshotted based on the second parent control to generate the first screenshot data, wherein the first screenshot data includes the second parent control but does not include the first parent control, the first parent control is drawn to the preset interface corresponding to the second parent control, and the updated preset interface is screenshotted to generate the second screenshot data, and based on the first preset control position of the control to be rendered in the main canvas interface, the first screenshot data and the second screenshot data are blurred and mixed to generate the first background image of the control to be rendered, and the first background image is drawn on the preset interface according to the first preset control position. Therefore, when the off-screen control is included in the parent control of the control, background blur and color mixing can be provided for the control in one process, which improves the control editing efficiency and makes the background blur of the off-screen control more accurate.

[0094] Figure 7 is a flow chart of a method for generating a background image according to an exemplary embodiment. Figure 7As shown, in some embodiments, the above step S14 includes the following steps.

[0095] Step S141, based on the first preset control position, intercept the first screenshot data and the second screenshot data to generate multiple frames of background images.

[0096] For example, in this embodiment, the first screenshot data and the second screenshot data include background images of other controls. Therefore, when processing the image, it is necessary to capture the first screenshot data and the second screenshot data based on the first preset control position preset in the main canvas interface of the control to be rendered to generate multiple frames of background images.

[0097] Step S142, performing fuzzy color mixing processing on multiple frames of background images to generate a first background image of the control to be rendered.

[0098] For example, in this embodiment, after obtaining multiple frames of background images through the above steps, fuzzy color mixing processing is performed on the multiple frames of background images to generate a first background image of the control to be rendered.

[0099] Optionally, in some implementations, the above step S142 includes:

[0100] Performing weighted averaging on each pixel in each background image of the multiple background images and surrounding pixels to generate multiple blurred background images;

[0101] The pixels of the multiple frames of blurred background images are weighted averaged to generate a first background image.

[0102] For example, in this embodiment, when multiple frames of background images are fuzzy mixed and fused into one background image, each frame of the background image is first blurred. In this embodiment, based on any frame of background image, the RGB values ​​between each pixel in the background image and the pixel values ​​around it are weighted averaged to generate the RGB color value of the pixel, and all pixels are weighted averaged to generate a blurred background image corresponding to the background image. Based on this processing method, multiple frames of background images are blurred to generate multiple frames of blurred background images, and then pixel fusion is performed on the multiple frames of blurred background images. In this embodiment, taking the pixel points at the same position as an example, the RGB color values ​​of the pixel points at the position of each frame of blurred background images are weighted averaged to generate the pixel value of the pixel point at the position, and each pixel point is mixed based on the above method to generate a first background image.

[0103] Through the above method, the screenshot data is fuzzy mixed color processed to generate the background image of the control to be rendered, which realizes the background rendering of the off-screen control, so that the obtained background image can better reflect the real background of the control, and improves the user experience of the user terminal UI interface.

[0104] Figure 8 is a block diagram of a control background rendering device according to an exemplary embodiment. Figure 8 The device 100 includes: a determination module 110, a first generation module 120, a second generation module 130, a third generation module 140 and an execution module 150.

[0105] The determination module 110 is configured to, when determining that the control to be rendered is an off-screen control, determine that the parent layer control of the control to be rendered is a first parent control, and the parent layer control of the first parent control is a second parent control;

[0106] A first generating module 120 is configured to take a screenshot of the main canvas interface of the terminal based on the second parent control to generate first screenshot data, wherein the first screenshot data includes the second parent control but does not include the first parent control;

[0107] The second generating module 130 is configured to draw the first parent control onto a preset interface corresponding to the second parent control, and take a screenshot of the updated preset interface to generate second screenshot data;

[0108] The third generating module 140 is configured to perform fuzzy color mixing processing on the first screenshot data and the second screenshot data based on a first preset control position of the control to be rendered in the main canvas interface, so as to generate a first background image of the control to be rendered;

[0109] The execution module 150 is configured to draw the first background image on the preset interface according to the first preset control position.

[0110] Optionally, the third generating module 140 includes:

[0111] A first generating submodule is configured to intercept the first screenshot data and the second screenshot data based on the first preset control position to generate multiple frames of background images;

[0112] The second generating submodule is configured to perform fuzzy color mixing processing on multiple frames of background images to generate a first background image of the control to be rendered.

[0113] Optionally, the second generation submodule is configured as follows:

[0114] Performing weighted averaging on each pixel in each background image of the multiple background images and surrounding pixels to generate multiple blurred background images;

[0115] The pixels of the multiple frames of blurred background images are weighted averaged to generate a first background image.

[0116] Optionally, the apparatus 100 further includes a drawing module, and the drawing module is configured to:

[0117] In response to the completion of drawing of the child control corresponding to the second parent control in the preset interface, taking a screenshot of the preset interface based on the position of the first preset control to generate a second background image of the control to be rendered;

[0118] According to the first preset control position, the second background image is drawn on the main canvas interface.

[0119] Optionally, the first generating module 120 includes:

[0120] An acquisition submodule is configured to acquire a second preset control position of the first parent control in the main canvas interface;

[0121] The third generating submodule is configured to take a screenshot of the main canvas interface based on the second preset control position before drawing the first parent control in the second parent control to generate first screenshot data.

[0122] Optionally, the third generation submodule is configured as follows:

[0123] Obtain the third screenshot data of the second parent control on the preset interface, and obtain the initial background image of the terminal;

[0124] Based on the third preset control position of the second parent control in the main canvas interface, fuzzy color mixing processing is performed on the third screenshot data and the initial background image to generate the main canvas interface;

[0125] A screenshot of the main canvas interface is taken based on the second preset control position to generate first screenshot data.

[0126] Optionally, the apparatus 100 further includes a determining module, and the determining module is configured to:

[0127] In response to the terminal being in a background blur mode, determining a multi-layer parent control of the control to be rendered;

[0128] When it is determined that there is an off-screen parent control in the multi-layer parent control, the control to be rendered is determined to be an off-screen control.

[0129] Regarding the device in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0130] The present disclosure also provides a computer-readable storage medium having computer program instructions stored thereon, and when the program instructions are executed by a processor, the steps of the control background rendering method provided by the present disclosure are implemented.

[0131] Fig. 91 is a block diagram of an electronic device 900 according to an exemplary embodiment. For example, the electronic device 900 may be a mobile phone, a computer, a digital broadcast terminal, a messaging device, a game console, a tablet device, a medical device, a fitness device, a personal digital assistant, etc.

[0132] Reference Fig. 9 The electronic device 900 may include one or more of the following components: a processing component 902 , a memory 904 , a power component 906 , a multimedia component 909 , an audio component 910 , an input / output interface 912 , a sensor component 914 , and a communication component 916 .

[0133] The processing component 902 generally controls the overall operation of the electronic device 900, such as operations associated with display, phone calls, data communications, camera operations, and recording operations. The processing component 902 may include one or more processors 920 to execute instructions to complete all or part of the steps of the above-mentioned method. In addition, the processing component 902 may include one or more modules to facilitate the interaction between the processing component 902 and other components. For example, the processing component 902 may include a multimedia module to facilitate the interaction between the multimedia component 909 and the processing component 902.

[0134] The memory 904 is configured to store various types of data to support operations on the electronic device 900. Examples of such data include instructions for any application or method operating on the electronic device 900, contact data, phone book data, messages, pictures, videos, etc. The memory 904 may be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk or optical disk.

[0135] The power supply component 906 provides power to the various components of the electronic device 900. The power supply component 906 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power to the electronic device 900.

[0136] The multimedia component 909 includes a screen that provides an output interface between the electronic device 900 and the user. In some embodiments, the screen may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive input signals from the user. The touch panel includes one or more touch sensors to sense touch, slide, and gestures on the touch panel. The touch sensor may not only sense the boundaries of the touch or slide action, but also detect the duration and pressure associated with the touch or slide operation. In some embodiments, the multimedia component 909 includes a front camera and / or a rear camera. When the electronic device 900 is in an operating mode, such as a shooting mode or a video mode, the front camera and / or the rear camera may receive external multimedia data. Each front camera and rear camera may be a fixed optical lens system or have a focal length and optical zoom capability.

[0137] The audio component 910 is configured to output and / or input audio signals. For example, the audio component 910 includes a microphone (MIC), and when the electronic device 900 is in an operating mode, such as a call mode, a recording mode, and a voice recognition mode, the microphone is configured to receive an external audio signal. The received audio signal can be further stored in the memory 904 or sent via the communication component 916. In some embodiments, the audio component 910 also includes a speaker for outputting audio signals.

[0138] The input / output interface 912 provides an interface between the processing component 902 and the peripheral interface modules, which may be keyboards, click wheels, buttons, etc. These buttons may include but are not limited to: a home button, a volume button, a start button, and a lock button.

[0139] The sensor assembly 914 includes one or more sensors for providing various aspects of status assessment for the electronic device 900. For example, the sensor assembly 914 can detect the open / closed state of the electronic device 900, the relative positioning of components, such as the display and keypad of the electronic device 900, and the sensor assembly 914 can also detect the position change of the electronic device 900 or a component of the electronic device 900, the presence or absence of user contact with the electronic device 900, the orientation or acceleration / deceleration of the electronic device 900, and the temperature change of the electronic device 900. The sensor assembly 914 may include a proximity sensor configured to detect the presence of nearby objects without any physical contact. The sensor assembly 914 may also include an optical sensor, such as a CMOS or CCD image sensor, for use in imaging applications. In some embodiments, the sensor assembly 914 may also include an accelerometer, a gyroscope sensor, a magnetic sensor, a pressure sensor, or a temperature sensor.

[0140] The communication component 916 is configured to facilitate wired or wireless communication between the electronic device 900 and other devices. The electronic device 900 can access a wireless network based on a communication standard, such as WiFi, 2G or 3G, or a combination thereof. In an exemplary embodiment, the communication component 916 receives a broadcast signal or broadcast-related information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communication component 916 also includes a near field communication (NFC) module to facilitate short-range communication. For example, the NFC module can be implemented based on radio frequency identification (RFID) technology, infrared data association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology and other technologies.

[0141] In an exemplary embodiment, the electronic device 900 can be implemented by one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors or other electronic components to execute the above-mentioned control background rendering method.

[0142] In an exemplary embodiment, a non-transitory computer-readable storage medium including instructions is also provided, such as a memory 904 including instructions, and the instructions can be executed by a processor 920 of an electronic device 900 to complete the above-mentioned control background rendering method. For example, the non-transitory computer-readable storage medium can be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.

[0143] In addition to being an independent electronic device, the above-mentioned device can also be a part of an independent electronic device. For example, in one embodiment, the device can be an integrated circuit (IC) or a chip, wherein the integrated circuit can be an IC or a collection of multiple ICs; the chip can include but is not limited to the following types: GPU (Graphics Processing Unit), CPU (Central Processing Unit), FPGA (Field Programmable Gate Array), DSP (Digital Signal Processor), ASIC (Application Specific Integrated Circuit), SOC (System on Chip, SoC), etc. The above-mentioned integrated circuit or chip can be used to execute executable instructions (or codes) to implement the above-mentioned control background rendering method. The executable instructions can be stored in the integrated circuit or chip, or can be obtained from other devices or equipment, such as the integrated circuit or chip including a processor, a memory, and an interface for communicating with other devices. The executable instruction can be stored in the memory, and when the executable instruction is executed by the processor, the above-mentioned control background rendering method is implemented; alternatively, the integrated circuit or chip can receive the executable instruction through the interface and transmit it to the processor for execution, so as to implement the above-mentioned control background rendering method.

[0144] In another exemplary embodiment, a computer program product is further provided. The computer program product includes a computer program that can be executed by a programmable device. The computer program has a code portion for executing the above-mentioned control background rendering method when executed by the programmable device.

[0145] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the present disclosure. The present disclosure is intended to cover any variations, uses or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art that are not disclosed in the present disclosure. The description and examples are to be considered as exemplary only, and the true scope and spirit of the present disclosure are indicated by the following claims.

[0146] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A control background rendering method, characterized in that: Applied to terminals, including: When it is determined that the control to be rendered is an off-screen control, determining that the parent layer control of the control to be rendered is a first parent control, and the parent layer control of the first parent control is a second parent control; Taking a screenshot of the main canvas interface of the terminal based on the second parent control to generate first screenshot data, wherein the first screenshot data includes the second parent control but does not include the first parent control; Drawing the first parent control onto a preset interface corresponding to the second parent control, and taking a screenshot of the updated preset interface to generate second screenshot data; Based on a first preset control position of the control to be rendered in the main canvas interface, performing fuzzy color mixing processing on the first screenshot data and the second screenshot data to generate a first background image of the control to be rendered; The first background image is drawn on the preset interface according to the first preset control position.

2. The method according to claim 1, characterized in that The performing fuzzy color mixing processing on the first screenshot data and the second screenshot data based on the first preset control position of the control to be rendered in the main canvas interface to generate a first background image of the control to be rendered includes: Based on the first preset control position, intercepting the first screenshot data and the second screenshot data to generate multiple frames of background images; Perform fuzzy color mixing processing on the multiple frames of background images to generate a first background image of the control to be rendered.

3. The method according to claim 2, characterized in that The performing fuzzy color mixing processing on the multiple frames of background images to generate the first background image of the control to be rendered includes: Performing weighted averaging on each pixel in each background image of the multiple background images and surrounding pixels to generate multiple blurred background images; The first background image is generated by performing weighted averaging on pixels of the multiple frames of blurred background images.

4. The method according to claim 1, characterized in that: The method further comprises: In response to the completion of drawing of the child control corresponding to the second parent control in the preset interface, taking a screenshot of the preset interface based on the position of the first preset control to generate a second background image of the control to be rendered; According to the first preset control position, the second background image is drawn on the main canvas interface.

5. The method according to claim 1, characterized in that The taking a screenshot of the main canvas interface of the terminal based on the second parent control to generate first screenshot data includes: Obtaining a second preset control position of the first parent control in the main canvas interface; Before drawing the first parent control in the second parent control, a screenshot of the main canvas interface is taken based on the second preset control position to generate the first screenshot data.

6. The method according to claim 5, characterized in that The taking a screenshot of the main canvas interface based on the second preset control position to generate the first screenshot data includes: Acquire third screenshot data of the second parent control on the preset interface, and acquire an initial background image of the terminal; Based on a third preset control position of the second parent control in the main canvas interface, performing fuzzy color mixing processing on the third screenshot data and the initial background image to generate the main canvas interface; The main canvas interface is screenshotted based on the second preset control position to generate the first screenshot data.

7. The method according to claim 1, characterized in that The method further comprises: In response to the terminal being in a background blur mode, determining a multi-layer parent control of the control to be rendered; When it is determined that there is an off-screen parent control in the multi-layer parent control, the control to be rendered is determined to be the off-screen control.

8. A control background rendering device, characterized in that: Applied to a terminal, the device comprises: A determination module is configured to, when determining that the control to be rendered is an off-screen control, determine that the parent layer control of the control to be rendered is a first parent control, and the parent layer control of the first parent control is a second parent control; a first generating module, configured to take a screenshot of the main canvas interface of the terminal based on the second parent control to generate first screenshot data, wherein the first screenshot data includes the second parent control but does not include the first parent control; A second generating module is configured to draw the first parent control onto a preset interface corresponding to the second parent control, and take a screenshot of the updated preset interface to generate second screenshot data; A third generating module is configured to perform fuzzy color mixing processing on the first screenshot data and the second screenshot data based on a first preset control position of the control to be rendered in the main canvas interface, so as to generate a first background image of the control to be rendered; An execution module is configured to draw the first background image on the preset interface according to the first preset control position.

9. An electronic device, characterized in that: include: processor; a memory for storing processor-executable instructions; Wherein, the processor is configured to execute the executable instructions to implement the steps of the control background rendering method described in any one of claims 1-7.

10. A computer-readable storage medium having computer program instructions stored thereon, characterized in that: When the program instructions are executed by a processor, the steps of the method described in any one of claims 1 to 7 are implemented.

Images