Method and device for drawing components of page, electronic equipment and program product

Abstract

The embodiment of the invention relates to a method and device for drawing a component of a page, electronic equipment and a program product. The method comprises the steps that whether multiple pieces of drawing content of multiple components can be drawn into a target component in a first component tree or not is determined, so that multiple processing results of the multiple components are obtained, and the first component tree indicates the position relation of the multiple components; generating a drawing list related to the target component based on the drawing sequence of the plurality of components and the plurality of processing results; adjusting the first component tree to obtain a second component tree containing the target component, a related drawing list and components which cannot be drawn into the target component; and generating a plurality of drawn contents of the page based on the second component tree. In this way, the hierarchical depth of the component tree can be reduced, the overall calculation complexity and resource consumption can be reduced, the layout and rendering efficiency of the page components can be improved, and then the rendering performance can be optimized.

Description

Technical Field

[0001] The present disclosure relates generally to the field of computers, and more particularly, to a method, apparatus, electronic device, and program product for drawing components of a page. Background Art

[0002] In the process of terminal software development, page rendering is one of the core links of software development. The software development platform is responsible for converting the developer's page layout and user interaction elements into a specific visual interface. By optimizing rendering efficiency and providing rich functional support, the page rendering module in the software development platform plays an important role in the development process.

[0003] As the complexity of terminal software increases, rendering performance has become a bottleneck in the field of software development. In order to improve the user's interactive experience, the software development platform needs to continuously optimize the smoothness and response speed of page rendering, while providing rich interactive effects and animation effects. Therefore, how to improve rendering performance has become an important issue in the field of software development. Summary of the invention

[0004] In an embodiment of the present disclosure, a method, an apparatus, an electronic device, and a program product for drawing components of a page are provided.

[0005] In a first aspect of the present disclosure, a method for drawing components of a page is provided, comprising: determining whether multiple drawing contents of multiple components can be drawn into a target component in a first component tree to obtain multiple processing results of the multiple components, the first component tree indicating the positional relationship of the multiple components; generating a drawing list related to the target component based on the drawing order of the multiple components and the multiple processing results; adjusting the first component tree to obtain a second component tree containing the target component and the related drawing list, and components that cannot be drawn into the target component; and generating multiple drawing contents of the page based on the second component tree.

[0006] In a second aspect of the present disclosure, a device for drawing components of a page is provided, comprising: a processing result determination module, configured to determine whether multiple drawing contents of multiple components can be drawn into a target component in a first component tree to obtain multiple processing results of the multiple components, the first component tree indicating the positional relationship of the multiple components; a drawing list generation module, configured to generate a drawing list related to the target component based on the drawing order of the multiple components and the multiple processing results; a first component tree adjustment module, configured to adjust the first component tree to obtain a second component tree including the target component and the related drawing list, and components that cannot be drawn into the target component; and a drawing content generation module, configured to generate multiple drawing contents of the page based on the second component tree.

[0007] In a third aspect of the present disclosure, an electronic device is provided, comprising a processor and a memory coupled to the processor, wherein the memory has instructions stored therein, and when the instructions are executed by the processor, the electronic device executes the method according to the first aspect.

[0008] In a fourth aspect of the present disclosure, a computer program product is provided, comprising computer executable instructions, wherein the computer executable instructions are executed by a processor to implement the method according to the first aspect.

[0009] In a fifth aspect of the present disclosure, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores computer-executable instructions, wherein the computer-executable instructions are executed by a processor to implement the method according to the first aspect.

[0010] The purpose of this Summary is to introduce a selection of concepts in a simplified form that are further described in the Detailed Description below. This Summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended to limit the scope of the claimed subject matter. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] The above and other features, advantages and aspects of the embodiments of the present disclosure will become more apparent with reference to the following detailed description in conjunction with the accompanying drawings. In the accompanying drawings, the same or similar reference numerals represent the same or similar elements, wherein:

[0012] Figure 1 A schematic diagram illustrating an example environment in which some embodiments of the present disclosure may be implemented;

[0013] Figure 2 A flowchart showing a method for drawing components of a page according to some embodiments of the present disclosure is shown;

[0014] Figure 3A A schematic diagram showing a first component tree of some embodiments of the present disclosure;

[0015] Figure 3B A schematic diagram showing a flattened first component tree of some embodiments of the present disclosure;

[0016] Figure 3C A schematic diagram showing a drawing list of some embodiments of the present disclosure;

[0017] Figure 3D A schematic diagram showing a second component tree of some embodiments of the present disclosure;

[0018] Figure 4A A schematic diagram showing another first component tree after flattening in some embodiments of the present disclosure;

[0019] Figure 4B A schematic diagram showing another drawing list of some embodiments of the present disclosure;

[0020] Figure 4C A schematic diagram showing another second component tree of some embodiments of the present disclosure;

[0021] Figure 5 A block diagram showing an apparatus for drawing components of a page according to some embodiments of the present disclosure; and

[0022] Figure 6 A block diagram of an electronic device according to some embodiments of the present disclosure is shown.

[0023] Throughout the drawings, the same or similar reference numbers denote the same or similar elements. DETAILED DESCRIPTION

[0024] It is understandable that the data involved in this technical solution (including but not limited to the data itself, the acquisition or use of the data) shall comply with the requirements of relevant laws, regulations and relevant provisions.

[0025] It is understandable that before using the technical solutions disclosed in the embodiments of the present disclosure, the types, scope of use, usage scenarios, etc. of the personal information involved in the present disclosure should be informed to the user and the user's authorization should be obtained in an appropriate manner in accordance with relevant laws and regulations.

[0026] For example, when receiving an active request from a user, a prompt message is sent to the user to clearly prompt the user that the operation requested to be performed will require obtaining and using the user's personal information. Thus, the user can autonomously choose whether to provide personal information to software or hardware such as an electronic device, application, server, or storage medium that performs the operation of the technical solution of the present disclosure according to the prompt message.

[0027] As an optional but non-limiting implementation, in response to receiving an active request from the user, the prompt information may be sent to the user in the form of a pop-up window, in which the prompt information may be presented in text form. In addition, the pop-up window may also carry a selection control for the user to choose "agree" or "disagree" to provide personal information to the electronic device.

[0028] It is understandable that the above notification and the process of obtaining user authorization are merely illustrative and do not constitute a limitation on the implementation of the present disclosure. Other methods that meet the relevant laws and regulations may also be applied to the implementation of the present disclosure.

[0029] Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although certain embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be construed as being limited to the embodiments described herein, which are instead provided for a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the present disclosure are only for exemplary purposes and are not intended to limit the scope of protection of the present disclosure.

[0030] In the description of the embodiments of the present disclosure, the term "including" and similar terms should be understood as open inclusion, that is, "including but not limited to". The term "based on" should be understood as "based at least in part on". The term "one embodiment" or "the embodiment" should be understood as "at least one embodiment". The terms "first", "second", etc. may refer to different or the same objects, unless explicitly stated. Other explicit and implicit definitions may also be included below.

