Interface element rendering method and device, electronic equipment and readable storage medium

Abstract

The invention provides an interface element rendering method and device, electronic equipment and a computer readable storage medium, and relates to the technical field of graphic processing.The method comprises the steps that under the condition that an interface element is in an out-of-focus state, original textures of the interface element are drawn and stored in an off-screen mode, and rendering nodes used for displaying the original textures are created, then, when a user display interface where the interface elements are located is refreshed every time, the original textures of the interface elements displayed by the rendering nodes are mapped into the basic polygons corresponding to the interface elements, and then the basic polygons correspondingly mapped with the original textures are rendered. In the rendering process of the interface elements, the data calculation amount of the GPU of the system is reduced, and the rendering efficiency is improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of graphics processing, and more particularly, to an interface element rendering method and device, an electronic device, and a computer readable storage medium. BACKGROUND

[0002] The current rendering process of the palette is implemented based on WebGL, which uses a tree node rendering method. In the rendering process, the nodes are rendered in the order from the root node to the child nodes, starting from the root node, recursively calling the render function of each node for rendering, and when the last node in the tree node is rendered, the entire rendering process is completed. If the number of element nodes in the palette is large, a large number of render functions need to be recursively called in the rendering process, increasing the data calculation amount of the GPU in the rendering process, resulting in reduced rendering efficiency. SUMMARY

[0003] The present application provides an interface element rendering method, device, electronic device, and computer readable storage medium, which can reduce the data calculation amount of the GPU of the system in the rendering process of the interface element and improve the rendering efficiency.

[0004] In a first aspect, an interface element rendering method is provided, which includes: in the case that an interface element is in a defocused state, off-screen rendering and storing an original texture of the interface element; creating a rendering node for displaying the original texture; wherein the rendering node does not include a child node; in response to a refresh instruction of a user display interface in which the interface element is located, mapping the original texture to a basic polygon corresponding to the interface element based on the rendering node, and rendering the basic polygon.

[0005] In the above technical solution, the present application embodiment off-screen renders and stores the original texture of the interface element when the interface element is in the defocused state, and creates a rendering node, and then when the user display interface in which the interface element is located needs to be refreshed, maps the original texture of the interface element displayed by the rendering node to the basic polygon corresponding to the interface element, and then renders the basic polygon to which the original texture is mapped, to realize the refresh of the user display interface. In this way, in each rendering cycle of the interface element, the GPU of the system only needs to process one polygon and one texture data to complete the rendering of the interface element, without rendering multiple element nodes of the interface element, significantly reducing the data processing burden of the GPU, shortening the rendering time, and being conducive to improving the rendering efficiency.

[0006] In a possible implementation manner of the first aspect, the off-screen rendering and storage of the original texture of the interface element comprises: creating an off-screen rendering area of the interface element in the background of the system; a size of the off-screen rendering area is the same as a size of the interface element; rendering each element node in the interface element to the off-screen rendering area according to a node rendering order to generate the original texture; and storing the original texture.

[0007] In the technical solution, the original texture of the interface element is rendered in the off-screen rendering area by using the off-screen rendering operation, all nodes of the interface element are rendered into one texture at one time, and then the texture is used for subsequent rendering, so that repeated rendering of the nodes in the interface element is avoided, and the rendering efficiency is further improved.

[0008] In combination with the first aspect and the implementation manner, in a possible implementation manner, the creating of the rendering node for displaying the original texture comprises: creating a single node; and replacing each element node in the interface element with the single node to obtain the rendering node.

[0009] In the technical solution, each element node in the interface element is replaced by the single node, the tree-shaped node structure is simplified, the data calculation amount during rendering is greatly reduced when the interface element is rendered subsequently, the time consumption for rendering one node is obviously less than the time consumption for rendering multiple nodes, and the rendering efficiency is improved.

[0010] In combination with the first aspect and the implementation manner, in a possible implementation manner, in response to a refresh instruction of a user display interface in which the interface element is located, the original texture is mapped into a basic polygon corresponding to the interface element based on the rendering node, and after the basic polygon is rendered, the interface element rendering method further comprises: if the interface element is not updated, the step of mapping the original texture into the basic polygon corresponding to the interface element based on the rendering node and rendering the basic polygon in response to the refresh instruction of the user display interface in which the interface element is located is executed.

[0011] In the technical solution, if it is detected that the interface element is not updated after a last rendering cycle, the off-screen rendering and storage of the original texture of the interface element, and the creation of the rendering node are stopped, and in a next rendering cycle, the interface element is directly rendered by using the original texture and the rendering node of the previous time, so that the storage resources are saved.

