Content drawing method and device, equipment and storage medium

Abstract

The embodiment of the invention provides a content drawing method and device, equipment and a storage medium. The method comprises the steps that an element list is drawn, the element list comprises a plurality of nodes, and at least part of the nodes are not drawn in a visual area of an interface; in response to the change of the element list, determining a target node from the element list as an anchor element; updating layout information of the element list based on the drawing mode of the anchor point elements; and drawing an updated list of elements based on the updated layout information. According to the embodiment of the invention, the anchor point element can be determined from the element list on the basis of responding to the change of the element list, and then the layout information of the element list is dynamically updated on the basis of the drawing mode of the anchor point element, so that the change of the element list can be quickly responded, and the content drawing efficiency is improved.

Description

Technical Field

[0001] Example embodiments of the present disclosure generally relate to the computer field, and more particularly, to a content drawing method, apparatus, device, and computer-readable storage medium. Background Art

[0002] With the development of computer technology, various forms of electronic devices can greatly enrich people's daily life. For example, people can use electronic devices to interact with content. For example, users can browse web pages to view various contents, which are drawn based on nodes. How to draw content is a focus of attention. Summary of the invention

[0003] In a first aspect of the present disclosure, a method for content drawing is provided. The method includes: drawing an element list, the element list includes a plurality of nodes, at least some of the plurality of nodes are not drawn in a visible area of ​​an interface; in response to a change in the element list, determining a target node from the element list as an anchor element; based on a drawing mode of the anchor element, updating layout information of the element list; and drawing the updated element list based on the updated layout information.

[0004] In a second aspect of the present disclosure, a device for content drawing is provided. The device includes: a first drawing module configured to draw an element list, the element list includes multiple nodes, at least some of the multiple nodes are not drawn in the visible area of ​​the interface; a determination module configured to determine a target node from the element list as an anchor element in response to a change in the element list; an update module configured to update layout information of the element list based on a drawing mode of the anchor element; and a second drawing module configured to draw an updated element list based on the updated layout information.

[0005] In a third aspect of the present disclosure, an electronic device is provided. The device includes at least one processing unit; and at least one memory, the at least one memory is coupled to the at least one processing unit and stores instructions for execution by the at least one processing unit. When the instructions are executed by the at least one processing unit, the device executes the method of the first aspect.

[0006] In a fourth aspect of the present disclosure, a computer-readable storage medium is provided, wherein a computer program is stored on the computer-readable storage medium, and the computer program can be executed by a processor to implement the method of the first aspect.

[0007] In a fifth aspect of the present disclosure, a computer program product is provided, which includes computer executable instructions, and when the instructions are executed by a processor, the method according to the first aspect of the present disclosure is implemented.

[0008] It should be understood that the contents described in this content section are not intended to limit the key features or important features of the embodiments of the present disclosure, nor are they intended to limit the scope of the present disclosure. Other features of the present disclosure will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0009] 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:

[0010] Figure 1 A schematic diagram showing an example environment in which embodiments of the present disclosure can be implemented;

[0011] Figure 2 A flowchart showing an interactive process of content drawing according to some embodiments of the present disclosure is shown;

[0012] Figure 3A-Figure 3F A schematic diagram showing changes corresponding to an element list according to some embodiments of the present disclosure is shown;

[0013] Figure 4 A flowchart of determining a target node according to some embodiments of the present disclosure is shown;

[0014] Figure 5 An example flow chart for determining content rendering according to some embodiments of the present disclosure is shown;

[0015] Figure 6 A schematic structural block diagram of an apparatus for content drawing according to some embodiments of the present disclosure is shown;

[0016] Figure 7 A block diagram of an electronic device capable of implementing various embodiments of the present disclosure is shown. DETAILED DESCRIPTION

[0017] 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 set forth herein. On the contrary, these embodiments are provided to provide 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.

[0018] It should be noted that the titles of any sections / subsections provided herein are not restrictive. Various embodiments are described throughout this article, and any type of embodiment may be included under any section / subsection. In addition, the embodiments described in any section / subsection may be combined in any manner with any other embodiments described in the same section / subsection and / or different sections / subsections.

[0019] 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 term "some embodiments" should be understood as "at least some embodiments". Other explicit and implicit definitions may be included below. The terms "first", "second", etc. may refer to different or the same objects. Other explicit and implicit definitions may be included below.

[0020] The embodiments of the present disclosure may involve user data, data acquisition and / or use, etc. These aspects are subject to the corresponding laws, regulations and relevant provisions. In the embodiments of the present disclosure, all data collection, acquisition, processing, processing, forwarding, use, etc. are carried out on the premise that the user knows and confirms. Accordingly, when implementing each embodiment of the present disclosure, the type, scope of use, usage scenario, etc. of the data or information that may be involved should be informed to the user and the user's authorization should be obtained in an appropriate manner in accordance with the relevant laws and regulations. The specific notification and / or authorization method can vary according to the actual situation and application scenario, and the scope of the present disclosure is not limited in this respect.

[0021] In this specification and the embodiments, if personal information processing is involved, it will be processed on the premise of having a legal basis (such as obtaining the consent of the subject of personal information, or it is necessary to perform a contract, etc.), and will only be processed within the scope of regulations or agreements. If a user refuses to process personal information other than the necessary information for basic functions, it will not affect the user's use of basic functions.

