Page layer tree construction method and page rendering method

Abstract

The invention provides a page layer tree construction method and a page rendering method.The page layer tree construction method comprises the steps that a component layout in a target page is obtained, and the component layout is used for representing components included in the target page and the set membership between the components; and obtaining corner cutting parameters of a target component with a corner cutting requirement in the components. And judging whether the target component comprises a sub-component which needs to be drawn on the independent layer or not. If yes, a cutting layer of the target assembly is obtained according to the corner cutting parameters. And generating a layer tree of the target page according to the cutting layer. According to the method, the display performance of the page with the fillet style component can be improved.

Description

Technical Field

[0001] This application relates to the technical field of page processing, and in particular, to a method for constructing a page layer tree and a method for page rendering. Background Art

[0002] Currently, when rendering the page of an application on an electronic device, the page of the to-be-displayed application can be rendered with different styles to generate the rendered application through various visual effects. Currently, the page of the application supports cropping components in the page through a rounded corner style, so that the components present a rounded corner effect.

[0003] Among them, components often contain sub-components. In the related art, after cropping a component with rounded corners, the sub-components of the component often do not undergo adaptive cropping and still display their original shapes. For example, a component and one of its sub-components have an overlapping upper left corner, which is displayed as a right angle; when the component is cropped with rounded corners, the upper left corner of the component becomes rounded, but the sub-component is not adaptively cropped and still displays as a right angle. As a result, display errors occur.

[0004] To avoid display errors, in the related art, a cropping layer is added for each component that requires rounded corner cropping, so that the sub-components can also adaptively display the rounded corner effect. The inventor found in the process of implementing this application that when there are a large number of components with rounded corner styles in the page, the page will freeze due to the large number of cropping layers used to generate the rounded corner styles. Therefore, how to improve the display performance of pages with components having rounded corner styles is an urgent problem to be solved. Summary of the Invention

[0005] This application provides a method for constructing a page layer tree and a method for page rendering, which can improve the display performance of pages with components having rounded corner styles.

[0006] In a first aspect, this application provides a method for constructing a page layer tree, and the method includes:

[0007] Obtain the component layout in the target page, where the component layout is used to represent the components included in the target page and the parent-child relationship between the components;

[0008] Obtain the corner cropping parameters of the target component that has a corner cropping requirement among the components;

[0009] Determine whether the target component includes sub-components that need to be drawn on an independent layer;

[0010] If so, obtain the cropping layer of the target component according to the corner cropping parameters;

[0011] Generate the layer tree of the target page according to the cropping layer.

[0012] Optionally, obtaining the cutting layer of the target component according to the corner cutting parameters includes:

[0013] Determining the display attribute of the target independent layer where the target component is located on the target page according to the corner cutting parameters;

[0014] Constructing the cutting layer according to the display attribute.

[0015] Optionally, generating the layer tree of the target page according to the cutting layer includes:

[0016] Generating an initial layer tree according to the target independent layer, the independent layer, and the component layout;

[0017] Determining a target position according to the position information of the target independent layer in the initial layer tree, where the target position is the position in the layer tree of the target page where the cutting layer is configured;

[0018] Adding the cutting layer at the target position in the initial layer tree to generate the layer tree of the target page.

[0019] Optionally, generating the layer tree of the target page according to the cutting layer includes:

[0020] Determining a target position according to the position information of the target independent layer in the component layout of the target page, where the target position is the position in the layer tree of the target page where the cutting layer is configured;

[0021] Generating the layer tree of the target page according to the target independent layer, the independent layer on which the sub-component is drawn, the cutting layer, and the target position.

[0022] Optionally, determining whether the target component includes a sub-component that needs to be drawn on an independent layer includes:

[0023] Obtaining the rendering style and / or component type of the sub-component in the target component;

[0024] Determining whether the rendering style is a target rendering style and / or whether the component type is a target type; wherein, when the rendering style is the target rendering style and / or the component type is the target type, the sub-component needs to be drawn on an independent layer.

[0025] In a second aspect, the present application provides a page rendering method, and the method includes:

[0026] In response to a rendering event of a target page of a target application, obtaining the layer tree of the target page generated by using the method according to any one of the first aspect;

[0027] Through the layer tree, render the components in the components that require corner cutting and include sub-components that need to be drawn on an independent layer;

[0028] Call the corner cutting function to render the components in the components that require corner cutting and do not include sub-components that need to be drawn on an independent layer.

[0029] In a third aspect, the present application provides a page layer tree construction device, and the device includes:

[0030] A first acquisition module for acquiring the component layout in the target page, where the component layout is used to represent the components included in the target page and the parent-child relationship between the components;

[0031] A second acquisition module for acquiring the corner cutting parameters of the target components in the components that require corner cutting;

[0032] A judgment module for judging whether the target components include sub-components that need to be drawn on an independent layer;

[0033] A processing module for, if so, obtaining the cutting layer of the target components according to the corner cutting parameters;

[0034] A generation module for generating the layer tree of the target page according to the cutting layer.

[0035] In a fourth aspect, the present application provides a page rendering device, and the device includes:

[0036] An acquisition module for, in response to a rendering event of a target page of a target application, acquiring the layer tree of the target page generated by using the method according to any one of claims 1-6;

[0037] A first control module for, through the layer tree, rendering the components in the components that require corner cutting and include sub-components that need to be drawn on an independent layer;

[0038] A second control module for calling the corner cutting function to render the components in the components that require corner cutting and do not include sub-components that need to be drawn on an independent layer.

[0039] In a fifth aspect, the present application provides an electronic device, including: a processor and a memory; the processor is communicatively connected to the memory;

[0040] The memory stores computer execution instructions;

[0041] The processor executes the computer execution instructions stored in the memory to implement the method according to any one of the first aspect or the second aspect.

[0042] In a sixth aspect, the present application provides a computer-readable storage medium storing computer-executable instructions, which are used to implement the method described in any one of the first aspect or the second aspect when executed by a processor.

