Display method and electronic device

Abstract

This application discloses a display method and an electronic device. The electronic device can associate a high-level node (also called a drawing node) used for drawing a controller component with a low-level node corresponding to a content component. The drawing logic of the controller component can be generated by the low-level node corresponding to the controller component, which is attached below the aforementioned low-level content component node. The rendering task of the controller component can be completed by the high-level node used for drawing the controller component. This solves the problems of asynchronous refresh and animation between the content component and the controller component, providing a better visual experience for the user. Furthermore, while ensuring synchronized refresh and animation between the content component and the controller component, dynamically increasing the level of the node used for drawing the controller component also ensures that the drawn content is not clipped and that the controller component is drawn completely.

Description

Technical Field

[0001] This application relates to the field of terminal technology, and in particular to a display method and an electronic device. Background Technology

[0002] With the development of electronic technology, electronic devices are becoming increasingly versatile. For example, electronic devices can support users in performing various operations on the content they display (such as text, images, etc.) (such as selection, editing, etc.), bringing great convenience to users.

[0003] Taking the content displayed on the electronic device as text, and the user making a selection operation on the text as an example, when the electronic device displays text, in response to the user's selection operation on the text, the electronic device can display a text selection control.

[0004] However, when the page displaying the text changes (e.g., the page changes due to scrolling or page avoidance), the text selection control cannot keep up with the text update, which will give users a visually choppy experience and a poor user experience. Summary of the Invention

[0005] This application provides a display method and electronic device that can solve the problems of asynchronous refresh and animation between content components and controller components, providing users with a better visual experience.

[0006] In a first aspect, embodiments of this application provide a display method, the method comprising: an electronic device displaying a first user interface, the first user interface including first content and a first selection control, wherein part or all of the first content is selected by the first selection control; when the electronic device updates the display of the first content, the relative position of the first content and the first selection control remains unchanged; wherein the update includes one or more of the following: scrolling, rotation.

[0007] Wherein, the aforementioned first user interface may be a user interface provided by an application installed on an electronic device, the first content may be content displayed in the user interface provided by the application (such as text, images, etc.), and the first selection control may be a control for the user to select part or all of the first content. For example, the first content may be, for example, Figure 3A or Figure 3B or Figure 3C The text shown, the first selection control could be, for example, Figure 3A or Figure 3B or Figure 3C The text selection control shown.

[0008] By implementing the method provided in the first aspect, the electronic device updates the display of the first content (e.g., in...). Figure 3A or Figure 3B or Figure 3C In the scenario shown, the first content is updated and displayed. The relative position of the first content and the first selection control remains unchanged, which ensures that the first content and the first selection control are refreshed synchronously, and the animation is also displayed synchronously, providing users with a better visual experience.

[0009] In one possible implementation, the first content includes one or more of the following: text and images.

[0010] In this embodiment of the application, the form of the first content is not limited. For example, it can be text, image, etc., as long as the first content can be selected.

[0011] In one possible implementation, before the electronic device updates and displays the first content, the method further includes: the electronic device detecting a first operation by the user; wherein the first operation is used to instruct the electronic device to update and display the first content.

[0012] The first operation mentioned above can be, for example, Figure 3A The swipe-up operation shown, or, Figure 3B The on-screen keyboard access method is shown below, or... Figure 3C The rotation operations shown are not limited to those described in this application embodiment.

[0013] In one possible implementation, before the electronic device updates and displays the first content, the method further includes: the electronic device acquiring first information, the first information including the display position of the first selection control in the first user interface; the electronic device sending second information to a second node through a first node, the second information including one or more of the following: the shape of the first selection control, the size of the first selection control; the electronic device drawing the first selection control on the second node based on the first information and the second information; wherein the first node is the node corresponding to the first selection control, the second node is the node used to draw the first selection control, and the hierarchy of the second node is higher than that of the first node.

[0014] Wherein, the first information may be the position information of the image to be displayed mentioned in the following embodiments, the first node may be the handle node mentioned in the following embodiments, the second node may be the drawing node mentioned in the following embodiments, and the second information may be the drawing instruction mentioned in the following embodiments.

[0015] In this way, the first selection control can be drawn using high-level nodes, thus ensuring that the drawn content is not clipped.

[0016] In one possible implementation, before the electronic device acquires the first information, the method further includes: the electronic device creating a second node on the third node and associating the second node with a fourth node; wherein the fourth node is the node corresponding to the first content, and the third node is at a higher level than the fourth node; the electronic device acquiring the first information specifically includes: the electronic device converting the first coordinate data to obtain the first information; wherein the first coordinate data is the coordinate data of the first selection control generated by the fourth node.

[0017] The fourth node mentioned above could be, for example, Figure 2B The text node shown can be a third node, which can be a node at a higher level than the fourth node, for example... Figure 2B The scroll node shown.

[0018] In this way, the electronic device can create a new node on the parent node of a lower-level node, and complete the drawing of the first selection control on this node, thus ensuring that the drawn content is not clipped.

[0019] In one possible implementation, before the electronic device converts the first coordinate data to obtain the first information, the method further includes: the electronic device sending third information to the second node through the fourth node, the third information including the size of the display area of ​​the first content in the first user interface; the electronic device converting the first coordinate data to obtain the first information specifically includes: the electronic device obtaining the first information based on the third information and the first coordinate data.

[0020] The size of the display area of ​​the first content in the first user interface may refer to the size of the target component mentioned in the following embodiments.

[0021] After the fourth node establishes a relationship with the second node, the fourth node can interact with the second node. For example, the fourth node can synchronize the size of the display area of ​​the first content in the first user interface to the second node.

[0022] In one possible implementation, before the electronic device creates a second node on the third node, the method further includes: the electronic device determining that the third node satisfies a first condition; wherein the first condition is that the available drawing space of the third node is greater than or equal to the space used to draw the first selection control.

