WO2019042329A1 - Procédé et appareil de rendu d'interface utilisateur - Google Patents

Procédé et appareil de rendu d'interface utilisateur Download PDF

Info

Publication number
WO2019042329A1
WO2019042329A1 PCT/CN2018/103020 CN2018103020W WO2019042329A1 WO 2019042329 A1 WO2019042329 A1 WO 2019042329A1 CN 2018103020 W CN2018103020 W CN 2018103020W WO 2019042329 A1 WO2019042329 A1 WO 2019042329A1
Authority
WO
WIPO (PCT)
Prior art keywords
node
rasterized
rendering
user interface
nodes
Prior art date
Application number
PCT/CN2018/103020
Other languages
English (en)
Chinese (zh)
Inventor
李沛
杨朝楷
Original Assignee
口碑(上海)信息技术有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 口碑(上海)信息技术有限公司 filed Critical 口碑(上海)信息技术有限公司
Publication of WO2019042329A1 publication Critical patent/WO2019042329A1/fr

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Definitions

  • the present application relates to the field of UI rendering technologies, and in particular, to a method for user interface rendering.
  • the application also relates to a device for rendering a user interface, and an electronic device.
  • the CPU Central Processing Unit
  • the GPU Graphics Processing Unit
  • the display performs the user interface (UI, User Interface) rendering, and work together in the following manner: when the frame synchronization signal arrives After that, the application is notified to perform user interface rendering, and the main thread of the application starts to calculate the display content in the CPU, such as view creation, layout calculation, image decoding, text drawing, etc., after the calculation is completed, the CPU submits the display content to the GPU.
  • the GPU converts, merges, and renders according to the displayed content.
  • the GPU puts the rendering result into the frame buffer area, and waits for the next frame synchronization signal to arrive, and then transfers the data of the frame buffer area to the display for display.
  • the application uses the UIKit and CoreAnimation frameworks provided by the system to render the user interface.
  • these frameworks must be operated on the main thread.
  • the internal implementation is also performed by the main thread on the CPU, such as preparation. View hierarchy, set layer properties, draw bitmaps, and decode images.
  • the main thread is performing other heavy tasks, such as responding to user touches and clicks in the main thread, the main thread may not be able to process the rendering task in time, which may also cause the user interface to be stuck.
  • the present application provides a method for user interface rendering to solve the problem of user interface jams existing in the prior art.
  • the application also relates to a device for rendering a user interface, and an electronic device.
  • the application provides a method for rendering a user interface, including:
  • the bitmap corresponding to the object to be rendered is drawn according to a rasterization result of nodes in the view hierarchy tree.
  • the method for rendering the user interface includes:
  • the node attributes include: a rasterized attribute and a non-rasterized attribute;
  • the nodes in the view hierarchy tree include: a rasterized root node, a rasterized child node, and a non-rasterized node.
  • the rasterized root node is configured with a state identifier, where the state identifier includes: a first state identifier that allows rasterization with the rasterized child node, and a second state that does not allow rasterization with the rasterized child node Status identifier.
  • the rasterizing the nodes in the view hierarchy tree is implemented as follows:
  • the depth-first rule is used to traverse the nodes in the view hierarchy tree, each time traversing one node, and performing the following operations on the traversed nodes:
  • determining whether the candidate node is a rasterized root node and determining whether the status identifier of the candidate node is the first state identifier substep is no, perform the following operations:
  • the candidate node is set as the parent node of the node.
  • the method for rendering the user interface includes:
  • the rasterizing the nodes in the view hierarchy tree is implemented as follows:
  • the depth-first rule is used to traverse the nodes in the view hierarchy tree, each time traversing one node, and performing the following operations on the traversed nodes:
  • the rasterizing the nodes in the view hierarchy tree is implemented as follows:
  • the depth-first rule is used to traverse the nodes in the view hierarchy tree, each time traversing one node, and performing the following operations on the traversed nodes:
  • the rasterizing the nodes in the view hierarchy tree is implemented as follows:
  • the depth-first rule is used to traverse the nodes in the view hierarchy tree, each time traversing one node, and performing the following operations on the traversed nodes:
  • mapping of the bitmap corresponding to the object to be rendered is implemented as follows:
  • the node view corresponding to the node and the node view corresponding to the candidate node are drawn on a bitmap.
  • the method is implemented based on a terminal device, where the terminal device is configured with a central processing unit, a graphics processor, and a display screen;
  • the step of triggering a user interface for the object to be rendered based on the main thread the step of switching from the main thread to the child thread, drawing a bitmap step corresponding to the object to be rendered by the child thread, and the step Calling back the main thread, applying the drawn bitmap to the display content of the object to be rendered, based on the central processor;
  • the step of rendering a user interface according to the display content of the object to be rendered is implemented based on the graphics processor
  • the central processor submits the display content to the graphics processor
  • the graphics processor After rendering the user interface according to the display content of the object to be rendered, the graphics processor passes the rendering result to the display screen.
  • the application also provides a device for rendering a user interface, including:
  • a rendering trigger unit for triggering a user interface rendering for the object to be rendered based on the main thread
  • bitmap drawing unit configured to switch from the main thread to a child thread, by using the child thread to draw a bitmap corresponding to the object to be rendered
  • bitmap application unit configured to call back the main thread, and apply the drawn bitmap to the display content of the object to be rendered
  • a user interface rendering unit configured to render the user interface according to the display content of the object to be rendered.
  • the device for rendering the user interface includes:
  • a view level tree determining unit configured to determine a view level tree of the object to be rendered
  • a rasterizing unit configured to rasterize nodes in the view hierarchy tree
  • the bitmap drawing unit performs rendering according to the rasterization result of the rasterization unit.
  • the device for rendering the user interface includes:
  • a node attribute determining unit configured to determine a node attribute of a node in the view level tree according to the attribute information of the object to be rendered
  • the node attributes include: a rasterized attribute and a non-rasterized attribute;
  • the nodes in the view hierarchy tree include: a rasterized root node, a rasterized child node, and a non-rasterized node.
  • the rasterized root node is configured with a state identifier, where the state identifier includes: a first state identifier that allows rasterization with the rasterized child node, and a second state that does not allow rasterization with the rasterized child node Status identifier.
  • the rasterizing unit includes:
  • the first node traverses the subunit, and is configured to traverse the nodes in the view hierarchy tree by using a depth-first rule, each traversing one node, and running the first ancestor node search subunit and the first ancestor node judgment subunit for the traversed node;
  • the first ancestor node search subunit is configured to search for an ancestor node of the node in the view hierarchy tree
  • the first ancestor node determining subunit is configured to determine whether a rasterized root node or a non-rasterized node exists in the found ancestor node, and if present, run the first candidate node determining subunit and the first rasterized attribute determiner unit;
  • the first candidate node determining subunit is configured to select, in a rasterized root node or a non-rasterized node existing in the ancestor node, a rasterized root node whose level is closest to the level of the node or non-rasterization
  • the node acts as a candidate node
  • the first rasterization attribute determining subunit is configured to determine whether a node attribute of the node is a rasterization attribute, and if yes, running a first candidate node to determine a subunit;
  • the first candidate node determining subunit is configured to determine whether the candidate node is a rasterized root node and whether the state identifier of the candidate node is the first state identifier, and if yes, running the first node merging subunit;
  • the first node merges subunits for merging the nodes onto the candidate nodes.
  • the application also provides an electronic device, including:
  • the memory is for storing computer executable instructions
  • the central processor is configured to execute computer executable instructions as follows:
  • the graphics processor is configured to execute computer executable instructions to render a user interface according to display content of the object to be rendered.
  • the method for rendering the user interface includes: triggering a user interface rendering for an object to be rendered based on a main thread; switching from the main thread to a child thread, and drawing, by the child thread, a corresponding object to be rendered a bitmap; the callback is applied to the main thread, and the drawn bitmap is applied to the display content of the object to be rendered; and the user interface is rendered according to the display content of the object to be rendered.
  • the method for rendering the user interface in the process of rendering the user interface, when the user interface rendering of the object to be rendered is triggered based on the main thread, switching from the main thread to the child thread, and performing the sub-thread
  • the bitmap is drawn, and is switched back to the main thread after the drawing is completed, where the main thread applies bitmap rendering to the corresponding display content to be rendered, and finally performs a user interface according to the corresponding display content to be rendered.
  • Rendering thereby transferring the bitmap drawing operation originally performed by the main thread to the sub-thread, reducing the load of the main thread, and reducing the user interface card caused by the main thread failing to process the rendering task in time when the task is heavy pause.
  • FIG. 1 is a process flow diagram of an embodiment of a method for user interface rendering provided by the present application
  • FIG. 2 is a timing diagram of a user interface rendering provided by the present application
  • Figure 3 is a schematic diagram of a view hierarchy tree provided by the present application.
  • FIG. 4 is a schematic diagram of a rasterization process provided by the present application.
  • FIG. 5 is a schematic diagram of an apparatus embodiment for user interface rendering provided by the present application.
  • FIG. 6 is a schematic diagram of an embodiment of an electronic device provided by the present application.
  • the present application provides a method for user interface rendering, and the present application also provides a device for rendering a user interface, and an electronic device.
  • the following is a detailed description of the embodiments of the embodiments provided herein, and the various steps of the method are explained.
  • a method for implementing user interface rendering provided by the present application is as follows:
  • FIG. 1 is a process flow diagram of a method for rendering a user interface provided by the present application.
  • FIG. 2 a timing diagram of user interface rendering provided by the present application is shown.
  • FIG. 3 is a schematic diagram showing a view hierarchy tree provided by the present application.
  • FIG. 4 a schematic diagram of a rasterization process provided by the present application is shown.
  • Step S101 triggering a user interface rendering for the object to be rendered based on the main thread.
  • the user interface rendering (UI rendering) is performed by the main thread of the application, but subject to the processing power of the main thread and the performance of the CPU, the task processing in the main thread is heavy or CPU performance. At lower levels, UI rendering on iOS devices may cause page jams.
  • the method for rendering the user interface provided by the present application as shown in FIG. 2, is used for the rendering of the UI included in the rendering task 1 or the rendering task 2, and the main thread of the application performs the operation in the CPU.
  • Asynchronous processing the part of the operation originally executed by the main thread of the application is transferred to the sub-thread of the application, and after the execution of the sub-thread is completed, the execution result is synchronized to the main thread, and the execution is continued in the main thread.
  • the main thread In order to alleviate the load of the main thread, and at the same time reduce the user interface jam caused by the main thread unable to process the rendering task in time when the task is heavy.
  • the main thread performs UI rendering according to the frame synchronization signal.
  • the period of the frame synchronization signal in the UI rendering process is fixed.
  • the period of the frame synchronization signal in the iOS system is 1/60 s. That is: the user interface displayed on the screen needs to be refreshed 60 times per second.
  • the application-based main thread triggers UI rendering for the object to be rendered, which is triggered after receiving the rendering command, and is triggered after the frame synchronization signal arrives at the application after receiving the rendering command.
  • the object to be rendered in the embodiment of the present application may be any element on the user interface, or may be the user interface as a whole; correspondingly, the UI rendering of the object to be rendered may be any for the user interface.
  • a rendering task in which an element performs UI rendering may also be a rendering task that is updated overall for the user interface.
  • the rendering mechanism in the UI rendering may be UI rendering only for the changed element, or the UI of the user interface where the changed element is located.
  • the rendering mechanism of the rendering of the object to be rendered can be configured according to the actual situation, which is not limited herein.
  • Step S102 Switch from the main thread to the sub-thread, and draw a bitmap corresponding to the object to be rendered by the sub-thread.
  • frame1 to frame5 represent the period of the frame synchronization signal, that is, the rendering period of the UI rendering, specifically, after the frame synchronization signal reaches the application, the UI for the object to be rendered is triggered in the main thread. Rendering, and switching from the main thread to the child thread, by which the bitmap corresponding to the object to be rendered is drawn.
  • the main thread and the sub-thread may also adopt an asynchronous processing manner, and do not affect each other, but the main thread and the sub-thread can implement data sharing, and the triggering is performed based on the main thread.
  • the view hierarchy tree of the object to be rendered may be determined, and the view is The nodes in the hierarchical tree are rasterized.
  • the rasterization in the embodiment of the present application refers to merging a plurality of nodes into one node in the view hierarchy tree, and respectively displaying the display characteristics of each node on the view of the merged node.
  • the nodes in the view hierarchy tree have respective node attributes, and the node attributes include a rasterization attribute and a non-rasterized attribute. If a node attribute of a node is a rasterization attribute, the node may be related to the view level. Other nodes in the tree are rasterized; conversely, if a node's node property is a non-rasterized property, the node cannot be rasterized with other nodes. It should be noted that performing rasterization processing on the nodes in the view hierarchy tree is implemented based on the node attributes corresponding to the nodes, and therefore, before performing rasterization on the nodes in the view hierarchy tree.
  • nodes in the view hierarchy tree can be divided into a root node and a child node, wherein the child node can be either a child node of the root node or an ancestor node of its child node.
  • the nodes in the view hierarchy tree have corresponding node attributes: rasterized attributes and non-rasterized attributes.
  • the nodes in the view hierarchy tree are divided into: a rasterized root node, a rasterized child node, and a non-rasterized node.
  • a corresponding state identifier may be set for the rasterized root node in the view level tree, and the state identifier is used to determine whether the rasterized root node can receive the rasterized child node and rasterize it.
  • the state identifier of the rasterized root node includes a first state identifier and a second state identifier, and if the state identifier of the rasterized root node is the first state identifier, allowing the rasterized root node and the rasterizer The node performs rasterization; conversely, if the state of the rasterized root node is identified as the second state identifier, the rasterized root node and the rasterized child node are not allowed to be rasterized.
  • the status of the rasterized root node identifies that the initial default state identifier is the first state identifier, but when the rasterized root node encounters a descendant node that cannot be rasterized during the traversal process, The state identifier of the rasterized root node is changed to the second state identifier.
  • the state identifiers of node 1, node 7, and node 8 are set to the first state at initialization. logo.
  • the nodes in the view hierarchy tree are traversed by depth-first rules, and each node is traversed, and the following operations are performed for the traversed nodes:
  • the view hierarchy tree shown in FIG. 3 is traversed from the root node in the view hierarchy tree in the process of traversing the nodes in the view hierarchy tree by using a depth-first rule.
  • the specific traversal order is: node 1-> Node 2 -> Node 3 -> Node 4 -> Node 5 -> Node 6 -> Node 7 -> Node 8 -> Node 9.
  • searching for the ancestor node of the node in the view hierarchy tree specifically searching for the ancestor node of the node, starting from the parent node closest to the hierarchical relationship of the node, and sequentially looking up the node in the All ancestor nodes in the view hierarchy tree.
  • the ancestor node of the node is not found in the view hierarchy tree, it indicates that the node is a root node in the view hierarchy tree, such as node 1 in the view hierarchy tree shown in FIG. 3, because there is no ancestor node Therefore, it is impossible to rasterize with the ancestor node, and without processing, continue to traverse the next node (node 2) in the view hierarchy tree.
  • the found ancestor nodes are rasterized child nodes.
  • the rasterized root node can receive the rasterization with the rasterized child nodes. It can be seen that if the found ancestors are rasterized A child node indicates that the node cannot be rasterized with the found ancestor node. In this case, it is further determined whether the node attribute of the node is a rasterization attribute, and if so, the node is used as a rasterization root node, and the state identifier of the node is set as the first state identifier.
  • node 2 in the view hierarchy tree shown in Figure 3 there is only one ancestor node of node 2: rasterize root node 1, so rasterized root node 1 is used as a candidate node for node 2.
  • node 3 in the view hierarchy tree there are two ancestor nodes: node 2 and node 1, the level of node 2 is adjacent to the level of node 3, and the level of node 1 is different from the level of node 3, which is visible.
  • the level at which node 2 is located is the closest to the level at which node 3 is located, so node 2 is the candidate node for node 3.
  • step 5 determining whether the node attribute of the node is a rasterization attribute, and if so, performing the following step 5); as shown in Figure 3, node 2 in the view hierarchy tree is a rasterized child node, and the node attribute is rasterized. Attribute, then perform the next step for node 2.
  • the candidate node is set as a parent node of the node, and it is determined whether the candidate node is a rasterized root node, and if so, the state identifier of the candidate node is marked as the second state identifier.
  • the ancestor nodes of node 6 include: node 1, node 4, and node 5, and the node attribute of node 6 is a non-rasterized attribute.
  • node 1 satisfies the condition, so node 1 is set to a candidate node of the node 6; furthermore, since the node 1 is a rasterized root node, the state of the node 1 is identified as the second state identifier, that is, after the node 1 does not allow the rasterized child node to be rasterized thereafter .
  • step 5 determining whether the candidate node is a rasterized root node and whether the state identifier of the candidate node is the first state identifier, and if yes, performing the following step 6), rasterizing the node to the candidate node Up, ie, merging the nodes onto the candidate nodes. If the candidate node (node 1) of the node 2 in the view hierarchy tree shown in FIG. 3 is a rasterized root node, and the state identifier of the node 1 is the first state identifier, the rasterized root node and the rasterizer are allowed. The node is rasterized and node 2 is rasterized onto node 1.
  • the candidate node is set as the parent of the node.
  • the parent node of node 2 is node 1, where the candidate node of node 2 (node 1) is set as the parent node of node 2, and the view of node 2 and node 1 is not changed.
  • Hierarchy and connection relationships in the hierarchy tree are not changed.
  • the above rasterization process is mainly described by taking node 2 as an example, and provides a specific process of rasterizing node 2 to node 1, such as the view hierarchy tree shown in FIG. 3, combined with the above rasterization process, node 3, node 4 and The processing steps of node 5 during the traversal process are similar to those of node 2, and are eventually rasterized onto node 1.
  • the ancestor nodes of node 6 include: node 1, node 4, and node 5, and the node attribute of node 6 is a non-rasterized attribute. It can be seen that only node 1 satisfies the condition, so node 1 is set to a candidate node of the node 6; furthermore, since the node 1 is a rasterized root node, the state of the node 1 is identified as the second state identifier, that is, after the node 1 does not allow the rasterized child node to be rasterized thereafter .
  • the ancestor node of node 7 When traversing to node 7, the ancestor node of node 7 includes: node 1 and node 4, while the node attribute of node 7 is a rasterization attribute, node 4 does not satisfy the condition set as a candidate node, and node 1 is set to node 7.
  • Candidate node although node 1 is a rasterized root node, since the state identifier of node 1 is set to the second state identifier during the traversal of node 6, it can be seen that node 7 is not allowed to be rasterized onto node 1, then Node 1 is set as the parent node of node 7, that is, the parent node of node 7 is changed from node 4 to node 1.
  • node 8 in the traversal process is similar to that of node 7, and finally, the parent node of node 8 is set to node 1, but since the initial parent node of node 8 is also node 1, the level of node 8 in the view hierarchy tree is No change has taken place.
  • the ancestor node of node 9 has node 1 and node 8. Since the level of node 8 is adjacent to the level of node 9, node 8 is the candidate node of device node 9, and node 8 is rasterized.
  • the root node and the status identifier are the first status identifier, so node 9 is merged onto node 8.
  • the nodes in the view hierarchy tree are prevented from being missed, and each node in the view hierarchy tree may be traversed.
  • the rasterization process can also be implemented in a similar implementation, such as the three implementations provided below:
  • the depth-first rule is used to traverse the nodes in the view hierarchy tree, each time traversing one node, and performing the following operations on the traversed nodes:
  • step b) determining whether there is a rasterized root node or a non-rasterized node in the found ancestor node, if yes, performing step c) and step d) described below; if not, determining whether the node attribute of the node is a rasterization attribute, if it is a rasterization attribute, the node is used as a rasterization root node, and the state identifier of the node is set as the first state identifier;
  • step e) determining whether the node attribute of the node is a rasterization attribute, and if so, performing the following step e); if not, setting the candidate node as a parent node of the node, and determining whether the candidate node is a raster a root node, if it is a rasterized root node, marking the state identifier of the candidate node as the second state identifier;
  • step f determining whether the candidate node is a rasterized root node, and if so, performing the following step f); if not, setting the candidate node as a parent node of the node;
  • step f determining whether the state identifier of the candidate node is the first state identifier, and if so, performing the following step g); if not, setting the candidate node as the parent node of the node;
  • the depth-first rule is used to traverse the nodes in the view hierarchy tree, each time traversing one node, and performing the following operations on the traversed nodes:
  • the depth-first rule is used to traverse the nodes in the view hierarchy tree. Each time a node is traversed, the following operations are performed on the traversed nodes:
  • the bitmap of the object to be rendered is drawn according to the result of the rasterization, and the bitmap of the object to be rendered is specifically drawn, according to the node and the As a result of the combination of the candidate nodes, the node view corresponding to the node and the node view corresponding to the candidate node are drawn on a bitmap. As shown in the view hierarchy tree shown in FIG. 3, the node view corresponding to the rasterized and merged nodes is drawn on a bitmap, for example, node 2, node 3, node 4, and node 5 are rasterized onto node 1.
  • the corresponding node views of the nodes 1 to 5 are drawn on a bitmap, that is, the display characteristics of the node views corresponding to the nodes 2 to 5 are represented on the node view corresponding to the node 1.
  • the node view corresponding to node 8 and node 9 is drawn on a bitmap. It should be emphasized that for node 6 and node 7, since node 6 and node 7 are not merged into other nodes in the view hierarchy tree, ie, node 6 and node 7 are not associated with the view hierarchy tree. The other nodes are rasterized. Therefore, for node 6 and node 7, the corresponding node views may be respectively drawn on a bitmap according to actual needs, or may not be processed.
  • the process of drawing the bitmap corresponding to the object to be rendered and the rasterization process are transferred to the application by switching the main thread of the application to the sub-thread of the application.
  • the child thread executes, which relieves the load on the application's main thread.
  • the main thread and the sub-thread of the application are both executed on the CPU, when the CPU has a plurality of processing cores, the main thread and the sub-threads can be processed based on different processing cores of the CPU, respectively, thereby being able to Take advantage of multiple processing cores of the CPU.
  • Step S103 the main thread is called back, and the drawn bitmap is applied to the display content of the object to be rendered.
  • step S102 the bitmap corresponding to the object to be rendered is drawn in the sub-thread.
  • the main thread is called back, that is, the sub-thread is switched back to the main thread, and the main thread is drawn.
  • a good bitmap is applied to the display content of the object to be rendered. Specifically, as shown in FIG. 3, the bitmap tree corresponding to the node 1 to the node 5 is applied to the data structure of the object to be rendered, and similarly, the bitmap corresponding to the node 8 and the node 9 is applied.
  • the display features of the node 6 and the node 7 saved in the data structure of the object to be rendered are No change has occurred, so node 6 and node 7 are not processed.
  • Step S104 Render a user interface according to the display content of the object to be rendered.
  • the method for the user interface rendering provided by the present application is implemented based on an iOS device configured by a CPU (Central Processing Unit), a GPU (Graphics Processor), and a display screen.
  • the above steps S101 to S103 are based on the In the CPU implementation of the iOS device configuration
  • the UI rendering performed according to the display content of the object to be rendered in this step is implemented based on the GPU.
  • the CPU submits the display content of the object to be rendered to the GPU
  • the GPU performs UI rendering according to the submitted display content of the object to be rendered.
  • the rendered user interface is passed to the display.
  • the nodes 1 to 9 in the view hierarchy tree are respectively rendered, but After the nodes in the view hierarchy tree are rasterized, nodes 2 to 5 are rasterized onto node 1, and node 9 is rasterized onto node 8.
  • the hierarchy of the view hierarchy tree is greatly reduced.
  • the UI rendering is shorter according to the display content of the object to be rendered, which reduces the processing time of the CPU during the UI rendering process, and further reduces the time consuming time for the GPU to perform UI rendering.
  • the user interface rendering method when performing the user interface rendering process, when the main thread is triggered to render the user interface for the object to be rendered, switching from the main thread to the child thread,
  • the sub-thread performs bitmap rendering, and switches back to the main thread after the drawing, and applies the bitmap drawing to the corresponding display content to be rendered in the main thread, and finally according to the corresponding to be rendered.
  • the resulting user interface is stuck.
  • a method for rendering a user interface is provided.
  • the present application further provides a device for rendering a user interface, which will be described below with reference to the accompanying drawings.
  • FIG. 5 a schematic diagram of an apparatus embodiment of a user interface rendering provided by the present application is shown.
  • the application provides a device for rendering a user interface, including:
  • a rendering trigger unit 501 configured to trigger a user interface rendering for the object to be rendered based on the main thread
  • bitmap drawing unit 502 configured to switch from the main thread to a sub-thread, by using the sub-thread to draw a bitmap corresponding to the object to be rendered;
  • bitmap application unit 503 configured to call back the main thread, and apply the drawn bitmap to the display content of the object to be rendered;
  • the user interface rendering unit 504 is configured to render a user interface according to the display content of the object to be rendered.
  • the device for rendering the user interface includes:
  • a view level tree determining unit configured to determine a view level tree of the object to be rendered
  • a rasterizing unit configured to rasterize nodes in the view hierarchy tree
  • the bitmap drawing unit 502 performs rendering according to the rasterization result of the rasterization unit.
  • the device for rendering the user interface includes:
  • a node attribute determining unit configured to determine a node attribute of a node in the view level tree according to the attribute information of the object to be rendered
  • the node attributes include: a rasterized attribute and a non-rasterized attribute;
  • the nodes in the view hierarchy tree include: a rasterized root node, a rasterized child node, and a non-rasterized node.
  • the rasterized root node is configured with a state identifier, where the state identifier includes: a first state identifier that allows rasterization with the rasterized child node, and a second state that does not allow rasterization with the rasterized child node Status identifier.
  • the rasterizing unit includes:
  • the first node traverses the subunit, and is configured to traverse the nodes in the view hierarchy tree by using a depth-first rule, each traversing one node, and running the first ancestor node search subunit and the first ancestor node judgment subunit for the traversed node;
  • the first ancestor node search subunit is configured to search for an ancestor node of the node in the view hierarchy tree
  • the first ancestor node determining subunit is configured to determine whether a rasterized root node or a non-rasterized node exists in the found ancestor node, and if present, run the first candidate node determining subunit and the first rasterized attribute determiner unit;
  • the first candidate node determining subunit is configured to select, in a rasterized root node or a non-rasterized node existing in the ancestor node, a rasterized root node whose level is closest to the level of the node or non-rasterization
  • the node acts as a candidate node
  • the first rasterization attribute determining subunit is configured to determine whether a node attribute of the node is a rasterization attribute, and if yes, running a first candidate node to determine a subunit;
  • the first candidate node determining subunit is configured to determine whether the candidate node is a rasterized root node and whether the state identifier of the candidate node is the first state identifier, and if yes, running the first node merging subunit;
  • the first node merges subunits for merging the nodes onto the candidate nodes.
  • the first ancestor node determines that the output of the subunit is a result that the found ancestor node does not have a rasterized root node or a non-rasterized node, running the second rasterization attribute determining subunit;
  • the second rasterization attribute determining subunit is configured to determine whether the node attribute of the node is a rasterization attribute, and if so, the node is used as a rasterization root node, and the state identifier of the node is set to The first status identifier.
  • the determination result output by the first rasterization attribute determining subunit is that the node attribute of the node is not a rasterization attribute, running the first parent node update subunit and the second candidate node judgment subunit;
  • the first parent node update subunit configured to set the candidate node as a parent node of the node
  • the second candidate node determining subunit is configured to determine whether the candidate node is a rasterized root node, and if yes, mark the state identifier of the candidate node as the second state identifier.
  • the first candidate node determines that the output of the subunit is a result that the candidate node is not a rasterized root node or the state identifier of the candidate node is not the first state identifier, running the second parent node is updated.
  • the second parent node updates the subunit, and is configured to set the candidate node as a parent node of the node.
  • the rasterizing unit includes:
  • the traversing determination subunit is configured to determine whether the node in the view hierarchy tree is traversed, and if not, running the first node to traverse the subunit.
  • the rasterizing unit includes:
  • the second node traverses the sub-units for traversing the nodes in the view hierarchy tree by using depth-first rules, each traversing one node, and running a second ancestor node search sub-unit and a second ancestor node judgment sub-unit for the traversed nodes;
  • the second ancestor node search subunit is configured to search for an ancestor node of the node in the view hierarchy tree
  • the second ancestor node determining subunit is configured to determine whether a rasterized root node or a non-rasterized node exists in the found ancestor node, and if so, running the second candidate node determining subunit and the third rasterization attribute determiner unit;
  • the second candidate node determining subunit is configured to select, in the rasterized root node or the non-rasterized node existing in the ancestor node, a rasterized root node whose level is closest to the level of the node or non-rasterization
  • the node acts as a candidate node
  • the third rasterization attribute determining subunit is configured to determine whether a node attribute of the node is a rasterization attribute, and if so, running a third candidate node to determine a subunit;
  • the third candidate node determining subunit is configured to determine whether the candidate node is a rasterized root node, and if yes, determining whether the state identifier of the candidate node is a first state identifier, and if so, running the second node merging subunit ;
  • the second node merging subunit is configured to merge the node onto the candidate node.
  • the rasterizing unit includes:
  • the third node traverses the sub-units for traversing the nodes in the view hierarchy tree by using a depth-first rule, each traversing one node, and running a third ancestor node search sub-unit and a third ancestor node judgment sub-unit for the traversed node;
  • the third ancestor node search subunit is configured to search for an ancestor node of the node in the view hierarchy tree
  • the third ancestor node determining subunit is configured to determine whether a rasterized root node exists in the found ancestor node, and if so, running a third candidate node determining subunit and a second state identifier determining subunit;
  • the third candidate node determining subunit is configured to select, in the rasterized root node existing in the ancestor node, a rasterized root node whose level is closest to the level of the node as a candidate node;
  • the second state identifier determining subunit is configured to determine whether the state identifier of the candidate node is the first state identifier, and if yes, running a fourth rasterization attribute determining subunit;
  • the fourth rasterization attribute determining subunit is configured to determine whether the node attribute of the node is a rasterization attribute, and if so, running the third node to merge the subunit;
  • the third node merging subunit is configured to merge the node onto the candidate node.
  • the rasterizing unit includes:
  • the fourth node traverses the sub-units for traversing the nodes in the view hierarchy tree by using a depth-first rule, each traversing one node, and running a fourth ancestor node search sub-unit and a fourth ancestor node judgment sub-unit for the traversed nodes;
  • the fourth ancestor node search subunit is configured to search for an ancestor node of the node in the view hierarchy tree
  • the fourth ancestor node determining subunit is configured to determine whether a rasterized root node exists in the found ancestor node, and if yes, running a fourth candidate node determining subunit and a fifth rasterizing attribute determining subunit;
  • the fourth candidate node determining subunit is configured to select, as a candidate node, a rasterized root node whose stratum is located closest to the stratum of the node in the rasterized root node existing in the ancestor node;
  • the fifth rasterization attribute determining subunit is configured to determine whether the node attribute of the node is a rasterization attribute, and if so, running the fourth node to merge the subunit;
  • the fourth node merging subunit is configured to merge the node onto the candidate node.
  • bitmap drawing unit 502 is configured to: in accordance with a combination result of the node and the candidate node, draw a node view corresponding to the node and a node view corresponding to the candidate node in a single bit On the map.
  • the device for rendering the user interface is implemented based on a terminal device, where the terminal device is provided with a central processing unit, a graphics processor, and a display screen;
  • the rendering trigger unit 501, the bitmap rendering unit 502, and the bitmap application unit 503 are executed based on the central processing unit;
  • the user interface rendering unit 504 operates based on the graphics processor
  • the display content output by the bitmap application unit 503 is submitted to the graphics processor by the central processing unit;
  • the graphics processor After rendering the user interface according to the display content of the object to be rendered, the graphics processor passes the rendering result to the display screen.
  • An electronic device implementation provided by the present application is as follows:
  • a method for rendering a user interface is provided.
  • the present application further provides an electronic device for implementing the method for rendering the user interface, which will be described below with reference to the accompanying drawings.
  • FIG. 6 a schematic diagram of an electronic device provided by the embodiment is shown.
  • the application provides an electronic device, including:
  • the memory 601 is configured to store computer executable instructions
  • the central processor 602 is configured to execute computer executable instructions as follows:
  • the graphics processor 603 is configured to execute computer executable instructions to render a user interface according to display content of the object to be rendered.
  • the central processor 602 is further configured to execute the following computer-executable instruction :
  • the bitmap corresponding to the object to be rendered is drawn according to a rasterization result of nodes in the view hierarchy tree.
  • the central processing unit 602 is further configured to execute the following computer executable instructions:
  • the node attributes include: a rasterized attribute and a non-rasterized attribute;
  • the nodes in the view hierarchy tree include: a rasterized root node, a rasterized child node, and a non-rasterized node.
  • the rasterized root node is configured with a state identifier, where the state identifier includes: a first state identifier that allows rasterization with the rasterized child node, and a second state that does not allow rasterization with the rasterized child node Status identifier.
  • the rasterizing the nodes in the view hierarchy tree is implemented as follows:
  • the depth-first rule is used to traverse the nodes in the view hierarchy tree, each time traversing one node, and performing the following operations on the traversed nodes:
  • determining whether the candidate node is a rasterized root node and determining whether the status identifier of the candidate node is the first state identifier substep is no, perform the following operations:
  • the candidate node is set as the parent node of the node.
  • the central processing unit 602 is further configured to execute the following computer executable instructions:
  • the rasterizing the nodes in the view hierarchy tree is implemented as follows:
  • the depth-first rule is used to traverse the nodes in the view hierarchy tree, each time traversing one node, and performing the following operations on the traversed nodes:
  • the rasterizing the nodes in the view hierarchy tree is implemented as follows:
  • the depth-first rule is used to traverse the nodes in the view hierarchy tree, each time traversing one node, and performing the following operations on the traversed nodes:
  • the rasterizing the nodes in the view hierarchy tree is implemented as follows:
  • the depth-first rule is used to traverse the nodes in the view hierarchy tree, each time traversing one node, and performing the following operations on the traversed nodes:
  • mapping of the bitmap corresponding to the object to be rendered is implemented as follows:
  • the node view corresponding to the node and the node view corresponding to the candidate node are drawn on a bitmap.
  • the electronic device is provided with a display screen
  • the central processing unit 602 submits the display content to the graphics processor 603;
  • the graphics processor 603 after rendering the user interface according to the display content of the object to be rendered, delivers the rendering result to the display screen.
  • a computing device includes one or more processors, input/output interfaces, network interfaces, and memory.
  • the memory may include non-persistent memory, random access memory (RAM), and/or non-volatile memory in a computer readable medium, such as read only memory (ROM) or flash memory.
  • RAM random access memory
  • ROM read only memory
  • Memory is an example of a computer readable medium.
  • Computer readable media includes both permanent and non-persistent, removable and non-removable media.
  • Information storage can be implemented by any method or technology.
  • the information can be computer readable instructions, data structures, modules of programs, or other data.
  • Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read only memory. (ROM), electrically erasable programmable read only memory (EEPROM), flash memory or other memory technology, compact disk read only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, Magnetic tape cartridges, magnetic tape storage or other magnetic storage devices or any other non-transportable media can be used to store information that can be accessed by a computing device.
  • computer readable media does not include non-transitory computer readable media, such as modulated data signals and carrier waves.
  • embodiments of the present application can be provided as a method, system, or computer program product.
  • the present application can take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment in combination of software and hardware.
  • the application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) including computer usable program code.

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
  • Image Generation (AREA)