[0043] In a seventh aspect, the present application provides a computer program product including a computer program, which implements the method described in any one of the first aspect or the second aspect when executed by a processor.

[0044] The present application provides a method for constructing a page layer tree and a method for page rendering. By obtaining the component layout of components with a parent-child relationship in a target page and the corner cutting parameters of a target component with a corner cutting requirement in the target page, when a target parent component includes a child component that needs to be drawn on an independent layer, a cutting layer of the target component is obtained according to the corner cutting parameters of the target component, so as to simultaneously limit the display areas of the target component and the child components of the target component through the cutting layer. And a layer tree of the target page is generated according to the cutting layer. Compared with the prior art in which a cutting layer needs to be added for each component with a rounded corner cutting requirement, the number of cutting layers in the page layer tree is reduced, thereby improving the display performance of the page of the target component with a corner cutting requirement. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] In order to more clearly illustrate the technical solutions in the present application or the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the drawings in the following description are some embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0046] Figure 1 It is a schematic flowchart of a method for constructing a page layer tree provided by an embodiment of the present application;

[0047] Figure 2 It is a schematic flowchart of another method for constructing a page layer tree provided by an embodiment of the present application;

[0048] Figure 3 It is a schematic flowchart of yet another method for constructing a page layer tree provided by an embodiment of the present application;

[0049] Figure 4 It is a schematic flowchart of still another method for constructing a page layer tree provided by an embodiment of the present application;

[0050] Figure 5 It is a schematic flowchart of still another method for constructing a page layer tree provided by an embodiment of the present application;

[0051] Figure 6A schematic diagram of a target page provided by an embodiment of the present application;

[0052] Figure 7 A schematic flowchart of a page rendering method provided by an embodiment of the present application;

[0053] Figure 8 A schematic flowchart of a page generation method provided by an embodiment of the present application;

[0054] Figure 9 A schematic diagram of the structure of a page layer tree construction device provided by an embodiment of the present application;

[0055] Figure 10 A schematic diagram of the structure of a page rendering device provided by an embodiment of the present application;

[0056] Figure 11 A schematic diagram of the structure of an electronic device provided by an embodiment of the present application.

[0057] Through the above-mentioned drawings, specific embodiments of the present application have been shown, and there will be more detailed descriptions hereinafter. These drawings and text descriptions are not intended to limit the scope of the concept of the present application in any way, but to illustrate the concept of the present application to those skilled in the art by referring to specific embodiments. Detailed Embodiments

[0058] To make the objectives, technical solutions, and advantages of the present application clearer, the technical solutions in the present application will be clearly and completely described below with reference to the drawings in the present application. Apparently, the described embodiments are some, but not all, of the embodiments of the present application. All other embodiments obtained by those of ordinary skill in the art based on the embodiments in the present application without creative efforts shall fall within the scope of protection of the present application.

[0059] First, the terms related to the present application are explained:

[0060] Component: A component is the basic unit that constitutes the user interface and a functional unit in the user interface (UI) system. A component can include sub-components, and a sub-component usually refers to a component nested inside another component. For example, the parent component is a container and the sub-components are several buttons. The attributes of a component include position, size, and content. The content of a component generally includes the effects of the component itself (such as background color, text, picture, border, rounded corner, etc.) and the sub-components of the component.

[0061] Rounded corner: A rounded corner refers to the smooth processing of the corners of a component. Usually, one or more radius values can be set to specify the rounded corner radius of each corner of the component, so as to achieve the rounded corner effect of the component.

[0062] Canvas: A web-based drawing technology introduced in HTML5 (HyperText Markup Language). It provides a canvas on which developers can perform drawing operations via JavaScript, including drawing lines, shapes, text, images, etc.

[0063] Layer: Refers to an independent drawing area that can contain text, images, or other graphical elements. By distributing different elements on different layers, developers can more conveniently control their stacking order, transparency, transformation, and other properties. In addition, layered rendering helps improve rendering performance and achieve complex visual effects.

[0064] Layer Tree: Refers to a tree-like structure composed of multiple layers, used to organize and represent each element in the UI. In the layer tree, each layer exists as a node, and the nodes are connected to each other through parent-child relationships to form a hierarchical structure. This structure enables developers to more effectively manage and operate interface elements.

[0065] ClipRRectRenderLayer: A clip layer is a special layer used to limit the drawing area of its internal content. The content within this layer will only be visible within the clipped area, and the part outside this area will be cropped. Clip layers are often used to implement components with rounded corners or specific shapes.

[0066] Vertical Synchronization Signal (VSYNC): A signal used to synchronize the refresh rate of the display. In graphics rendering, the VSYNC signal is used to ensure that new frame data is ready and can be displayed every time the display is refreshed.

[0067] Currently, in mobile application development, the native UI framework of the operating system provides developers with rich component and style setting options, including the setting of rounded corner styles. Rounded corner styles are widely used in UI design, enabling components in the displayed page to be shown with rounded corner display effects to enhance the aesthetics and user experience of the page.

[0068] In the existing Android system architecture and iOS system architecture, when implementing the rounded corner display effect of components in a page through the native UI framework, only the specific rounded corner styles provided by the native UI framework can be achieved, that is, the requirements for the rounded corner display effect beyond the specific rounded corner styles cannot be met. In addition, there are other ways to achieve the rounded corner display effect of components in the existing Android system architecture and iOS system architecture. Taking the Android system architecture as an example, for instance, the rounded corner display effect of components can be achieved by setting a background image, using the Cavans clipPath instruction, using the View invalidateOutline function, etc.

[0069] The method of setting a background image to achieve the rounded corner display effect is to set the image with a rounded corner effect as the background image of the component, so as to achieve the rounded corner visual effect by covering the component with the background image. However, in the case where the component contains sub-components, the display of the sub-components will not be affected by the background image, resulting in the problem that the sub-components may exceed the range of the background image (that is, there are some areas of the sub-components that exceed the rounded corner range of the background image), thereby reducing the display effect of the page.

