An image rendering method, device, electronic equipment and storage medium

Abstract

The application provides an image rendering method and device, electronic equipment and storage medium, and relates to the field of visualization interface, and the method comprises the steps that when starting interface rendering, control drawing nodes are extracted from a preset layout file; according to the association relationship between the control drawing nodes recorded in the preset layout file, the control drawing nodes are inserted into a rendering node tree, and the corresponding background effect nodes are set for the control drawing nodes; the control image is rendered by using each control drawing node in the rendering node tree in turn, and the background image containing the current output image content and with the background effect is generated for the control image by using the background effect node; when the generation of the control image and the corresponding background image is completed each time, the control image and the corresponding background image are output; the independent background image can be generated for the corresponding control drawing node by using the background effect node, and the background effect is realized for the corresponding control image by using the background image, so that the problem of invalid background effect is solved.

Description

Technical Field

[0001] This invention relates to the field of visual interfaces, and in particular to an image rendering method, apparatus, electronic device, and computer-readable storage medium. Background Technology

[0002] In related technologies, the rendering of visual interfaces is typically achieved using a rendering node tree. This tree structure contains several control drawing nodes, each containing corresponding control image drawing logic. Each control drawing node can have various attributes set, such as background effect attributes, to add background effects to the background content of the control image corresponding to that node. However, in practical applications, background effect attributes can easily conflict with other attributes of the control drawing nodes, potentially causing the control image background effect to malfunction. Summary of the Invention

[0003] The purpose of this invention is to provide an image rendering method, apparatus, electronic device, and computer-readable storage medium, which can generate independent background images for corresponding control drawing nodes using independent background effect nodes, and use the background images to achieve background effects for corresponding control images, thereby avoiding background effect failure.

[0004] To solve the above-mentioned technical problems, the present invention provides an image rendering method, comprising:

[0005] When the interface rendering starts, extract the control drawing nodes from the preset layout file;

[0006] According to the association relationship between each control drawing node recorded in the preset layout file, the control drawing node is inserted into the rendering node tree, and a corresponding background effect node is set for the control drawing node;

[0007] The node rendering control image is drawn sequentially using each control in the rendering node tree, and the background effect node is used to generate a background image for the control image that contains the currently output image content and has a background effect;

[0008] Each time the control image and its corresponding background image are generated, the control image and its corresponding background image are output.

[0009] Optionally, setting a corresponding background effect node for the control drawing node includes:

[0010] Insert the background effect node at the same insertion position as the control drawing node;

[0011] Accordingly, generating a background image for the control image that includes the currently output image content and has a background effect using the background effect node includes:

[0012] The background effect node is obtained from the insertion position corresponding to the control drawing node, and the background image is generated using the background effect node.

[0013] Optionally, before inserting the background effect node at the same insertion position as the control drawing node, the method further includes:

[0014] Determine whether the control drawing node has a background effect attribute;

[0015] If so, then perform the step of inserting the background effect node at the same insertion position as the control drawing node.

[0016] Optionally, generating a background image for the control image using the background effect node, which includes the currently output image content and has a background effect, includes:

[0017] The background effect node is used to extract the currently output image content to obtain the initial background image;

[0018] The background image is obtained by setting the background effect for the initial background image, and then the background image is placed below the control image.

[0019] Optionally, setting the background image below the control image includes:

[0020] The background effect node is used to synchronize the position attribute from the corresponding control drawing node, and the position attribute is used to set the background image below the control image.

[0021] Optionally, it also includes:

[0022] The background effect node is used to synchronize animation properties, scaling properties, and clipping properties from the corresponding control drawing node, so as to realize animation, scaling, and clipping effects for the background image through the animation properties, the scaling properties, and the clipping properties.

[0023] Optionally, the background effect is a background blur effect.

[0024] Optionally, before extracting the control drawing nodes from the preset layout file, the following steps are also included:

[0025] The preset layout file is traversed to find the target control drawing node with the transparency attribute;

[0026] The target control drawing node is rendered, and the obtained target control image is cached.