[0022] Traditionally, when the element list changes, it needs to follow a specific layout format, so the layout update of the nodes outside the visible area will affect the nodes in the visible area, causing unexpected jumps in the user's field of view. In addition, due to the diversity and complexity of nodes and node changes, it is necessary to adjust the scroll offset corresponding to the element list based on different strategies so that the changed view content can better meet the expectations when the update is initiated. Nodes can be advertising slots, separators, etc., and node changes can be deleting an advertising recommendation slot while inserting a new advertising product in a new position, increasing the height of a node with animation, etc.

[0023] The embodiment of the present disclosure proposes a solution for content drawing. According to the solution, an element list is drawn, the element list includes multiple nodes, at least some of the multiple nodes are not drawn in the visible area of ​​the interface; in response to the change of the element list, a target node is determined from the element list to serve as an anchor element; based on the drawing mode of the anchor element, the layout information of the element list is updated; and based on the updated layout information, the updated element list is drawn.

[0024] Based on this approach, the embodiments of the present disclosure can first determine the anchor element from the element list in response to changes in the element list, and then dynamically update the layout information of the element list based on the drawing mode of the anchor element, so as to quickly respond to changes in the element list and improve the efficiency of content drawing.

[0025] Example Environment

[0026] Figure 1 1 is a schematic diagram of an example environment 100 in which embodiments of the present disclosure can be implemented. Figure 1 As shown, example environment 100 may include electronic device 110 .

[0027] In this example environment 100, the electronic device 110 may run an application 120 or a web page (not shown) that supports interface interaction. The application 120 may be any appropriate type of application for interface interaction, and examples thereof may include, but are not limited to, e-commerce applications, news applications, social applications, or other appropriate applications. The user 140 may interact with the application 120 via the electronic device 110 and / or its attached devices. The web page may also be any appropriate web page for interface interaction, such as an e-commerce web page, a news web page, and the like.

[0028] exist Figure 1 In the environment 100, if the application 120 is active, the electronic device 110 can present an interface 150 for supporting interface interaction through the application 120. In some embodiments, the electronic device 110 can dynamically adjust the content of the interface interaction based on any appropriate interaction action input by the user. Specifically, the interaction action can be an action of deleting a node, an action of adding a node, a scrolling action, etc. The node can be any appropriate type of node, such as an advertisement space, news content, etc.

[0029] In some embodiments, the electronic device 110 communicates with the server 130 to provide services for the application 120. The electronic device 110 can be any type of mobile terminal, fixed terminal or portable terminal, including a mobile phone, a desktop computer, a laptop computer, a notebook computer, a netbook computer, a tablet computer, a media computer, a multimedia tablet, a handheld computer, a portable game terminal, a VR / AR device, a personal communication system (PCS) device, a personal navigation device, a personal digital assistant (PDA), an audio / video player, a digital camera / camcorder, a positioning device, a television receiver, a radio receiver, an e-book device, a game device, or any combination of the foregoing, including accessories and peripherals of these devices or any combination thereof. In some embodiments, the electronic device 110 can also support any type of interface for the user (such as a "wearable" circuit, etc.).

[0030] The server 130 may be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content distribution networks, and big data and artificial intelligence platforms. The server 130 may include, for example, a computing system / server, such as a mainframe, an edge computing node, a computing device in a cloud environment, etc. The server 130 may provide background services for the application 120 that supports virtual scenes in the electronic device 110.

[0031] A communication connection may be established between the server 130 and the electronic device 110. The communication connection may be established in a wired manner or a wireless manner. The communication connection may include, but is not limited to, a Bluetooth connection, a mobile network connection, a Universal Serial Bus (USB) connection, a Wireless Fidelity (WiFi) connection, etc., and the embodiments of the present disclosure are not limited in this respect. In the embodiments of the present disclosure, the server 130 and the electronic device 110 may implement signaling interaction through the communication connection between the two.

[0032] It should be understood that the structure and function of the various elements in the environment 100 are described for exemplary purposes only and do not imply any limitation on the scope of the present disclosure.

[0033] Some example embodiments of the present disclosure will be described below with continued reference to the accompanying drawings.

[0034] Example Process

[0035] Figure 2 1 is a flowchart of a process 200 of content drawing according to some embodiments of the present disclosure. The process 200 may be implemented at the electronic device 110. Figure 1 Process 200 is described.

[0036] In box 210, the electronic device 110 draws an element list, where the element list includes multiple nodes, and at least some of the multiple nodes are not drawn in the visible area of ​​the interface.

[0037] In some embodiments, the nodes in the element list may be any appropriate nodes such as merchandise items, news articles, social media updates, etc., and they may be any appropriate type of nodes, such as text, images, videos, etc.

[0038] In some embodiments, multiple nodes in the element list may be arranged in a predetermined order in the element list. For ease of description, the following examples are described by taking the order from top to bottom in the element list as node 0, node 1, node 2, node 3, ... node n as an example.

[0039] In some embodiments, some nodes in the element list are drawn in the visible area of ​​the interface, and other nodes are not drawn in the visible area of ​​the interface (i.e., located in the non-visible area). The nodes drawn in the visible area of ​​the interface are the nodes that are rendered and presented to the user, while the nodes located in the non-visible area will not be rendered and presented to the user. For example, node 1 in the element list is located in the visible area, while node 0 is not located in the visible area, so the electronic device 110 only renders node 1, but does not render node 0.

[0040] In some embodiments, which nodes are located in the visible area depends mainly on the scroll offset of the element list and the layout position of all nodes. Specifically, when the layout position intersects with the scroll position, the corresponding node can be rendered to become visible to the user. The scroll offset is associated with the current scroll position. For example, if the scroll position is the top of the element list and the scroll position is the top of the element list, the corresponding scroll offset can be 0.