[0070] The View invalidateOutline function is mainly used to process the component outline. Through this function, the shape of the component outline can be changed to achieve the rounded corner display effect of the component. However, when using this function to achieve the rounded corner display effect of the component, it is unable to support generating four rounded corners with different radian values on one component, restricting the diversity of the rounded corner display effect design of the component.

[0071] The principle of using the Cavans clipPath instruction to achieve rounded corners is to limit the component drawing area within a pre-defined rounded corner path, thereby presenting the rounded corner display effect. However, in the HarmonyOS system architecture, it does not support achieving the rounded corner display effect of components through the Cavans clipPath instruction.

[0072] Therefore, although there are currently various ways to achieve the rounded corner display effect, due to their respective limitations or inability to be used in HarmonyOS, etc., when implementing the rounded corner display effect of components in the target page in the HarmonyOS system architecture, there is a problem of poor display effect.

[0073] In HarmonyOS, in order to avoid the failure of sub-component rendering, a clipping layer is added for each component with a rounded corner clipping requirement to achieve the rounded corner display effect, resulting in a large number of clipping layers to be rendered by the system. When rendering a page with a large number of rounded corner components, due to the large number of clipping layers, a large amount of memory resources will be occupied, resulting in a decrease in the rendering frame rate and a reduction in the display performance of the page. For example, if a large number of rounded corner styles are adopted, it will cause the page to freeze when the page changes (such as list scrolling, page switching, etc.).

[0074] Therefore, under the HarmonyOS architecture, how to improve the display performance of the page of components with rounded corner display effects is an urgent problem to be solved.

[0075] In view of this, the present application provides a method for constructing a page layer tree. By obtaining the components in the target page for which the page layer tree is to be generated and the parent-child relationships between these components, the target components with corners to be trimmed among the components are determined, as well as the component layout of the components having a parent-child relationship with the target components, and the corner trimming requirements of the target components are obtained. When the target components include child components that need to be drawn on an independent layer, a trimming layer for performing rounded corner trimming on the target components is generated. For components that do not include child components that need to be drawn on an independent layer, there is no need to generate a trimming layer, and the rounded corner display effect is directly achieved through the limitation of the drawing area. Then, according to the generated trimming layer, the layer tree of the target page is generated. This method does not require adding a trimming layer to each component with corner trimming requirements, but only needs to generate a corresponding trimming layer for each target component that includes child components to be drawn on an independent layer, thereby reducing the number of trimming layers in the page layer tree, and further improving the display performance of the page of the target components with rounded corner display effects.

[0076] The execution subject of this page layer tree construction method can be an electronic device for displaying an application page. Such an electronic device can be, for example, a smart phone, a vehicle navigation terminal, a computer, etc. Software or program code for running this page layer tree construction method can be deployed on this electronic device, and the layer tree of this page is constructed through the software or program code.

[0077] The technical solution of the present application will be described in detail below in conjunction with specific embodiments. These specific embodiments below can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments.

[0078] Figure 1 It is a schematic flowchart of a method for constructing a page layer tree provided by an embodiment of the present application. As Figure 1 shown, the method includes the following steps:

[0079] S101. Obtain the component layout in the target page.

[0080] Among them, there are target components with corners to be trimmed in the components, and this component layout is used to represent the components included in the target page and the parent-child relationships between the components.

[0081] The target page can be any page in the application. For example, it can be the startup page when the application is started, or any application page during the use of the application.

[0082] The component layout includes the components included in the target page and the structural relationships between these components. Among them, the structural relationships between these components can be, for example, a tree structure and other structural relationships including the parent-child relationships between components. Exemplarily, assuming that there are 10 components in the target page and the structural relationships between these 10 components are characterized by a tree structure, the component layout includes the information of the tree structure composed of these 10 components.

[0083] A possible implementation manner is that the component layout in the target page can be obtained from page structure trees such as the Document Object Model Tree (DOM Tree), Render Tree, Shadow Tree, etc. corresponding to the target page. For example, each element corresponding to each component can be identified from at least one of the above page structure trees corresponding to the target page, and the structural relationship of each element in the page structure tree can be obtained, and the component layout in the target page can be obtained according to this structural relationship.

[0084] Another possible implementation manner is that the component layout in the target page can be obtained from a custom data structure corresponding to the target page or a configuration file corresponding to the target page.

[0085] S102. Obtain the corner cutting parameters of the target component that has a corner cutting requirement among the components.

[0086] The target component can be, for example, a component to be cut into a rounded corner, or a component to be cut into a corner of other different shapes such as a polygon. This application does not limit this. In the following description, the target component is taken as an example of a component to be cut into a rounded corner for introduction.

[0087] In a possible implementation, the corner cutting parameters of the target component can be obtained from the shadow tree of the target page. Since the shadow tree of the target page includes the attribute parameters of each component of the target page (such as component type, component position, component size, component shape, etc.), the shape of the target component to be cut can be determined according to the shape parameter of the target component in the shadow tree of the target page, and / or the specific parameters of the shape. For example, if the target component needs to be cut into a rounded corner component, the shape parameter of the target component in the shadow tree may include a parameter indicating that the component needs to be cut into a rounded corner component, and / or the radius of each rounded corner. According to the shape parameter of the target component in the shadow tree, the corner cutting parameters of the target component can be determined. Specifically, the shadow tree of the target page can be accessed through the JavaScript Application Programming Interface (API), the element corresponding to the target component can be traversed and found in the shadow tree, and the corner cutting parameters of the target component can be obtained from the attribute parameters corresponding to the element.

[0088] In another possible implementation, the corner cutting parameters of the target component with corner cutting requirements in the component can be obtained from the Document Object Model tree of the target page, the Cascading Style Sheets (CSS) of the components of the target page, etc.

[0089] S103. Determine whether the target component includes sub-components that need to be drawn on an independent layer.