[0027] Upon completion of rendering all the target control drawing nodes, proceed to the step of extracting control drawing nodes from the preset layout file;

[0028] Accordingly, inserting the control drawing node into the rendering node tree includes:

[0029] Determine whether the control drawing node belongs to the target control drawing node;

[0030] If so, the target control image is inserted into the rendering node tree, and a transparency attribute is added to the target control image;

[0031] Accordingly, the step of sequentially drawing node rendering control images using each control in the rendering node tree includes:

[0032] Determine whether the currently rendered control drawing node is the target control image;

[0033] If so, the target control image is set as the control image to be output, and the transparency of the target control image is adjusted by the transparency attribute of the target control image.

[0034] The present invention also provides an image rendering apparatus, comprising:

[0035] Extract nodes, used to extract control drawing nodes from the preset layout file when the startup interface is rendered;

[0036] The rendering node tree construction module is used to insert the control drawing nodes into the rendering node tree according to the association relationship between the control drawing nodes recorded in the preset layout file, and to set the corresponding background effect nodes for the control drawing nodes.

[0037] The rendering module is used to draw node rendering control images sequentially using each control in the rendering node tree, and to generate a background image for the control image containing the currently output image content and having a background effect using the background effect node;

[0038] The output module is used to output the control image and its corresponding background image each time the generation of the control image and its corresponding background image is completed.

[0039] The present invention also provides an electronic device, comprising:

[0040] Memory, used to store computer programs;

[0041] A processor for executing the computer program to implement the image rendering method described above.

[0042] The present invention also provides a computer-readable storage medium storing computer-executable instructions, which, when loaded and executed by a processor, implement the image rendering method described above.

[0043] This invention provides an image rendering method, comprising: extracting control drawing nodes from a preset layout file when starting interface rendering; inserting the control drawing nodes into a rendering node tree according to the association relationship between the control drawing nodes recorded in the preset layout file, and setting corresponding background effect nodes for the control drawing nodes; rendering control images sequentially using each control drawing node in the rendering node tree, and generating a background image for the control image containing the currently output image content and having a background effect using the background effect nodes; and outputting the control image and its corresponding background image each time the generation of the control image and its corresponding background image is completed.

[0044] As can be seen, when the interface rendering is initiated, this invention first inserts the control drawing nodes from the preset layout file into the rendering node tree according to the association relationship between the drawing nodes of each control recorded in the preset layout file. During the insertion process, a corresponding background effect node is set for each control drawing node. The background effect node can draw a background image independently and set a background effect for that image. Subsequently, this invention can sequentially render control images using each control drawing node in the rendering node tree, and use the background effect node to generate a background image for the control image containing the currently output image content and having a background effect. Each time the generation of the control image and its corresponding background image is completed, the control image and its corresponding background image are output. This allows the background image drawing logic to be separated from the control drawing node, forming a separate background effect node. This node is then used to generate an independent background image for the control drawing node, thus enabling the use of an independent background image to achieve a background effect for the control image, avoiding the previously common problem of background effect failure. Furthermore, since the background image generation order is consistent with the rendering order of the corresponding control image, and both images are output each time the control image and its corresponding background image are generated, the correct content contained in the background image can be ensured. The present invention may also provide an image rendering apparatus, an electronic device, and a storage medium, which have the above-mentioned beneficial effects. Attached Figure Description

[0045] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on the provided drawings without creative effort.

[0046] Figure 1 This is a schematic diagram of a conventional rendering node tree provided in an embodiment of the present invention;

[0047] Figure 2 A flowchart of an image rendering method provided in an embodiment of the present invention;

[0048] Figure 3 This is a schematic diagram of an improved rendering node tree provided in an embodiment of the present invention;

[0049] Figure 4 This is a structural block diagram of an image rendering apparatus provided in an embodiment of the present invention. Detailed Implementation