[0023] In other words, the embodiments of this application require an electronic device to find a node with enough space to draw the first selection control.

[0024] In one possible implementation, the electronic device determines that the third node satisfies the first condition, specifically including: the electronic device determines that the clip property of the component corresponding to the third node is false.

[0025] When the value of the clip property is false, the first selection control (i.e., the handle component mentioned in the following examples) will not be clipped when it is at the edge of the page. Therefore, in order to ensure that the handle component is not clipped, the value of the clip property needs to be false.

[0026] In one possible implementation, before the electronic device determines that the third node satisfies the first condition, the method further includes:

[0027] The electronic device determines that the fourth node does not meet the first condition.

[0028] In other words, if the fourth node does not meet the first condition, the electronic device can traverse to the parent node of that node until it finds a node that meets the first condition.

[0029] In one possible implementation, the electronic device determines that the fourth node does not meet the first condition, specifically by determining that the clip property of the component corresponding to the fourth node is true.

[0030] In a second aspect, embodiments of this application provide a chip system, including: a processor coupled to a memory, the memory being used to store programs or instructions, and when the program or instructions are executed by the processor, causing the chip system to perform the method described in any possible implementation of the first aspect above.

[0031] Thirdly, embodiments of this application provide an electronic device including one or more processors and one or more memories; wherein the one or more memories are coupled to the one or more processors, and the one or more memories are used to store computer program code, the computer program code including computer instructions, which, when the one or more processors execute the computer instructions, cause the electronic device to perform the method described in any possible implementation of the first aspect above.

[0032] Fourthly, embodiments of this application provide a computer storage medium storing a computer program, the computer program including program instructions that, when executed on an electronic device, cause the electronic device to perform the method described in any possible implementation of the first aspect above.

[0033] Fifthly, embodiments of this application provide a computer program product that, when run on a computer, causes the computer to perform the method described in any possible implementation of the first aspect above. Attached Figure Description

[0034] Figures 1A-1E These are schematic diagrams of a set of user interfaces provided in the embodiments of this application;

[0035] Figure 2A This is a flowchart illustrating a display method provided in an embodiment of this application;

[0036] Figure 2B This is a schematic diagram of the tree structure involved in a display method provided in an embodiment of this application;

[0037] Figures 3A-3C This is another set of user interface diagrams provided in the embodiments of this application;

[0038] Figure 4 This is a schematic diagram of the software architecture of an electronic device provided in an embodiment of this application;

[0039] Figure 5 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0040] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. In the description of the embodiments of this application, unless otherwise stated, " / " means "or," for example, A / B can mean A or B; "and / or" in the text is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone. Furthermore, in the description of the embodiments of this application, "multiple" refers to two or more than two.

[0041] It should be understood that the terms "first," "second," etc., in the specification, claims, and drawings of this application are used to distinguish different objects, not to describe a specific order. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion. For example, a process, method, system, product, or apparatus that includes a series of steps or units is not limited to the listed steps or units, but may optionally include steps or units not listed, or may optionally include other steps or units inherent to these processes, methods, products, or apparatuses.

[0042] In this application, the reference to "embodiment" means that a specific feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of this application. The appearance of this phrase in various places throughout the specification does not necessarily refer to the same embodiment, nor is it a mutually exclusive, independent, or alternative embodiment. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described in this application can be combined with other embodiments.

[0043] The term "user interface (UI)" used in the following embodiments of this application refers to the medium interface through which an application or operating system interacts and exchanges information with the user. It realizes the conversion between the internal form of information and the form that the user can accept. The user interface is source code written in a specific computer language such as Java or Extensible Markup Language (XML). The interface source code is parsed and rendered on the electronic device, ultimately presenting content that the user can recognize. A common form of user interface is the graphical user interface (GUI), which refers to a user interface related to computer operation displayed graphically. It can be visible interface elements such as text, icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, and widgets displayed on the screen of an electronic device.

[0044] To facilitate understanding, some related concepts involved in the embodiments of this application will be explained below.

[0045] 1. Tree

[0046] A tree is a non-linear data structure consisting of nodes and edges, and can be used to represent data with hierarchical relationships.

[0047] 2. Node

[0048] A node is the basic unit of a tree. Each node contains a value (or key) and references to several child nodes.

[0049] The root node is the vertex of the tree and has no parent node. The parent node is a node that is directly connected to another node.

[0050] A leaf node is a node that has no child nodes. Child nodes are nodes that are directly connected to a given node.

[0051] 3. Edge

[0052] An edge is a connection between nodes, used to represent the relationship between nodes.

[0053] Currently, electronic devices can support users to perform various operations on the content they display (such as text, images, etc.) (such as selection, editing, etc.). For example, electronic devices can support users to select the content they display. In response to the selection operation, the electronic device can display a selection control and select the content that the user wants to select.

[0054] In this case, the selection control needs to be fully displayed on top of the content for the electronic device to allow the user to operate it.

[0055] The node corresponding to the selection control is attached to the root node of the application page. When the page currently used to display content changes (for example, the page changes due to the displayed content scrolling in the scroll container, or the page changes due to page avoidance, etc.), the selection control cannot keep up with the content to update (or refresh), which will bring a visual effect of page lag to the user and result in a poor experience.

[0056] For example, see Figure 1A Taking text selection as an example, when an electronic device displays text, it can respond to the user's selection of text by... Figure 1A The user interface shown displays a text selection control (e.g.) Figure 1A The text selection control shown consists of circles and vertical lines.

[0057] It should be noted that the embodiments of this application do not limit the display style of the selection control (e.g., a text selection control), and it can be, for example, Figure 1A The display pattern shown, consisting of circles and vertical lines, can also be other display patterns.

[0058] In some embodiments, the electronic device may also display text after the user selects it. Figure 1B An exemplary text edit box includes one or more controls (such as cut, copy, select all, translate, etc.) so that users can perform further operations on the selected text.