[0090] The target component may include multiple sub-components. The sub-components included in the target component may be sub-components that need to be drawn on an independent layer, or may be sub-components that do not need to be drawn on an independent layer.

[0091] In a possible implementation, it can be determined whether the target component includes sub-components that need to be drawn on an independent layer according to the rendering style of the sub-components in the target component, and / or the component type.

[0092] In another possible implementation, a parameter for indicating whether it needs to be drawn on an independent layer can be pre-configured in the attribute parameters of the component. According to this parameter in the attribute parameters of the sub-components of the target component, it can be determined whether the target component includes sub-components that need to be drawn on an independent layer. Alternatively, it can also be obtained from other devices whether the target component includes sub-components that need to be drawn on an independent layer (such as obtained from the cloud). For example, candidate components including sub-components that need to be drawn on an independent layer can be obtained from other devices, and then it can be determined whether the target component is a component in the candidate components, or whether there are sub-components that need to be drawn on an independent layer among the sub-components included in the target component obtained from other devices.

[0093] S104. If so, obtain the cutting layer of the target component according to the corner cutting parameters.

[0094] Among them, the cutting layer is used to cut the layer where the target component is located, so as to realize the corner cutting of the target component according to the corner cutting parameters. By applying the cutting layer to the layer where the target component is located, the independent layer where the target component is located is cut according to the corner cutting parameters of the target component.

[0095] Optionally, the cutting layer can be pre-generated or generated instantaneously in this step. When the cutting layer is pre-generated, the cutting layer of the target component can be obtained according to the corner cutting parameters of the target component and the mapping relationship between the corner cutting parameters and the cutting layer. When the cutting layer is generated instantaneously, the cutting layer can be constructed according to the corner cutting parameters.

[0096] S105. Generate the layer tree of the target page according to the cutting layer.

[0097] Among them, the layer tree is used for rendering and display. For example, the layer tree of the target page can be used to render the target page in real time, or the number of layers of the target page can be generated in advance, and then the layers of the target page are rendered after receiving the rendering instruction to generate and display the target page.

[0098] A possible implementation method is to first generate the page parameters of the target page and generate the initial layer tree of the target page. Then, the cutting layer is added to the initial layer tree of the target page to generate the layer tree of the target page. Among them, there is an association relationship between the cutting layer and the layer where the target component is located, so that the cutting layer acts on the layer where the target component is located, and the independent layer where the target component is located is cut according to the corner cutting parameters of the target component.

[0099] Another possible implementation method is to first determine the positional relationship between the cutting layer and other layers in the layer tree of the future-generated target page, so as to determine the configuration parameters of the cutting layer in the layer tree of the target page. According to the configuration parameters of the cutting layer and the configuration parameters of other layers, the layer tree of the target page is generated. Among them, the configuration parameters are used to configure the position and / or connection relationship of the layer in the layer tree.

[0100] The page layer tree construction method provided by the embodiments of the present application obtains the component layout of components with a parent-child relationship in the target page and the corner cutting parameters of the target component with a corner cutting requirement in the target page. When the target parent component includes a child component that needs to be drawn on an independent layer, the cutting layer of the target component is obtained according to the corner cutting parameters of the target component, so as to limit the display areas of the target component and the child components of the target component through the cutting layer. And according to the cutting layer, a layer tree of the target page is generated. Compared with the prior art in which a cutting layer needs to be newly added for each component with a rounded corner cutting requirement, the number of cutting layers in the page layer tree is reduced, thereby improving the display performance of the page of the target component with a corner cutting requirement.

[0101] Next, taking the cutting layer being generated instantaneously as an example, a detailed introduction is given to how to obtain the cutting layer of the target component according to the corner cutting parameters in the foregoing step S104. Figure 2 It is a schematic flowchart of another page layer tree construction method provided by the embodiments of the present application. As Figure 2 shown, the foregoing step S104 may specifically include the following steps:

[0102] S201. Determine the display attributes of the target independent layer where the target component is located in the target page according to the corner cutting parameters.

[0103] Among them, the display attributes may include the display position, display size, and display shape of the target component. The display shape may include the specific parameters of the corners of the target component. For example, the display shape includes the radius of the rounded corners of the target component.

[0104] Generate the display attributes of the target independent layer in the target page according to the corner cutting parameters. For example, on the basis of having obtained the size parameters, position parameters, etc. of the target independent layer from the shadow tree, further determine the shape parameters (including the parameters of each corner) of the target independent layer in the target page according to the corner cutting parameters. According to the size parameters, position parameters, shape parameters, etc. of the target independent layer, determine the display attributes of the target independent layer in the target page.

[0105] S202. Construct a cutting layer according to the display attributes.

[0106] Generate a cutting layer corresponding to these parameters according to the specific parameters included in the display attributes.

[0107] The method provided by the embodiments of the present application determines the display attributes of the target independent layer where the target component is located on the target page according to the corner cutting parameters, and constructs a cutting layer according to the display attributes to generate a cutting layer that can simultaneously limit the display areas of the target component and the sub-components of the target component. Compared with the prior art where a cutting layer needs to be added to each component with a rounded corner cutting requirement, the number of cutting layers in the layer tree of the page generated according to the cutting layer is reduced, thereby improving the rendering efficiency of the layer tree for rendering the page, and further improving the display performance of the page of the target component with a corner cutting requirement.

[0108] Next, a detailed introduction will be given on how to generate the layer tree of the target page according to the cutting layer in the foregoing step S105.

[0109] Implementation method A: First, generate the initial layer tree of the target page according to the target independent layer, the independent layer with sub-components drawn, and the component layout, and then insert the cutting layer into the initial layer tree to generate the layer tree of the target page.

[0110] Figure 3 It is a flowchart of another method for constructing a page layer tree provided by the embodiments of the present application. As Figure 3 shown, the foregoing step S105 may specifically include the following steps:

[0111] S301. Generate an initial layer tree according to the target independent layer, the independent layer, and the component layout.

[0112] According to the parent-child relationship between the target component and the sub-components, determine the structural relationship between the target independent layer and the independent layer with sub-components drawn in the initial layer tree. For example, if component 1 is a sub-component of the sub-component (component 2) of the target component, then in the initial layer tree, the next layer node of the target component includes the independent layer where component 2 is located. In the initial layer tree, the node of the independent layer where component 2 is located in the initial layer tree is node 1, and the next layer node of node 1 includes the independent layer of component 1.

[0113] Generate the structure of the initial layer tree corresponding to the parent-child relationship in the component layout according to all the components drawn on the independent layer in the target page and the parent-child relationship of these components in the component layout. Each node of the initial layer tree corresponds to the independent layer where a component is located.

[0114] S302. Determine the target position according to the position information of the target independent layer in the initial layer tree.

[0115] Among them, the target position is the position in the layer tree of the target page where the cutting layer is configured.

[0116] Based on the position information of the target independent layer in the initial layer tree, determine the position of the node of the target independent layer in the initial layer tree, and the position of the parent node of the node. Between the node position of the target independent layer and the node position of the parent node, add a new node, and use the position of the newly added node as the target position for subsequently deploying a cutting layer for cutting the target independent layer and the independent layer where the sub-components of the target component are located at the target position.

[0117] S303. Add a cutting layer at the target position in the initial layer tree to generate the layer tree of the target page.

[0118] Add the cutting layer obtained in the foregoing embodiment to the target position, thereby updating the initial layer tree. After the initial layer tree is updated, it is the layer tree of the target page.

[0119] Implementation method B: Directly generate the layer tree of the target page according to the target independent layer, the independent layer with sub-components drawn, the cutting layer and their positions.

[0120] Figure 4 It is a schematic flowchart of yet another method for constructing a page layer tree provided by an embodiment of the present application. As Figure 4 shown, the foregoing step S105 may specifically include the following steps:

[0121] S401. Determine the target position according to the position information of the target independent layer in the component layout of the target page.

[0122] Among them, the target position is the position where the cutting layer is configured in the layer tree of the target page.

[0123] According to the position information of the target independent layer in the component layout of the target page, determine the position of the target independent layer when generating the layer tree subsequently, and the position of the parent layer of the target independent layer. Between the position of the target independent layer and the position of the parent layer is the target position where the cutting layer is configured.

[0124] In this step, only the data information of these positions is obtained here, and the process of generating the layer tree does not start.

[0125] S402. Generate the layer tree of the target page according to the target independent layer, the independent layer with sub-components drawn, the cutting layer, and the target position.

[0126] After the position data of the layers of the components drawn on each independent layer are determined, construct and generate the layer tree of the target page according to the structural relationship between each independent layer, the cutting layer, and the target position of the cutting layer. The structural relationship between each node in the layer tree corresponds to the structural relationship between the layers of the components drawn on each independent layer in the target page.

[0127] Next, taking the example that whether a component needs to be drawn on an independent layer can be determined according to the rendering style of the component and / or the component type, a detailed introduction will be given to how to specifically determine whether the target component includes sub-components that need to be drawn on an independent layer in the foregoing step S103. Figure 5 It is a schematic flowchart of another page layer tree construction method provided by an embodiment of the present application. As Figure 5 shown, the foregoing step S103 may specifically include the following steps:

[0128] S501. Obtain the rendering style and / or component type of the sub-components in the target component.

[0129] Among them, the rendering style and / or component type of the sub-components in the target component can be obtained from the page structure tree corresponding to the target page. For example, the rendering style and / or component type of each sub-component can be obtained from the attribute parameters of each component in the aforementioned shadow tree.

[0130] S502. Determine whether the rendering style is the target rendering style and / or whether the component type is the target type.

[0131] Among them, the target rendering style and the target type can be determined according to actual needs, and the present application does not limit this. Exemplarily, the target rendering style may include, for example, transparency (opacity) style, transformation (transform) style (such as rotating, scaling, skewing, and moving components, etc.), overflow (overflow) style (used to control how to handle when the content of a component exceeds its specified height and width), etc. The target type may include, for example, list component type, image component type, component type that requires external data input, etc.

[0132] Based on the obtained rendering style and / or component type of the sub-components, determine whether the rendering style of the sub-components is the target rendering style and / or determine whether the component type of the sub-components is the target type.

[0133] S503. When the rendering style is the target rendering style and / or the component type is the target type, the sub-component needs to be drawn on an independent layer.

[0134] When the rendering style of the sub-component is the target rendering style and / or the component type is the target type, it indicates that the sub-component needs to be drawn on an independent layer to better implement the function of the sub-component. For example, the sub-component may be a component that needs to be continuously refreshed. When other components on the page are refreshed continuously while this sub-component is being refreshed, there is no need to be refreshed together with this sub-component. At this time, drawing this sub-component on an independent layer can continuously render only the independent layer where this sub-component is located, rather than continuously rendering the entire page, so as to reduce the memory consumption of the rendering behavior.

[0135] Determine whether there are sub-components that need to be drawn on an independent layer among the sub-components of the target component according to the way whether each sub-component needs to be drawn on an independent layer.

[0136] Since the display range of a sub-component should not exceed the display range of its parent component (i.e., the target component), and the target component has a corner clipping requirement. Therefore, when the sub-component and the target component are not drawn on the same layer, not only the layer where the target component is located needs to be clipped, but also the layer where the sub-component of the target component is located needs to be clipped to prevent the part of the sub-component that exceeds the display range of the target component from being displayed during display.

[0137] Exemplarily, Figure 6 A schematic diagram of a target page provided by an embodiment of the present application. As Figure 6 shown, the target component has a corner clipping requirement, and the clipping boundary is as Figure 6 marked. The target component includes 7 sub-components, where sub-components 1 to 6 are sub-components that do not need to be drawn on an independent layer and can be directly drawn using Canvas, etc., and drawn on the layer where the target component is located together with the target component. Sub-component 7 is a component that needs to be drawn on an independent layer.