[0041] In block 220 , the electronic device 110 determines a target node from the element list as an anchor element in response to the change in the element list.

[0042] In some embodiments, the change of the element list includes at least one of the following: inserting a new node into the element list, removing an existing node from the element list, and updating the display attributes of the nodes in the element list. The new node can be inserted into the visible area or the non-visual area. The removed node can be a node originally in the visible area or a node originally in the non-visual area. The display attribute can be any appropriate attribute, such as height, width, position in the element list, etc. In some embodiments, the change of the element list can also include replacing a node in the element list with another node, etc.

[0043] In some embodiments, the electronic device 110 may determine the anchor search mode based on configuration information associated with the interface. The configuration information may be input by the user based on the interface. Different anchor search modes may indicate different search directions or orders when searching for anchors. Further, the electronic device 110 may determine the target node from the element list based on the anchor search mode.

[0044] In some embodiments, the electronic device 110 can respond to the anchor search mode being the first mode, starting from the top position of the visible area, and traversing the element list in a first direction to determine the target node. The first direction can be in order from top to bottom. As an example, the electronic device 110 can start from the top position of the visible area, and traverse the nodes of the visible area from top to bottom in sequence until the node that meets the predetermined condition is found as the target node, wherein the predetermined condition can be a node that is compliant and does not change due to the change of the element list. For example, if the visible area includes nodes 10, 11, and 12 before the element list is changed, and the visible area should include nodes 11 and 12 after the element list is changed, the electronic device 110 can respond to the anchor search mode being the first mode and determine node 11 as the target node.

[0045] In other embodiments, the electronic device 110 may respond to the anchor search mode being the second mode, starting from the bottom position of the visible area, and traversing the element list in the second direction to determine the target node. The second direction may be in a bottom-to-top order. As an example, the electronic device 110 may start from the bottom position of the visible area, and traverse each node in the visible area from bottom to top in sequence until a target node that meets a predetermined condition is found. For example, if the visible area includes nodes 10, 11, and 12 before the element list is changed, and the visible area should include nodes 11 and 12 after the element list is changed, the electronic device 110 may respond to the anchor search mode being the second mode, and determine node 12 as the target node.

[0046] In some embodiments, the electronic device 110 may determine a first node from the element list as a first initial anchor point in response to the anchor point search mode, that is, determine a node searched based on the first mode or the second mode as the first node. As an example, the first node may be the first node in the visible area traversed according to the anchor point search mode that meets a predetermined condition.

[0047] Further, the electronic device 110 may determine a fallback mode based on the configuration information in response to the first node being a node to be deleted. In some embodiments, the fallback mode may indicate an anchor point search direction starting from the first node. For example, the anchor point search direction may be an upward search direction starting from the first node, or a downward search direction starting from the first node. As an example, the electronic device 110 may determine a fallback mode based on the configuration information input by the user in response to all nodes that meet a predetermined condition and are included in the visible area being nodes to be deleted. Further, the electronic device 110 may determine a target node from the element list based on the fallback mode and the first node.

[0048] As an example, the electronic device 110 can respond to the fallback mode being the first fallback mode, starting from the first node, and traversing each node in the element list from bottom to top in order to determine a target node that meets a predetermined condition. For example, if the visible area includes nodes 10, 11, and 12 before the element list is changed, and nodes 10, 11, and 12 should all be deleted after the element list is changed, the electronic device 110 can respond to the fallback mode being the first fallback mode and determine node 9 as the target node. For another example, if the visible area includes nodes 10, 11, and 12 before the element list is changed, and node 10 is the first node, and nodes 10 are deleted after the element list is changed, the electronic device 110 can respond to the fallback mode being the first fallback mode and determine node 9 as the target node.

[0049] As another example, the electronic device 110 can respond to the fallback mode being the second fallback mode, starting from the first node, and traversing each node in the element list from top to bottom to determine the target node that meets the predetermined conditions. For example, if the visible area includes nodes 10, 11, and 12 before the element list is changed, and nodes 10, 11, and 12 should all be deleted after the element list is changed, then the electronic device 110 can respond to the fallback mode being the second fallback mode and determine node 13 as the target node. For another example, if the visible area includes nodes 10, 11, and 12 before the element list is changed, and node 12 is the first node, and nodes 11 and 12 should all be deleted after the element list is changed, then the electronic device 110 can respond to the fallback mode being the second fallback mode and determine node 13 as the target node.

[0050] In some embodiments, the electronic device 110 may determine a second node from the element list based on the anchor search mode as the second initial anchor, that is, determine the node searched based on the first mode or the second mode as the second node. As an example, the second node may be the first node in the visible area traversed according to the anchor search mode that meets the predetermined condition.

[0051] Further, the electronic device 110 may determine the insertion mode based on the configuration information in response to the change to inserting a new node adjacent to the second node into the element list and the new node being outside the visible area. In some embodiments, the insertion mode indicates that the new node is drawn in the visible area or outside the visible area. In some embodiments, the electronic device 110 may determine the target node based on the second node in response to the insertion mode indicating that the new node is to be drawn in the visible area, and the target node is outside the visible area. Specifically, the target node may be a node adjacent to the second node and outside the visible area before the element list is changed.

[0052] In other embodiments, the electronic device may determine the second node as the target node in response to the insertion mode indicating that the new node is to be drawn outside the visible area.