[0012] With reference to the first aspect and the above implementation manners, in some possible implementation manners, in response to a refresh instruction of a user display interface in which the interface element is located, after the original texture is mapped into the base polygon corresponding to the interface element based on the rendering node and the base polygon is rendered, the interface element rendering method further includes: in a case where the interface element is in a focused state, rendering each element node in the interface element in the node rendering order, and disabling the steps of performing off-screen rendering and storing the original texture of the interface element.

[0013] In the above technical solution, the function fallback of the off-screen rendering scheme is implemented in a case where the user has an intention to update the content of the interface element, the interface element is rendered by rendering each element node in the interface element, and the fluency and accuracy of the interface element editing process are ensured.

[0014] With reference to the first aspect and the above implementation manners, in some possible implementation manners, in a case where the interface element is in a focused state, after each element node in the interface element is rendered in the node rendering order, the interface element rendering method further includes: performing off-screen rendering on the current texture of the rendered interface element; and updating the original texture by using the current texture.

[0015] In the above technical solution, the dynamic updating of the texture of the stored interface element is implemented, which is beneficial to ensuring the real-time performance and accuracy of rendering.

[0016] With reference to the first aspect and the above implementation manners, in some possible implementation manners, the interface element rendering method further includes judging whether a preset condition is met; the preset condition includes at least one of the following: a memory occupancy rate of a system is less than a preset occupancy rate, a number of stored original textures is less than or equal to a preset value, and a browser environment of the system belongs to a preset environment; and if yes, the step of performing off-screen rendering and storing the original texture of the interface element in a case where the interface element is in a defocused state is performed.

[0017] In the above technical solution, in a case where the system supports the function of performing the off-screen rendering scheme, the interface element is rendered by using the off-screen rendering scheme each time the user display interface is refreshed, which is beneficial to shortening the rendering time and improving the rendering efficiency.

[0018] In a second aspect, an interface element rendering apparatus is provided, which includes:

[0019] A first creating module, configured to perform off-screen rendering and store an original texture of the interface element in a case where the interface element is in a defocused state.

[0020] A second creating module, configured to create a rendering node for displaying the original texture; the rendering node does not include a child node.

[0021] The element rendering module is used to respond to the refresh command of the user's display interface where the interface element is located. It maps the original texture to the basic polygon corresponding to the interface element based on the rendering node, and then renders the basic polygon.

[0022] In conjunction with the second aspect, in some possible implementations, the first creation module specifically creates an off-screen rendering area for the interface elements in the background of the system; wherein, the size information of the off-screen rendering area is the same as the size information of the interface elements; each element node in the interface elements is drawn to the off-screen rendering area in the order of node rendering to generate the original texture; and the original texture is stored.

[0023] Combining the second aspect and the above implementation methods, in some possible implementation methods, the second creation module is specifically used to create a single node; the single node is used to replace each element node in the interface elements to obtain the rendering node.

[0024] In combination with the second aspect and the above implementation methods, in some possible implementations, the interface element rendering device further includes:

[0025] The reuse unit is used to execute the refresh command in response to the user display interface where the interface element is located if the interface element is not updated, and to map the original texture to the basic polygon corresponding to the interface element based on the rendering node, and then render the basic polygon.

[0026] In combination with the second aspect and the above implementation methods, in some possible implementations, the interface element rendering device further includes:

[0027] The render fallback unit is used to render each element node in the interface element according to the node rendering order while the interface element is in focus, and to prevent the execution of off-screen drawing and storage of the original texture of the interface element.

[0028] In combination with the second aspect and the above implementation methods, in some possible implementations, the interface element rendering device further includes:

[0029] The texture update unit is used to update the current texture of UI elements after off-screen rendering; it updates the original texture using the current texture.

[0030] In combination with the second aspect and the above implementation methods, in some possible implementations, the interface element rendering device further includes:

[0031] The condition judging unit is configured to judge whether a preset condition is met, wherein the preset condition comprises at least one of the following: a memory occupation rate of the system is less than a preset occupation rate, a number of stored original textures is less than or equal to a preset value, and a browser environment of the system belongs to a preset environment; and if yes, the step of off-screen rendering and storing the original texture of the interface element in the out-of-focus state is executed.

[0032] In a third aspect, an electronic device is provided, comprising a memory and a processor. The memory is configured to store executable program code, and the processor is configured to call and run the executable program code from the memory, so that the electronic device executes the interface element rendering method in the first aspect or any possible implementation manner of the first aspect.

[0033] In a fourth aspect, a computer program product is provided, which comprises computer program code. When the computer program code is run on a computer, the computer program code causes the computer to execute the interface element rendering method in the first aspect or any possible implementation manner of the first aspect.