[0059] However, when the page displaying the text changes, the text selection control cannot keep up with the text's updates. These changes can occur in scenarios including, but are not limited to, one or more of the following: page scrolling, page avoidance, and animation. Details are provided below:

[0060] 1. Page scrolling scenario

[0061] For example, after a user selects text, the electronic device can detect the user's action of triggering page scrolling (e.g. Figure 1C (The shown swipe-up operation) In response to this operation, see [link / reference]. Figure 1C On electronic devices, the text can be swiped up on the page, and the text can also swipe up along with it. However, the text selection control cannot swipe up in sync with the text, and the page is prone to lag, resulting in a poor visual experience for the user.

[0062] It should be noted that the above-described operation to trigger page scrolling is only an example of the upward swipe operation and should not be construed as limiting this application. In some other embodiments of this application, other operations (such as the downward swipe operation) may also be used to trigger page scrolling.

[0063] 2. Page avoidance scenarios

[0064] "Page avoidance" refers to the process where, when displaying the current page, if other content needs to be displayed, the page can reduce the amount of display space it occupies to make room for other content.

[0065] For example, a page avoidance scenario could be, for instance, Figure 1D In the exemplary scenario of bringing up the soft keyboard, after a user selects text, the electronic device can detect the user's action of bringing up the soft keyboard and respond to this action, see [link to relevant documentation]. Figure 1D Electronic devices can swipe up on pages displaying text and show... Figure 1D The soft keyboard shown allows text to slide up along with the page. However, the text selection control cannot slide up in sync with the text, and the page is prone to lag, resulting in a poor visual experience for the user.

[0066] 3. Animation Scenes