[0031] In the process of software development, when building a page, the page rendering performance is low due to factors such as deep nesting of page levels and a large number of page views. In the development process of terminal applications, a smooth user experience is crucial, but a complex view structure often brings high performance challenges. In the related art, components are used as the basic units for building pages, which include, for example, buttons, text boxes, pictures, etc. Then, a hierarchical structure of components, i.e., a component tree, is constructed, in which components are nested layer by layer starting from the root component to form a tree structure. In this tree structure, the size, position, drawing content, etc. of each component will be traversed during calculation. Therefore, in the related art, when rendering a page, the overall computational complexity and resource consumption are high.

[0032] For example, when drawing a user page, the following three stages are required: measurement, to determine the width and height of each component. Each component can receive measurement requirements from the parent component from top to bottom and modify the measurement requirements according to its own size and the size of its child components; layout, after completing the measurement, determine the position of each component. This process is also from top to bottom, first layout the parent component area, then layout the child component area; drawing, after the layout is completed, recursively call the drawing method of each component from top to bottom to draw the component on the screen. The above steps all use the pre-order traversal method in the component tree. Starting from the root component, each component will fully execute the above three steps.

[0033] In an embodiment of the present disclosure, a component tree of a page to be drawn is first obtained, wherein the component tree is used to represent the positional relationship between multiple components. Then, it is determined whether the drawing content of each component can be drawn into the root component, thereby obtaining the processing result corresponding to each component, and generating a drawing list related to the root component according to the drawing order and processing results of the multiple components. Further, the component tree is adjusted to obtain an adjusted component tree to remove components that can be drawn into the root component, wherein the adjusted component tree only contains the root component and components that cannot be drawn into the root component, wherein the root component is associated with a drawing list. The drawing content of the page is generated through the adjusted component tree. In this way, the hierarchical depth of the component tree can be reduced, the overall computational complexity and resource consumption can be reduced, the layout and rendering efficiency of the page components can be improved, and the rendering performance can be optimized.

[0034] Figure 1 A schematic diagram of an example environment 100 is shown in which some embodiments of the present disclosure may be implemented. Figure 1 The example environment 100 includes a development platform 102 and a terminal 110, wherein the development platform 102 can be configured as a computing system, a single server, a distributed server, or a cloud-based server, etc., and the terminal 110 can be configured as a personal computer, a mobile phone, a tablet computer, or other devices.

[0035] In some embodiments, the development platform 102 first obtains the first component tree 104 of the page, wherein the logical relationship between the components in the first component tree 104 is used to represent the positional relationship between the components. Then, the development platform 102 determines whether the drawing content of each component in the first component tree 104 can be drawn into the root component (which may be referred to as the target component), thereby obtaining the processing result corresponding to each component, and generating a drawing list related to the root component according to the drawing order and processing results of multiple components. For example, if there are 10 components in the first component tree 104, the drawing list is arranged with the 10 components in the drawing order of the 10 components, and each component identifies the processing result of whether it can be drawn into the root component.

[0036] Further, the development platform 102 adjusts the first component tree 104, thereby removing the components that can be drawn into the root component to obtain the second component tree 106, which contains the root component and the components that cannot be drawn into the root component, wherein the root component is associated with a drawing list. The drawing content 108 of the page is generated by the adjusted second component tree 106. It should be understood that the drawing content of the removed components will be drawn in the root component. For example, if the drawing contents of the two removed components are an image and a gradient line, respectively, the development platform 102 will draw the image and the gradient line in the layer of the root component, without setting layers for the two components and drawing the image and the gradient line respectively.

[0037] In some embodiments, after obtaining the second component tree 106, the development platform 102 generates the drawing content 108 according to the second component tree 106, and the drawing content 108 is the rendering content of the component. Then, the development platform 102 sends the drawing content 108 to the terminal 110. After receiving the drawing content 108, the terminal 110 renders and displays the page according to the drawing content 108. It should be noted that the operating system of the terminal 110 is not limited in the present disclosure.

[0038] In the embodiment of the present disclosure, the page drawing content 108 is generated by the adjusted second component tree 106. In this way, the hierarchical depth of the first component tree 104 can be reduced, the overall computational complexity and resource consumption can be reduced, the layout and rendering efficiency of the page components can be improved, and the rendering performance can be optimized.

[0039] It should be understood that the architecture and functions in the example environment 100 are described for exemplary purposes only and do not imply any limitation on the scope of the present disclosure. Embodiments of the present disclosure may also be applied to other environments with different structures and / or functions.

[0040] The following will combine Figures 2 to 6 The process according to the embodiment of the present disclosure is described in detail. For ease of understanding, the specific data mentioned in the following description are exemplary and are not intended to limit the scope of protection of the present disclosure. It should be understood that the embodiments described below may also include additional actions not shown and / or the actions shown may be omitted, and the scope of the present disclosure is not limited in this respect.

[0041] Figure 2 A flowchart of a method 200 for drawing components of a page in some embodiments of the present disclosure is shown. In some embodiments, the method 200 for drawing components of a page may be composed of Figure 1 It should be understood that the development platform 102 can be set as a computing system, a single server, a distributed server, or a cloud-based server, etc.

[0042] At box 202, it is determined whether multiple drawing contents of multiple components can be drawn into a target component in a first component tree to obtain multiple processing results of the multiple components, and the first component tree indicates the positional relationship of the multiple components. In some embodiments, the development platform 102 first obtains the first component tree 104 of the page, wherein the logical relationship between the components in the first component tree 104 is used to represent the positional relationship between the components. Then, the development platform 102 determines whether the drawing content of each component in the first component tree 104 can be drawn into a root component (which may be referred to as a target component), thereby obtaining the processing result corresponding to each component.

[0043] At block 204, a drawing list related to the target component is generated based on the drawing order of the multiple components and the multiple processing results. In some embodiments, the development platform 102 generates a drawing list related to the root component based on the drawing order and processing results of the multiple components. For example, if there are 10 components in the first component tree 104, the drawing list has the 10 components arranged in the drawing order of the 10 components, and each component identifies the processing result of whether it can be drawn into the root component.

[0044] At block 206, the first component tree is adjusted to obtain a second component tree including the target component and the associated drawing list, and components that cannot be drawn into the target component. In some embodiments, the development platform 102 adjusts the first component tree 104 to remove components that can be drawn into the root component to obtain a second component tree 106, wherein the second component tree 106 includes the root component and components that cannot be drawn into the root component, wherein the root component is associated with a drawing list.

[0045] At box 208, multiple drawing contents of the page are generated based on the second component tree. In some embodiments, the development platform 102 generates the drawing contents of the page through the adjusted first component tree 104. It should be understood that the drawing contents of the removed components will be drawn in the root component. For example, if the drawing contents of the two removed components are an image and a gradient line, respectively, the development platform 102 will draw the image and the gradient line in the layer of the root component, without setting layers for the two components and drawing the image and the gradient line respectively.