[0050] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0051] In related technologies, various attributes can be set for each control drawing node in the rendering node tree, such as background effect attributes, to add background effects to the background content of the control image corresponding to the control drawing node. However, in practical applications, background effect attributes are prone to conflict with other attributes of control drawing nodes, such as transparency attributes. This is related to the timing of background effect attribute processing and the drawing order of control drawing nodes with transparency attributes. Specifically, background effect attributes are usually set immediately when the control drawing node renders and generates the control image, using the currently output background image content to set the background effect for the spatial image. In addition, each control drawing node should originally be rendered and output in the order specified by the rendering node tree, but special control drawing nodes with transparency attributes will render and cache the control image in advance before all nodes perform rendering actions; when it is determined that this special node needs to be rendered and output according to the order specified by the rendering node tree, this special node will only output the cached image and use this image to achieve the transparency adjustment effect. This is because the Android operating system assumes that when setting the transparency attribute, the control drawing node often continues to set animation effects, meaning the control image of that node will continuously change. Therefore, control images with transparency attributes can be pre-rendered to save unnecessary drawing costs. As described above, when a special node with a transparency attribute renders its control image, the control images of each node in the rendering node tree are not yet rendered. This means the logic for handling background effect attributes cannot obtain the currently output background image content, thus preventing the setting of background effects for the control image of the special node.

[0052] For easier understanding, please refer to Figure 1 , Figure 1This is a schematic diagram of a conventional rendering node tree provided in an embodiment of the present invention. Nodes 1 to 6 are all control drawing nodes, and node 6 has both a background effect attribute (i.e., "background blur") and a transparency attribute. The tree structure containing the root node is the rendering node tree. In one possible case, the rendering output order specified by this tree structure can be: node 1, node 5, node 2, node 6, node 3, node 4. In other words, when rendering node 6 according to the above order, at least the control images of nodes 1, 2, and 5 should have been rendered and output, and the "background blur" attribute of node 6 should be able to obtain a background image containing the control images of nodes 1, 2, and 5. However, since node 6 has a transparency attribute, it should render and cache the control image in advance and insert the image into the corresponding position in the rendering node tree to directly output the image. Consequently, when rendering is performed at this node, the control images of nodes 1, 2, and 5 are not rendered. This causes the code logic that processes the "background blur" effect of node 6 to be unable to obtain the correct background image, thus failing to set the background blur effect correctly for the control image of this node, and ultimately causing the background blur effect in the control image of node 6 to fail.

[0053] In view of this, the present invention provides an image rendering method that separates the code logic for processing background effect attributes from the control drawing node, forming a separate background effect node. The background effect node and the control drawing node are set as sibling nodes. This ensures that when the control image is rendered using the control drawing node according to the order specified by the rendering node tree, the sibling background effect node will also be used to generate a background image containing the currently output image content and with background effects. Subsequently, the control image and background image can be output simultaneously, thus ensuring that the background effect remains effective. Please refer to [reference needed]. Figure 2 , Figure 2 A flowchart of an image rendering method provided in an embodiment of the present invention, the method may include

[0054] S201. When rendering the startup interface, extract the control drawing nodes from the preset layout file.

[0055] It should be noted that the preset layout file is a manually written code file that records the code logic corresponding to each control drawing node, as well as the relationships between the control drawing nodes, such as parent-child relationships; while the control drawing node contains the code logic required to render and generate the control image. It should also be noted that this embodiment of the invention does not limit the specific preset layout file and can be set according to actual application needs.

[0056] S202. Based on the relationship between the drawing nodes of each control recorded in the preset layout file, insert the drawing nodes of the control into the rendering node tree, and set the corresponding background effect nodes for the drawing nodes of the control.