Abstract

La présente invention concerne un procédé de rendu d'une interface utilisateur. Le procédé consiste à : déclencher le rendu d'une interface utilisateur d'un objet à rendre selon un fil principal ; basculer du fil principal à un sous-fil, et dessiner une image matricielle correspondant à l'objet à rendre au moyen du sous-fil ; rappeler le fil principal, et appliquer l'image matricielle dessinée à un contenu affiché de l'objet à rendre ; et rendre l'interface utilisateur en fonction du contenu affiché de l'objet à rendre. Au moyen du procédé de rendu d'une interface utilisateur, une opération de dessin d'image matricielle exécutée à l'origine dans le fil principal est transférée au sous-fil pour effectuer son exécution, ce qui permet de réduire la charge du fil principal, et d'éviter le gel de l'interface utilisateur lorsque le fil principal engagé dans des tâches lourdes traite en temps opportun une tâche de rendu.
PCT/CN2018/103020 2017-08-29 2018-08-29 Procédé et appareil de rendu d'interface utilisateur WO2019042329A1 (fr)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201710755049.1 2017-08-29
CN201710755049.1A CN107729094B (zh) 2017-08-29 2017-08-29 一种用户界面渲染的方法及装置

Publications (1)

Publication Number Publication Date
WO2019042329A1 true WO2019042329A1 (fr) 2019-03-07