[0053] For the convenience of description, the insertion mode indicating that the new node is to be drawn in the visible area may be referred to as the first insertion mode, and the insertion mode indicating that the new node is to be drawn outside the visible area may be referred to as the second insertion mode.

[0054] Specifically, if the anchor search mode is the first mode and the insertion mode is the first insertion mode, the node that is adjacent to the second node and located in the non-visible area before the element list is changed can be determined as the target node. Specifically, the target node is located above the second node to ensure that the newly inserted node can be located in the visible area.

[0055] If the anchor point search mode is the first mode and the insertion mode is the second insertion mode, the second node may be determined as the target node to ensure that the newly inserted node may be located outside the visible area.

[0056] If the anchor search mode is the second mode and the insertion mode is the first insertion mode, the node that is adjacent to the second node and located in the non-visible area before the element list is changed can be determined as the target node. At this time, the target node is located below the second node to ensure that the newly inserted node can be located in the visible area.

[0057] If the anchor point search mode is the first mode and the insertion mode is the second insertion mode, the second node may be determined as the target node to ensure that the newly inserted node may be located outside the visible area.

[0058] Figure 3A-Figure 3FA schematic diagram showing changes corresponding to the element list according to some embodiments of the present disclosure is shown. Figure 3A-Figure 3F Provide explanation. Figure 3A-3C The corresponding changes when the anchor search mode is the first mode. Figure 3A-3C The corresponding changes when the anchor search mode is the second mode.

[0059] like Figure 3A As shown, the element list includes node 0 and node 1, wherein node 0 is located in the non-visible area and node 1 is located in the visible area 301. The electronic device 110 can determine the anchor point (target node) in response to inserting a new node between node 0 and node 1. Figure 3B As shown, the electronic device 110 can determine node 0 as the anchor point in response to the insertion mode being the first insertion mode, and the newly inserted node k and node k+1 are located in the visible area 301. Figure 3C As shown, the electronic device 110 may determine node 1 as an anchor point in response to the insertion mode being the second insertion mode, and at this time, the newly inserted node k and node k+1 are located in the non-visible area.

[0060] like Figure 3D As shown, the element list includes node n and node n+1, wherein node n is located in the visible area 301 and node n+1 is located in the non-visible area. The electronic device 110 may determine the anchor point in response to inserting a new node between node n and node n+1. Figure 3E As shown, the electronic device 110 can determine the node n+1 as the anchor point in response to the insertion mode being the first insertion mode, and the newly inserted node k and node k+1 are located in the visible area 301. Figure 3F As shown, the electronic device 110 may determine the node n as an anchor point in response to the insertion mode being the second insertion mode, and at this time, the newly inserted node k and the node k+1 are located in the non-visible area.

[0061] Since the present disclosure uses the order from top to bottom in the element list as an example for explanation, where 0 can be the index corresponding to node 0, 1 can be the index corresponding to node 1, and n can be the index corresponding to node n, when the anchor search mode is the first mode, other nodes with indexes less than the index of the target node are all located in the non-visible area, and other nodes with indexes greater than the index of the target node should be located in the visible area until the visible area is used up. When the anchor search mode is the second mode, other nodes with indexes greater than the index of the target node are all located in the non-visible area, and other nodes with indexes less than the index of the target node should be located in the visible area until the visible area is used up.

[0062] Figure 4A flowchart for determining a target node according to some embodiments of the present disclosure is shown.

[0063] In block 401 , the electronic device 110 starts searching for a target node based on a second initial anchor point.

[0064] As an example, the electronic device 110 may determine whether the insertion mode is the first insertion mode or the second insertion mode. The electronic device 110 may perform the operation of box 402 in response to determining that the insertion mode is the second insertion mode. The electronic device 110 may perform the operation of box 404 in response to determining that the insertion mode is the first insertion mode.

[0065] As an example, the first insertion mode may indicate that the new node is to be drawn within the visible area, and the second insertion mode may indicate that the new node is to be drawn outside the visible area.

[0066] In block 402, the electronic device 110 may determine a second initial anchor point as a target node.

[0067] Because when the insertion mode is the second insertion mode, the insertion of the new node does not affect the position of the second initial anchor point, the electronic device 110 may determine the second initial anchor point as the target node.

[0068] In block 403 , the electronic device 110 may search for the node in a set of nodes currently being displayed.

[0069] In some embodiments, the node set being displayed is a plurality of nodes included in the visible area and includes the second initial anchor point. Since the second initial anchor point is displayed in the visible area, the electronic device 110 can directly find the second initial anchor point from the node set being displayed.

[0070] In block 404 , the electronic device 110 searches for a node that is adjacent to the second initial anchor point before the change and is located in the non-visualization area.

[0071] Since when the insertion mode is the first insertion mode, the insertion of a new node will affect the position of the second initial anchor point, in order to ensure accurate display, the electronic device 110 can search for a node that is adjacent to the second initial anchor point before the change and is located in a non-visualized area, and determine the found node as the target node.

[0072] At block 405 , the electronic device 110 determines whether to look up the node in the cache.

[0073] Since the node adjacent to the second initial anchor point and located in the non-visual area before the change is not displayed in the visible area before the change, an attempt can be made to find the node in the cache.

[0074] In some embodiments, the electronic device 110 may perform the operations of block 408 in response to determining that the node is not found in the cache.

[0075] At block 406, a new node is loaded.

[0076] In some embodiments, in response to not finding a node in the cache that is adjacent to the second initial anchor point before the change and is located in the non-visualized area, the electronic device 110 may load a new node as the target node.