[0138] Assume that as Figure 6 shown, only a part of sub-component 7 needs to be displayed, that is, there is a part that does not need to be displayed (i.e., Figure 6 the part that exceeds the display range of the target component in the figure), and this part is outside the clipping boundary. If the clipping layer of the target component cannot clip the layer where the sub-component of the target component is located, then the part of sub-component 7 that exceeds the display range of the target component will also be displayed during display, resulting in a display error.

[0139] Therefore, if at least one sub-component of the target component needs to be drawn on an independent layer, it indicates that there are sub-components that are not drawn on the same layer as the target component, and a clipping layer that can limit both the target component and the sub-components needs to be generated. If none of the sub-components of the target component need to be drawn on an independent layer, it indicates that all sub-components of the target component can be drawn on the same layer, and there is no need to generate a clipping layer.

[0140] Figure 7 A schematic flow diagram of a page rendering method provided by an embodiment of the present application. As Figure 7 shown, the method may include:

[0141] S701. In response to a rendering event of a target page of a target application, obtain the layer tree of the generated target page.

[0142] Among them, the rendering event can be, for example, an event that requires page switching such as starting a target application or refreshing the interface of the target application. The refreshing of the interface of the target application can be performed by the target application itself according to its own needs, or can be refreshed in response to a user operation.

[0143] Specifically, the rendering event can be, for example, triggering the operating system of the terminal device to execute the subsequent rendering process through a VSYNC signal. After the operating system receives the VSYNC signal, it executes the process of rendering the target page.

[0144] The layer tree of the generated target page can be generated by any of the foregoing Figures 1 - 5 page layer tree construction methods, and its generation method will not be elaborated here.

[0145] Optionally, the layer tree of the target page can be instantaneously generated by any of the foregoing Figures 1 - 5 page layer tree construction methods after responding to the rendering event of the target page of the target application. Alternatively, the layer tree of the target page can also be generated in advance by any of the foregoing Figures 1 - 5 page layer tree construction methods and stored in the resource file of the target application. When the rendering event of the target page of the target application is triggered, the layer tree corresponding to the target page is obtained from the pre-stored layer tree according to the target page.

[0146] S702. Render, through the layer tree, a component that has a corner cutting requirement in the component and includes a sub-component that needs to be drawn on an independent layer.

[0147] Starting from the root node of the layer tree, according to the hierarchical structure of the layer tree, recursively render the independent layer where the component with a corner cutting requirement in the layer tree and including a sub-component that needs to be drawn on an independent layer is located, so as to implement the rendering of the component with a corner cutting requirement and including a sub-component that needs to be drawn on an independent layer. Among them, how to specifically render the layer tree can refer to the existing rendering methods, and this application will not elaborate on this.

[0148] S703. Call a corner cutting function to render a component that has a corner cutting requirement in the component and does not include a sub-component that needs to be drawn on an independent layer.

[0149] Among them, the corner cutting function can include, for example, the ClipRRect instruction in Canvas, or other instructions with the same function as the ClipRRect instruction (for example, it can be implemented by other existing methods outside the Canvas solution, and this application does not limit this).

[0150] For a component that has a need for corner cropping and does not include sub-components that need to be drawn on an independent layer, none of the sub-components of this component need to be drawn on an independent layer, and the sub-components of this component and the target component can be drawn on the same layer (i.e., the independent layer where this component is located). By calling the ClipRRect instruction in the Canvas, the drawn layer (i.e., the independent layer where this component is located) is cropped according to the corner cropping parameters of this component. Then, the independent layer where this component is located after cropping is rendered. Among them, for how to specifically render the independent layer where this component is located after cropping, the existing rendering methods can be referred to, and this application will not elaborate on this.

[0151] The method provided in the embodiments of this application, when responding to the rendering event of the target page of the target application, generates the layer tree of the target page by obtaining the page layer tree construction method provided in the foregoing embodiments, and through the layer tree, renders the components in the component that have a need for corner cropping and include sub-components that need to be drawn on an independent layer, and renders the components in the component that have a need for corner cropping and do not include sub-components that need to be drawn on an independent layer by calling the corner cropping function. Compared with the layer tree of the page constructed by the existing technology in which a cropping layer is generated for each component that has a need for corner cropping, the number of cropping layers in the layer tree rendered by this method is less, so the rendering efficiency is higher, and the computing resources occupied are less, thereby improving the efficiency of generating the page by the rendering layer tree.

[0152] Exemplarily, taking the layer tree of the target page for real-time rendering and displaying the target page, and the corner cropping requirement of the target component being a rounded corner as an example, through a specific example, the complete process of the method in the foregoing embodiments is explained and introduced. Figure 8 It is a schematic flowchart of a page generation method provided in the embodiments of this application. As Figure 8 shown, the method may include:

[0153] S801. In response to the rendering event of the target page of the target application, obtain the component layout of the target page.

[0154] Among them, the introduction of this rendering event can refer to the foregoing step S701, and for how to specifically obtain the component layout of the page, it can refer to the foregoing step S101, which will not be elaborated here.

[0155] S802. According to the component layout of the target page, determine whether each component included in the target page needs to be drawn on an independent layer.

[0156] For how to determine whether each component included in the target page needs to be drawn on an independent layer according to the component layout of the target page, it can refer to the foregoing step S103, which will not be elaborated here.

[0157] S803. Start drawing components from the root node.

[0158] The drawing method can refer to the drawing method in the existing rendering process, which will not be elaborated in this application.

[0159] S804. Determine whether there is a target component with corner cropping requirements in the target page.

[0160] Traverse the page structure tree of the target page to determine whether there is a target component with corner cropping requirements in the target page. If there is no target component with corner cropping requirements in the target page, execute step S805; if there is a target component with corner cropping requirements in the target page, execute step S806.