[0057] In this embodiment of the invention, a rendering node tree can be constructed based on the relationships between control drawing nodes recorded in a preset layout file. This tree structure, also known as RenderNodeTree or DisplayList, is used to record the relationships between control drawing nodes and to specify the rendering output order of each node. It should be noted that in this embodiment, when inserting each control drawing node into the tree structure, a corresponding background effect node is also set for that node. This background effect node is used to set the background effect for the control image of the control setting node. As described above, the background effect node is an independent node formed by separating the code logic for handling background effects from the control drawing node. It is dedicated to generating a background image with background effects for the corresponding control drawing node. Furthermore, the background effect node waits for its parent control drawing node to perform relevant processing according to the rendering output order specified by the rendering node tree before executing the background image rendering action. That is, the background effect node strictly follows the order of its parent control drawing node in the rendering node tree to execute the rendering output action, thereby ensuring that the background image contains the correct content. In other words, in this embodiment of the invention, the background effect is not handled by the control drawing node, but by an independent background effect node; and the background effect node executes the rendering actions in the correct order, ensuring that the background effect does not fail and that the background image contains the correct content. It is worth noting that the background effect node can be pre-written into a code file, and then created based on the code content when the node is needed. It should be noted that this embodiment of the invention does not limit the specific background effect; for example, it can be a background blur, a background inversion, etc., and can be set according to actual application requirements.

[0058] Furthermore, it should be noted that the embodiments of the present invention do not limit how to set the corresponding background effect node for the control drawing node, as long as it can be ensured that when the control drawing node is processed in the order specified by the rendering node tree, the background image can be generated using the background effect node corresponding to that node. In one possible case, the background effect node can be inserted into the same insertion position of its corresponding control drawing node in the rendering node tree, so that the two nodes are rendered simultaneously.

[0059] In one possible scenario, setting a corresponding background effect node for the control's drawing node could include:

[0060] Step 11: Insert the background effect node at the same insertion position as the control drawing node.

[0061] It should be noted that the embodiments of the present invention do not limit the insertion order of the background effect node and the control drawing node. For example, the background effect node can be inserted first and then the control drawing node can be inserted, or vice versa, as long as it can be ensured that the two nodes are inserted in the same position in the rendering node tree.

[0062] Furthermore, this invention does not limit whether the aforementioned background effect node is set for every control drawing node, or only for control drawing nodes with background effect attributes. Considering that the number of controls in the visual interface may be large, setting a background effect node for every control drawing node would significantly increase the size of the rendering node tree, resulting in wasted resources. Therefore, in this embodiment of the invention, the background effect attribute is set only for control drawing nodes with background effect attributes. In other words, before inserting a background effect node into the rendering node tree, it is necessary to determine whether the control drawing node to which it belongs has a background effect attribute.

[0063] In one possible scenario, before inserting the background effect node at the same insertion position as the control drawing node, it may also include:

[0064] Step 21: Determine whether the control drawing node has a background effect attribute; if yes, proceed to step 22; if no, do not insert a background effect node.

[0065] Step 22: Perform the step of inserting the background effect node at the same insertion position as the control drawing node.

[0066] For easier understanding, please refer to Figure 3 , Figure 3 This is a schematic diagram of an improved rendering node tree provided in an embodiment of the present invention, which is related to... Figure 1 The difference lies in the fact that node 6 has an additional background blur node at its insertion position in the rendering node tree. Therefore, when processing node 6 according to the order specified by the rendering node tree, the background blur node can be used to generate a background image with a background blur effect for node 6, and both the background image and the node 6 image are then output. It should be noted that the setting method for background effect nodes is exactly the same for nodes without transparency attributes. For example, when node 5 has a background blur attribute, a background blur node can be inserted at the insertion position of node 5. Then, when processing node 5 according to the order specified by the rendering node tree, the background blur node can be used to generate a background image with a background blur effect for the control image of node 5, and both the background image and the control image are then output.

[0067] S203. Sequentially use each control in the rendering node tree to draw the node rendering control image, and use the background effect node to generate a background image for the control image that contains the currently output image content and has a background effect.

[0068] Specifically, when the background effect node and its corresponding control drawing node are set at the same insertion position, when rendering the control drawing node, only the background effect node needs to be extracted from its corresponding insertion node. Of course, if the background effect node cannot be obtained from the above insertion position, it means that the control drawing node does not have a background effect attribute set. In this case, you only need to use the node to render the control image and output it.

[0069] Accordingly, the background effect node is used to generate a background image for the control image that includes the currently output image content and has a background effect, including:

[0070] Step 31: Obtain the background effect node from the insertion position corresponding to the control drawing node, and use the background effect node to generate a background image.