[0077] At block 407 , the electronic device 110 determines a target node.

[0078] Back to Figure 2 , in box 230, the electronic device 110 updates the layout information of the element list based on the drawing mode of the anchor element.

[0079] In some embodiments, after the electronic device 110 determines the anchor element, it can determine the positional relationship between the target anchor and the visible area based on the target anchor, and then update the layout information of the element list.

[0080] In some embodiments, the electronic device 110 may update the layout information of the element list in response to the drawing mode being the first drawing mode to maintain the target position parameters of the anchor element relative to the visible area. In some embodiments, the target position parameters include the distance from the anchor element to at least one boundary of the visible area. Specifically, the target position parameters may include the distance from the upper and lower edges of the anchor element to the upper and lower edges of the visible area. As an example, in some embodiments, if the drawing mode is the first drawing mode, the electronic device 110 may determine the target position parameters of the anchor element relative to the visible area based on the anchor search mode and the anchor alignment method indicated in the configuration information. The anchor alignment method includes a first alignment method and a second alignment method, wherein the first alignment method indicates that the distance between the bottom of the anchor element and the visible area remains unchanged. The second alignment method indicates that the distance between the top of the anchor element and the visible area remains unchanged.

[0081] Specifically, the electronic device 110 may respond to the anchor search mode being the first mode and the anchor alignment being the first alignment mode, keeping the distance between the bottom of the anchor and the top of the visible area unchanged. The electronic device 110 may respond to the height change of the target anchor by only adjusting the distance between the top of the anchor and the top of the visible area, without adjusting the distance between the bottom of the anchor and the top of the visible area.

[0082] The electronic device 110 may respond to the anchor search mode being the second mode and the anchor alignment being the first alignment mode, keeping the distance between the bottom of the anchor and the bottom of the visible area unchanged. The electronic device 110 may respond to the height change of the target anchor by only adjusting the distance between the top of the anchor and the bottom of the visible area, without adjusting the distance between the bottom of the anchor and the bottom of the visible area.

[0083] The electronic device 110 may respond to the anchor search mode being the second mode and the anchor alignment being the second alignment mode by keeping the distance between the top of the anchor and the bottom of the visible area unchanged. The electronic device 110 may respond to the height change of the target anchor by only adjusting the distance between the bottom of the anchor and the bottom of the visible area, without adjusting the distance between the top of the anchor and the bottom of the visible area.

[0084] The electronic device 110 can respond to the anchor search mode being the first mode and the anchor alignment being the second alignment, and can determine that the distance between the top of the anchor and the top of the visible area remains unchanged. The electronic device 110 can respond to the height change of the target anchor by only adjusting the distance between the bottom of the anchor and the top of the visible area, and not adjusting the distance between the top of the anchor and the top of the visible area.

[0085] In other embodiments, the electronic device 110 may update the layout information of the element list in response to the drawing mode being the second drawing mode, so that the anchor element is positioned at a first preset position in the visible area. The first preset position may be any appropriate position that can ensure that the anchor element is fully visible. In some embodiments, the first preset position may be associated with the top of the visible area or the bottom of the visible area, and whether it is associated with the top or the bottom of the visible area is determined based on the anchor search mode.

[0086] As an example, if the anchor point search mode is the first mode, the first preset position may be associated with the top of the visible area, and specifically the top of the visible area may coincide with the top of the anchor point element.

[0087] As another example, if the anchor point search mode is the second mode, the first preset position may be associated with the bottom of the visible area, and specifically the bottom of the visible area may coincide with the bottom of the anchor point element.

[0088] In other embodiments, the electronic device 110 may update the layout information of the element list in response to the drawing mode being the third drawing mode, so that the anchor element is positioned at a second preset position outside the visible area. The second preset position may be any appropriate position that can ensure that the anchor element is completely invisible. In some embodiments, the second preset position may be associated with the top of the visible area or the bottom of the visible area, and whether it is associated with the top or the bottom of the visible area is determined based on the anchor search mode.

[0089] As an example, if the anchor point search mode is the first mode, the second preset position may be associated with the top of the visible area, and specifically the top of the visible area may coincide with the bottom of the anchor point element.

[0090] As another example, if the anchor point search mode is the second mode, the second preset position may be associated with the bottom of the visible area, and specifically the bottom of the visible area may coincide with the top of the anchor point element.

[0091] In block 240 , the electronic device 110 draws an updated element list based on the updated layout information.

[0092] Specifically, the electronic device 110 may update the element list based on at least one of the following: loading a newly inserted node, deleting a node to be deleted, and adjusting a display attribute of a node to be adjusted.

[0093] It should be noted that when the change of the element list includes both the change of inserting new nodes into the element list and the change of removing existing nodes from the element list, the electronic device 110 can first process the change of inserting new nodes into the element list, and then process the change of removing existing nodes from the element list. The specific processing procedures for these two types of changes have been described and will not be repeated here.

[0094] Figure 5 An example process of determining content drawing according to some embodiments of the present disclosure is shown. Figure 5 Provide explanation.

[0095] In block 501 , the electronic device 110 may determine, in response to a change in an element list, that the change includes a deletion change and an insertion change.

[0096] In some embodiments, a delete change token removes an existing node from the element list. An insert change token inserts a new node into the element list.

[0097] At block 502 , the electronic device 110 processes a deletion change.

[0098] In some embodiments, when the change includes both a deletion change and an insertion change, the electronic device 110 may process the deletion change first, and then process the insertion change after the deletion change is processed.