Family

ID=61204831

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2018/103020 WO2019042329A1 (fr) 2017-08-29 2018-08-29 Procédé et appareil de rendu d'interface utilisateur

Country Status (2)

Country Link
CN (1) CN107729094B (fr)
WO (1) WO2019042329A1 (fr)

Families Citing this family (24)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107729094B (zh) * 2017-08-29 2020-12-29 口碑(上海)信息技术有限公司 一种用户界面渲染的方法及装置
CN108595236A (zh) * 2018-03-27 2018-09-28 五八有限公司 一种防止子线程进行用户界面操作的方法及装置
CN108733445A (zh) * 2018-05-17 2018-11-02 北京五八信息技术有限公司 一种视图管理方法、装置、设备及计算机可读存储介质
CN109669752A (zh) * 2018-12-19 2019-04-23 北京达佳互联信息技术有限公司 一种界面绘制方法、装置及移动终端
CN109739505B (zh) 2019-01-08 2019-11-29 网易（杭州）网络有限公司 一种用户界面的处理方法和装置
CN109788334A (zh) * 2019-01-31 2019-05-21 北京字节跳动网络技术有限公司 弹幕处理方法、装置、电子设备及计算机可读存储介质
CN109801210A (zh) * 2019-01-31 2019-05-24 北京字节跳动网络技术有限公司 图像处理方法、装置、电子设备及计算机可读存储介质
WO2020156035A1 (fr) * 2019-01-31 2020-08-06 北京字节跳动网络技术有限公司 Procédé et appareil de traitement de vues et dispositif électronique et support de stockage lisible par ordinateur, et procédé et appareil de traitement d'images et dispositif électronique et support de stockage lisible par ordinateur
CN109935312A (zh) * 2019-02-28 2019-06-25 深圳市理邦精密仪器股份有限公司 监护仪的运行控制方法、装置、监护仪及介质
CN110096277B (zh) * 2019-03-19 2020-06-12 北京三快在线科技有限公司 一种动态页面展示方法、装置、电子设备及存储介质
CN110109667A (zh) * 2019-04-30 2019-08-09 广东趣炫网络股份有限公司 一种ui界面绘制校验方法、装置、终端及计算机存储介质
CN110502294B (zh) * 2019-07-20 2021-08-20 华为技术有限公司 数据处理的方法、装置及电子设备
CN110597512B (zh) * 2019-08-23 2022-04-08 荣耀终端有限公司 显示用户界面的方法及电子设备
CN110930496B (zh) * 2019-11-19 2021-01-26 北京达佳互联信息技术有限公司 视图绘制方法、装置、电子设备和存储介质
CN111080766B (zh) * 2019-12-30 2023-09-01 中科星图股份有限公司 一种基于WebGL的GPU加速海量目标高效渲染方法
CN111459591B (zh) * 2020-03-31 2023-03-28 杭州海康威视数字技术股份有限公司 待渲染对象处理方法、装置和终端
CN111506372B (zh) * 2020-04-07 2023-09-26 口碑(上海)信息技术有限公司 对象可视化处理方法及装置
CN112035768A (zh) * 2020-08-27 2020-12-04 深圳市欢太科技有限公司 快应用的页面渲染方法、装置、存储介质及电子设备
CN112581559A (zh) * 2020-12-01 2021-03-30 贝壳技术有限公司 一种应用中的图表生成方法、装置和存储介质
CN112925601B (zh) * 2021-03-23 2022-07-19 厦门亿联网络技术股份有限公司 屏幕显示方法、装置、设备及存储介质
CN113326115A (zh) * 2021-06-21 2021-08-31 上海华客信息科技有限公司 多图表页面的渲染方法、系统、电子设备和存储介质
CN113254492B (zh) * 2021-07-07 2021-11-23 北京优锘科技有限公司 一种查询后台同步管理层级可视化对象的方法、装置和设备
CN115994007A (zh) * 2021-10-18 2023-04-21 华为技术有限公司 动画效果显示方法及电子设备
CN116821040B (zh) * 2023-08-30 2023-11-21 西安芯云半导体技术有限公司 基于gpu直接存储器访问的显示加速方法、装置及介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140250393A1 (en) * 2013-03-04 2014-09-04 Scott Goodson Techniques For Asynchronous Rendering
CN105549820A (zh) * 2015-12-11 2016-05-04 魅族科技（中国）有限公司 一种显示图形用户界面的方法及终端
CN106354512A (zh) * 2016-09-08 2017-01-25 广州华多网络科技有限公司 用户界面渲染方法及装置
CN107729094A (zh) * 2017-08-29 2018-02-23 口碑(上海)信息技术有限公司 一种用户界面渲染的方法及装置