[0067] For example, after a user selects text, the electronic device can detect that the user has triggered an action to animate the text (e.g., Figure 1E (The rotation operation shown), in response to this operation, see [link to relevant documentation]. Figure 1E Electronic devices can display animated text (such as text with a rotating effect), however, text selection controls cannot keep pace with the text animation, and the page is prone to lag, resulting in a poor visual experience for users.

[0068] It should be noted that the above-mentioned operation that triggers the animation is only a rotation operation as an example and should not be construed as limiting this application. In some other embodiments of this application, other operations (such as movement operations) may also be used to trigger the animation.

[0069] In this embodiment of the application, the content displayed on the electronic device that allows the user to make selections (such as text, images, etc.) can be called a content component, and the node corresponding to the content component can be called a content node. For example, when the content is text, it can be called a text component, and the node corresponding to the text component can be called a text node.

[0070] In the embodiments of this application, the selection control can be called a handle or a handle component, and the node corresponding to the handle component can be called a handle node.

[0071] One current implementation scheme for displaying content components and controller components on electronic devices involves comparing the global position of the content component with each vertical synchronization signal (vsync) processing. If the global position changes, the position of the controller component (i.e., the controller position) is recalculated. The drawbacks of this scheme are twofold: firstly, it introduces power consumption issues, increasing the power consumption of the electronic device; secondly, because it cannot detect whether the content component's animation is executing, there is no suitable time for the content component and controller component to refresh their positions simultaneously while executing the same animation, resulting in the content component and controller component being unable to execute animations concurrently.

[0072] To address the aforementioned issues, this application provides a display method whereby an electronic device can associate a high-level node (also called a drawing node) used for drawing the controller component with a low-level node corresponding to the content component. The drawing logic for the controller component can be generated by the low-level node corresponding to the controller component, which is attached below the aforementioned low-level content component node. The rendering task of the controller component can be completed by the high-level node used for drawing the controller component. This solves the problems of asynchronous refresh and animation between the content component and the controller component, providing a better visual experience for the user. Furthermore, while ensuring synchronized refresh and animation between the content component and the controller component, dynamically increasing the level of the node used for drawing the controller component also ensures that the drawn content is not clipped and that the controller component is drawn completely.

[0073] The display method provided in this application can be applied to electronic devices, which can be of various types. This application does not limit the specific type of electronic device. For example, the electronic device can be a mobile phone, a tablet computer, a desktop computer, a laptop computer, a handheld computer, a smart screen, a wearable device, an augmented reality (AR) device, a virtual reality (VR) device, an artificial intelligence (AI) device, an in-vehicle system, or an Internet of Things (IoT) device; and so on.

[0074] Figure 2A The specific flow of a display method provided by an embodiment of this application is illustrated by way of example.

[0075] like Figure 2A As shown, this method can be applied to electronic devices. The specific steps of this method are described in detail below:

[0076] S201. The electronic device verifies whether the value of the clip property of the target component is true or false. If it is true, the electronic device performs the following step S202a. If it is false, the electronic device performs the following step S202b.

[0077] Taking the aforementioned target component as a text component as an example, the text component can be the text displayed on the currently displayed page of the electronic device. For example, the text component can be, for instance, the aforementioned... Figure 1A The text displayed on the page shown.

[0078] The clip property mentioned above has two values: true and false. When the clip property is true, the handle component will be clipped when it is at the edge of the page. When the clip property is false, the handle component will not be clipped when it is at the edge of the page. Therefore, to ensure that the handle component is not clipped, it is necessary to find the component with the clip property value of false. This component is the component that the electronic device expects to find.

[0079] In some embodiments, step S201 is performed when a triggering condition is met, wherein the triggering condition may include, but is not limited to: the electronic device detecting a user's selection operation (e.g., gesture selection operation) on content (e.g., text).

[0080] S202a: The electronic device replaces the target component with its parent component and returns to perform the above step S201 until a component with the value of the clip property is found.

[0081] Specifically, if the value of the clip property of the target component in step S201 is true, the electronic device can traverse from the target component to its parent component (or parent component) and replace the target component with its parent component. Furthermore, it can return to execute step S201. That is, the electronic device will continue to check whether the value of the clip property of the replaced component (i.e., the parent component of the target component) is true or false. If it is true, the electronic device can execute step S202a. If it is false (i.e., it meets expectations), the electronic device can execute the following step S202b.

[0082] Figure 2B An exemplary embodiment of a tree structure related to this application is shown. See also... Figure 2B The dashed arrow indicates upward traversal (i.e., traversal to the parent node). The node corresponding to the text component (used to display text content) is a text node (i.e., a text node). The electronic device can start executing the above step S201 from the text node.

[0083] In one possible implementation, see [link / reference]. Figure 2B The text node can be attached to the column node. The column node is the node corresponding to the vertical layout container and can be used to arrange child components vertically. The child components can include, but are not limited to, text components and image components.

[0084] In one possible implementation, see [link / reference]. Figure 2B A column node can be attached to a scroll node, where the scroll node is the node corresponding to the scroll layout container and can be used to implement scrolling effects.

[0085] In one possible implementation, see [link / reference]. Figure 2B A scroll node can be attached to a root node, which is the node corresponding to the root component. The root component is the top-level component, and the root node is located at the top level of the tree.

[0086] In this embodiment, the purpose of finding components with a `clip` attribute value of `false` is to find nodes with enough space to draw the handle component. Typically, the space of a child node is smaller than the space of its parent node. Figure 2B Taking the tree structure shown as an example, it is easy to understand that the space of the text node is less than the space of the column node, the space of the column node is less than the space of the scroll node, and the space of the scroll node is less than the space of the root node.

[0087] For example, see [link to relevant documentation] Figure 2B Assuming the value of the clip property of the text component is true, the electronic device will traverse upwards, checking whether the value of the clip property of the column component is true or false. If it is false, the electronic device will execute the following step S202b. If it is true, the electronic device will continue to traverse upwards, checking whether the value of the clip property of the scroll component is true or false. If it is false, the electronic device will execute the following step S202b. If it is true, the electronic device will continue to traverse upwards, and so on, until a component with a clip property value of false is found.

[0088] In practical applications, since the value of the `clip` property of the root component is usually false, it is generally not the case that a component with a `clip` property value of false cannot be found.

[0089] In some embodiments, a text node can be a leaf node.

[0090] In some embodiments, the above Figure 2B Each node (i.e., circle) shown can represent a control.

[0091] In some embodiments, the above Figure 2B The tree structure shown can also include other nodes, such as the row node, which is a horizontal layout container that can be used to arrange child components horizontally. Child components can include, but are not limited to, text components and image components; another example is the stack node, which is the node corresponding to the stacked layout container and can be used to display child components in a stacked manner. Child components can include, but are not limited to, text components and image components; yet another example is the flex node, which is the node corresponding to the flexible layout container and can be used to create flexible layouts; and so on.

[0092] It is understandable that the above Figure 2B The tree structure shown is merely an example and should not be construed as limiting this application. In some other embodiments of this application, the tree may include more or fewer nodes, and the tree structure may also be different; this application does not limit this aspect.

[0093] S202b: The electronic device creates a drawing node and associates the drawing node with the target component.

[0094] Specifically, after finding a matching node (the node corresponding to a component whose clip property value is false), the electronic device can create a rendering node (renderservicenode, RsNode) on that node and associate the rendering node with the target component.

[0095] The aforementioned drawing node represents the drawing node of the graphic, and the rendering task can be implemented based on this drawing node.

[0096] The aforementioned target component may refer to the first component of electronic device verification, for example... Figure 2B The text component corresponding to the text node shown in the example.

[0097] For example, see Figure 2B As can be seen, the drawing node is created on the scroll node, which indicates that the scroll node is a valid node (the node corresponding to the component whose clip property value is false).

[0098] In this embodiment, after associating a drawing node with a target component, the electronic device can support information interaction between the node corresponding to the target component and the drawing node to enable the execution of subsequent steps. Furthermore, after associating a drawing node with a target component, the drawing node can also perceive the state of the target component in real time (e.g., scrolling, rotation), thereby updating the drawing content according to the state of the target component in real time, ensuring that the drawing content remains synchronized with the target component.

[0099] In some embodiments, the electronic device may also generate a drawing node tree after creating drawing nodes.

[0100] S203. The electronic device synchronizes the size of the target component obtained during the layout calculation to the drawing node associated with the target component.

[0101] The target component mentioned above is the same as the target component described in step S202b above.

[0102] In some embodiments, the size of the target component may refer to the size of the display area occupied by the target component on the page (e.g., the length, width, and diagonal length of the display area). For example, taking a text component as an example, assuming the text component is as described above... Figure 1A The text displayed on the page shown can be the size of the text component as described above. Figure 1A The size of the display area occupied by the text shown on the page.

[0103] In some embodiments, when layout calculations are triggered, the electronic device can obtain the size of the target component through a measurement module.

[0104] In one possible implementation, the measurement module described above may include a measure function.

[0105] In one possible implementation, the measurement module can be included in the target component or be independent of the target component. That is, the electronic device can perform layout calculations using the target component to obtain its size; or, the size of the target component can be obtained using a measurement module independent of the target component.

[0106] In other embodiments, the target component's attribute information may include the target component's size, which the electronic device can obtain without measurement when the layout calculation is triggered.

[0107] S204. The electronic device synchronizes the position information of the image to be displayed to the drawing node associated with the target component, wherein the position information of the image to be displayed is determined based on the size of the target component.

[0108] The aforementioned image to be displayed (also referred to as a graphic to be displayed, etc.) may refer to the handle assembly.

[0109] The position information of the image to be displayed can be used to indicate the display position of the image on the page, and this position information is represented by coordinates.

[0110] In this embodiment of the application, the electronic device can obtain the coordinates of the image to be displayed (also known as handle coordinates or handle component coordinates) through the layout module.

[0111] In one possible implementation, the layout module described above may include a layout function.

[0112] In one possible implementation, the layout module can be included within the target component or independent of the target component. That is, the electronic device can perform layout calculations through the target component to obtain the coordinates of the image to be displayed; or, it can obtain the coordinates of the image to be displayed through a layout module independent of the target component.

[0113] It is easy to understand that when the target component is the expected component (i.e., the component with the value of the clip property being false), the coordinates of the image to be displayed are the position information of the image to be displayed synchronized to the drawing node associated with the target component as described in step S204. When the target component is not the expected component (i.e., the component with the value of the clip property being true), since the coordinates of the image to be displayed (also called the initial coordinates) are obtained with reference to the information of the target component (such as the size and position of the target component), after obtaining the coordinates of the image to be displayed, since the drawing node is created on the node corresponding to the parent component of the target component, the final coordinates of the image to be displayed should be obtained with reference to the information of the parent component (such as the size and position of the parent component). Therefore, the position information of the image to be displayed synchronized to the drawing node associated with the target component as described in step S204 can refer to the position information of the drawing node obtained after transforming the coordinates of the image to be displayed step by step. The transformation can include, but is not limited to, graphic transformations such as scaling, rotation, and translation.

[0114] It should be noted that the execution order of steps S203 and S204 is not limited in the embodiments of this application. Step S203 may be executed before or after step S204, or step S203 and step S204 may be executed simultaneously.

[0115] S205. The electronic device draws the image to be displayed on the drawing node based on the position information of the image to be displayed.

[0116] For example, the image to be displayed is a controller component, and the node corresponding to the controller component (which may be called a controller node or a layout node of the controller component) is attached to the node corresponding to the target component (e.g., Figure 2B (as shown in the text node) below ( Figure 2B (Not shown in the image) The drawing logic of the controller is triggered by the controller node. The controller node can send drawing commands to the drawing node, and the drawing node can draw the controller component based on the drawing commands and the position information of the image to be displayed.

[0117] The drawing logic described above may include, but is not limited to, information about the content to be drawn on the drawing node, such as shape information (e.g., circle, line, square, etc.) and size information.

[0118] The drawing instructions mentioned above may include, but are not limited to, the drawing logic and the vertical synchronization signal.

[0119] In one possible implementation, the handle node sends a drawing command to the drawing node. Specifically, the handle node sends a drawing command to the target node, and the target node, after receiving the drawing command, sends a drawing command to the drawing node.

[0120] In another possible implementation, the handle node sends drawing commands to the drawing node, specifically: the handle node directly sends drawing commands to the drawing node.

[0121] Once the image to be displayed is drawn, the electronic device can display the drawn image.

[0122] By implementing Figure 2A The method provided in the illustrated embodiment can solve the problems of the handle component being clipped, and the handle component and content component being out of sync in terms of refresh and animation.

[0123] For example, see Figure 3A In page scrolling scenarios, compared to Figure 1C By implementing Figure 2A The method provided in the illustrated embodiment allows the text selection control and the text to slide up together when the electronic device slides up on a page displaying text. In other words, the text selection control and the text can slide up synchronously, and their relative positions remain unchanged. The page is less prone to lag, thus providing users with a better visual experience.

[0124] For example, see Figure 3B In page avoidance scenarios, compared to Figure 1D By implementing Figure 2A The method provided in the illustrated embodiment allows an electronic device to slide up a page displaying text and display... Figure 3BWhen using the soft keyboard, the text selection control and the text can also slide up along with the page. In other words, the text selection control can slide up synchronously with the text, and their relative positions remain unchanged. The page is less likely to lag, thus providing users with a better visual experience.

[0125] For example, see Figure 3C In animated scenes, compared to Figure 1E By implementing Figure 2A The method provided in the illustrated embodiment allows an electronic device to synchronously display text with animation effects (such as rotation effects) and a text selection control. In other words, the animation of the text selection control can be synchronized with the animation of the text, and their relative positions remain unchanged. The page is also less prone to lag, thus providing users with a better visual experience.

[0126] The following describes the software structure of an electronic device provided by an embodiment of this application.

[0127] Figure 4 An exemplary embodiment of the software structure of an electronic device provided in this application is illustrated.

[0128] like Figure 4 As shown, the software system of an electronic device can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This application uses a layered architecture as an example to illustrate the software structure of an electronic device.

[0129] A layered architecture divides software into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. In some embodiments, the system is divided into four layers, from top to bottom: the application layer, the application framework layer, the system library layer, and the kernel layer.

[0130] The application layer can include a series of application packages.

[0131] like Figure 4 As shown, the application package may include applications such as camera, gallery, calendar, call, map, settings, WLAN, Bluetooth, music, video, and SMS.

[0132] The application framework layer provides application programming interfaces (APIs) and a programming framework for applications in the application layer. The application framework layer includes some predefined functions.

[0133] like Figure 4 As shown, the application framework layer may include a window manager, content provider, view system, phone manager, resource manager, notification manager, etc.

[0134] The window manager is used to manage windowed applications. It can retrieve screen size, determine the presence of a status bar, lock the screen, and capture screenshots, among other things.

[0135] Content providers store and retrieve data, making that data accessible to applications. This data may include videos, images, audio, made and received phone calls, browsing history and bookmarks, phone books, etc.

[0136] A view system includes visual controls, such as controls for displaying text and controls for displaying images. View systems can be used to build applications. A display interface can consist of one or more views. For example, a display interface including a text notification icon could include views for displaying text and views for displaying images.

[0137] In this embodiment, the application framework layer may include a renderservice module, and the drawing nodes mentioned in the foregoing embodiments may be provided by the renderservice module. The application framework layer can provide the function of creating drawing nodes; the specific process can be referred to the relevant textual descriptions in the foregoing embodiments, and will not be repeated here. After the graphics drawing is completed, the drawn graphics can be displayed in the interface provided by the application.

[0138] A phone manager is used to provide communication functions for electronic devices. For example, it manages call status (including connection and disconnection).

[0139] The file explorer provides applications with various resources, such as localized strings, icons, images, layout files, video files, and more.

[0140] The notification manager allows applications to display notifications in the status bar. These notifications can be used to deliver informational messages and can disappear automatically after a short pause, requiring no user interaction. For example, the notification manager can be used to notify users of completed downloads or message alerts. The notification manager can also display notifications as icons or scrolling text in the top status bar, such as notifications from background applications, or as dialog boxes on the screen. Examples include displaying text messages in the status bar, emitting sounds, vibrating electronic devices, and flashing indicator lights.

[0141] The core library consists of two parts: one part is the functionalities that need to be called by the Java language, and the other part is the Android core library.

[0142] The application layer and application framework layer run in a virtual machine. The virtual machine executes the Java files of the application layer and application framework layer as binary files. The virtual machine is used to perform functions such as object lifecycle management, stack management, thread management, security and exception management, and garbage collection.

[0143] System libraries can include multiple functional modules. For example: surface manager, media libraries, 3D graphics processing libraries (e.g., OpenGL ES), 2D graphics engines (e.g., SGL), etc.

[0144] The Surface Manager is used to manage the display subsystem and provides the blending of 2D and 3D layers for multiple applications.

[0145] The media library supports playback and recording of various common audio and video formats, as well as still image files. It supports multiple audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, and PNG.

[0146] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.

[0147] A 2D graphics engine is a graphics engine for 2D drawing.

[0148] The kernel layer is the layer between hardware and software. The kernel layer includes at least the display driver, camera driver, Bluetooth driver, and sensor driver.

[0149] The following is a schematic diagram of the structure of an electronic device provided in an embodiment of this application.

[0150] Figure 5 An exemplary embodiment of an electronic device provided in this application is shown.

[0151] like Figure 5As shown, the electronic device may include: a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headphone jack 170D, a sensor module 180, buttons 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an accelerometer sensor 180E, a distance sensor 180F, a proximity sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0152] It is understood that the structures illustrated in the embodiments of this application do not constitute a specific limitation on the electronic device. In other embodiments of this application, the electronic device may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0153] Processor 110 may include one or more processing units, such as: application processor (AP), modem processor, graphics processing unit (GPU), image signal processor (ISP), controller, memory, video codec, digital signal processor (DSP), baseband processor, and / or neural network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.

[0154] The controller can serve as the nerve center and command center of an electronic device. Based on the instruction opcode and timing signals, the controller generates operation control signals to control the fetching and execution of instructions.

[0155] The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has just used or that are used repeatedly. If the processor 110 needs to use the instruction or data again, it can retrieve it directly from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0156] In some embodiments, the processor 110 may include one or more interfaces. Interfaces may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a subscriber identity module (SIM) interface, and / or a universal serial bus (USB) interface, etc.