[0034] In a fifth aspect, a computer readable storage medium is provided, which stores computer program code. When the computer program code is run on a computer, the computer program code causes the computer to execute the interface element rendering method in the first aspect or any possible implementation manner of the first aspect. BRIEF DESCRIPTION OF DRAWINGS

[0035] Figure 1 A schematic diagram of an example note element is shown;

[0036] Figure 2 A schematic flow chart of an interface element rendering method provided by an embodiment of the present application is shown;

[0037] Figure 3 An example schematic diagram of a drawing board interface is shown;

[0038] Figure 4 An example schematic diagram of creating a rendering node is shown.

[0039] Figure 5 A structural schematic diagram of an interface element rendering apparatus provided by an embodiment of the present application is shown;

[0040] Figure 6 A structural schematic diagram of an electronic device provided by an embodiment of the present application is shown. DETAILED DESCRIPTION

[0041] The technical solutions in the present application will be described clearly and exhaustively in combination with the drawings. In the description of the embodiments of the present application, unless otherwise specified, " / " represents the meaning of or, for example, A / B can represent A or B: "and / or" in the text is only a description of the association relationship of the associated objects, which means that there can be three relationships, for example, A and / or B, which means that there are three cases of A alone, A and B together, and B alone. In addition, in the description of the embodiments of the present application, "multiple" means two or more than two.

[0042] Hereinafter, the terms "first" and "second" are used only for descriptive purposes and cannot be understood as implying or suggesting relative importance or implicitly indicating the number of indicated technical features. Therefore, the features defined with "first" and "second" can explicitly or implicitly include one or more features.

[0043] At present, the rendering process of the palette is realized based on WebGL, which uses a tree node rendering method. In the rendering process, the nodes are rendered in the order from the root node to the child node, starting from the root node, and recursively calling the render function of each node for rendering. Taking rendering a note element as an example, as shown in Figure 1 Figure 1 shows a schematic diagram of an example note element, Figure 1 The left side in the figure is an example of a note element, and the right side is an example of a node tree of the note element, which includes a container node (root node), a shadow node, a rectangle node, a text node (text is "congratulations on the New Year"), a fill node and a stroke draw node. The rendering process in a recursive manner is as follows:

[0044] 1. Start from the root node, call the render function of the root node.

[0045] 2. The render function of the root node will perform a series of rendering operations, such as setting the size of the drawing picture, the background color, etc.

[0046] 3. The root node will traverse its child nodes and call the render function of each child node in turn.

[0047] 4. The render function of the child node will perform specific drawing operations, such as drawing graphics, rendering textures, etc.

[0048] 5. If the child node has child nodes, it will continue to recursively call the render function of the child node, and so on, until all nodes are rendered.

[0049] 6. When all nodes are rendered, the note element rendering is completed.

[0050] ​In this recursive manner, the render function of each node is called, thereby completing the rendering of the entire tree-shaped node. This rendering manner can efficiently draw a complex scene, and can flexibly add, delete, and modify nodes according to actual conditions to achieve dynamic picture effects.

[0051] Based on the above example, it can be seen that even a simple note element is composed of a large number of nodes, and the node tree structure of other drawing board elements, such as tables, mind maps, and the like, is more complex. When the number of element nodes is large, using a recursive manner to render the nodes of the entire node tree has performance problems and stack overflow problems:

[0052] 1. Regarding the performance problem: A large number of render functions are recursively called, and each recursive call needs to perform function calling, parameter passing, and the like, thereby increasing the data calculation amount in the rendering process, reducing the rendering efficiency, and repeatedly performing some same rendering operations in the recursive process, causing resource waste, and thereby causing system performance to decrease.

[0053] 2. Regarding the stack overflow problem: In the recursive calling process, each function call saves some information in the stack, and when the number of nodes is large, the depth of the stack increases. If the depth of the recursive calling exceeds the limit of the stack, the problem of stack overflow occurs, for example, system program crashes are easily caused.

[0054] Based on the problems in the related art, the present application provides an interface element rendering method and device, an electronic device, and a computer readable storage medium. The present application renders interface elements, off-screen draws and stores texture data of the interface elements, and creates a single rendering node to display the texture data of the interface elements. When the interface elements need to be rendered, the rendering node is used to map the texture data of the interface elements to the corresponding base polygons of the interface elements, and then the base polygons are rendered, thereby realizing the rendering of the interface elements. In the rendering process, the GPU of the system only needs to process one polygon and one texture data to complete the rendering of the interface elements, without rendering each node in the node tree of the interface elements, and without processing multiple complex geometric shapes and multiple state changes, thereby reducing the data calculation amount of the GPU in the rendering process and being beneficial to improving the rendering efficiency.