[0099] Specifically, the process of deleting changes mainly includes the processes shown in blocks 503 to 509 .

[0100] In block 503 , the electronic device 110 updates the layout model.

[0101] In some embodiments, the layout model can indicate the layout of each node in the current element list, specifically which nodes are located in the visible area, which nodes are located in the non-visible area, the arrangement relationship between each node, the position information of the node to be deleted in the element list, etc.

[0102] At block 504 , the electronic device 110 indexes the layout.

[0103] In some embodiments, the electronic device 110 may obtain layout information corresponding to each node in the current element list. The layout information may indicate position information of each node in the element list, position relationship between each node, and the like.

[0104] At block 505 , the electronic device 110 searches for an anchor point based on the configuration information.

[0105] As an example, the electronic device 110 may traverse each node in the visible area in order from top to bottom until a first initial anchor point that meets a predetermined condition is found. The specific predetermined condition may be a node that is compliant and has not changed due to a change in the element list. Further, the electronic device may determine a fallback mode based on the configuration information in response to the first initial anchor point being a node to be deleted. Further, the electronic device may determine a target node from the element list based on the fallback mode and the first initial anchor point. For example, if the first initial anchor point is node 10, the electronic device 110 may traverse each node from bottom to top in order starting from the first initial anchor point in response to the fallback mode indication, and may determine node 9 as the target node. In box 506, the electronic device 110 applies the update.

[0106] At block 507 , the electronic device 110 sets a content offset.

[0107] In some embodiments, the content offset is associated with the anchor point being found and the relative position relationship between the anchor point and the visible area. The content offset may also be referred to as a moving offset, which may determine which nodes are included in the visible area. Specifically, which nodes are located in the visible area depends mainly on the scroll offset and the layout position of all nodes. Specifically, when the layout position intersects with the scroll position, the corresponding node may be rendered to become visible to the user.

[0108] At block 508 , the electronic device 110 updates the node.

[0109] In some embodiments, the electronic device 110 may determine which nodes are in the changed element list and the layout information of these nodes to update the nodes.

[0110] In block 509 , the electronic device 110 asynchronously recycles / loads the node.

[0111] In response to a node being deleted, the electronic device 110 may recycle the node to be deleted so that the node is no longer in the element list.

[0112] At block 510 , the electronic device 110 processes the insert change.

[0113] In block 511 , the electronic device 110 updates the layout model.

[0114] In some embodiments, the layout model may indicate the layout of each node in the current element list, specifically which nodes are located in the visible area, which nodes are located in the non-visible area, the arrangement relationship between each node, the position information of the node to be deleted in the element list, etc. The layout model at this time is different from the layout model corresponding to block 503.

[0115] At block 512 , the electronic device 110 indexes the layout.

[0116] In some embodiments, the electronic device 110 may obtain layout information corresponding to each node in the current element list.

[0117] In block 513 , the electronic device 110 searches for an anchor point based on the configuration information.

[0118] As an example, the electronic device 110 can traverse each node in the visible area in order from top to bottom until a second initial anchor point that meets a predetermined condition is found. The specific predetermined condition can be a node that is compliant and has not changed due to a change in the element list. Further, the electronic device can determine the insertion mode based on the configuration information in response to the element list inserting a new node adjacent to the second node and the new node being outside the visible area. Further, the electronic device can determine the node adjacent to the second node and outside the visible area before the change as the target node in response to the insertion mode indicating that the new node is to be drawn in the visible area. For example, if the second initial anchor point is node 10, and the node adjacent to the second initial anchor point and outside the visible area is node 9, the electronic device 110 can determine node 9 as the anchor point in response to inserting a new node between node 9 and node 10, and the insertion mode indicates that the new node is to be drawn in the visible area.

[0119] At block 514 , the electronic device 110 sets a content offset.

[0120] In some embodiments, the content offset is associated with the anchor point being found and the relative position relationship between the anchor point and the visible area. The content offset may also be referred to as a moving offset, which may determine which nodes are included in the visible area. Specifically, which nodes are located in the visible area depends mainly on the scroll offset and the layout position of all nodes. Specifically, when the layout position intersects with the scroll position, the corresponding node may be rendered to become visible to the user.

[0121] At block 515 , the electronic device 110 updates the node.

[0122] In some embodiments, the electronic device 110 may determine which nodes are in the changed element list and the layout information of these nodes to update the nodes.

[0123] At block 516 , the electronic device 110 asynchronously recycles / loads the node.

[0124] In response to a new node being inserted, the electronic device 110 may load the node to be inserted so that the node is located in the element list.

[0125] Based on this approach, the embodiments of the present disclosure can first determine the anchor element from the element list in response to changes in the element list, and then dynamically update the layout information of the element list based on the drawing mode of the anchor element, so as to quickly respond to changes in the element list and improve the efficiency of content drawing.

[0126] Example devices and equipment

[0127] The embodiments of the present disclosure also provide corresponding devices for implementing the above methods or processes. Figure 6 A schematic structural block diagram of an apparatus 600 for content drawing according to some embodiments of the present disclosure is shown. The apparatus 600 may be implemented as or included in the electronic device 110 as discussed above. Each module / component in the apparatus 600 may be implemented by hardware, software, firmware, or any combination thereof.

[0128] like Figure 6 As shown, the device 600 includes a first drawing module, which is configured to draw an element list, the element list includes multiple nodes, and at least some of the multiple nodes are not drawn in the visible area of ​​the interface; a determination module, which is configured to determine a target node from the element list as an anchor element in response to a change in the element list; an update module, which is configured to update the layout information of the element list based on the drawing mode of the anchor element; and a second drawing module, which is configured to draw an updated element list based on the updated layout information.