[0157] The I2C interface is a bidirectional synchronous serial bus, including a serial data line (SDA) and a serial clock line (SCL). In some embodiments, the processor 110 may include multiple I2C buses. The processor 110 can couple to the touch sensor 180K, charger, flash, camera 193, etc., through different I2C bus interfaces. For example, the processor 110 can couple to the touch sensor 180K through the I2C interface, enabling the processor 110 and the touch sensor 180K to communicate through the I2C bus interface, thereby realizing the touch function of the electronic device.

[0158] The I2S interface can be used for audio communication. In some embodiments, the processor 110 may include multiple I2S buses. The processor 110 can be coupled to the audio module 170 via the I2S bus to enable communication between the processor 110 and the audio module 170. In some embodiments, the audio module 170 can transmit audio signals to the wireless communication module 160 via the I2S interface to enable the function of answering phone calls through a Bluetooth headset.

[0159] The PCM interface can also be used for audio communication, sampling, quantizing, and encoding analog signals. In some embodiments, the audio module 170 and the wireless communication module 160 can be coupled via the PCM bus interface. In some embodiments, the audio module 170 can also transmit audio signals to the wireless communication module 160 via the PCM interface, enabling the function of answering phone calls through a Bluetooth headset. Both the I2S interface and the PCM interface can be used for audio communication.