[0055] The following is an embodiment of an interface element rendering method provided by an embodiment of the present application.

[0056] Figure 2 A schematic flowchart of an interface element rendering method provided by an embodiment of the present application is shown in FIG. 1. Figure 2As shown, the interface element rendering method provided by the embodiments of the present application is applied to an electronic device, for example, the electronic device is a computer. The interface element rendering method includes the following solutions.

[0057] S110: In the case that the interface element is in the defocus state, off-screen rendering and storing the original texture of the interface element.

[0058] In an exemplary embodiment, the electronic device is provided with an application program, which can be a browser with a drawing board function or a drawing board application. The interface element is located in the user display interface of the application program. When the application program is a browser, the user display interface is the drawing board interface of the browser; when the application program is a drawing board application, the user display interface is the drawing board interface of the drawing board application. The interface element can be understood as an element in the drawing board interface, such as Figure 3 As shown, Figure 3 An exemplary schematic diagram of a drawing board interface is shown, 100 represents the drawing board interface, 101 represents a text editing toolbar element, 102 represents a note element, and 103 represents a table element. The interface element includes the text editing toolbar element, the note element, and the table element.

[0059] The interface element includes a defocus state and a focus state. When the interface element is in the defocus state, the interface element loses the focus, and the interface element no longer responds to keyboard input or mouse operation (the content in the interface element cannot be edited), and the user transfers the focus to another element in the user display interface. When the interface element is in the focus state, the interface element is at the center of user interaction, and is the focus that currently receives direct operation or input, indicating that the interface element is in an editing state, and the content in the interface element can be edited, for example, changing the content in the interface element.

[0060] After each rendering cycle of the interface element ends and the interface element is in the defocus state, the original texture of each interface element is off-screen rendered in the background of the system, and then the original texture of each interface element is stored. The original texture can be understood as snapshot data or screenshot data used to represent the interface element. Off-screen rendering can be understood as off-screen rendering, which refers to a rendering operation completed in the background of the system during the rendering process of the interface element, which does not immediately affect the screen image seen by the user, that is, the process of off-screen rendering the original texture of each interface element cannot be seen by the user through the user display interface.

[0061] In a possible implementation, S110 includes the following solutions:

[0062] Creating an off-screen rendering area of the interface element in the background of the system;

[0063] Draw each element node in the interface element to the off-screen rendering area according to the node rendering order to generate an original texture;

[0064] Store the original texture.

[0065] An off-screen drawing operation is performed on each interface element, that is, an off-screen rendering area about the interface element is created in the background of the system. The off-screen rendering area can be understood as an off-screen buffer. This buffer is like a virtual drawing board. The size information of the off-screen rendering area is the same as that of the interface element, which means that all drawing operations in the off-screen rendering area will be performed in this "behind-the-scenes" off-screen rendering area and not directly displayed to the user, that is, the user cannot see it in the user display interface.

[0066] After the off-screen rendering area is created, an off-screen rendering operation is performed to draw each element node in the node tree of the interface element to the off-screen rendering area according to the node rendering order, thereby generating an original texture of the interface element. Then, the original texture is associated with the interface element and stored. The node rendering order refers to the order from the root node to other nodes in the node tree. Since the operation of generating the original texture of the interface element is an off-screen rendering operation, various complex graphical effects can be freely applied without worrying about affecting the real-time rendering performance of the system. In addition, since the user display interface includes multiple interface elements, after storing the original textures of the multiple interface elements, the stored original textures of the multiple interface elements are managed to avoid memory leakage. If there is an original texture of an interface element that has not been used in the original textures of the multiple interface elements, the original texture of the interface element that has not been used is deleted to avoid occupying memory resources.

[0067] By using the off-screen drawing operation to draw the original texture of the interface element in the off-screen rendering area, all nodes of the interface element are rendered into a texture at one time, and then this texture is used for subsequent rendering. This can avoid repeatedly rendering the nodes in the interface element and is conducive to further improving the rendering efficiency.

[0068] S120: Create a rendering node for displaying the original texture.

[0069] A rendering node is created for the interface element. The rendering node is used to display the original texture of the interface element. The rendering node does not include a child node, that is, the rendering node is a single node.

[0070] In one possible implementation, S120 includes the following scheme:

[0071] A single node is created;

[0072] The single node is used to replace each element node in the interface element to obtain the rendering node.