[0046] In an embodiment of the present disclosure, a component tree of a page to be drawn is first obtained, wherein the component tree is used to represent the positional relationship between multiple components. Then, it is determined whether the drawing content of each component can be drawn into the root component, thereby obtaining the processing result corresponding to each component, and generating a drawing list related to the root component according to the drawing order and processing results of the multiple components. Further, the component tree is adjusted to obtain an adjusted component tree to remove components that can be drawn into the root component, wherein the adjusted component tree only contains the root component and components that cannot be drawn into the root component, wherein the root component is associated with a drawing list. The drawing content of the page is generated through the adjusted component tree. In this way, the hierarchical depth of the component tree can be reduced, the overall computational complexity and resource consumption can be reduced, the layout and rendering efficiency of the page components can be improved, and the rendering performance can be optimized.

[0047] Figure 3A A schematic diagram of a first component tree 300A of some embodiments of the present disclosure is shown, Figure 3B A schematic diagram showing a flattened first component tree 300B of some embodiments of the present disclosure is shown. Figure 3C A schematic diagram showing a drawing list 300C of some embodiments of the present disclosure is shown. Figure 3D A schematic diagram of a second component tree 300D according to some embodiments of the present disclosure is shown.

[0048] In some embodiments, the development platform 102 can establish a first component tree 300A according to the components that need to be built in the page. The first component tree 300A includes component 0, component 1, component 2, component 3, and component 4. Among them, component 0 is the root component. Component 0 and component 1 are in a parent-child component relationship. For example, component 0 can be below component 1, that is, the two are in a top-bottom relationship. Component 1 and component 2 are in a sibling component relationship. For example, component 1 can be to the left of component 2, that is, the two are in a left-right relationship. Similarly, component 2 and component 3 are in a parent-child component relationship, component 2 and component 4 are in a parent-child component relationship, and component 3 and component 4 are in a sibling component relationship.

[0049] In the first component tree 300A, drawing content can be set in each component, for example, component 1 needs to set a button control, component 2 needs to draw a background color, component 3 needs to draw picture content, and component 4 needs to draw text content. It should be understood that when drawing content in the first component tree 300A, each component needs to be traversed at each stage of operation, for example, each component needs to perform complete measurement, layout, and drawing operations. However, some components, such as component 2, are just ordinary drawings that carry pages, and there is no complex interaction. It is not necessary to consider the corresponding layer, and its drawing content can be directly drawn into the layer corresponding to component 0, thereby reducing the number of components in the first component tree 300A. Therefore, if the page rendering is performed directly according to the first component tree 300A, it will lead to high computational complexity and large computational overhead.

[0050] In some embodiments, the development platform 102 may first determine the drawing attributes of each component in the first component tree 300A, wherein the drawing attributes are used to represent the drawing content to be drawn into the component. Then, the development platform 102 determines the type of the drawing attribute. If the type of the drawing attribute is a common drawing attribute (which may be referred to as the first type), the development platform 102 determines that the drawing content of the component can be drawn into component 0, thereby obtaining a corresponding processing result (which may be referred to as the first processing result). If the type of the drawing attribute is a complex drawing attribute (which may be referred to as the second type), the development platform 102 determines that the drawing content of the component cannot be drawn into component 0, thereby obtaining a corresponding processing result (which may be referred to as the second processing result). In this way, the efficiency of component processing can be improved.

[0051] For ordinary drawing attributes, it can be a drawing attribute corresponding to a simple and fixed drawing content, such as drawing content such as background, border, image, text, etc. For complex drawing attributes, it can be a drawing attribute corresponding to interactive and dynamic drawing content, such as drawing content such as buttons, animations, videos, etc. Therefore, in the first component tree 300A, the drawing content of component 1 is a button control, so component 1 cannot be drawn into component 0, and the drawing content of components 2, 3, and 4 are background color, image, and text, respectively, so components 2, 3, and 4 can be drawn into component 0. Since the drawing content of components 2, 3, and 4 can be drawn into component 0, components 2, 3, and 4 can be deleted from the first component tree 300A, thereby obtaining the first component tree 300B. It should be understood that the first component tree 300B is only an intermediate form of the component tree for understanding.

[0052] In some embodiments, there is a drawing order for the components in the first component tree 300A, that is, they are drawn in the order of component 1, component 2, component 3, and component 4. The development platform 102 can determine the position of each component in the drawing list according to the drawing order of the components in the first component tree 300A. Then, the development platform 102 adds the drawing attributes of each component and the processing result of whether it can be drawn to node 0 to the corresponding position in the drawing list, thereby establishing a node corresponding to the component in the drawing list.

[0053] In some embodiments, in the process of drawing the drawing content of component 2, component 3, and component 4 to the layer of component 0, the offset of the drawing content also needs to be considered. In this way, the position of the drawing content can be guaranteed to remain unchanged in the page. Based on this, the development platform 102 can first determine the offset between component 2, component 3, and component 4 and component 0. Then, the development platform 102 adds the drawing attributes of each component, the offset with component 0, and the processing result of whether it can be drawn to node 0 to the corresponding position in the drawing list, thereby establishing a node corresponding to the component in the drawing list. In this way, the accuracy of the position of the drawing content can be improved, thereby improving the accuracy of rendering.

[0054] refer to Figure 3C , the drawing order in the drawing list 300C is the drawing content of component 0, the drawing content of component 1, the drawing content of component 2, the drawing content of component 3, and the drawing content of component 4. Among them, since component 2, component 3, and component 4 can all be drawn into component 0, component 2, component 3, and component 4 do not actually exist, and their drawing contents are all drawn in component 0. For component 1, since its drawing content cannot be drawn into component 0, component 1 still exists. It should be understood that regardless of whether the drawing content of a component is drawn in component 0, the drawing content is always drawn in the order of component 0, component 1, component 2, component 3, and component 4.

[0055] In some embodiments, after obtaining the drawing list, the development platform 102 deletes component 2, component 3, and component 4 in the first component tree 300A, thereby obtaining a second component tree 300D including component 0 and component 1, and the above component list is also associated with component 0. In this way, the development platform 102 can generate drawing content based on the second component tree 300D and render it. It should be understood that in the measurement, layout, drawing and other links, the development platform 102 does not need to traverse component 2, component 3, and component 4 multiple times when traversing the second component tree 300D, thereby reducing the computational complexity and computational overhead.

[0056] In some embodiments, after determining the second component tree 300D, the development platform 102 draws the component through the second component tree 300D. Specifically, the development platform 102 sequentially determines whether each node in the drawing list 300C in the second component tree 300D can be drawn into component 0. If the node can be drawn into component 0 (for example, it is a node corresponding to component 2, component 3, and component 4), the drawing content of the node is drawn in the layer corresponding to component 0. If the node cannot be drawn into component 0 (for example, it is a node corresponding to component 1), the drawing content of the node is drawn in the layer corresponding to component 1.