[0161] S805. Directly generate a layer tree according to the layers corresponding to each component in the target page and the component layout of the target page, and execute step S812.

[0162] S806. Obtain the corner cropping parameters of the target component with corner cropping requirements in the component.

[0163] The implementation method of this step can refer to the aforementioned step S102, which will not be elaborated here.

[0164] S807. Determine whether there is a sub-component that needs to be drawn on an independent layer in the target component according to the rendering style and / or component type of the sub-components of the target component.

[0165] Specifically, how to determine whether there is a sub-component that needs to be drawn on an independent layer in the target component according to the rendering style and / or component type of the sub-components of the target component can refer to the aforementioned steps S501 to S503, which will not be elaborated here.

[0166] If there is no sub-component that needs to be drawn on an independent layer in the sub-components of the target component, execute step S808; if there is a sub-component that needs to be drawn on an independent layer in the sub-components of the target component, execute step S809.

[0167] S808. Call the corner cropping function to render the component that has corner cropping requirements in the component and does not include the sub-components that need to be drawn on an independent layer.

[0168] The implementation method of this step can refer to the aforementioned step S703, which will not be elaborated here.

[0169] S809. Obtain the cropping layer of the target component according to the corner cropping parameters of the target component.

[0170] The implementation method of this step can refer to the aforementioned step S104, which will not be elaborated here.

[0171] S810. Generate a layer tree of the target page according to the cropping layer.

[0172] The implementation method of this step can refer to the aforementioned step S105 and will not be elaborated here.

[0173] S811. Render the components in the component that have corner cutting requirements and include sub-components that need to be drawn on an independent layer through the layer tree, and call the corner cutting function to render the components in the component that have corner cutting requirements and do not include sub-components that need to be drawn on an independent layer, so as to generate and output the target page.

[0174] S812. Render the components through the layer tree to generate and output the target page.

[0175] Among them, rendering the components in the component that have corner cutting requirements and include sub-components that need to be drawn on an independent layer through the layer tree can refer to the aforementioned step S702; calling the corner cutting function to render the components in the component that have corner cutting requirements and do not include sub-components that need to be drawn on an independent layer can refer to the aforementioned step S703.

[0176] Figure 9 It is a schematic structural diagram of a page layer tree construction device provided by an embodiment of the present application. As Figure 9 shown, the device may include: a first acquisition module 11, a second acquisition module 12, a judgment module 13, a processing module 14, and a generation module 15.

[0177] The first acquisition module 11 is used to acquire the component layout in the target page, and the component layout is used to represent the components included in the target page and the parent-child relationship between the components.

[0178] The second acquisition module 12 is used to acquire the corner cutting parameters of the target component in the component that has corner cutting requirements.

[0179] The judgment module 13 is used to judge whether the target component includes sub-components that need to be drawn on an independent layer.

[0180] The processing module 14 is used to, if so, acquire the cutting layer of the target component according to the corner cutting parameters.

[0181] The generation module 15 is used to generate the layer tree of the target page according to the cutting layer.

[0182] Optionally, the processing module 14 is specifically used to determine the display attribute of the target independent layer where the target component is located in the target page according to the corner cutting parameters. And construct the cutting layer according to the display attribute.

[0183] Optionally, the generation module 15 is specifically configured to generate an initial layer tree according to the target independent layer, the independent layer, and the component layout. Determine the target position according to the position information of the target independent layer in the initial layer tree. Add a clipping layer at the target position in the initial layer tree to generate the layer tree of the target page. Wherein, the target position is the position where the clipping layer is configured in the layer tree of the target page.

[0184] Optionally, the generation module 15 is specifically configured to determine the target position according to the position information of the target independent layer in the component layout of the target page. Generate the layer tree of the target page according to the target independent layer, the independent layer with sub-components drawn, the clipping layer, and the target position. Wherein, the target position is the position where the clipping layer is configured in the layer tree of the target page.

[0185] Optionally, the second acquisition module 12 is specifically configured to acquire the rendering style and / or component type of the sub-components in the target component. Determine whether the rendering style is the target rendering style and / or whether the component type is the target type. Wherein, when the rendering style is the target rendering style and / or the component type is the target type, the sub-components need to be drawn on the independent layer.

[0186] The page layer tree construction device provided in the embodiments of the present application can execute the page layer tree construction method in the above method embodiments, and its implementation principle and technical effects are similar, and will not be described in detail here.

[0187] Figure 10 It is a schematic structural diagram of a page rendering device provided in an embodiment of the present application. As Figure 10 shown, the device may include: an acquisition module 21, a first control module 22, and a second control module 23.

[0188] The acquisition module 21 is configured to acquire the layer tree of the target page generated by using the page layer tree construction method as described above in response to a rendering event of the target page of the target application.

[0189] The first control module 22 is configured to render, through the layer tree, a component that has a corner clipping requirement and includes sub-components that need to be drawn on an independent layer.

[0190] The second control module 23 is configured to call a corner clipping function to render a component that has a corner clipping requirement and does not include sub-components that need to be drawn on an independent layer.

[0191] The page rendering device provided in the embodiments of the present application can execute the page rendering method in the above method embodiments, and its implementation principle and technical effects are similar, and will not be described in detail here.

[0192] Figure 11A schematic structural diagram of an electronic device provided by an embodiment of the present application. Among them, the electronic device is used to execute the foregoing page layer tree construction method or page rendering method. For example, it may be the foregoing electronic device on which the application program is deployed. As Figure 11 shown, the electronic device 1100 may include: at least one processor 1101 and a memory 1102.

[0193] The memory 1102 is used to store a program. Specifically, the program may include program code, and the program code includes computer operation instructions.

[0194] The memory 1102 may include a high-speed RAM memory, and may also include a non-volatile memory, such as at least one disk memory.