[0071] It should be noted that the embodiments of the present invention do not limit the specific rendering order of the rendering node tree. For example, it can start from the root node and continuously search for child nodes downwards. When it is determined that the currently searched node does not have child nodes or does not have unrendered child nodes, the currently searched node is rendered. After the rendering is completed, it returns to its parent node to continue rendering or searching. It can be set according to the actual application requirements.

[0072] Furthermore, when generating a background image, the background effect node should first capture the currently rendered image content and set the corresponding background effect for that image content to obtain the background image. Subsequently, to ensure correct display, the background effect node also needs to place the background image below the control image of its associated control drawing node. It should be noted that the embodiments of the present invention do not limit the specific method of setting the background effect; reference can be made to the implementation techniques of effects such as background blur and background inversion.

[0073] In one possible scenario, the background effect node is used to generate a background image for the control image that includes the currently output image content and has a background effect, including:

[0074] Step 41: Use the background effect node to extract the currently output image content to obtain the initial background image;

[0075] Step 42: Set the background effect for the initial background image to obtain the background image, and set the background image below the control image.

[0076] In other words, in this embodiment of the invention, the control with background effects is actually generated by overlaying the control image and the background image. Specifically, to ensure that the position information of the background image is set correctly, the background effect node can also synchronize the position attribute from its corresponding control drawing node, and use this attribute to set the background image below the control image, wherein the position attribute is used to record the display position of the control image on the screen.

[0077] In one possible scenario, setting the background image below the control image could include:

[0078] Step 51: Use the background effect node to synchronize the position property from the corresponding control drawing node, and use the position property to set the background image below the control image.

[0079] Furthermore, it is understood that the control image may also have other displayable properties, such as animation properties, scaling properties, and cropping properties. To ensure correct display, the background image can also have these properties set. In other words, the background effect node can synchronize the above animation properties, scaling properties, and cropping properties from the corresponding control drawing node and set them for the background image to ensure that the background image can also be animated, scaled, and cropped first.

[0080] In one possible scenario, it may also include:

[0081] Step 61: Use the background effect node to synchronize the animation, scaling, and clipping properties from the corresponding control drawing node to achieve animation, scaling, and clipping effects for the background image through the animation, scaling, and clipping properties.

[0082] S204. Each time the control image and its corresponding background image are generated, output the control image and its corresponding background image.

[0083] It should be noted that after rendering the images of each control drawing node and its background effect node, the corresponding control image and background image need to be output before the next control drawing node and its background effect node can be rendered.

[0084] Based on the above embodiments, when the interface rendering is initiated, the present invention first inserts the control drawing nodes in the preset layout file into the rendering node tree according to the association relationship between the drawing nodes of each control recorded in the preset layout file. During the insertion process, a corresponding background effect node is set for each control drawing node. The background effect node can draw a background image independently and set a background effect for the image. Subsequently, the present invention can sequentially render control images using each control drawing node in the rendering node tree, and generate a background image containing the currently output image content and having a background effect for the control image using the background effect node. Each time the generation of the control image and its corresponding background image is completed, the control image and its corresponding background image are output. This allows the drawing logic of the background image to be separated from the control drawing node, forming a separate background effect node. This node is then used to generate an independent background image for the control drawing node, thereby enabling the use of an independent background image to achieve a background effect for the control image, avoiding the previously common problem of background effect failure. In addition, since the background image generation order is consistent with the rendering order of the corresponding control image, and both images are output each time the control image and its corresponding background image are generated, the correct content contained in the background image can be ensured.

[0085] Based on the above embodiments, the rendering process when a control drawing node simultaneously has transparency and background effect attributes will be described in detail below. In one possible scenario, this embodiment of the invention also provides an image rendering method, which may include:

[0086] S301. Traverse the preset layout file to find the target control drawing node with the transparency attribute.

[0087] S302. Render the target control drawing node and cache the obtained target control image.