[0160] The UART interface is a universal serial data bus used for asynchronous communication. This bus can be a bidirectional communication bus. It converts the data to be transmitted between serial and parallel communication. In some embodiments, the UART interface is typically used to connect the processor 110 and the wireless communication module 160. For example, the processor 110 communicates with the Bluetooth module in the wireless communication module 160 via the UART interface to implement Bluetooth functionality. In some embodiments, the audio module 170 can transmit audio signals to the wireless communication module 160 via the UART interface to enable music playback through Bluetooth headphones.

[0161] The MIPI interface can be used to connect the processor 110 to peripheral devices such as the display screen 194 and the camera 193. The MIPI interface includes a camera serial interface (CSI) and a display serial interface (DSI). In some embodiments, the processor 110 and the camera 193 communicate via the CSI interface to enable the electronic device to capture images. The processor 110 and the display screen 194 communicate via the DSI interface to enable the electronic device to display images.

[0162] The GPIO interface can be configured via software. It can be configured as a control signal or a data signal. In some embodiments, the GPIO interface can be used to connect the processor 110 to a camera 193, a display screen 194, a wireless communication module 160, an audio module 170, a sensor module 180, etc. The GPIO interface can also be configured as an I2C interface, an I2S interface, a UART interface, a MIPI interface, etc.

[0163] USB port 130 is a USB standard compliant interface, which can be a Mini USB port, Micro USB port, USB Type-C port, etc. USB port 130 can be used to connect a charger to charge electronic devices, and can also be used for data transfer between electronic devices and peripheral devices. It can also be used to connect headphones for audio playback. This interface can also be used to connect other electronic devices, such as AR devices.

[0164] It is understood that the interface connection relationships between the modules illustrated in the embodiments of this application are merely illustrative and do not constitute a limitation on the structure of the electronic device. In other embodiments of this application, the electronic device may also employ different interface connection methods or combinations of multiple interface connection methods as described in the above embodiments.