[0057] Therefore, the order of rendering the page based on the second component tree 300D is: draw the drawing content of component 0 in the layer of component 0, draw the drawing content of component 1 in the layer of component 1, draw the drawing content of component 2 in the layer of component 0, draw the drawing content of component 3 in the layer of component 0, and draw the drawing content of component 4 in the layer of component 0. In this way, the efficiency of rendering the page can be improved.

[0058] Figure 4A A schematic diagram showing another first component tree 400A after flattening in some embodiments of the present disclosure is shown. Figure 4B A schematic diagram showing another drawing list 400B of some embodiments of the present disclosure is shown. Figure 4C A schematic diagram of another second component tree 400C according to some embodiments of the present disclosure is shown.

[0059] refer to Figure 4A , the first component tree 400A includes component P (root component), component 0, component 1, component 2, component 3, component 4, component 5, component 6, and component 7. Among them, component 0, component 2, component 5, and component 6 are components that can be drawn into component P, and the remaining components are components that cannot be drawn into component P. Therefore, referring to Figure 4B , a drawing list 400B related to component P can be generated, and the nodes in the drawing list 400B are the node of component 0, the node of component 1, the node of component 2, the node of component 3, the node of component 4, the node of component 5, the node of component 6, and the node of component 7 in order.

[0060] Further, the development platform 102 can adjust the first component tree 400A according to the drawing list 400B, thereby obtaining the second component tree 400C. In the process of drawing components, the development platform 102 will call the drawing program to draw the components, and the drawing order of the components is the order of the nodes in the drawing list 400B. In some embodiments, for the drawing program, it is provided with a pointer pointing to the component currently to be drawn, and when the development platform 102 calls the drawing program, the corresponding component can be drawn according to the pointer.

[0061] refer to Figure 4C , the development platform 102 will call the drawing program, and the pointer will point to position 1. At this time, the development platform 102 will first draw component 0 to the layer of component P, then draw component 1 to the layer of component 1, and then set the position pointed by the pointer to 2. Similarly, the development platform 102 will draw component 2 to the layer of component P, then draw component 3 to the layer of component 3, and then set the position pointed by the pointer to 4. After the development platform draws component 4 to the layer of component 4, the position pointed by the pointer is set to 5. The development platform 102 will draw component 5 and component 5 to the layer of component P, and then draw component 7 to the layer of component 7.

[0062] In some embodiments, if a component needs to be deleted, for example Figure 4A , the development platform 102 may first determine whether component 0 can be drawn into component P. If component 0 can be drawn into component P, the development platform 102 deletes the node corresponding to component 0 from the drawing list 400B. It should be understood that at this time, component 0 does not exist in the second component tree 400C, and only the node corresponding to component 0 exists in the drawing list 400B. If component 0 cannot be drawn into component P, the development platform 102 deletes component 0 from the drawing list 400B and the second component tree 400C. It should be understood that at this time, component 0 exists in the second component tree 400C, and the node corresponding to component 0 exists in the drawing list 400B.

[0063] For the subcomponents of component 0, i.e., component 1, component 2, component 3, and component 4, the development platform 102 can determine whether each subcomponent can be drawn into component P. If the subcomponent can be drawn back into component P, such as component 2, the development platform 102 deletes the node corresponding to component 2 from the drawing list 400B. If the subcomponent cannot be drawn into component P, such as component 1, component 3, and component 4, the development platform 102 deletes component 1, component 3, and component 4 from the drawing list 400B and the second component tree 400C. In this way, the efficiency of deleting components during the rendering process is improved.

[0064] In some embodiments, if a component (which may be referred to as a second component) needs to be added to the second component tree 400C, the development platform 402 may first determine whether the component can be drawn into the component P. If it can be drawn into the component P, the development platform 102 may add a corresponding node in the drawing list 400B according to the position of the component. If the component cannot be drawn into the component P, the development platform 102 may add a corresponding node in the drawing list 400B according to the position of the component, and add the component to the second component tree 400C. In this way, the page rendering efficiency is improved when adding components.

[0065] In some embodiments, if the position of a component (which may be referred to as a third component) needs to be adjusted, the development platform 102 may first delete the three components from the drawing list 400B. Then, the development platform 102 adjusts the dynamic transformation value of the component according to the need to adjust the position, and the dynamic transformation value is used to represent the drawing order of the component among multiple components. Further, the development platform 102 may reorder the multiple components based on the dynamic transformation value of the adjusted component to determine the position of the adjusted component among the multiple components. In addition, the development platform may also add the component to the drawing list 400B according to the position of the component among the multiple components.

[0066] It should be understood that if the component whose position is adjusted has subcomponents, its subcomponents should be moved together with the component when it is moved. Based on this, when the component has subcomponents, the development platform 102 can adjust the dynamic transformation value of the component and the dynamic transformation value of the subcomponent according to the adjustment requirements, and reorder multiple components to determine the position of the moved component and subcomponent among the multiple components. Further, the development platform 102 adds the component and subcomponent to the drawing list according to the position of the component and subcomponent among the multiple components. In this way, the component tree can be quickly adjusted when the component is moved, thereby improving the rendering speed after the component is moved.

[0067] Figure 5 A block diagram of an apparatus 500 for drawing components of a page in some embodiments of the present disclosure is shown. The apparatus 500 includes: a processing result determination module 502, configured to determine whether multiple drawing contents of multiple components can be drawn into a target component in a first component tree to obtain multiple processing results of the multiple components, the first component tree indicating the positional relationship of the multiple components; a drawing list generation module 504, configured to generate a drawing list related to the target component based on the drawing order of the multiple components and the multiple processing results; a first component tree adjustment module 506, configured to adjust the first component tree to obtain a second component tree including the target component and the related drawing list, and components that cannot be drawn into the target component; and a drawing content generation module 508, configured to generate multiple drawing contents of the page based on the second component tree.

[0068] It can be understood that the device 500 of the present disclosure can achieve at least one of the many advantages that can be achieved by the method or process described above. For example, the device 500 first obtains the component tree of the page to be drawn, wherein the component tree is used to represent the positional relationship between multiple components. Then, it is determined whether the drawing content of each component can be drawn into the root component, thereby obtaining the processing result corresponding to each component, and generating a drawing list related to the root component according to the drawing order and processing results of the multiple components. Further, the component tree is adjusted to obtain an adjusted component tree to remove the components that can be drawn into the root component, and the adjusted component tree only contains the root component and the components that cannot be drawn into the root component, wherein the root component is associated with a drawing list. The drawing content of the page is generated by the adjusted component tree. In this way, the hierarchical depth of the component tree can be reduced, the overall computational complexity and resource consumption can be reduced, the layout and rendering efficiency of the page components can be improved, and the rendering performance can be optimized.