[0088] It should be noted that the embodiments of the present invention do not change the rendering order of control images with transparency attributes; they are still rendered before other control images. The difference lies in that, after the target control image is rendered, the embodiments of the present invention do not immediately set the background effect attribute for the image. Instead, according to the rendering output order specified by the rendering node tree, when it is the target control drawing node's turn to begin processing, the background effect node is used to generate a background image with a background effect for the image. This effectively avoids the problem of background effect failure for control images that simultaneously have background effect attributes and transparency attributes.

[0089] S303. When rendering all target control drawing nodes is complete, extract the control drawing nodes from the preset layout file.

[0090] S304. Determine whether the control drawing node belongs to the target control drawing node. If yes, proceed to step S305; otherwise, proceed to step S306.

[0091] S305. Based on the relationship between the drawing nodes of each control recorded in the preset layout file, insert the target control image into the rendering node tree, add a transparency attribute to the target control image, and set the corresponding background effect node for the target control image.

[0092] S306. Based on the relationship between the drawing nodes of each control recorded in the preset layout file, insert the drawing nodes of the control into the rendering node tree, and set the corresponding background effect nodes for the drawing nodes of the control.

[0093] like Figure 3 As shown, for node 6, which has both transparency and background effect attributes, the rendered image can be directly inserted into the corresponding position in the rendering node tree, and a background effect node can be inserted at the same position. Other nodes without transparency attributes can also be processed in the same way. Of course, it can be understood that background effect nodes can only be set for drawing nodes of controls with background effect attributes. For example, for node 5, which does not have background effect attributes, a background effect node can be left unset.

[0094] S307. Extract the currently rendered control drawing node from the rendering node tree in sequence, and determine whether the currently rendered control drawing node is the target control image.

[0095] S308. If so, set the target control image as the control image to be output, so as to adjust the transparency of the target control image through the transparency attribute of the target control image, and at the same time use the background effect node corresponding to the target control image to generate a background image for the target control image that contains the currently output image content and has a background effect.

[0096] It should be noted here that when it is determined that the currently rendered control drawing node is the target control image, if it is determined that the image also has a background effect node, then the corresponding background image also needs to be generated before the target control image and the background image can be output.

[0097] S309. If not, then render the control image using the currently rendered control drawing node, and generate a background image for the control image using the background effect node, which includes the currently output image content and has a background effect.

[0098] S310. Each time the control image and its corresponding background image are generated, output the control image and its corresponding background image.

[0099] It is worth noting that, in addition to preventing the background effect of the control image from malfunctioning, the embodiments of the present invention also have relatively low overhead in terms of running efficiency. Specifically, the additional overhead of this method for each frame operation is only 1.6ms, which is a small percentage compared to the total drawing overhead of 11.1ms for one frame of image, and can efficiently complete the interface drawing.

[0100] The image rendering apparatus, electronic device, and computer-readable storage medium provided in the embodiments of the present invention are described below. The image rendering apparatus, electronic device, and computer-readable storage medium described below can be referred to in correspondence with the image rendering method described above.

[0101] Please refer to Figure 4 , Figure 4 This is a structural block diagram of an image rendering apparatus provided in an embodiment of the present invention. The apparatus may include:

[0102] Extract node 401, which is used to extract control drawing nodes from the preset layout file when the startup interface is rendered;

[0103] The rendering node tree construction module 402 is used to insert the control drawing nodes into the rendering node tree according to the relationship between the drawing nodes of each control recorded in the preset layout file, and to set the corresponding background effect nodes for the control drawing nodes.

[0104] The rendering module 403 is used to draw the node rendering control image by drawing each control in the rendering node tree in sequence, and to generate a background image containing the currently output image content and having a background effect by using the background effect node for the control image.

[0105] The output module 404 is used to output the control image and its corresponding background image each time the generation of the control image and its corresponding background image is completed.

[0106] Optionally, the rendering node tree construction module 402 may include:

[0107] The background effect node insertion submodule is used to insert background effect nodes at the same insertion position as control drawing nodes.

[0108] Correspondingly, rendering module 403 may include:

[0109] The background effect node extraction submodule is used to obtain the background effect node from the insertion position corresponding to the control drawing node, and generate a background image using the background effect node.