[0073] A single node is created in the background of the system, and each element node in the interface element is replaced by the created single node to obtain a rendering node. As shown in Figure 4 Figure 4 An example schematic diagram of creating a rendering node is shown, for example, a plurality of nodes in the dashed box S1 are replaced by the created single node to obtain the rendering node in the dashed box S2. Wherein, the process of creating the rendering node in the background of the system is also not visible to the user.

[0074] By replacing each element node in the interface element with a single node, the tree node structure is simplified, and when rendering the interface element subsequently, the data calculation amount during rendering is greatly reduced, and the time consumption of rendering a node is obviously less than that of rendering multiple nodes, which is beneficial to improve the rendering efficiency. Wherein, this technical means is particularly suitable for interface elements with complex structures containing a large number of nodes.

[0075] S130: In response to a refresh instruction of a user display interface where the interface element is located, mapping the original texture to the basic polygon corresponding to the interface element based on the rendering node, and rendering the basic polygon.

[0076] The above basic polygon is generally determined according to the contour shape of the interface element, for example, if the contour shape of the interface element is a rectangle, the basic polygon is a rectangle. If a refresh instruction of a user display interface where the interface element is located is received, it means that the user display interface needs to be refreshed once, and the user display interface needs to be refreshed once, which means that the interface element needs to be rendered once. In each rendering cycle of the interface element, when the rendering node of the interface element is detected, the original texture of the interface element displayed by the rendering node is mapped to the basic polygon corresponding to the interface element by using the texture mapping technology, and then the basic polygon corresponding to the mapped original texture is rendered to realize the rendering of the interface element. The interface element rendering is completed, indicating that the user display interface refresh is completed, thereby avoiding the traversal and separate rendering of the complex node structure inside the interface element, significantly reducing the data processing burden of GPU, and being beneficial to improve the rendering efficiency.

[0077] ​The embodiment of the present application stores the original texture of the interface element and creates a rendering node when the interface element is in the defocus state, and then maps the original texture of the interface element displayed by the rendering node into the basic polygon corresponding to the interface element when the user display interface where the interface element is located needs to be refreshed, and then renders the basic polygon where the original texture is mapped, so as to realize the refresh of the user display interface. In this way, the GPU of the system only needs to process one polygon and one texture data in each rendering cycle of the interface element to complete the rendering of the interface element, without rendering each element node of the interface element, thereby significantly reducing the data processing burden of the GPU, shortening the rendering time, and improving the rendering efficiency.

[0078] In a possible implementation manner, after the step S130, the interface element rendering method further includes the following solution:

[0079] If the interface element is not updated, the step of responding to the refresh instruction of the user display interface where the interface element is located, mapping the original texture into the basic polygon corresponding to the interface element based on the rendering node, and rendering the basic polygon is performed.

[0080] During the display of the user display interface, the user display interface is refreshed multiple times per second, that is, the interface element in the user display interface is rendered once every time the user display interface is refreshed. In order to avoid repeated storage of the original texture of the interface element and waste of storage resources, if it is detected that the interface element is not updated, that is, the content and style of the interface element do not change, after each execution of the steps S110-S130 is completed, the original texture of the interface element is no longer off-screen rendered and stored when the interface element is in the defocus state, and the rendering node is no longer created, that is, the steps S110-S120 are prohibited from being executed, and the original texture and the rendering node are directly used for interface element rendering in the next rendering cycle, thereby saving storage resources. For example, for the first rendering cycle of the interface element, after the execution of the steps S110-S130 is completed, the first rendering cycle of the interface element ends, and after the first rendering cycle ends, it is detected that the interface element is not updated, so the step S130 is directly executed in the second rendering cycle of the interface element.

[0081] In a possible implementation manner, after the step S130, the interface element rendering method further includes the following solution:

[0082] In the case where the interface element is in the focus state, each element node in the interface element is rendered in the node rendering order, and the step of off-screen rendering and storing the original texture of the interface element is prohibited from being executed.

[0083] If it is detected that the interface element is in the focus state, it means that the interface element is in the editing state, and the user can have the intention to update the content of the interface element; if the content of the interface element is updated, the content of the interface element will change, and in this case, the off-screen rendering scheme corresponding to S120-S130 will not support the rendering requirement, and then the function of the off-screen rendering scheme is rolled back, the interface element is rendered in the manner of rendering each element node in the interface element, and meanwhile, S120-S130 is prohibited from being executed, so as to ensure the fluency and accuracy of the editing process of the interface element.

[0084] In a possible implementation, after the rendering of each element node in the interface element in the order of the node rendering sequence in the case where the interface element is in the focus state, the interface element rendering method further includes the following scheme:

[0085] off-screen rendering of the current texture of the rendered interface element;