[0165] The wireless communication function of electronic devices can be realized through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor and baseband processor, etc.

[0166] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in the electronic device can be used to cover one or more communication frequency bands. Different antennas can also be reused to improve antenna utilization. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In some other embodiments, the antennas can be used in conjunction with a tuning switch.

[0167] The mobile communication module 150 can provide solutions for wireless communication applications including 2G / 3G / 4G / 5G in electronic devices. The mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves via antenna 1, and perform filtering, amplification, and other processing on the received electromagnetic waves before transmitting them to a modem processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modem processor and convert it into electromagnetic waves for radiation via antenna 1. In some embodiments, at least some functional modules of the mobile communication module 150 may be housed in processor 110. In some embodiments, at least some functional modules of the mobile communication module 150 and at least some modules of the processor 110 may be housed in the same device.

[0168] The modem processor may include a modulator and a demodulator. The modulator modulates the low-frequency baseband signal to be transmitted into a mid-to-high frequency signal. The demodulator demodulates the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After processing by the baseband processor, the low-frequency baseband signal is transmitted to the application processor. The application processor outputs sound signals through an audio device (not limited to speaker 170A, receiver 170B, etc.) or displays images or videos through the display screen 194. In some embodiments, the modem processor may be a separate device. In other embodiments, the modem processor may be independent of the processor 110 and may be housed in the same device as the mobile communication module 150 or other functional modules.

[0169] The wireless communication module 160 can provide solutions for wireless communication applications in electronic devices, including wireless local area networks (WLANs) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), and infrared (IR) technologies. The wireless communication module 160 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via antenna 2, performs frequency modulation and filtering of the electromagnetic wave signals, and sends the processed signal to processor 110. The wireless communication module 160 can also receive signals to be transmitted from processor 110, perform frequency modulation and amplification, and convert them into electromagnetic waves for radiation via antenna 2.

[0170] In some embodiments, antenna 1 of the electronic device is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, enabling the electronic device to communicate with networks and other devices via wireless communication technology. The wireless communication technology may include Global System for Mobile Communications (GSM), General Packet Radio Service (GPRS), Code Division Multiple Access (CDMA), Wideband Code Division Multiple Access (WCDMA), Time-Division Code Division Multiple Access (TD-SCDMA), Long Term Evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technologies. The GNSS may include Global Positioning System (GPS), Global Navigation Satellite System (GLONASS), BeiDou Navigation Satellite System (BDS), Quasi-Zenith Satellite System (QZSS), and / or Satellite Based Augmentation Systems (SBAS).

[0171] Electronic devices implement display functions through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, connecting the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations and for graphics rendering. The processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0172] Display screen 194 is used to display images, videos, etc. Display screen 194 includes a display panel. The display panel may be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a miniature LED, a microLED, a quantum dot light-emitting diode (QLED), etc. In some embodiments, the electronic device may include one or N displays 194, where N is a positive integer greater than 1.

[0173] In this embodiment of the application, the display screen 194 can be used to display a page provided by the application (e.g., a page containing text, images, etc.), and the content (e.g., text, images) and selection controls in the page can keep refresh synchronization and animation synchronization, and the selection controls can be fully displayed.

[0174] Electronic devices can achieve shooting functions through ISP, camera 193, video codec, GPU, display 194 and application processor.

[0175] The external storage interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device. The external memory card communicates with the processor 110 through the external storage interface 120 to perform data storage functions. For example, music, video, and other files can be saved on the external memory card.

[0176] Internal memory 121 can be used to store computer executable program code, which includes instructions. Processor 110 executes various functional applications and data processing of the electronic device by running the instructions stored in internal memory 121. Internal memory 121 may include a program storage area and a data storage area. The program storage area may store the operating system, at least one application program required for a function (such as sound playback, image playback, etc.), etc. The data storage area may store data created during the use of the electronic device (such as audio data, phonebook, etc.). Furthermore, internal memory 121 may include high-speed random access memory and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc.

[0177] Electronic devices can implement audio functions such as music playback and recording through audio modules 170, speakers 170A, receivers 170B, microphones 170C, headphone jacks 170D, and application processors.

[0178] Pressure sensor 180A is used to sense pressure signals and convert them into electrical signals. In some embodiments, pressure sensor 180A can be disposed on display screen 194. There are many types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, and capacitive pressure sensors. A capacitive pressure sensor may include at least two parallel plates with conductive material. When force is applied to pressure sensor 180A, the capacitance between the electrodes changes. The electronic device determines the pressure intensity based on the change in capacitance. When a touch operation is applied to display screen 194, the electronic device detects the intensity of the touch operation based on pressure sensor 180A. The electronic device can also calculate the touch position based on the detection signal from pressure sensor 180A. In some embodiments, touch operations applied to the same touch position but with different touch operation intensities can correspond to different operation commands. For example, when a touch operation with an intensity less than a first pressure threshold is applied to the SMS application icon, a command to view an SMS is executed. When a touch operation with an intensity greater than or equal to the first pressure threshold is applied to the SMS application icon, a command to create a new SMS is executed.

[0179] The gyroscope sensor 180B can be used to determine the motion attitude of an electronic device. In some embodiments, the gyroscope sensor 180B can determine the angular velocity of the electronic device around three axes (i.e., the x, y, and z axes). The gyroscope sensor 180B can be used for image stabilization. For example, when the shutter is pressed, the gyroscope sensor 180B detects the angle of the electronic device's shake, calculates the distance that the lens module needs to compensate based on the angle, and allows the lens to counteract the shake of the electronic device by moving in the opposite direction, thus achieving image stabilization. The gyroscope sensor 180B can also be used in navigation and motion-sensing gaming scenarios.