[0110] Optionally, the rendering node tree construction module 402 may also include:

[0111] The first judgment submodule is used to determine whether the control drawing node has a background effect attribute;

[0112] The background effect node insertion submodule is also used to perform the step of inserting the background effect node at the same insertion position as the control drawing node if the condition is met.

[0113] Optionally, the rendering module 403 may include:

[0114] The cropping submodule is used to crop the currently output image content using the background effect node to obtain the initial background image;

[0115] The settings submodule is used to set the background effect for the initial background image, obtain the background image, and set the background image below the control image.

[0116] Optionally, submodules can be configured, including:

[0117] The position attribute setting unit is used to synchronize the position attribute from the corresponding control drawing node using the background effect node, and to set the background image below the control image using the position attribute.

[0118] Optionally, the rendering module 403 may include:

[0119] The property synchronization submodule is used to synchronize animation properties, scaling properties, and clipping properties from the corresponding control drawing nodes using background effect nodes, so as to achieve animation, scaling, and clipping effects for the background image through animation properties, scaling properties, and clipping properties.

[0120] Optionally, the background effect is a background blur effect.

[0121] Optionally, the device may further include:

[0122] The traversal module is used to traverse the preset layout file and find the target control drawing node with the transparency attribute;

[0123] The off-screen rendering module is used to render the target control's drawing nodes and cache the obtained target control image;

[0124] Extracting node 401 is also used to enter the step of extracting control drawing nodes from the preset layout file after rendering of all target control drawing nodes is completed;

[0125] Correspondingly, the rendering node tree construction module 402 may include:

[0126] The second judgment submodule is used to determine whether the control drawing node belongs to the target control drawing node;

[0127] The image insertion submodule is used to insert the target control image into the rendering node tree if necessary, and to add an opacity property to the target control image.

[0128] Correspondingly, rendering module 403 may include:

[0129] The third judgment submodule is used to determine whether the currently rendered control drawing node is the target control image;

[0130] The settings submodule is used to set the target control image as the control image to be output if the condition is met, so that the transparency of the target control image can be adjusted by the transparency property of the target control image.

[0131] This invention also provides a heterogeneous device, comprising:

[0132] Memory, used to store computer programs;

[0133] A processor is used to implement the steps of the image rendering method described above when executing a computer program.

[0134] Since the embodiments of the heterogeneous device part correspond to the embodiments of the image rendering method part, please refer to the description of the embodiments of the image rendering method part for the embodiments of the heterogeneous device part, and will not be repeated here.

[0135] It should be noted that the embodiments of the present invention are not limited to specific electronic devices, such as computers, mobile phones, tablets and other wearable devices, which can be selected according to actual application needs.

[0136] This invention also provides a computer-readable storage medium storing a computer program, which, when executed by a processor, implements the steps of the image rendering method described in any of the above embodiments.

[0137] Since the embodiments of the computer-readable storage medium portion correspond to the embodiments of the image rendering method portion, the embodiments of the storage medium portion are described in the description of the embodiments of the image rendering method portion, and will not be repeated here.

[0138] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. For the apparatus disclosed in the embodiments, since it corresponds to the method disclosed in the embodiments, the description is relatively simple; relevant parts can be referred to the method section.

[0139] Those skilled in the art will further recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of both. To clearly illustrate the interchangeability of hardware and software, the components and steps of the various examples have been generally described in terms of functionality in the foregoing description. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementations should not be considered beyond the scope of this invention.

[0140] The steps of the methods or algorithms described in conjunction with the embodiments disclosed herein can be implemented directly by hardware, a software module executed by a processor, or a combination of both. The software module can be located in random access memory (RAM), main memory, read-only memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disk, removable disk, CD-ROM, or any other form of storage medium known in the art.

[0141] The foregoing has provided a detailed description of the image rendering method, apparatus, electronic device, and computer-readable storage medium provided by the present invention. Specific examples have been used to illustrate the principles and implementation methods of the present invention. The descriptions of the embodiments above are merely for the purpose of helping to understand the method and core ideas of the present invention. It should be noted that those skilled in the art can make various improvements and modifications to the present invention without departing from its principles, and these improvements and modifications also fall within the protection scope of the claims of the present invention.