[0086] updating the original texture by using the current texture.

[0087] If the interface element is edited by the user when the interface element is in the focus state, the content of the edited interface element is no longer the same as that of the original interface element, and the original texture of the original interface element will not be used subsequently, then after the interface element is edited and each element node in the interface element is rendered in the order of the node rendering sequence, the current texture of the rendered interface element is off-screen rendered, the original texture stored is replaced by the current texture, and the original texture is deleted, so as to realize the dynamic update of the stored texture of the interface element, and to facilitate ensuring the real-time performance and accuracy of the rendering.

[0088] In a possible implementation, the interface element rendering method further includes the following scheme:

[0089] determining whether a preset condition is met;

[0090] If yes, then in the case where the interface element is in the defocus state, the step of off-screen rendering and storing the original texture of the interface element.

[0091] The preset condition for executing the interface element rendering method is set in advance, and the meeting of the preset condition means that the performance of the system supports the rendering of the interface element by using the off-screen rendering scheme every time the user display interface is refreshed; and the not meeting of the preset condition means that the performance of the system does not support the rendering of the interface element by using the off-screen rendering scheme every time the user display interface is refreshed.

[0092] The preset condition comprises at least one of the following: a memory occupancy rate of the system is less than a preset occupancy rate, a number of stored original textures is less than or equal to a preset value, and a browser environment of the system belongs to a preset environment. If the memory occupancy rate of the system is less than the preset occupancy rate, it indicates that the system has more free memory, which can be used to store original textures of interface elements created by the off-screen operation. If it is determined that the memory occupancy rate of the system is less than the preset occupancy rate, it is considered that the preset condition is met. If the number of stored original textures is less than or equal to the preset value, it indicates that the memory occupied by the stored original textures does not cause the system to be out of memory, and the system still has a large amount of memory. Therefore, if it is determined that the number of stored original textures is less than or equal to the preset value, it is considered that the preset condition is met. If the program is a browser with a drawing board function, the browser environment supported by the off-screen rendering scheme is set in advance, which is referred to as a preset environment. For example, the off-screen rendering scheme requires that the browser supports the OffscreenCanvas feature to generate. If the browser environment of the system belongs to the preset environment, it is considered that the rendering of the interface elements can be performed by using the off-screen rendering scheme. If the browser environment of the system does not belong to the preset environment, it is considered that the rendering of the interface elements cannot be performed by using the off-screen rendering scheme.

[0093] If it is determined that the preset condition is met, steps S110-S130 are performed, and the rendering of the interface elements is performed by using the off-screen rendering scheme each time the user display interface is refreshed, which is beneficial to shorten the rendering time and improve the rendering efficiency. If it is determined that the preset condition is not met, each element node in the interface elements is rendered according to the node rendering order each time the user display interface is refreshed, and steps S110-S130 are prohibited from being performed, thereby realizing the function fallback of the off-screen rendering scheme and ensuring that the rendering of the interface elements can still be realized in the case that the rendering of the interface elements cannot be performed by using the off-screen rendering scheme, which is beneficial to improve the user experience.

[0094] Based on the interface element rendering method provided in the present application, that is, the off-screen rendering scheme, the optimization of the rendering of the interface elements in the user display interface is realized, the rendering process of the node tree in the interface elements is effectively simplified, unnecessary rendering operations are reduced, and the rendering efficiency and performance are improved. Meanwhile, the element nodes are rendered by using the texture, which can further optimize the rendering process and improve the rendering effect of the user display interface and the user experience.

[0095] The following is an apparatus embodiment of the present application, which can be used to execute the method embodiments of the present application. For details not disclosed in the apparatus embodiments of the present application, refer to the method embodiments of the present application.

[0096] Figure 5 A structure diagram of an interface element rendering apparatus provided by an embodiment of the present application is shown in FIG. 5. Figure 5 As shown in FIG. 5, the interface element rendering apparatus 500 comprises:

[0097] The first creating module 510 is configured to off-screen draw and store the original texture of the interface element when the interface element is in the defocus state.

[0098] The second creating module 520 is configured to create a rendering node for displaying the original texture; and the rendering node does not include a child node.

[0099] The element rendering module 530 is configured to, in response to a refresh instruction of a user display interface in which the interface element is located, map the original texture into a basic polygon corresponding to the interface element based on the rendering node, and render the basic polygon.

[0100] In a possible implementation, the first creating module 510 is specifically configured to create an off-screen rendering area of the interface element in the background of the system; the size information of the off-screen rendering area is the same as the size information of the interface element; draw each element node in the interface element into the off-screen rendering area according to a node rendering order to generate the original texture; and store the original texture.