[0195] The processor 1101 is used to execute the computer execution instructions stored in the memory 1102 to implement the method described in the foregoing method embodiments. Among them, the processor 1101 may be a CPU, or a specific integrated circuit (Application Specific Integrated Circuit, abbreviated as ASIC), or one or more integrated circuits configured to implement the embodiments of the present application.

[0196] In a specific implementation, if the memory 1102 and the processor 1101 are implemented independently, the memory 1102 and the processor 1101 may be connected to each other through a bus and communicate with each other. The bus may be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus, etc. The bus may be divided into an address bus, a data bus, a control bus, etc., but it does not mean that there is only one bus or one type of bus.

[0197] Optionally, in a specific implementation, if the memory 1102 and the processor 1101 are integrated on a chip, the memory 1102 and the processor 1101 may communicate through an internal interface.

[0198] The present application also provides a computer-readable storage medium, which may include: various media capable of storing program codes such as USB flash drives, external hard drives, read-only memories (ROMs), random access memories (RAMs), magnetic disks, or optical discs. Specifically, program instructions are stored in the computer-readable storage medium, and the program instructions are used for the methods in the above embodiments.

[0199] The present application also provides a program product, which includes execution instructions stored in a readable storage medium. At least one processor of an electronic device can read the execution instructions from the readable storage medium, and the execution of the execution instructions by at least one processor enables the electronic device to implement the page layer tree construction method or the page rendering method provided by the above various embodiments.

[0200] The term "plurality" herein refers to two or more. The term "and / or" herein merely describes the association relationship of associated objects and indicates that three relationships may exist. For example, A and / or B may represent: A exists alone, A and B exist simultaneously, and B exists alone. In addition, the character " / " herein generally represents an "or" relationship between the associated objects before and after; in a formula, the character " / " represents a "division" relationship between the associated objects before and after. In addition, it should be understood that in the description of the present application, words such as "first" and "second" are only used for the purpose of distinguishing descriptions, and cannot be understood as indicating or implying relative importance, nor can they be understood as indicating or implying an order.

[0201] It can be understood that the various numerical numbers involved in the embodiments of the present application are only for convenience of description and are not used to limit the scope of the embodiments of the present application.

[0202] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application and are not intended to limit them; although the present application has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions recorded in the foregoing embodiments, or perform equivalent replacements on some or all of the technical features; and these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present application.

Claims

1. A page layer tree construction method, characterized in that: The method comprises: Obtaining a component layout in a target page, wherein the component layout is used to represent components included in the target page and parent-child relationships between the components; Obtaining the corner clipping parameters of the target component that has corner clipping requirements in the component; Determine whether the target component includes a subcomponent that needs to be drawn on an independent layer; If so, obtaining the cutting layer of the target component according to the corner cutting parameters; A layer tree of the target page is generated according to the clipping layer.

2. The method according to claim 1, characterized in that The obtaining the cutting layer of the target component according to the corner cutting parameter includes: Determining, according to the corner cropping parameters, a display attribute of the target independent layer where the target component is located on the target page; The clipping layer is constructed according to the display attribute.

3. The method according to claim 2, characterized in that Generating a layer tree of the target page according to the clipping layer includes: generating an initial layer tree according to the target independent layer, the independent layer and the component layout; Determine a target position according to position information of the target independent layer in the initial layer tree, where the target position is a position where the clipping layer is configured in the layer tree of the target page; The clipping layer is added to the target position in the initial layer tree to generate a layer tree of the target page.

4. The method according to claim 2, characterized in that: Generating a layer tree of a target page according to the clipping layer includes: Determine a target position according to position information of the target independent layer in the component layout of the target page, where the target position is a position where the clipping layer is configured in the layer tree of the target page; A layer tree of the target page is generated according to the target independent layer, the independent layer on which the subcomponent is drawn, the clipping layer, and the target position.

5. The method according to any one of claims 1 to 4, characterized in that The determining whether the target component includes a subcomponent that needs to be drawn on an independent layer includes: Obtain the rendering style of the subcomponent in the target component and / or the component type; Determine whether the rendering style is the target rendering style and / or whether the component type is the target type; wherein, when the rendering style is the target rendering style and / or the component type is the target type, the subcomponent needs to be drawn on an independent layer.

6. A page rendering method, characterized in that: The method comprises: In response to a rendering event of a target page of a target application, obtaining a layer tree of the target page generated by the method according to any one of claims 1 to 5; Rendering, through the layer tree, the components that have corner clipping requirements and include subcomponents that need to be drawn on independent layers; The corner clipping function is called to render the components that have corner clipping requirements and do not include subcomponents that need to be drawn on independent layers.

7. A page layer tree construction device, characterized in that: The device comprises: A first acquisition module is used to acquire a component layout in a target page, where the component layout is used to represent components included in the target page and parent-child relationships between the components; A second acquisition module is used to acquire the corner cutting parameters of the target component having corner cutting requirements among the components; A judging module, used for judging whether the target component includes a subcomponent that needs to be drawn on an independent layer; A processing module, configured to obtain a cutting layer of the target component according to the corner cutting parameters; A generating module is used to generate a layer tree of a target page according to the clipping layer.

8. A page rendering device, characterized in that: The device comprises: An acquisition module, configured to, in response to a rendering event of a target page of a target application, acquire a layer tree of the target page generated by the method according to any one of claims 1 to 6; A first control module is used to render, through the layer tree, the components that have corner clipping requirements and include subcomponents that need to be drawn on independent layers; The second control module is used to call the corner clipping function to render the components that have corner clipping requirements and do not include subcomponents that need to be drawn on an independent layer.

9. An electronic device, characterized in that: include: Processor, memory; The processor is communicatively connected to the memory; The memory stores computer instructions; The processor executes the computer instructions stored in the memory to implement the method according to any one of claims 1 to 6.

10. A computer program product, characterized in that The method comprises a computer program or an instruction, and when the computer program or the instruction is executed by a processor, the method according to any one of claims 1 to 6 is implemented.

Images