Claims

1. An image rendering method, characterized in that, include: When the interface rendering starts, extract the control drawing nodes from the preset layout file; According to the association relationship between each control drawing node recorded in the preset layout file, the control drawing node is inserted into the rendering node tree, and the background effect node is inserted into the same insertion position as its corresponding control drawing node; The rendering node tree sequentially uses each control drawing node in the rendering node tree to render the control image, and uses the background effect node to generate a background image for the control image that includes the currently output image content and has a background effect; wherein, the background effect node performs the rendering output action according to the order of its control drawing node in the rendering node tree; Each time the control image and its corresponding background image are generated, the control image and its corresponding background image are output.

2. The image rendering method according to claim 1, characterized in that, The step of generating a background image for the control image using the background effect node, which includes the currently output image content and has a background effect, includes: The background effect node is obtained from the insertion position corresponding to the control drawing node, and the background image is generated using the background effect node.

3. The image rendering method according to claim 2, characterized in that, Before inserting the background effect node at the same insertion position as the control drawing node, the method further includes: Determine whether the control drawing node has a background effect attribute; If so, then perform the step of inserting the background effect node at the same insertion position as the control drawing node.

4. The image rendering method according to claim 1, characterized in that, The step of generating a background image for the control image using the background effect node, which includes the currently output image content and has a background effect, includes: The background effect node is used to extract the currently output image content to obtain the initial background image; The background image is obtained by setting the background effect for the initial background image, and then the background image is placed below the control image.

5. The image rendering method according to claim 4, characterized in that, Setting the background image below the control image includes: The background effect node is used to synchronize the position attribute from the corresponding control drawing node, and the position attribute is used to set the background image below the control image.

6. The image rendering method according to claim 5, characterized in that, Also includes: The background effect node is used to synchronize animation properties, scaling properties, and clipping properties from the corresponding control drawing node, so as to realize animation, scaling, and clipping effects for the background image through the animation properties, the scaling properties, and the clipping properties.

7. The image rendering method according to claim 1, characterized in that, The background effect is a background blur effect.

8. The image rendering method according to any one of claims 1 to 7, characterized in that, Before extracting the control drawing nodes from the preset layout file, the following is also included: The preset layout file is traversed to find the target control drawing node with the transparency attribute; The target control drawing node is rendered, and the obtained target control image is cached. Upon completion of rendering all the target control drawing nodes, proceed to the step of extracting control drawing nodes from the preset layout file; Accordingly, inserting the control drawing node into the rendering node tree includes: Determine whether the control drawing node belongs to the target control drawing node; If so, the target control image is inserted into the rendering node tree, and a transparency attribute is added to the target control image; Accordingly, the step of sequentially drawing node rendering control images using each control in the rendering node tree includes: Determine whether the currently rendered control drawing node has a cached target control image; If so, the target control image is set as the control image to be output, and the transparency of the target control image is adjusted by the transparency attribute of the target control image.

9. An image rendering apparatus, characterized in that, include: Extract nodes, used to extract control drawing nodes from the preset layout file when the startup interface is rendered; The rendering node tree construction module is used to insert the control drawing nodes into the rendering node tree according to the association relationship between the drawing nodes of each control recorded in the preset layout file, and to insert the background effect node into the same insertion position as the drawing node of its corresponding control. The rendering module is used to sequentially render control images using each control drawing node in the rendering node tree, and to generate a background image containing the currently output image content and having a background effect for the control image using the background effect node; wherein, the background effect node performs rendering output actions according to the order of its control drawing nodes in the rendering node tree. The output module is used to output the control image and its corresponding background image each time the generation of the control image and its corresponding background image is completed.

10. An electronic device, characterized in that, include: Memory, used to store computer programs; A processor for executing the computer program to implement the image rendering method as described in any one of claims 1 to 8.

11. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when loaded and executed by a processor, implement the image rendering method as described in any one of claims 1 to 8.

Images