[0129] In some embodiments, the change of the element list includes at least one of the following: inserting a new node into the element list; removing an existing node from the element list; and updating display properties of the nodes in the element list.

[0130] In some embodiments, the determination module 620 is further configured to: determine an anchor search mode based on configuration information associated with the interface; and determine a target node from the element list based on the anchor search mode.

[0131] In some embodiments, the determination module 620 is further configured to: in response to the anchor search mode being the first mode, traverse the element list in a first direction starting from the top position of the visible area to determine the target node; or in response to the anchor search mode being the second mode, traverse the element list in a second direction starting from the bottom position of the visible area to determine the target node.

[0132] In some embodiments, the determination module 620 is further configured to: determine a first node from the element list as a first initial anchor point based on an anchor search mode; determine a fallback mode based on configuration information in response to the first node being a node to be deleted; and determine a target node from the element list based on the fallback mode and the first node.

[0133] In some embodiments, the fallback mode indicates an anchor point search direction starting from the first node.

[0134] In some embodiments, the determination module 620 is further configured to: determine a second node from the element list as a second initial anchor point based on an anchor search mode; determine an insertion mode based on the configuration information in response to a change to inserting a new node adjacent to the second node into the element list and the new node is outside the visible area; and determine a target node based on the second node in response to the insertion mode indicating that the new node is to be drawn within the visible area, the target node being outside the visible area.

[0135] In some embodiments, the updating module 630 is further configured to: in response to the drawing mode being the first drawing mode, update the layout information of the element list to maintain the target position parameter of the anchor element relative to the visible area.

[0136] In some embodiments, the target position parameter includes a distance from the anchor element to at least one border of the visible area.

[0137] In some embodiments, the updating module 630 is further configured to: in response to the drawing mode being the second drawing mode, update the layout information of the element list so that the anchor element is positioned at a first preset position in the visible area.

[0138] In some embodiments, the updating module 630 is further configured to: in response to the drawing mode being the third drawing mode, update the layout information of the element list so that the anchor element is positioned at a second preset position outside the visible area.

[0139] The units included in the device 600 can be implemented in various ways, including software, hardware, firmware, or any combination thereof. In some embodiments, one or more units can be implemented using software and / or firmware, such as machine executable instructions stored on a storage medium. In addition to or as an alternative to machine executable instructions, some or all of the units in the device 600 can be implemented at least in part by one or more hardware logic components. As an example and not limitation, exemplary types of hardware logic components that can be used include field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips (SOCs), complex programmable logic devices (CPLDs), and the like.

[0140] Figure 7 1 shows a block diagram of an electronic device 700 in which one or more embodiments of the present disclosure may be implemented. It should be understood that Figure 7 The electronic device 700 shown is merely exemplary and should not constitute any limitation on the functionality and scope of the embodiments described herein. Figure 7 The electronic device 700 shown can be used to implement Figure 1 An electronic device 110 is shown.

[0141] like Figure 7 As shown, the electronic device 700 is in the form of a general electronic device. The components of the electronic device 700 may include, but are not limited to, one or more processors or processing units 710, a memory 720, a storage device 730, one or more communication units 740, one or more input devices 750, and one or more output devices 760. The processing unit 710 may be an actual or virtual processor and is capable of performing various processes according to a program stored in the memory 720. In a multi-processor system, multiple processing units execute computer executable instructions in parallel to improve the parallel processing capability of the electronic device 700.

[0142] The electronic device 700 typically includes a plurality of computer storage media. Such media may be any accessible media that is accessible to the electronic device 700, including but not limited to volatile and non-volatile media, removable and non-removable media. The memory 720 may be a volatile memory (e.g., a register, a cache, a random access memory (RAM)), a non-volatile memory (e.g., a read-only memory (ROM), an electrically erasable programmable read-only memory (EEPROM), flash memory), or some combination thereof. The storage device 730 may be a removable or non-removable medium, and may include a machine-readable medium, such as a flash drive, a disk, or any other medium, which may be capable of being used to store information and / or data (e.g., training data for training) and may be accessed within the electronic device 700.

[0143] The electronic device 700 may further include additional removable / non-removable, volatile / non-volatile storage media. Figure 7 As shown in , a disk drive for reading or writing from a removable, non-volatile disk (e.g., a "floppy disk") and an optical drive for reading or writing from a removable, non-volatile optical disk may be provided. In these cases, each drive may be connected to the bus (not shown) by one or more data media interfaces. The memory 720 may include a computer program product 725 having one or more program modules that are configured to perform various methods or actions of various embodiments of the present disclosure.

[0144] The communication unit 740 implements communication with other electronic devices through a communication medium. Additionally, the functions of the components of the electronic device 700 can be implemented with a single computing cluster or multiple computing machines that can communicate through a communication connection. Therefore, the electronic device 700 can operate in a networked environment using a logical connection with one or more other servers, a network personal computer (PC), or another network node.

[0145] The input device 750 may be one or more input devices, such as a mouse, a keyboard, a tracking ball, etc. The output device 760 may be one or more output devices, such as a display, a speaker, a printer, etc. The electronic device 700 may also communicate with one or more external devices (not shown) through the communication unit 740 as needed, such as a storage device, a display device, etc., communicate with one or more devices that allow a user to interact with the electronic device 700, or communicate with any device that allows the electronic device 700 to communicate with one or more other electronic devices (e.g., a network card, a modem, etc.). Such communication may be performed via an input / output (I / O) interface (not shown).