[0069] Figure 6 1 is a block diagram of an electronic device 600 according to some embodiments of the present disclosure. The device 600 may be a device or apparatus described in the embodiments of the present disclosure. Figure 6 As shown, the device 600 includes a central processing unit (CPU) and / or a graphics processing unit (GPU) 602, which can perform various appropriate actions and processes according to computer program instructions stored in a read-only memory (ROM) 604 or loaded from a storage unit 616 to a random access memory (RAM) 606. In the RAM 606, various programs and data required for the operation of the device 600 can also be stored. The CPU / GPU 602, the ROM 604, and the RAM 606 are connected to each other via a bus 608. An input / output (I / O) interface 610 is also connected to the bus 608. Although not shown in FIG. Figure 6 As shown in FIG. 6 , device 600 may also include a co-processor.

[0070] A number of components in the device 600 are connected to the I / O interface 610, including: an input unit 612, such as a keyboard, a mouse, etc.; an output unit 614, such as various types of displays, speakers, etc.; a storage unit 616, such as a disk, an optical disk, etc.; and a communication unit 618, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 618 allows the device 600 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks.

[0071] The various methods or processes described above may be performed by the CPU / GPU 602. For example, in some embodiments, the methods may be implemented as a computer software program that is tangibly contained in a machine-readable medium, such as a storage unit 616. In some embodiments, part or all of the computer program may be loaded and / or installed on the device 600 via the ROM 604 and / or the communication unit 618. When the computer program is loaded into the RAM 606 and executed by the CPU / GPU 602, one or more steps or actions in the methods or processes described above may be performed.

[0072] In some embodiments, the methods and processes described above may be implemented as a computer program product. The computer program product may include a computer-readable storage medium carrying computer-readable program instructions for executing various aspects of the present disclosure.

[0073] Computer readable storage medium can be a tangible device that can hold and store instructions used by an instruction execution device. Computer readable storage medium can be, for example, but not limited to, an electrical storage device, a magnetic storage device, an optical storage device, an electromagnetic storage device, a semiconductor storage device, or any suitable combination thereof. More specific examples (non-exhaustive list) of computer readable storage medium include: a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), a static random access memory (SRAM), a portable compact disk read-only memory (CD-ROM), a digital versatile disk (DVD), a memory stick, a floppy disk, a mechanical encoding device, for example, a punch card or a convex structure in a groove on which instructions are stored, and any suitable combination thereof. The computer readable storage medium used here is not interpreted as a transient signal itself, such as a radio wave or other freely propagating electromagnetic wave, an electromagnetic wave propagated by a waveguide or other transmission medium (for example, a light pulse by an optical fiber cable), or an electrical signal transmitted by a wire.

[0074] The computer-readable program instructions described herein can be downloaded from a computer-readable storage medium to each computing / processing device, or downloaded to an external computer or external storage device via a network, such as the Internet, a local area network, a wide area network, and / or a wireless network. The network can include copper transmission cables, optical fiber transmissions, wireless transmissions, routers, firewalls, switches, gateway computers, and / or edge servers. The network adapter card or network interface in each computing / processing device receives the computer-readable program instructions from the network and forwards the computer-readable program instructions for storage in the computer-readable storage medium in each computing / processing device.

[0075] The computer program instructions for performing the disclosed operation may be assembler instructions, instruction set architecture (ISA) instructions, machine instructions, machine-related instructions, microcode, firmware instructions, state setting data, or source code or object code written in any combination of one or more programming languages, programming languages ​​including object-oriented programming languages, and conventional procedural programming languages. Computer-readable program instructions may be executed completely on a user's computer, partially on a user's computer, executed as an independent software package, partially on a user's computer, partially on a remote computer, or completely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer via any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., utilizing an Internet service provider to connect via the Internet). In certain embodiments, by utilizing the state information of a computer-readable program instruction to customize an electronic circuit, such as a programmable logic circuit, a field programmable gate array (FPGA), or a programmable logic array (PLA), the electronic circuit may execute a computer-readable program instruction, thereby realizing various aspects of the present disclosure.

[0076] These computer-readable program instructions can be provided to a processing unit of a general-purpose computer, a special-purpose computer, or other programmable data processing device, thereby producing a machine, so that when these instructions are executed by the processing unit of the computer or other programmable data processing device, a device that implements the functions / actions specified in one or more boxes in the flowchart and / or block diagram is generated. These computer-readable program instructions can also be stored in a computer-readable storage medium, and these instructions cause the computer, programmable data processing device, and / or other equipment to work in a specific manner, so that the computer-readable medium storing the instructions includes a manufactured product, which includes instructions for implementing various aspects of the functions / actions specified in one or more boxes in the flowchart and / or block diagram.

[0077] Computer-readable program instructions may also be loaded onto a computer, other programmable data processing apparatus, or other device so that a series of operating steps are performed on the computer, other programmable data processing apparatus, or other device to produce a computer-implemented process, thereby causing the instructions executed on the computer, other programmable data processing apparatus, or other device to implement the functions / actions specified in one or more boxes in the flowchart and / or block diagram.

[0078] The flow chart and block diagram in the accompanying drawings show the possible architecture, function and operation of the equipment, method and computer program product according to multiple embodiments of the present disclosure. In this regard, each frame in the flow chart or block diagram can represent a part of a module, program segment or instruction, and a part of the module, program segment or instruction includes one or more executable instructions for realizing the specified logical function. In some alternative implementations, the function marked in the frame can also occur in a sequence different from that marked in the accompanying drawings. For example, two continuous frames can actually be executed substantially in parallel, and they can also be executed in the opposite order sometimes, depending on the functions involved. It should also be noted that each frame in the block diagram and / or flow chart, and the combination of frames in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or action, or can be implemented with a combination of dedicated hardware and computer instructions.

[0079] The embodiments of the present disclosure have been described above, and the above description is exemplary, not exhaustive, and is not limited to the disclosed embodiments. Many modifications and changes will be apparent to those of ordinary skill in the art without departing from the scope and spirit of the described embodiments. The choice of terms used herein is intended to best explain the principles of the embodiments, practical applications, or technical improvements to the technology in the market, or to enable other persons of ordinary skill in the art to understand the embodiments disclosed herein.

[0080] Some example implementations of the present disclosure are listed below.

[0081] Example 1. A method for drawing a component of a page, comprising:

[0082] Determining whether multiple drawing contents of the multiple components can be drawn into a target component in a first component tree to obtain multiple processing results of the multiple components, wherein the first component tree indicates a positional relationship of the multiple components;

[0083] Based on the drawing order of the multiple components and the multiple processing results, generating a drawing list related to the target component;

[0084] adjusting the first component tree to obtain a second component tree including the target component and the associated drawing list, and components that cannot be drawn into the target component; and

[0085] Based on the second component tree, the multiple drawing contents of the page are generated.

[0086] Example 2. The method according to Example 1, wherein determining whether the multiple drawing contents of the multiple components can be drawn into the target component in the first component tree to obtain the multiple processing results of the multiple components comprises:

[0087] determining drawing properties of a component in the plurality of components;

[0088] In response to the type of the drawing attribute being a first type, determining that the drawing content of the component can be drawn into the target component to obtain a first processing result; and

[0089] In response to the type of the drawing attribute being the second type, it is determined that the drawing content of the component cannot be drawn into the target component to obtain a second processing result.

[0090] Example 3. The method according to Example 1 or 2, wherein generating a drawing list related to the target component based on the drawing order of the multiple components and the multiple processing results comprises:

[0091] Based on the drawing order of the multiple components, determining the position of the component in the drawing list; and

[0092] The drawing attribute of the component, the first processing result, or the second processing result is added to the position in the drawing list being established to form a node corresponding to the component in the drawing list.

[0093] Example 4. The method according to any one of Examples 1-3, further comprising:

[0094] determining an offset between the component and the target component;

[0095] And adding the drawing attribute, the first processing result or the second processing result of the component to the drawing list being established includes:

[0096] The offset, the drawing attribute, the first processing result or the second processing result of the component is added to the position in the drawing list being established to form a node corresponding to the component in the drawing list.

[0097] Example 5. The method according to any one of Examples 1-4, further comprising:

[0098] Upon receiving a request to delete a first component, determining a processing result of the first component;

[0099] In response to the processing result of the first component indicating that the drawing content of the first component can be drawn into the target component, deleting the first component from the drawing list; and

[0100] In response to the processing result of the first component indicating that the drawing content of the first component cannot be drawn into the target component, the first component is deleted from the drawing list and the second component tree.

[0101] Example 6. The method according to any one of Examples 1-5, further comprising:

[0102] Determining a processing result of a subcomponent of the first component;

[0103] In response to the processing result of the subcomponent of the first component indicating that the drawing content of the subcomponent of the first component can be drawn into the target component, deleting the subcomponent of the first component from the drawing list; and

[0104] In response to the processing result of the subcomponent of the first component indicating that the drawing content of the subcomponent of the first component cannot be drawn into the target component, the subcomponent of the first component is deleted from the drawing list and the second component tree.

[0105] Example 7. The method according to any one of Examples 1-6, further comprising:

[0106] Upon receiving a request to add a second component, determining a processing result of the second component;

[0107] In response to the processing result of the second component indicating that the drawing content of the second component can be drawn into the target component, adding the second component to the drawing list according to the position of the second component in the plurality of components; and

[0108] In response to the processing result of the second component indicating that the drawing content of the second component cannot be drawn into the target component, the second component is added in the drawing list and the second component tree according to the position of the second component in the multiple components.

[0109] Example 8. The method according to any one of Examples 1-7, further comprising:

[0110] In case of receiving a request to move a third component, deleting the third component from the drawing list;

[0111] adjusting a dynamic transformation value of the third component, wherein the dynamic transformation value indicates a drawing order of the third component among the plurality of components;

[0112] sorting the plurality of components based on the adjusted dynamic transformation value of the third component to determine a position of the moved third component among the plurality of components; and

[0113] According to the position of the third component in the multiple components, the third component is added to the drawing list.

[0114] Example 9. The method according to any one of Examples 1-8, further comprising:

[0115] If the third component has subcomponents, determining the subcomponents of the third component;

[0116] Adjusting the dynamic transformation value of the subcomponent of the third component;

[0117] Sorting the plurality of components based on the adjusted dynamic transformation value of the third component comprises:

[0118] Sort the multiple components based on the adjusted dynamic transformation value of the third component and the dynamic transformation value of the subcomponent of the third component to determine the positions of the moved third component and the subcomponent of the third component in the multiple components;

[0119] According to the position of the third component in the plurality of components, adding the third component to the drawing list comprises:

[0120] The third component and the subcomponent of the third component are added to the drawing list according to positions of the third component and the subcomponent of the third component in the plurality of components.

[0121] Example 10. The method according to any one of Examples 1-9, wherein generating the plurality of drawn contents of the page based on the second component tree comprises:

[0122] Determine whether the current node in the drawing list can be drawn into the target component;

[0123] In response to the current node being able to be drawn into the target component, drawing the drawing content of the current node in the layer of the target component; and

[0124] In response to the current node not being able to be drawn into the target component, drawing content of the current node is drawn in a layer of the component corresponding to the current node.

[0125] Example 11. An apparatus for drawing a component of a page, comprising:

[0126] a processing result determination module, configured to determine whether the plurality of drawing contents of the plurality of components can be drawn into a target component in a first component tree, so as to obtain a plurality of processing results of the plurality of components, wherein the first component tree indicates a positional relationship of the plurality of components;

[0127] a drawing list generating module, configured to generate a drawing list related to the target component based on the drawing order of the multiple components and the multiple processing results;

[0128] a first component tree adjustment module configured to adjust the first component tree to obtain a second component tree including the target component and a related drawing list, and components that cannot be drawn into the target component; and

[0129] The drawing content generating module is configured to generate the plurality of drawing contents of the page based on the second component tree.

[0130] Example 12. The apparatus according to Example 11, wherein the processing result determination module is further configured to:

[0131] determining drawing properties of a component in the plurality of components;

[0132] In response to the type of the drawing attribute being a first type, determining that the drawing content of the component can be drawn into the target component to obtain a first processing result; and

[0133] In response to the type of the drawing attribute being the second type, it is determined that the drawing content of the component cannot be drawn into the target component to obtain a second processing result.

[0134] Example 13. The apparatus according to example 11 or 12, wherein the drawing list generation module is further configured to:

[0135] Based on the drawing order of the multiple components, determining the position of the component in the drawing list; and

[0136] The drawing attribute of the component, the first processing result, or the second processing result is added to the position in the drawing list being established to form a node corresponding to the component in the drawing list.

[0137] Example 14. The apparatus of any one of Examples 11-13, further comprising:

[0138] an offset determination module, configured to determine an offset between the component and the target component;

[0139] And the drawing list generation module is also configured as:

[0140] The offset, the drawing attribute, the first processing result or the second processing result of the component is added to the position in the drawing list being established to form a node corresponding to the component in the drawing list.

[0141] Example 15. The apparatus of any one of Examples 11-14, further comprising:

[0142] a processing result determination module, configured to determine a processing result of the first component when receiving a request to delete the first component;

[0143] A first deleting module is configured to delete the first component from the drawing list in response to a processing result of the first component indicating that the drawing content of the first component can be drawn into the target component; and

[0144] The second deleting module is configured to delete the first component from the drawing list and the second component tree in response to the processing result of the first component indicating that the drawing content of the first component cannot be drawn into the target component.

[0145] Example 16. The apparatus of any one of Examples 11-15, further comprising:

[0146] a processing result determination module, configured to determine a processing result of a subcomponent of the first component;

[0147] A first subcomponent deleting module configured to delete the subcomponent of the first component from the drawing list in response to a processing result of the subcomponent of the first component indicating that the drawing content of the subcomponent of the first component can be drawn into the target component; and