[0180] The 180E accelerometer can detect the magnitude of acceleration in various directions (typically three axes) of an electronic device. When the electronic device is stationary, it can detect the magnitude and direction of gravity. It can also be used to identify the posture of electronic devices, and is applicable to screen orientation switching, pedometers, and other applications.

[0181] Touch sensor 180K, also known as a "touch panel," can be located on display screen 194. The touch sensor 180K and display screen 194 together form a touchscreen, also known as a "touchscreen." Touch sensor 180K detects touch operations applied to or near it. The touch sensor can transmit the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through display screen 194. In other embodiments, touch sensor 180K may also be located on the surface of the electronic device, in a different position than display screen 194.

[0182] It should be understood that, Figure 5 The electronic device shown is merely an example, and electronic devices can have more than... Figure 5 The more or fewer components shown can be combined into two or more components, or they can have different component configurations. Figure 5 The various components shown can be implemented in hardware, software, or a combination of hardware and software, including one or more signal processing and / or application-specific integrated circuits.

[0183] This application provides a chip system including: a processor coupled to a memory for storing programs or instructions, wherein when the program or instructions are executed by the processor, the chip system implements the methods described in any of the above method embodiments.

[0184] Optionally, the chip system may contain one or more processors. These processors can be implemented in hardware or software. When implemented in hardware, the processor can be a logic circuit, an integrated circuit, etc. When implemented in software, the processor can be a general-purpose processor, implemented by reading software code stored in memory.

[0185] Optionally, the chip system may contain one or more memories. The memory may be integrated with the processor or disposed separately from it; this application embodiment does not limit this. For example, the memory may be a non-transient processor, such as a read-only memory (ROM), which may be integrated with the processor on the same chip or disposed separately on different chips. This application embodiment does not specifically limit the type of memory or the arrangement of the memory and processor.

[0186] For example, the chip system may be a field programmable gate array (FPGA), an application-specific integrated circuit (ASIC), a system on chip (SoC), a central processor (CPU), a network processor (NP), a digital signal processor (DSP), a microcontroller unit (MCU), a programmable logic device (PLD), or other integrated chips.

[0187] It should be understood that each step in the above method embodiments can be completed by integrated logic circuits in the processor hardware or by instructions in software form. The method steps disclosed in the embodiments of this application can be directly manifested as being executed by a hardware processor, or being executed by a combination of hardware and software modules in the processor.

[0188] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in this application are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium accessible to a computer or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid-state disk (SSD)).

[0189] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. This program can be stored in a computer-readable storage medium, and when executed, it can include the processes described in the above method embodiments. The aforementioned storage medium includes various media capable of storing program code, such as ROM or random access memory (RAM), magnetic disks, or optical disks.

[0190] The above embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit it. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of this application.

Claims

1. A display method, characterized in that, The method includes: An electronic device displays a first user interface, which includes first content and a first selection control, wherein part or all of the first content is selected by the first selection control. When the electronic device updates and displays the first content, the relative position of the first content and the first selection control remains unchanged; The update includes one or more of the following: scrolling, rotation.

2. The method according to claim 1, characterized in that, The first content includes one or more of the following: text and images.

3. The method according to claim 1 or 2, characterized in that, Before the electronic device updates and displays the first content, the method further includes: The electronic device detects the user's first action; The first operation is used to instruct the electronic device to update the display of the first content.

4. The method according to any one of claims 1-3, characterized in that, Before the electronic device updates and displays the first content, the method further includes: The electronic device acquires first information, the first information including the display position of the first selection control in the first user interface; The electronic device sends second information to the second node through the first node, and the second information includes one or more of the following: the shape of the first selection control and the size of the first selection control; The electronic device draws the first selection control on the second node based on the first information and the second information; Wherein, the first node is the node corresponding to the first selection control, the second node is the node used to draw the first selection control, and the second node is at a higher level than the first node.

5. The method according to claim 4, characterized in that, Before the electronic device acquires the first information, the method further includes: The electronic device creates the second node on the third node and associates the second node with the fourth node; wherein the fourth node is the node corresponding to the first content, and the third node is at a higher level than the fourth node; The electronic device acquires the first information, specifically including: The electronic device converts the first coordinate data to obtain the first information; wherein the first coordinate data is the coordinate data of the first selection control generated by the fourth node.

6. The method according to claim 5, characterized in that, Before the electronic device converts the first coordinate data to obtain the first information, the method further includes: The electronic device sends third information to the second node through the fourth node, the third information including the size of the display area of ​​the first content in the first user interface; The electronic device converts the first coordinate data to obtain the first information, specifically including: The electronic device obtains the first information based on the third information and the first coordinate data.

7. The method according to claim 5 or 6, characterized in that, Before the electronic device creates the second node on the third node, the method further includes: The electronic device determines that the third node satisfies the first condition; The first condition is that the available drawing space of the third node is greater than or equal to the space used to draw the first selection control.

8. The method according to claim 7, characterized in that, The electronic device determines that the third node satisfies the first condition, specifically including: The electronic device determines that the clip property of the component corresponding to the third node is false.

9. The method according to claim 7 or 8, characterized in that, Before the electronic device determines that the third node satisfies the first condition, the method further includes: The electronic device determines that the fourth node does not meet the first condition.

10. The method according to claim 9, characterized in that, The electronic device determines that the fourth node does not meet the first condition, specifically including: The electronic device determines that the clip property of the component corresponding to the fourth node is true.

11. An electronic device, characterized in that, The electronic device includes one or more processors and one or more memories; wherein the one or more memories are coupled to the one or more processors, and the one or more memories are used to store computer program code, the computer program code including computer instructions, which, when executed by the one or more processors, cause the electronic device to perform the method as described in any one of claims 1-10.

12. A computer storage medium, characterized in that, The computer storage medium stores a computer program, which includes program instructions that, when executed on an electronic device, cause the electronic device to perform the method as described in any one of claims 1-10.

13. A computer program product, when run on a computer, causes the computer to perform the method as described in any one of claims 1-10.

Images