[0146] According to an exemplary implementation of the present disclosure, a computer-readable storage medium is provided, on which computer-executable instructions are stored, wherein the computer-executable instructions are executed by a processor to implement the method described above. According to an exemplary implementation of the present disclosure, a computer program product is also provided, which is tangibly stored on a non-transitory computer-readable medium and includes computer-executable instructions, and the computer-executable instructions are executed by a processor to implement the method described above.

[0147] Various aspects of the present disclosure are described herein with reference to the flowcharts and / or block diagrams of the methods, devices, equipment, and computer program products implemented according to the present disclosure. It should be understood that each box in the flowchart and / or block diagram and the combination of each box in the flowchart and / or block diagram can be implemented by computer-readable program instructions.

[0148] 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.

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

[0150] The flow chart and block diagram in the accompanying drawings show the possible architecture, function and operation of the system, method and computer program product according to multiple implementations of the present disclosure. In this regard, each square box in the flow chart or block diagram can represent a part of a module, program segment or instruction, and a part of a module, program segment or instruction includes one or more executable instructions for realizing the logical function of the specification. In some implementations as replacements, the function marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two continuous square boxes can actually be executed substantially in parallel, and they can sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be realized by a special hardware-based system that performs the function or action of the specification, or can be realized by a combination of special hardware and computer instructions.

[0151] The above descriptions of various implementations of the present disclosure are exemplary, non-exhaustive, and not limited to the disclosed implementations. Many modifications and variations will be apparent to those of ordinary skill in the art without departing from the scope and spirit of the described implementations. The selection of terms used herein is intended to best explain the principles of the implementations, practical applications, or improvements to the technology in the market, or to enable other persons of ordinary skill in the art to understand the various implementations disclosed herein.

Claims

1. A method for content drawing, comprising: Draw an element list, the element list including a plurality of nodes, at least some of the plurality of nodes are not drawn in a visible area of ​​the interface; In response to the change of the element list, determining a target node from the element list to serve as an anchor element; Based on the drawing mode of the anchor element, updating the layout information of the element list; as well as Based on the updated layout information, the updated element list is drawn.

2. The method according to claim 1, wherein the change of the element list comprises at least one of the following: Inserting a new node into the element list; Remove an existing node from the element list; Updates the display attributes of the nodes in the element list.

3. The method according to claim 1, wherein determining a target node from the element list comprises: determining an anchor search mode based on configuration information associated with the interface; as well as The target node is determined from the element list based on the anchor search mode.

4. The method according to claim 3, wherein determining the target node from the element list based on the anchor search mode comprises: In response to the anchor search mode being the first mode, traversing the element list in a first direction starting from the top position of the visible area to determine the target node; or In response to the anchor point search mode being the second mode, the element list is traversed in a second direction starting from the bottom position of the visible area to determine the target node.

5. The method according to claim 3, wherein determining the target node from the element list based on the anchor search mode comprises: Based on the anchor point search mode, determining a first node from the element list to serve as a first initial anchor point; In response to the first node being a node to be deleted, determining a fallback mode based on the configuration information; as well as The target node is determined from the element list based on the fallback mode and the first node. The method according to claim 5 , wherein the fallback mode indicates an anchor point search direction starting from the first node.

7. The method according to claim 3, wherein determining the target node from the element list based on the anchor search mode comprises: Based on the anchor point search mode, determining a second node from the element list to serve as a second initial anchor point; In response to the change being inserting a new node adjacent to the second node into the element list and the new node being outside the visible area, determining an insertion mode based on the configuration information; as well as In response to the insertion mode indicating that the new node is to be drawn in the visible area, the target node is determined based on the second node, the target node being outside the visible area.

8. The method according to claim 1, wherein updating the layout information of the element list based on the drawing mode of the anchor element comprises: In response to the drawing mode being the first drawing mode, the layout information of the element list is updated to maintain a target position parameter of the anchor element relative to the visible area. 9 . The method according to claim 8 , wherein the target position parameter comprises a distance from the anchor element to at least one border of the visible area.

10. The method according to claim 1, wherein updating the layout information of the element list based on the drawing mode of the anchor element comprises: In response to the drawing mode being the second drawing mode, the layout information of the element list is updated so that the anchor element is positioned at a first preset position in the visible area.

11. The method according to claim 1, wherein updating the layout information of the element list based on the drawing mode of the anchor element comprises: In response to the drawing mode being the third drawing mode, the layout information of the element list is updated so that the anchor element is positioned at a second preset position outside the visible area.

12. A device for content drawing, comprising: A first drawing module is configured to draw an element list, wherein the element list includes a plurality of nodes, and at least some of the plurality of nodes are not drawn in a visible area of ​​the interface; a determination module configured to determine a target node from the element list as an anchor element in response to a change in the element list; An updating module, configured to update layout information of the element list based on the drawing mode of the anchor element; as well as The second drawing module is configured to draw the updated element list based on the updated layout information.

13. An electronic device comprising: at least one processing unit; as well as At least one memory, the at least one memory being coupled to the at least one processing unit and storing instructions for execution by the at least one processing unit, the instructions causing the electronic device to perform the method according to any one of claims 1 to 11 when executed by the at least one processing unit.

14. A computer-readable storage medium having a computer program stored thereon, wherein the computer program implements the method according to any one of claims 1 to 11 when executed by a processor.

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

Images