[0148] The second subcomponent deleting module is configured to delete the subcomponent of the first component from the drawing list and the second component tree in response to the processing result of the subcomponent of the first component indicating that the drawing content of the subcomponent of the first component cannot be drawn into the target component.

[0149] Example 17. The apparatus of any one of Examples 11-16, further comprising:

[0150] a processing result determination module, configured to determine a processing result of the second component when receiving a request to add the second component;

[0151] A first adding module is configured to, in response to the processing result of the second component indicating that the drawing content of the second component can be drawn into the target component, add the second component in the drawing list according to the position of the second component in the plurality of components; and

[0152] The second adding module is configured to add the second component in the drawing list and the second component tree according to the position of the second component in the multiple components in response to the processing result of the second component indicating that the drawing content of the second component cannot be drawn into the target component.

[0153] Example 18. The apparatus of any one of Examples 11-17, further comprising:

[0154] A third component deleting module, configured to delete the third component from the drawing list when receiving a request to move the third component;

[0155] a dynamic transformation value adjustment module, configured to adjust a dynamic transformation value of the third component, wherein the dynamic transformation value indicates a drawing order of the third component among the plurality of components;

[0156] a component sorting module configured to sort the plurality of components based on the adjusted dynamic transformation value of the third component to determine a position of the moved third component among the plurality of components; and

[0157] The third component adding module is configured to add the third component in the drawing list according to the position of the third component in the multiple components.

[0158] Example 19. The apparatus of any one of Examples 11-18, further comprising:

[0159] a subcomponent determining module, configured to determine a subcomponent of the third component if the third component has a subcomponent;

[0160] a dynamic transformation value adjustment module, configured to adjust the dynamic transformation value of the subcomponent of the third component;

[0161] And the component sorting module is also configured as:

[0162] Sort the multiple components based on the adjusted dynamic transformation value of the third component and the dynamic transformation value of the subcomponent of the third component to determine the positions of the moved third component and the subcomponent of the third component in the multiple components;

[0163] And the third component adding module is also configured as:

[0164] The third component and the subcomponent of the third component are added to the drawing list according to positions of the third component and the subcomponent of the third component in the plurality of components.

[0165] Example 20. The apparatus of any one of Examples 11-19, wherein the drawing content generation module is further configured to:

[0166] Determine whether the current node in the drawing list can be drawn into the target component;

[0167] In response to the current node being able to be drawn into the target component, drawing the drawing content of the current node in the layer of the target component; and

[0168] In response to the current node not being able to be drawn into the target component, drawing content of the current node is drawn in a layer of the component corresponding to the current node.

[0169] Example 21. An electronic device comprising:

[0170] Processor; and

[0171] A memory coupled to the processor, the memory having instructions stored therein, wherein when the instructions are executed by the processor, the electronic device performs actions, the actions comprising:

[0172] Determining whether multiple drawing contents of the multiple components can be drawn into a target component in a first component tree to obtain multiple processing results of the multiple components, wherein the first component tree indicates a positional relationship of the multiple components;

[0173] Based on the drawing order of the multiple components and the multiple processing results, generating a drawing list related to the target component;

[0174] adjusting the first component tree to obtain a second component tree including the target component and the associated drawing list, and components that cannot be drawn into the target component; and

[0175] Based on the second component tree, the multiple drawing contents of the page are generated.

[0176] Example 22. The electronic device according to Example 21, wherein determining whether the plurality of drawn contents of the plurality of components can be drawn into a target component in the first component tree to obtain a plurality of processing results of the plurality of components comprises:

[0177] determining drawing properties of a component in the plurality of components;

[0178] In response to the type of the drawing attribute being a first type, determining that the drawing content of the component can be drawn into the target component to obtain a first processing result; and

[0179] In response to the type of the drawing attribute being the second type, it is determined that the drawing content of the component cannot be drawn into the target component to obtain a second processing result.

[0180] Example 23. The electronic device according to Example 21 or 22, wherein generating a drawing list related to the target component based on the drawing order of the multiple components and the multiple processing results comprises:

[0181] Based on the drawing order of the multiple components, determining the position of the component in the drawing list; and

[0182] The drawing attribute of the component, the first processing result, or the second processing result is added to the position in the drawing list being established to form a node corresponding to the component in the drawing list.

[0183] Example 24. The electronic device according to any one of Examples 21-23, wherein the actions further include:

[0184] determining an offset between the component and the target component;

[0185] And adding the drawing attribute, the first processing result or the second processing result of the component to the drawing list being established includes:

[0186] The offset, the drawing attribute, the first processing result or the second processing result of the component is added to the position in the drawing list being established to form a node corresponding to the component in the drawing list.

[0187] Example 25. The electronic device of any one of Examples 21-24, wherein the actions further include:

[0188] Upon receiving a request to delete a first component, determining a processing result of the first component;

[0189] In response to the processing result of the first component indicating that the drawing content of the first component can be drawn into the target component, deleting the first component from the drawing list; and

[0190] In response to the processing result of the first component indicating that the drawing content of the first component cannot be drawn into the target component, the first component is deleted from the drawing list and the second component tree.

[0191] Example 26. The electronic device according to any one of Examples 21-25, wherein the actions further include:

[0192] Determining a processing result of a subcomponent of the first component;

[0193] In response to the processing result of the subcomponent of the first component indicating that the drawing content of the subcomponent of the first component can be drawn into the target component, deleting the subcomponent of the first component from the drawing list; and

[0194] In response to the processing result of the subcomponent of the first component indicating that the drawing content of the subcomponent of the first component cannot be drawn into the target component, the subcomponent of the first component is deleted from the drawing list and the second component tree.

[0195] Example 27. The electronic device of any one of Examples 21-26, wherein the actions further include:

[0196] Upon receiving a request to add a second component, determining a processing result of the second component;

[0197] In response to the processing result of the second component indicating that the drawing content of the second component can be drawn into the target component, adding the second component to the drawing list according to the position of the second component in the plurality of components; and

[0198] In response to the processing result of the second component indicating that the drawing content of the second component cannot be drawn into the target component, the second component is added in the drawing list and the second component tree according to the position of the second component in the multiple components.

[0199] Example 28. The method of any one of Examples 21-27, wherein the actions further include:

[0200] In case of receiving a request to move a third component, deleting the third component from the drawing list;

[0201] adjusting a dynamic transformation value of the third component, wherein the dynamic transformation value indicates a drawing order of the third component among the plurality of components;

[0202] sorting the plurality of components based on the adjusted dynamic transformation value of the third component to determine a position of the moved third component among the plurality of components; and

[0203] According to the position of the third component in the multiple components, the third component is added to the drawing list.

[0204] Example 29. The electronic device according to any one of Examples 21-28, wherein the actions further include:

[0205] If the third component has subcomponents, determining the subcomponents of the third component;

[0206] Adjusting the dynamic transformation value of the subcomponent of the third component;