[0101] In a possible implementation, the second creating module 520 is specifically configured to create a single node; and replace each element node in the interface element with the single node to obtain the rendering node.

[0102] In a possible implementation, the interface element rendering apparatus 500 further includes:

[0103] The multiplexing unit is configured to, if the interface element is not updated, perform the step of, in response to a refresh instruction of a user display interface in which the interface element is located, mapping the original texture into a basic polygon corresponding to the interface element based on the rendering node, and rendering the basic polygon.

[0104] In a possible implementation, the interface element rendering apparatus 500 further includes:

[0105] The rendering fallback unit is configured to, if the interface element is in the focus state, render each element node in the interface element according to a node rendering order, and prohibit the step of off-screen drawing and storing the original texture of the interface element.

[0106] In a possible implementation, the interface element rendering apparatus 500 further includes:

[0107] The texture updating unit is configured to off-screen draw a current texture of the rendered interface element; and update the original texture with the current texture.

[0108] In a possible implementation, the interface element rendering apparatus 500 further includes:

[0109] The condition judging unit is configured to judge whether a preset condition is met, wherein the preset condition comprises at least one of the following: a memory occupancy rate of the system is less than a preset occupancy rate, a quantity of stored original textures is less than or equal to a preset value, and a browser environment of the system belongs to a preset environment; if yes, the step of off-screen rendering and storing the original texture of the interface element in the out-of-focus state is executed.

[0110] It should be noted that the interface element rendering apparatus provided in the above embodiments is used to execute the interface element rendering method, and only the division of the above functional modules is used as an example for illustration. In actual application, the above functions can be completed by different functional modules according to needs, that is, the internal structure of the device is divided into different functional modules to complete all or part of the above-described functions. In addition, the interface element rendering apparatus and the interface element rendering method embodiments provided in the above embodiments belong to the same concept, and therefore, for details not disclosed in the device embodiments of the present application, please refer to the above-mentioned interface element rendering method embodiments of the present application, which will not be described here.

[0111] The serial numbers of the above embodiments of the present application are only for description, and do not represent the advantages or disadvantages of the embodiments.

[0112] Figure 6 A structural schematic diagram of an electronic device provided in an embodiment of the present application is shown, as shown in the figure, the electronic device 600 comprises a memory 601 and a processor 602, wherein the memory 601 stores executable program code 6011, and the processor 602 is configured to call and execute the executable program code 6011 to execute an interface element rendering method. Figure 6

[0113] The embodiment can divide the functional modules of the electronic device according to the above method examples, for example, each functional module can be corresponding, or two or more functions can be integrated in one processing module, and the integrated module can be realized in the form of hardware. It should be noted that the division of the modules in the embodiment is illustrative, and is only a logical function division. In actual implementation, another division mode can be used.

[0114] In the case of dividing each functional module according to each function, the electronic device can comprise a first creation module, a second creation module, an element rendering module and the like. It should be noted that all related contents of each step involved in the above method embodiments can be referred to the function description of the corresponding functional module, which will not be described here.

[0115] The electronic device provided in the embodiment is used to execute the above interface element rendering method, and therefore, the same effect as the above implementation method can be achieved.

[0116] ​In the case of employing the integrated unit, the electronic device can include a processing module, a storage module. The processing module can be used to control and manage the actions of the electronic device. The storage module can be used to support the electronic device to execute relevant program codes and data, etc.

[0117] The processing module can be a processor or a controller, which can realize or execute various exemplary logical blocks, modules and circuits described in combination with the disclosure. The processor can also be a combination of computing functions, such as one or more microprocessor combinations, digital signal processing (DSP) and microprocessor combinations, etc. The storage module can be a memory.

[0118] The embodiment also provides a computer readable storage medium, which stores computer program codes, when the computer program codes are run on a computer, the computer is caused to execute the above-mentioned related method steps to realize the interface element rendering method in the above-mentioned embodiment.

[0119] The embodiment also provides a computer program product, when the computer program product is run on a computer, the computer is caused to execute the above-mentioned related steps to realize the interface element rendering method in the above-mentioned embodiment.

[0120] In addition, the electronic device provided by the embodiment of the present application can be a chip, an assembly or a module, and the electronic device can include a connected processor and a memory; wherein the memory is used to store instructions, and when the electronic device is running, the processor can call and execute the instructions to make the chip execute the interface element rendering method in the above-mentioned embodiment.

[0121] The electronic device, the computer readable storage medium, the computer program product or the chip provided by the embodiment can be used to execute the corresponding interface element rendering method provided above, so the beneficial effects that can be achieved are referred to the beneficial effects in the corresponding interface element rendering method provided above, which will not be described here.