Family Cites Families (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110193871A1 (en) * 2010-02-07 2011-08-11 Microsoft Corporation Rendering multi-layered image
CN104424661B (zh) * 2013-08-23 2018-01-23 联想(北京)有限公司 三维对象显示方法和装置
GB2524287B (en) * 2014-03-19 2020-07-01 Advanced Risc Mach Ltd Graphics processing systems
CN105279253B (zh) * 2015-10-13 2018-12-14 上海联彤网络通讯技术有限公司 提升网页画布渲染速度的系统及方法
EP3214599B1 (fr) * 2015-10-21 2018-12-19 MediaTek Inc. Accélérateur graphique avec une connexion directe a l'ecran sans memoire
CN106340055A (zh) * 2016-08-19 2017-01-18 江苏电力信息技术有限公司 一种基于多线程的OpenGL快速绘制方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140250393A1 (en) * 2013-03-04 2014-09-04 Scott Goodson Techniques For Asynchronous Rendering
CN105549820A (zh) * 2015-12-11 2016-05-04 魅族科技（中国）有限公司 一种显示图形用户界面的方法及终端
CN106354512A (zh) * 2016-09-08 2017-01-25 广州华多网络科技有限公司 用户界面渲染方法及装置
CN107729094A (zh) * 2017-08-29 2018-02-23 口碑(上海)信息技术有限公司 一种用户界面渲染的方法及装置

Also Published As

Publication number Publication date
CN107729094B (zh) 2020-12-29
CN107729094A (zh) 2018-02-23

Similar Documents

Publication Publication Date Title
WO2019042329A1 (fr) Procédé et appareil de rendu d'interface utilisateur
JP6185843B2 (ja) 複数のアプリケーション又はプロセスに渡るアニメーション調整
TWI697790B (zh) 混合模型列表項重用的方法及設備
CN110096277A (zh) 一种动态页面展示方法、装置、电子设备及存储介质
US9547466B2 (en) Systems and methods for using screen sampling to detect display changes
US20150243257A1 (en) Cross-Platform Rendering Engine
US11467717B2 (en) Optimizing window resize actions for remoted applications
WO2016034089A1 (fr) Procédé et appareil de restitution d'image, terminal mobile et support de stockage lisible par machine
WO2016095728A1 (fr) Procédé et dispositif d'affichage multi-fenêtres
US20150331836A9 (en) Graceful degradation of level-of-detail in document rendering
US9766860B2 (en) Dynamic source code formatting
WO2016206559A1 (fr) Procédé et dispositif permettant l'adaptation à l'échelle d'un objet à afficher
CN107179920B (zh) 网络引擎启动方法及装置
US10282887B2 (en) Information processing apparatus, moving image reproduction method, and computer readable medium for generating display object information using difference information between image frames
WO2016015527A1 (fr) Procédé et appareil de mise à jour de page web basés sur une accélération de rendu de synthèse
US20170315982A1 (en) Method, device and mobile terminal for webpage text parsing
CN111596919B (zh) 图文绘制结果的展示方法、装置、计算机设备及存储介质
US20220121307A1 (en) Method and device of drawing handwriting track, electronic apparatus, medium, and program product
CN107621951B (zh) 一种视图层级优化的方法及装置
CN106488298B (zh) 一种在ui中图像绘制的方法及装置和电视
US20180275833A1 (en) System and method for managing and displaying graphical elements
CN109284101B (zh) 一种对象属性的关联变更方法和装置
US9633408B2 (en) Coalescing graphics operations
WO2017215516A1 (fr) Procédé et appareil pour déterminer une tâche de décodage
US10559105B2 (en) Implementing interactive hierarachical chart legend data display

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 18850814

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 27.07.2020)

122 Ep: pct application non-entry in european phase

Ref document number: 18850814

Country of ref document: EP

Kind code of ref document: A1