[0207] Sorting the plurality of components based on the adjusted dynamic transformation value of the third component comprises:

[0208] Sort the multiple components based on the adjusted dynamic transformation value of the third component and the dynamic transformation value of the subcomponent of the third component to determine the positions of the moved third component and the subcomponent of the third component in the multiple components;

[0209] According to the position of the third component in the plurality of components, adding the third component to the drawing list comprises:

[0210] The third component and the subcomponent of the third component are added to the drawing list according to positions of the third component and the subcomponent of the third component in the plurality of components.

[0211] Example 30. The electronic device according to any one of Examples 21-29, wherein generating the plurality of drawn contents of the page based on the second component tree comprises:

[0212] Determine whether the current node in the drawing list can be drawn into the target component;

[0213] In response to the current node being able to be drawn into the target component, drawing the drawing content of the current node in the layer of the target component; and

[0214] In response to the current node not being able to be drawn into the target component, drawing content of the current node is drawn in a layer of the component corresponding to the current node.

[0215] Example 31. A computer-readable storage medium having computer-executable instructions stored thereon, wherein the computer-executable instructions are executed by a processor to implement a method according to any one of Examples 1 to 10.

[0216] Example 32. A computer program product tangibly stored on a computer-readable medium and comprising computer-executable instructions that, when executed by a device, cause the device to perform a method according to any one of Examples 1 to 10.

[0217] Although the disclosure has been described in language specific to structural features and / or methodological logical actions, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or actions described above. Instead, the specific features and actions described above are merely example forms of implementing the claims.

Claims

1. A method for drawing a component of a page, comprising: Determining whether multiple drawing contents of the multiple components can be drawn into a target component in a first component tree to obtain multiple processing results of the multiple components, wherein the first component tree indicates a positional relationship of the multiple components; Based on the drawing order of the multiple components and the multiple processing results, generating a drawing list related to the target component; Adjusting the first component tree to obtain a second component tree including the target component and the associated drawing list, and components that cannot be drawn into the target component; as well as Based on the second component tree, the multiple drawing contents of the page are generated.

2. The method according to claim 1, wherein determining whether the multiple drawing contents of the multiple components can be drawn into the target component in the first component tree to obtain the multiple processing results of the multiple components comprises: determining a drawing property of a component in the plurality of components; In response to the type of the drawing attribute being a first type, determining that the drawing content of the component can be drawn into the target component to obtain a first processing result; as well as In response to the type of the drawing attribute being the second type, it is determined that the drawing content of the component cannot be drawn into the target component to obtain a second processing result.

3. The method according to claim 2, wherein generating a drawing list related to the target component based on the drawing order of the plurality of components and the plurality of processing results comprises: Based on the drawing order of the multiple components, determine the position of the component in the drawing list; as well as The drawing attribute of the component, the first processing result, or the second processing result is added to the position in the drawing list being established to form a node corresponding to the component in the drawing list.

4. The method according to claim 3, further comprising: determining an offset between the component and the target component; And adding the drawing attribute, the first processing result or the second processing result of the component to the position in the drawing list being established comprises: The offset, the drawing attribute, the first processing result or the second processing result of the component is added to the position in the drawing list being established to form a node corresponding to the component in the drawing list.

5. The method according to claim 1, further comprising: Upon receiving a request to delete a first component, determining a processing result of the first component; In response to the processing result of the first component indicating that the drawing content of the first component can be drawn into the target component, deleting the first component from the drawing list; and In response to the processing result of the first component indicating that the drawing content of the first component cannot be drawn into the target component, the first component is deleted from the drawing list and the second component tree.

6. The method according to claim 5, further comprising: Determining a processing result of a subcomponent of the first component; In response to the processing result of the subcomponent of the first component indicating that the drawing content of the subcomponent of the first component can be drawn into the target component, deleting the subcomponent of the first component from the drawing list; as well as In response to the processing result of the subcomponent of the first component indicating that the drawing content of the subcomponent of the first component cannot be drawn into the target component, the subcomponent of the first component is deleted from the drawing list and the second component tree.

7. The method according to claim 1, further comprising: Upon receiving a request to add a second component, determining a processing result of the second component; In response to the processing result of the second component indicating that the drawing content of the second component can be drawn into the target component, adding the second component to the drawing list according to the position of the second component in the multiple components; as well as In response to the processing result of the second component indicating that the drawing content of the second component cannot be drawn into the target component, the second component is added in the drawing list and the second component tree according to the position of the second component in the multiple components.

8. The method according to claim 1, further comprising: In case of receiving a request to move a third component, deleting the third component from the drawing list; adjusting a dynamic transformation value of the third component, wherein the dynamic transformation value indicates a drawing order of the third component among the plurality of components; Based on the adjusted dynamic transformation value of the third component, sorting the multiple components to determine the position of the moved third component among the multiple components; as well as According to the position of the third component in the multiple components, the third component is added to the drawing list.

9. The method according to claim 8, further comprising: If the third component has subcomponents, determining the subcomponents of the third component; Adjusting the dynamic transformation value of the subcomponent of the third component; Sorting the plurality of components based on the adjusted dynamic transformation value of the third component comprises: Sort the multiple components based on the adjusted dynamic transformation value of the third component and the dynamic transformation value of the subcomponent of the third component to determine the positions of the moved third component and the subcomponent of the third component in the multiple components; According to the position of the third component in the plurality of components, adding the third component to the drawing list comprises: The third component and the subcomponent of the third component are added to the drawing list according to positions of the third component and the subcomponent of the third component in the plurality of components.

10. The method according to claim 1, wherein generating the plurality of drawn contents of the page based on the second component tree comprises: Determine whether the current node in the drawing list can be drawn into the target component; In response to the current node being able to be drawn into the target component, drawing the drawing content of the current node in the layer of the target component; as well as In response to the current node not being able to be drawn into the target component, drawing content of the current node is drawn in a layer of the component corresponding to the current node.

11. A device for drawing a component of a page, comprising: a processing result determination module, configured to determine whether the plurality of drawing contents of the plurality of components can be drawn into a target component in a first component tree, so as to obtain a plurality of processing results of the plurality of components, wherein the first component tree indicates a positional relationship of the plurality of components; a drawing list generating module, configured to generate a drawing list related to the target component based on the drawing order of the multiple components and the multiple processing results; A first component tree adjustment module is configured to adjust the first component tree to obtain a second component tree including the target component and the related drawing list, and components that cannot be drawn into the target component; as well as The drawing content generating module is configured to generate the plurality of drawing contents of the page based on the second component tree.

12. An electronic device comprising: processor; as well as A memory coupled to the processor, the memory having instructions stored therein, wherein when the instructions are executed by the processor, the electronic device executes the method according to any one of claims 1 to 10.

13. A computer program product comprising computer executable instructions, wherein the computer executable instructions are executed by a processor to implement the method according to any one of claims 1 to 10.

Images