[0122] Through the description of the above embodiments, those skilled in the art can understand that, for the convenience and brevity of description, only the above-mentioned division of functional modules is taken as an example for illustration, and in actual application, the above-mentioned functions can be completed by different functional modules according to needs, that is, the internal structure of the device is divided into different functional modules to complete all or part of the functions described above.

[0123] In the embodiments of the present disclosure, it should be understood that the disclosed apparatus and method can be implemented in other ways. For example, the above-described apparatus embodiments are merely schematic, and the division of the modules or units is merely a logical function division. In actual implementation, another division manner can be adopted, for example, a plurality of units or components can be combined or integrated into another apparatus, or some features can be ignored or not executed. In addition, the coupling or direct coupling or communication connection between the units shown or discussed can be indirect coupling or communication connection through some interfaces, apparatuses or units, and can be electrical, mechanical or in other forms.

[0124] The above merely illustrates the specific embodiments of the present disclosure, but the protection scope of the present disclosure is not limited thereto. Any person skilled in the art can easily think of the changes or replacements within the technical range disclosed by the present disclosure, which should be covered by the protection scope of the present disclosure. Therefore, the protection scope of the present disclosure should be subject to the protection scope of the claims.

Claims

1. An interface element rendering method, characterized by, The interface element rendering method comprises: In the case that the interface element is in a defocus state, off-screen rendering and storing an original texture of the interface element; Creating a rendering node for displaying the original texture; wherein the rendering node does not include a child node; In response to a refresh instruction of a user display interface where the interface element is located, mapping the original texture into a corresponding base polygon of the interface element based on the rendering node, and rendering the base polygon.

2. The interface element rendering method of claim 1, wherein, The off-screen rendering and storing an original texture of the interface element comprises: Creating an off-screen rendering area of the interface element in the background of the system; wherein the size information of the off-screen rendering area is the same as the size information of the interface element; Rendering each element node in the interface element to the off-screen rendering area according to a node rendering order to generate the original texture; Storing the original texture.

3. The interface element rendering method of claim 2, wherein, The creating a rendering node for displaying the original texture comprises: Creating a single node; Replacing each element node in the interface element with the single node to obtain the rendering node.

4. The interface element rendering method of claim 1, wherein, After the response to the refresh instruction of the user display interface where the interface element is located, mapping the original texture into a corresponding base polygon of the interface element based on the rendering node, and rendering the base polygon, the interface element rendering method further comprises: If the interface element is not updated, executing the step of responding to the refresh instruction of the user display interface where the interface element is located, mapping the original texture into a corresponding base polygon of the interface element based on the rendering node, and rendering the base polygon.

5. The interface element rendering method of claim 1, wherein, After the response to the refresh instruction of the user display interface where the interface element is located, mapping the original texture into a corresponding base polygon of the interface element based on the rendering node, and rendering the base polygon, the interface element rendering method further comprises: In the case that the interface element is in a focus state, rendering each element node in the interface element according to a node rendering order, and prohibiting the step of off-screen rendering and storing an original texture of the interface element.

6. The interface element rendering method of claim 5, wherein, After the rendering of each element node in the interface element according to a node rendering order in the case that the interface element is in a focus state, the interface element rendering method further comprises: Off-screen rendering a current texture of the rendered interface element; Updating the original texture with the current texture.

7. The interface element rendering method according to any one of claims 1 to 6, characterized in that, The interface element rendering method further comprises: Determining whether a preset condition is met; wherein the preset condition comprises at least one of a memory occupancy rate of the system being less than a preset occupancy rate, a number of stored original textures being less than or equal to a preset value, and a browser environment of the system belonging to a preset environment; If yes, executing the step of off-screen rendering and storing an original texture of the interface element in the case that the interface element is in a defocus state.

8. An interface element rendering apparatus, characterized by comprising: The interface element rendering apparatus comprises: A first creating module for off-screen rendering and storing an original texture of the interface element in the case that the interface element is in a defocus state; A second creating module is configured to create a rendering node for displaying the original texture, wherein the rendering node does not include a sub-node. An element rendering module is configured to, in response to a refreshing instruction of a user display interface in which the interface element is located, map the original texture into a base polygon corresponding to the interface element based on the rendering node, and render the base polygon.

9. An electronic device, comprising: The electronic device comprises: a memory configured to store executable program code; a processor configured to call and run the executable program code from the memory, so that the electronic device performs the interface element rendering method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer readable storage medium stores a computer program, when the computer program is executed, the interface element rendering method according to any one of claims 1 to 7 is realized.

Images