Display method and terminal equipment

Abstract

The invention relates to the technical field of terminals, and discloses a display method and terminal equipment. In the method, when the terminal equipment detects that a display interface needs to be refreshed, an operating system draws the interface needing to be displayed; wherein the operating system draws various elements on the interface generally based on a multi-way tree structure. On the basis, when a first element in the interface is provided with the shadow, setting a root element of the interface as a parent element of the shadow, or setting an element between the root element of the interface and the parent element of the first element as the parent element of the shadow; wherein the parent element of the first element is not the root element of the interface. In this way, the shadow of the element is not limited by the size of the parent element of the first element.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of terminal technology, and in particular, to a display method and a terminal device. Background Art

[0002] With the popularization of terminal devices, interfaces that can realize various functions can be displayed to users. In the interface displayed by the terminal device, it can be divided into two parts, one part is the background part of the interface, such as the wallpaper of the desktop interface, the solid color background of the application interface, etc.; the other part is the elements that can realize various functions, such as service cards, desktop widgets (widgets) and other components, icons, dialog boxes, etc. In some scenarios, the layering, three-dimensional and spatial sense in the display interface can be increased by setting shadows for the elements, so that the elements can be distinguished from the background.

[0003] Currently, when setting a shadow for an element, the shadow and the element are drawn together in the same parent element (that is, in the element's container). In this way, not only the display size of the element is limited by the container size, but also the display size of the visible part of the shadow is limited by the container size. Therefore, the shadow set for the element may have a truncated display problem. Summary of the invention

[0004] The embodiments of the present application provide a display method and a terminal device, which are used to implement a display size of a shadow set for an element without being limited by the size of the element's parent element.

[0005] In the first aspect, an embodiment of the present application provides a display method. In the method, in response to a first interface refresh signal, the shadow of a first element included on a first interface to be displayed is determined; based on the shadow of the first element, the first interface is displayed, and the first interface includes the first element and the visible part of the shadow, and the visible part of the shadow is obtained based on the shadow of the first element. Among them, the parent element of the first element is the second element, and the second element is a visible element or a non-visible element; the parent element of the shadow is a third element, and the third element is the root element of the first interface, or an element between the second element and the root element, and the second element is different from the root element, that is, the second element is not the root element. Among them, the third element can also be a visible element or a non-visible element.

[0006] In this method, by drawing the shadow of the first element in a container larger than the container of the first element, it can be achieved that the container of the first element does not restrict the display of the shadow of the first element. Among them, the larger container is, for example, the root element of the interface. The root element is the largest element in the first interface, and the display integrity of the shadow of the first element can be improved.

[0007] The parent element of the shadow can be determined by, but not limited to, the following:

[0008] (1) Default setting. For example, the operating system of the terminal device may set the parent element of the shadow to be the root element of the first interface or an element between the root element and the parent element of the first element by default.

[0009] (2) Random selection: For example, the operating system of the terminal device may randomly select an element from the root element of the first interface or an element between the root element and the parent element of the first element as the parent element of the shadow.

[0010] (3) Comparison and determination. For example, the operating system of the terminal device can determine, based on the root element of the first interface and the elements between the root element and the parent element of the first element, the element whose area can cover the area of ​​the shadow by comparing the area of ​​the element with the area of ​​the shadow, as the parent element of the shadow.

[0011] Considering that the shadow of an element is drawn outside the element's container, the surrounding elements of the element may interfere with the display of the element's shadow. Based on this, there are at least two ways to draw the visible part of the element's shadow:

[0012] Method A: Determine the outline of the visible part of the shadow, and draw the visible part of the shadow based on the outline. The visible part of the element may be the entire shadow or a partial shadow. For example, the partial shadow may be the remaining shadow except the overlapping area with the first element, or the remaining shadow except the overlapping area with the first element and surrounding elements.

[0013] In a possible design, the first interface also includes a fourth element; wherein the display area of ​​the fourth element has an overlapping area with the display area of ​​the shadow. The display of the first interface based on the shadow of the first element includes: the visible part of the shadow is obtained based on the shadow of the first element and the fourth element; wherein the display area of ​​the visible part of the shadow does not have an overlapping area with the display area of ​​the fourth element. It should be noted that the fourth element may be one or more. Exemplarily, the overlapping area can be determined by the pixel position. For example, if the display area of ​​the fourth element has the same pixel position as the display area of ​​the shadow, it is determined that there is an overlapping area.

[0014] In this example, by screening out the elements in the first interface that have a display intersection with the shadow, the outline of the actually displayed shadow can be determined more accurately, thereby reducing the possibility that the display of the shadow will interfere with the display of the surrounding elements of the first element.

[0015] In another possible design, the display area of ​​the fourth element and the display area of ​​the shadow not only have an overlapping area; the three-dimensional height of the fourth element is greater than the three-dimensional height of the first element.

[0016] In this design, based on screening out one or more elements in the first interface that have a display intersection with the shadow, the occlusion relationship can be further determined according to the physical optical characteristics, that is, a fourth element that will occlude the first element is further screened out from the one or more elements. In this way, not only can the display interference of the shadow display on the surrounding elements of the first element be reduced, but the occlusion relationship between the surrounding elements and the shadow of the first element can also be reflected, thereby improving the display effect of the shadow.

[0017] Based on the fourth element obtained by the above possible design screening, the first interface is displayed based on the shadow of the first element, which can be implemented as determining the outline of the visible part of the shadow based on the shadow of the first element, the first element and the fourth element; displaying the first interface; wherein the visible part of the shadow is obtained according to the outline.

[0018] In this design, the terminal device can determine the outline of the shadow actually displayed, and then draw the shadow based on the outline, so as to ensure the complete display of the shadow, and the shadow drawn is the shadow that can be actually displayed. In addition, the outline determined by this method can also take into account the influence of the surrounding elements of the element on the display of the shadow, so as to reduce the display interference of the surrounding elements.

[0019] Method B: By setting the drawing order between the element, the surrounding elements, and the element's shadow, the visible part of the shadow can be determined.

[0020] In a possible design, the first interface further includes a fourth element; wherein the display area of ​​the fourth element and the display area of ​​the shadow have an overlapping area. Displaying the first interface based on the shadow of the first element includes the following steps performed in sequence: drawing the shadow of the first element on the first interface; drawing the first element and the fourth element on the first interface; and displaying the drawn first interface. It should be noted that the fourth element may be one or more.

[0021] Exemplarily, the overlapping area can be determined by pixel position. For example, if the display area of ​​the fourth element and the display area of ​​the shadow have the same pixel position, it is determined that there is an overlapping area.

[0022] It is understandable that in this design, the drawing order between the first element and the fourth element may not be limited. For example, the first element and the fourth element may be an original drawing order determined based on a layout file, etc. The operating system of the terminal device will not change the original drawing order of the first element and the fourth element, thereby reducing display interference with the original layout.

[0023] In this design, the terminal device screens out one or more fourth elements in the first interface that have a display intersection with the shadow, and sets the drawing order of the shadow of the first element to be before the first element and the fourth element. This can not only ensure the accurate display of the shadow of the first element, but also ensure the accurate display of the first element and the surrounding elements of the first element, and can also reduce the possibility that the display of the shadow will interfere with the display of the surrounding elements of the first element.

[0024] In another possible design, the first interface also includes a fifth element; there is an overlapping area between the display area of ​​the fifth element and the display area of ​​the shadow, and the three-dimensional height of the fifth element is less than or equal to the three-dimensional height of the first element; before drawing the shadow of the first element on the first interface, the method also includes: drawing the fifth element.

[0025] In this design, based on screening out one or more elements in the first interface that have a display intersection with the shadow, the occlusion relationship can be further determined based on the physical optical characteristics, that is, a fifth element that will occlude the first element is further screened out from the one or more elements. In this way, not only can the accurate display of the first element and its shadow, and the surrounding elements of the first element be guaranteed, but also the occlusion relationship between the surrounding elements and the shadow of the first element can be reflected, thereby improving the display effect of the shadow.

[0026] Exemplarily, drawing the first element and the fourth element on the first interface includes the following steps performed in sequence: drawing the first element on the first interface; drawing the fourth element on the first interface. In this example, in the process of drawing the first interface, if the three-dimensional height between the elements is considered, it can be considered to first draw the first element with a lower three-dimensional height, and then draw the fourth element with a higher three-dimensional height, so as to ensure the display accuracy of the occlusion relationship between the elements.

[0027] In the above various possible designs, the first interface is the desktop interface, lock screen interface, or APP interface of the terminal device. In this design, the display method provided by the present application can be applied to various possible scenarios, while improving the three-dimensionality of the interface through the shadow of the element, and improving the display integrity of the shadow of the element.

[0028] In a second aspect, the present application provides a terminal device, the terminal device includes multiple functional modules; the multiple functional modules interact with each other to implement the method performed by the terminal device in any of the above aspects and its embodiments. The multiple functional modules can be implemented based on software, hardware, or a combination of software and hardware, and the multiple functional modules can be arbitrarily combined or divided based on specific implementations.

[0029] In a third aspect, the present application provides a terminal device, comprising at least one processor and at least one memory, wherein the at least one memory stores computer program instructions, and when the terminal device is running, the at least one processor executes the method executed by the terminal device in any of the above aspects and its various embodiments.

[0030] In a fourth aspect, the present application also provides a computer-readable storage medium, in which a computer program is stored. When the computer program is executed by a computer, the computer executes any one of the above aspects and its possible methods for designing a terminal device to execute.

[0031] In a fifth aspect, the present application provides a computer program product, which includes: a computer program (also referred to as code, or instructions), which, when executed, enables a computer to execute any of the above aspects and possible methods of designing a terminal device.

[0032] In the sixth aspect, an embodiment of the present application also provides a graphical user interface on a terminal device, the terminal device having a display screen, one or more memories, and one or more processors, the one or more processors being used to execute one or more computer programs stored in the one or more memories, the graphical user interface including a graphical user interface displayed when the terminal device executes any of the above aspects and their possible designs.

[0033] In a seventh aspect, the present application also provides a chip, which is used to read a computer program stored in a memory and execute any of the above aspects and possible methods designed to be executed by a terminal device.

[0034] In an eighth aspect, the present application further provides a chip system, which includes a processor for supporting a computer device to implement any of the above aspects and methods for execution of each possible design terminal device. In one possible design, the chip system also includes a memory, which is used to store programs and data necessary for the computer device. The chip system can be composed of a chip, or it can include a chip and other discrete devices.

[0035] For the beneficial effects of any aspect from the second to the eighth aspect and its possible designs, please refer to the beneficial effects of the various possible designs in the first aspect, which will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] Figure 1A A schematic diagram of a UI on a terminal device;

[0037] Figure 1B A schematic diagram of a container;

[0038] Figure 1C It is a schematic diagram for drawing elements based on containers;

[0039] Figure 2 A schematic diagram of the hardware structure of a possible terminal device provided in an embodiment of the present application;

[0040] Figure 3 A software architecture block diagram of a terminal device provided in an embodiment of the present application;

[0041] Figure 4 One of the schematic diagrams of a display method provided in an embodiment of the present application;

[0042] Figure 5A A second schematic diagram of a display method provided in an embodiment of the present application;

[0043] Figure 5B A third schematic diagram of a display method provided in an embodiment of the present application;

[0044] Fig. 6A A fourth schematic diagram of a display method provided in an embodiment of the present application;

[0045] Figure 6B A fifth schematic diagram of a display method provided in an embodiment of the present application;

[0046] Fig. 7A A sixth schematic diagram of a display method provided in an embodiment of the present application;

[0047] Figure 7B A seventh schematic diagram of a display method provided in an embodiment of the present application;

[0048] Figure 8 An interface schematic diagram of a display method provided in an embodiment of the present application;

[0049] Fig.9A One of the flow charts of a display method provided in an embodiment of the present application;

[0050] Fig. 9B A second flow chart of a display method provided in an embodiment of the present application;

[0051] Fig.10A third flow chart of a display method provided in an embodiment of the present application. DETAILED DESCRIPTION

[0052] The embodiments of the present application will be described in detail below with reference to the accompanying drawings.

[0053] The embodiments of the present application can be applied to the field of terminal technology, and specifically to the scenario of displaying a user interface (UI) on a terminal device. The UI displayed on the terminal device generally includes a background part and display elements (hereinafter referred to as "elements") that can realize various functions. In some scenarios, the elements can be distinguished from the background part by setting shadows for the elements to increase the sense of hierarchy, three-dimensionality and space in the UI. For example, Figure 1A A schematic diagram of a UI on a terminal device.

[0054] For example, Figure 1A The interface 101 in the figure shows a video editing application (application, APP). The interface 101 may include at least a "settings" button 101A; and, in order to highlight the three-dimensional sense of the "settings" button 101A, a shadow 101B may be added to the "settings" button 101A, so that the "settings" button 101A can be highlighted in the background 101C.

[0055] Another exemplary example, Figure 1A The interface 102 in FIG. 1 is a memo APP. The interface 102 may include at least a button 102A; and, in order to highlight the layering of 102A, a shadow 102B may be added to the button 102A, so that the button 102A can be highlighted in the background 102C.

[0056] Another example, Figure 1A The interface 103 in the figure shows a wallet APP. The interface 103 may include at least a bank card 103A; and, in order to highlight the layering of 103A, a shadow 103B may be added to the bank card 103A, so that the bank card 103A can be highlighted in the background 103C.

[0057] pass Figure 1A As shown in the content, it can be understood that when the terminal device displays the UI, it can add shadows to some elements. In addition, the type of element is not limited, for example, it can be a button, a bank card, an icon, etc.; the type of shadow is not limited, for example, it can be the same as the shape of the element, or it can be different from the shape of the element.

[0058] For ease of understanding, the technical terms that may be involved in the embodiments of the present application are explained below:

[0059] (1) Multi-branch tree structure

[0060] When drawing a UI, the terminal device can generally build the UI based on a multi-branch tree structure. It can be understood that the multi-branch tree structure can include at least a root node, one or more child nodes, and one or more leaf nodes connected to the child nodes. The various elements included in the UI can correspond to the various nodes in the multi-branch tree structure. For example, the corresponding element on the root node can be understood as the root element, and the root element can be used as the parent element of the element corresponding to the child node. In this way, by drawing the elements in the UI in a hierarchical manner, the accuracy, clarity and orderliness of the UI can be guaranteed, which can help users better understand and use the UI.

[0061] by Figure 1A As an example, the largest display interface of the video editing APP (also known as interface 101) can be used as the root node of the multi-branch tree structure, and can also be called the root element of interface 101; the search box included in interface 101 can be used as the child node 1 of the multi-branch tree structure; the search icon and text further included in the search box can be used as the leaf node 1 of the multi-branch tree structure. Among them, the leaf node 1 is connected to the child node 1, which can also be understood as the search box being the parent element of the search icon and text.

[0062] (2) Container

[0063] Each level node in the multi-branch tree structure can be understood as a "container" of the adjacent next level nodes. For example, the root node can be understood as a container of adjacent child nodes; and the child node can be understood as a container of adjacent leaf nodes.

[0064] It should be noted that the elements corresponding to some child nodes may be invisible elements.

[0065] For example, the container where the "Settings" button 101A in the interface 101 is located is an invisible element. At this time, the container can be used as a child node 2 of a multi-branch tree structure; the "Settings" button 101A and its corresponding shadow can be used as leaf nodes 2 and 3; wherein leaf nodes 2 and 3 are connected to child node 2.

[0066] For ease of understanding, Figure 1B 1 is a schematic diagram of a container. For example, the container to which the "settings" button 101A in the interface 101 belongs is shown as container 101D, and the container to which the button 102A in the interface 102 belongs is shown as container 102D, and the container to which the bank card 103A in the interface 103 belongs is shown as container 103D. It can be understood that Figure 1B The middle container 101D, the container 102D and the container 103D are only for the convenience of understanding and are invisible elements in the actual display interface.

[0067] To draw Figure 1A As an example, the "Settings" button 101A and its shadow 101B in FIG. Figure 1C It is a flow chart based on container drawing elements. Figure 1C In the container 101D shown in FIG. 1 , the display size and display position of the “settings” button 101A can be set based on the container 101D. The size of the “settings” button 101A is smaller than or equal to the size of the container 101D, so that it can be fully displayed in the container 101D. In addition, the display position of the “settings” button 101A belongs to the area of ​​the container 101D, for example, it can be displayed in the center, on the left, or on the right of the container 101D.

[0068] First, based on the fact that the "Settings" button 101A is set with a shadow, a shadow is drawn in the container 101D, as shown in 101D1; wherein the size of the shadow may depend on the size of the "Settings" button 101A and the position of the light source set by default on the terminal device, and the size of the shadow is usually larger than the size of the "Settings" button 101A.

[0069] Based on the shadow drawn in the container 101D, the "Settings" button 101A continues to be drawn, as shown in 101D2. It can be understood that the "Settings" button 101A and its shadow can be used as elements corresponding to the next-level node (which can be understood as a "leaf node") connected to the container 101D, so the display of the "Settings" button 101A and its shadow will be limited by the size of the container 101D; in other words, the "Settings" button 101A and its shadow belong to the container 101D. It can also be understood that when the size of the shadow is larger than the size of the container, the shadow may have a truncated display problem; for example, as shown in 101D3, it can be seen that the actual displayed shadow size is smaller than the original size of the shadow shown in 101D1. In addition, the shadow and the "Settings" button 101A can be displayed in the center, left, upper left corner, etc. in the container 101D, and this application does not limit this.

[0070] In view of this, a display method is provided in an embodiment of the present application. In this method, the shadow of an element is drawn outside the container where the element is located, so that the integrity of the shadow display can be improved. Exemplarily, the container where the element is located is child node 2, and the container where the shadow of the element is located can be set to child node 3 or the root node. In this way, the display of the shadow will not be limited by the size of the container where the element is located.

[0071] In an optional embodiment, considering that the shadow is drawn outside the container where the element is located, the shadow may have a display impact on the surrounding elements. In the method provided by the present application, the terminal device can also consider the relationship between the display position of the shadow and the surrounding elements, determine the outline of the shadow area that can be actually displayed, and then draw the shadow area that can be actually displayed based on the determined outline. In this way, the shadow area of ​​the element will not have a display impact on the surrounding elements.

[0072] In addition, in this method, when determining the outline of the shadow area that can be actually displayed, the terminal device can also combine the three-dimensional height (elevation) of the element, consider the occlusion relationship between the elements, and then determine the outline of the shadow area that is actually displayed based on the surrounding elements that have an occlusion on the element and have a display position relationship. In this way, the shadow area that can be actually displayed drawn based on the determined outline can obtain a more realistic shadow display effect; wherein the elevation of the element can be understood as the size information of the element perpendicular to the screen. Alternatively, the occlusion relationship between the elements can also be determined in combination with the user operation, so that the display effect can be more in line with the user operation.

[0073] In another optional embodiment, considering that the shadow is drawn outside the container where the element is located, the shadow may have a display impact on the surrounding elements. In the method provided by the present application, the terminal device can also set the drawing order of the element, the shadow of the element, and the surrounding elements, and through the arrangement of the drawing order, the shadow area of ​​the element can be accurately displayed without causing a display impact on the surrounding elements. For example, it can be considered to draw the shadow of the element first, and then draw the element and the surrounding elements, so that the display shadow of the surrounding elements can be avoided by drawing the element and the surrounding elements later.

[0074] In addition, similar to the previous embodiment, the occlusion relationship between elements can also be considered in this embodiment. In the scenario where the surrounding elements will not obstruct the shadow of the element, it can be considered to first draw the surrounding elements that do not cause occlusion, then draw the shadow of the element, and finally draw the element and the surrounding elements that cause occlusion. In this way, the shadow area of ​​the element can be accurately displayed by arranging the drawing order.

[0075] The technical solution in the embodiments of the present application can be applied to terminal devices, and the terminal device can be any device that can display elements. For example, the terminal device can be a terminal device such as a mobile phone, a tablet computer, a wearable device (e.g., a watch, a bracelet, etc.), a vehicle-mounted device, an augmented reality (AR) / virtual reality (VR) device, a laptop computer, an ultra-mobile personal computer (UMPC), a netbook, a personal digital assistant (PDA), a smart home device (e.g., a smart TV, etc.) that can display a UI. It is understandable that the embodiments of the present application do not impose any restrictions on the specific type of the terminal device.

[0076] The terminal device to which the embodiments of the present application can be applied includes but is not limited to a terminal device equipped with Or terminal devices of other operating systems. The terminal device may be, for example, the terminal device introduced in the above embodiments.

[0077] Figure 2 FIG. 2 shows a possible hardware structure diagram of a terminal device. The terminal device 200 includes: a radio frequency (RF) circuit 210, a power supply 220, a processor 230, a memory 240, an input unit 250, a display unit 260, an audio circuit 270, a communication interface 280, and a Wi-Fi module 290. Those skilled in the art will understand that Figure 2 The hardware structure of the terminal device 200 shown in the figure does not constitute a limitation on the terminal device 200. The terminal device 200 provided in the embodiment of the present application may include more or fewer components than those shown in the figure, may combine two or more components, or may have different component configurations. Figure 2 The various components shown in the EMBODIMENTS 2000 may be implemented in hardware, software, or a combination of hardware and software, including one or more signal processing and / or application specific integrated circuits.

[0078] Combine the following Figure 2 The components of the terminal device 200 are described in detail:

[0079] The RF circuit 210 can be used for receiving and sending data during communication or calls. In particular, after receiving downlink data from the base station, the RF circuit 210 sends it to the processor 230 for processing; in addition, the uplink data to be sent is sent to the base station. Generally, the RF circuit 210 includes but is not limited to an antenna, at least one amplifier, a transceiver, a coupler, a low noise amplifier (LNA), a duplexer, etc.

[0080] In addition, the RF circuit 210 can also communicate with other devices through a wireless communication network. The wireless communication can use any communication standard or protocol, including but not limited to global system of mobile communication (GSM), general packet radio service (GPRS), code division multiple access (CDMA), wideband code division multiple access (WCDMA), long term evolution (LTE), email, short messaging service (SMS), etc.

[0081] Wi-Fi technology is a short-range wireless transmission technology. The terminal device 200 can connect to an access point (AP) through the Wi-Fi module 290 to access the data network. The Wi-Fi module 290 can be used for receiving and sending data during the communication process.

[0082] The terminal device 200 can be physically connected to other devices through the communication interface 280. Optionally, the communication interface 280 is connected to the communication interface of the other device through a cable to achieve data transmission between the terminal device 200 and the other device.

[0083] The terminal device 200 can also implement communication services and interact with other terminal devices, so the terminal device 200 needs to have a data transmission function, that is, the terminal device 200 needs to include a communication module. Figure 2 Communication modules such as the RF circuit 210, the Wi-Fi module 290, and the communication interface 280 are shown, but it is understandable that at least one of the above components or other communication modules (such as a Bluetooth module) for implementing communication exist in the terminal device 200 to perform data transmission.

[0084] For example, when the terminal device 200 is a mobile phone, the terminal device 200 may include the RF circuit 210, and may also include the Wi-Fi module 290, or may include a Bluetooth module ( Figure 2 When the terminal device 200 is a tablet computer, the terminal device 200 may include the Wi-Fi module, or may include a Bluetooth module ( Figure 2 When the terminal device 200 is a smart home device, the terminal device 200 may include the Wi-Fi module 290, or may include a Bluetooth module ( Figure 2 not shown).

[0085] The memory 240 can be used to store software programs and modules. The processor 230 executes various functional applications and data processing of the terminal device 200 by running the software programs and modules stored in the memory 240. Optionally, the memory 240 may mainly include a program storage area and a data storage area. Among them, the program storage area can store an operating system (mainly including software programs or modules corresponding to the kernel layer, system layer, application framework layer, and application layer, etc.).

[0086] In addition, the memory 240 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other volatile solid-state storage devices.

[0087] The input unit 250 can be used to receive the editing operations of various different types of data objects such as digital or character information input by the user, and generate key signal input related to the user settings and function control of the terminal device 200. Optionally, the input unit 250 can include a touch panel 251 and other input devices 252.

[0088] The touch panel 251, also called a touch screen, can collect the user's touch operations on or near it (such as the user's operation on or near the touch panel 251 using a finger, a stylus, or any other suitable object or accessory), and drive the corresponding connection device according to a pre-set program. In the embodiment of the present application, the touch panel 251 can collect the user's operations on or near it; for example, when the terminal device 200 is a mobile phone, the user operation can be used for the user's click operation, long press operation, double-click operation, etc. on the element on the UI.

[0089] Optionally, the other input devices 252 may include, but are not limited to, one or more of a physical keyboard, function keys (such as a volume control button, a switch button, etc.), a trackball, a mouse, a joystick, etc.

[0090] The display unit 260 can be used to display information input by the user or information provided to the user and various menus of the terminal device 200. The display unit 260 is the display system of the terminal device 200, which is used to present an interface and realize human-computer interaction. The display unit 260 may include a display panel 261. Optionally, the display panel 261 may be configured in the form of a liquid crystal display (LCD), an organic light-emitting diode (OLED), etc. In the embodiment of the present application, the display unit 260 can be used to display a UI, and the UI may include elements or shadows set for elements.

[0091] The processor 230 is the control center of the terminal device 200, and uses various interfaces and lines to connect various components, and executes various functions and processes data of the terminal device 200 by running or executing software programs and / or modules stored in the memory 240, and calling data stored in the memory 240, so as to realize various services based on the terminal device 200. In the embodiment of the present application, the processor 230 can be used to implement the method provided in the embodiment of the present application.

[0092] The terminal device 200 also includes a power supply 220 (such as a battery) for supplying power to various components. Optionally, the power supply 220 can be logically connected to the processor 230 through a power management system, so that the power management system can manage functions such as charging, discharging, and power consumption.

[0093] like Figure 2 As shown, the terminal device 200 also includes an audio circuit 270, a microphone 271 and a speaker 272, which can provide an audio interface between the user and the terminal device 200. The audio circuit 270 can be used to convert audio data into a signal that can be recognized by the speaker 272, and transmit the signal to the speaker 272, which is converted into a sound signal and output by the speaker 272. The microphone 271 is used to collect external sound signals (such as the sound of a person speaking, or other sounds, etc.), and convert the collected external sound signals into signals that can be recognized by the audio circuit 270, and send them to the audio circuit 270. The audio circuit 270 can also be used to convert the signal sent by the microphone 271 into audio data, and then output the audio data to the RF circuit 210 to send it to, for example, another terminal device, or output the audio data to the memory 240 for subsequent further processing.

[0094] Although not shown, the terminal device 200 may also include a camera, at least one sensor, etc., which will not be described in detail herein. The at least one sensor may include but is not limited to a pressure sensor, an air pressure sensor, an acceleration sensor, a distance sensor, a fingerprint sensor, a touch sensor, a temperature sensor, etc.

[0095] The operating system (OS) involved in the embodiment of the present application is the most basic system software running on the terminal device 200. The software system of the terminal device 200 can adopt a layered architecture, an event-driven architecture, a micro-kernel architecture, a micro-service architecture, or a cloud architecture. The embodiment of the present application takes an operating system adopting a layered architecture as an example to illustrate the software architecture of the terminal device 200.

[0096] Figure 3 A software architecture block diagram of a terminal device provided in an embodiment of the present application. Figure 3 As shown, the software architecture of the terminal device can be a layered architecture, for example, the software can be divided into several layers, each layer has a clear role and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the operating system is divided into five layers, from top to bottom, namely, the application layer, the application framework layer (framework, FWK), the runtime and system library, the kernel layer, and the hardware layer.

[0097] The application layer can include a series of application packages. Figure 3 As shown, the application layer may include UI, camera, settings, skin module, third-party applications, etc. Among them, the third-party applications may include, for example, wireless local area network (WLAN), music, calls, Bluetooth, videos, etc. Among them, in the application layer, the UI may also be defined according to the system interface, including the properties of the elements and the shadows of the elements.

[0098] In one possible implementation, applications can be developed using the Java language by calling the application programming interface (API) provided by the application framework layer. Developers can interact with the bottom layer of the operating system (such as the hardware layer, kernel layer, etc.) through the application framework layer to develop their own applications. The application framework layer is mainly a series of services and management systems of the operating system.

[0099] The application framework layer provides application programming interfaces and programming frameworks for applications in the application layer. The application framework layer includes some predefined functions. Figure 3As shown, the application framework layer may include a view system, an activity manager, a window manager, a content provider, a phone manager, a resource manager, a notification manager, etc. In the embodiment of the present application, through the view system of the application framework layer, the attribute definition of the elements included in the UI and the shadows of the elements can be converted into a call instruction to the two-dimensional graphics engine included in the system layer; wherein the call instruction can be used to provide rendering services.

[0100] The activity manager is used to manage the life cycle of each application and provide common navigation back functions, providing an interactive interface for all program windows.

[0101] The window manager is used to manage window programs. The window manager can obtain the display screen size, determine whether there is a status bar, lock the screen, capture the screen, etc. The content provider is used to store and obtain data and make the data accessible to applications. The data may include video, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.

[0102] The view system includes visible controls (also called "visual elements") and invisible controls (also called "invisible elements"), such as controls that display text and controls that display images. The view system can be used to build applications. The display interface can be composed of one or more views. For example, the display interface including the SMS notification icon can include a view that displays text and a view that displays images.

[0103] The phone manager is used to provide communication functions for terminal devices, such as the management of call status (including answering, hanging up, etc.).

[0104] The resource manager provides various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.

[0105] The notification manager enables applications to display notification information in the status bar. It can be used to convey notification-type messages and can disappear automatically after a short stay without user interaction. For example, the notification manager is used to notify download completion, message reminders, etc. The notification manager can also be a notification that appears in the system top status bar in the form of a chart or scroll bar text, such as notifications of applications running in the background, or a notification that appears on the screen in the form of a dialog window. For example, a text message is displayed in the status bar, a prompt sound is emitted, the terminal device vibrates, the indicator light flashes, etc.

[0106] The runtime includes the core library and the virtual machine. The runtime is responsible for the scheduling and management of the operating system.

[0107] The core library consists of two parts: one is the function that the Java language needs to call, and the other is the core library of the operating system. The application layer and the application framework layer run in the virtual machine. The virtual machine executes the Java files of the application layer and the application framework layer as binary files. The virtual machine is used to perform object life cycle management, stack management, thread management, security and exception management, and garbage collection.

[0108] The system library may include multiple functional modules, such as a surface manager, a media framework, a 3D graphics processing library (such as OpenGL ES), a 2D graphics engine (such as SGL), etc.

[0109] The surface manager is used to manage the display subsystem and provide the fusion of 2D and 3D layers for multiple applications.

[0110] The media framework supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc. The media framework can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.

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

[0112] The 2D graphics engine is a drawing engine for 2D drawing. The 2D graphics engine can perform drawing operations and draw elements included in the UI and shadows of the elements on the screen.

[0113] In some embodiments, a three-dimensional graphics processing library may be used to draw a three-dimensional motion trajectory image, and a two-dimensional graphics engine may be used to draw a two-dimensional motion trajectory image.

[0114] The kernel layer is the layer between hardware and software. The kernel layer contains at least display driver, camera driver, audio driver, and sensor driver.

[0115] The hardware layer can include various types of sensors, such as accelerometers, gravity sensors, touch sensors, etc.

[0116] Usually, the terminal device 200 can run multiple applications at the same time. In a simpler way, one application can correspond to one process, and in a more complex way, one application can correspond to multiple processes. Each process has a process number (process ID).

[0117] It should be understood that in the embodiments of the present application, "at least one of the following" or similar expressions refer to any combination of these items, including any combination of single items or plural items. For example, at least one of a, b or c can represent: a, b, c, a and b, a and c, b and c, or a, b and c, where a, b, c can be single or multiple. "Multiple" refers to two or more. "And / or" is used to describe the association relationship of associated objects, indicating that three relationships can exist. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone, where A and B can be singular or plural. The character " / " generally indicates that the previous and next associated objects are in an "or" relationship.

[0118] In addition, it should be understood that, in the description of this application, words such as "first" and "second" are only used for the purpose of distinguishing the description, and cannot be understood as indicating or implying relative importance, nor can they be understood as indicating or implying an order.

[0119] It should be understood that the hardware structure of the terminal device can be as follows Figure 2 As shown, the software system architecture can be Figure 3 As shown, the software programs and / or modules corresponding to the software system architecture in the terminal device can be stored in the memory 240, and the processor 230 can run the software programs and applications stored in the memory 240 to execute the process of a display method provided in an embodiment of the present application.

[0120] In order to facilitate understanding of a display method provided by the present application, the following Figures 4 to 9B The content shown in the foregoing describes the implementation process of the method provided by the present application. For ease of understanding, the following first introduces several possible application scenarios that may be involved in the method provided by the present application.

[0121] Scenario A: Taking setting a shadow for element 1 on the UI displayed on the terminal device as an example, the terminal device can determine the shadow area of ​​Element 1.

[0122] Optionally, the terminal device may calculate the shadow of element 1 according to the elevation of element 1. For example, Figure 4 A schematic diagram of a display method provided in an embodiment of the present application is shown in FIG. Figure 4 As shown in 400A in FIG. 1 , the terminal device can obtain the width, height, and elevation of element 1 from the element attributes of element 1; wherein the width and height of element 1 can be used to determine the size of element 1. Figure 4As shown in 400B, the terminal device obtains the elevation of element 1, and can also obtain the light source information of the terminal device's default setting, so that the shadow of element 1 can be calculated based on the elevation and light source information of element 1 combined with the physical optical characteristics.

[0123] Alternatively, the terminal device may also read the shadow of element 1 from the element attributes of element 1. In other words, the shadow of element 1 is preset by the UI developer and stored in the element attributes of element 1.

[0124] Based on the obtained shadow of element 1, element 1 and its shadow may be drawn in the following manner:

[0125] Mode A-1: ​​The terminal device may determine the display outline of the actually displayed shadow (also referred to as the "visible portion of the shadow") based on the size of the shadow and the size of the element 1, for example, Figure 5A The display outline shown in the interface 501 in FIG. 5 . It can be seen from the interface 501 that the display outline of the shadow actually displayed can be determined by the outer outline of the shadow and the outer outline of the element.

[0126] When drawing the UI, the terminal device may draw element 1 based on container 1 corresponding to element 1, for example, it may be displayed as Figure 5A Then, the terminal device can draw the actual displayed shadow on the container 2 based on the display outline of the shadow determined by the interface 501, for example, it can be displayed as Figure 5A Interface 503 shown. Among them, container 2 is different from container 1, and the size of container 2 is greater than or equal to the size of container 1 or the shadow. For example, container 2 can be an interface. It should be noted that container 1 can be understood as the parent node of element 1, which can be a visible element or an invisible element; container 2 can be understood as the parent node of the shadow of element 1, which can be a visible element or an invisible element. In addition, it should be noted that the drawing order between element 1 and the shadow of element 1 is not limited in this method.

[0127] In an optional embodiment, the container 2 can be determined by, but not limited to, the following methods:

[0128] (1) Default setting: For example, the operating system of the terminal device may set the container 2 as the root element of the first interface or an element between the root element and the parent element of the first element by default.

[0129] (2) Random selection: For example, the operating system of the terminal device may randomly select an element as the container 2 from the root element of the first interface or an element between the root element and the parent element of the first element.

[0130] (3) Comparison and determination. For example, the operating system of the terminal device can determine the element whose area can cover the area of ​​the shadow based on the root element of the first interface and the elements between the root element and the parent element of the first element by comparing the area of ​​the element with the area of ​​the shadow, as container 2.

[0131] The determination of the shadow container in the following various methods can refer to the above content, and will not be repeated below.

[0132] from Figure 5A It can be seen that by determining the display outline of the shadow actually displayed and drawing the shadow actually displayed outside the container of the element, it can be achieved that the display of the shadow is not limited by the size of the container of the element.

[0133] Method A-2: The terminal device can also achieve accurate drawing by setting the shadow of element 1 and the drawing order of element 1.

[0134] For example, Figure 5B Another drawing schematic diagram of a display method provided by an embodiment of the present application. The terminal device can draw the shadow of element 1, such as Figure 5B Then, the terminal device draws element 1, as shown in interface 504. Figure 5B As shown in interface 505 in FIG. 1 , the terminal device can accurately display element 1 and the shadow of element 1 by placing the drawing order of the shadow of element 1 before the drawing order of element 1. Moreover, by setting the drawing order, compared with method A-1, there is no need to calculate the display outline of the shadow actually displayed.

[0135] Scenario B: Multiple elements can generally be displayed on a UI. Therefore, when drawing a UI, it is necessary to consider the mutual influence of the display positions of the elements to reduce the display interference between the elements. For example, the display interference can be reduced by making the display positions of the elements or the display positions of the containers where the elements are located not intersecting with each other.

[0136] Based on the embodiment of the present application, the shadow of element 1 is drawn outside the container 1 where element 1 is located, so the container 1 where element 1 is located will not restrict the shadow of element 1. In this way, the shadow of element 1 and the surrounding elements of element 1 may cause display interference. In addition, it can be understood that the method provided in the embodiment of the present application will not adjust the display position of element 1 and the surrounding elements; in other words, when the operating system executes the method provided by the present application, it will not affect the original display layout set in the original properties of element 1 and the surrounding elements.

[0137] Based on the obtained shadow of element 1 and the surrounding elements of element 1, element 1, the shadow of element 1 and the surrounding elements of element 1 may be drawn in the following manner:

[0138] Mode B-1: With regard to the problem that the display of the shadow of element 1 affects the display of surrounding elements, the display impact of visible surrounding elements can also be considered when determining the display outline of the actually displayed shadow; wherein, the visible elements can be understood as elements that can be displayed on the UI, such as Figure 1A The icons, bank cards, texts, etc. in the image are visual elements. Based on this, in the embodiment of the present application, the terminal device may also consider the surrounding elements included in the UI when determining the display outline of the actually displayed shadow.

[0139] For example, Fig. 6A Another schematic diagram of a display method provided by an embodiment of the present application is shown in FIG. Figure 4 The terminal device obtains surrounding elements with overlapping areas with the shadow and obtains a list of associated elements; wherein the list of associated elements includes, for example Fig. 6A Element 2, element 3 and element 4 are shown in interface 601. For example, the terminal device can compare the positions of the pixels included in the shadow with the positions of the pixels included in the surrounding elements; when there are pixels in the same position, they can be determined as surrounding elements with overlapping areas with the shadow, which can also be called "associated elements".

[0140] The terminal device determines the display outline of the shadow actually displayed based on the shadow, element 1 and the associated element list, for example Fig. 6A As shown in interface 602.

[0141] The terminal is set to draw the element 1 based on the container 1 corresponding to the element 1 during the UI drawing process, and draw each associated element based on the container corresponding to each associated element, for example, it can be displayed as Fig. 6A The terminal device may draw the actual displayed shadow on the container 2 based on the display outline of the shadow shown in the interface 602, for example, Fig. 6A Interface 604 shown. Among them, container 2 is different from container 1, and the size of container 2 is greater than or equal to the size of container 1 or the shadow. For example, container 2 can be an interface. It should be noted that container 1 can be understood as the parent node of element 1, which can be a visible element or an invisible element; the container corresponding to each associated element can be understood as the parent node of each associated element, which can be a visible element or an invisible element; container 2 can be understood as the parent node of the shadow of element 1, which can be a visible element or an invisible element. In addition, it should be noted that this method does not limit the drawing order of element 1, the shadow of element 1, and the associated elements.

[0142] from Fig. 6AIt can be seen that by considering the list of associated elements that have overlapping areas with the shadow to determine the display outline of the actually displayed shadow, and drawing the actually displayed shadow outside the container of the element, the display of the element's shadow can be achieved without being limited by the size of the element's container, and the interference of the shadow on the display of other elements can also be reduced.

[0143] Mode B-2: The terminal device can also achieve accurate drawing of the shadow by setting the shadow of element 1 and the drawing order of element 1 and surrounding elements.

[0144] For example, Figure 6B Another drawing schematic diagram of a display method provided by an embodiment of the present application. The terminal device can draw the shadow of element 1, such as Figure 6B Then, the terminal device draws element 1, as shown in interface 605. Figure 6B Then, the terminal device draws the surrounding elements of element 1, and after the drawing is completed, Figure 6B As shown in the middle interface 607. It should be noted that the drawing order between element 1 and the surrounding elements is not limited. For example, the drawing order of element 1 and the surrounding elements can be determined according to the layout file, such as the original drawing order, that is, the operating system will not change the original drawing order of element 1 and the surrounding elements. In this way, the terminal device can accurately display the shadow of element 1 by placing the drawing order of the shadow of element 1 before the drawing order of element 1 and the surrounding elements, and can also reduce the display interference of the surrounding elements of element 1.

[0145] Scenario C: Same as Scenario B, when drawing the shadow of element 1, the terminal device can also consider the display interference between the shadow and the surrounding elements of element 1. The difference from Scenario B is that when drawing the shadow of element 1, the terminal device can not only consider the surrounding elements of element 1, but also consider the occlusion relationship of other elements to the shadow of element 1 based on physical optics.

[0146] Based on the obtained shadow of element 1 and the surrounding elements of element 1, element 1, the shadow of element 1 and the surrounding elements of element 1 may be drawn in the following manner:

[0147] Method C-1: When determining the display outline of the actually displayed shadow, the terminal device may not only consider the surrounding elements of element 1, but also consider the occlusion relationship of the shadow of element 1 by other elements based on physical optics.

[0148] For example, Fig. 7A Another schematic diagram of a display method provided by an embodiment of the present application is shown in FIG. Figure 4 The contents introduced here will not be repeated here. Fig. 6AThe same as the interface 601 in FIG. 1 , the terminal device obtains a list of associated elements having overlapping areas with the shadow, such as the list of associated elements. Fig. 7A Element 2, element 3 and element 4 are shown in interface 701. For example, the terminal device can compare the positions of the pixels included in the shadow with the positions of the pixels included in the element; when there are pixels in the same position, it can be determined as an element having an overlapping area with the shadow.

[0149] Then, the terminal device determines the elevation of each element included in the associated element list. It can be understood that based on the visibility of physical optics, when the height of other objects is higher than the height of the object, other objects will not be blocked by the shadow of the object; and when the height of other objects is lower than the height of the object, other objects may be blocked by the shadow of the object. Based on this, the terminal device selects elements with elevation higher than the elevation of element 1 from the associated element list. Fig. 7A As shown in interface 701 , the elevation of element 2 is higher than the elevation of element 1 , while the elevations of element 3 and element 4 are lower than the elevation of element 1 .

[0150] The terminal device determines the display outline of the shadow actually displayed based on the shadow, element 1, and element 2 in the associated element list whose elevation is higher than the elevation of element 1, for example Fig. 7A As shown in interface 702.

[0151] The terminal is set to draw the element 1 based on the container 1 corresponding to the element 1 during the UI drawing process, and draw each associated element based on the container corresponding to each associated element, for example, it can be displayed as Fig. 7A Then, the terminal device may draw the actual displayed shadow on the container 2 based on the display outline of the shadow as shown in the interface 702, for example, it may be displayed as Fig. 7A Interface 704 shown. Among them, container 2 is different from container 1, and the size of container 2 is greater than or equal to the size of container 1 or the shadow. For example, container 2 can be an interface. It should be noted that container 1 can be understood as the parent node of element 1, which can be a visible element or an invisible element; the container corresponding to each associated element can be understood as the parent node of each associated element, which can be a visible element or an invisible element; container 2 can be understood as the parent node of the shadow of element 1, which can be a visible element or an invisible element. In addition, it should be noted that this method does not limit the drawing order of element 1, the shadow of element 1, and the associated elements.

[0152] from Fig. 7AIt can be seen that by considering the list of associated elements that have overlapping areas with the shadow, and considering the relationship between the elevation of the elements included in the associated element list and the elevation of element 1, the display outline of the actually displayed shadow is determined, and the actually displayed shadow is drawn outside the container of the element. This not only solves the problem of truncated display due to the limitation of the element's container, but also reduces the interference of the shadow on the display of other elements, and can also display a more realistic shadow display effect.

[0153] Method C-2: The terminal device can also achieve accurate drawing by setting the shadow of element 1, element 1 and the drawing order of surrounding elements.

[0154] For example, Figure 7B Another drawing schematic diagram of a display method provided by an embodiment of the present application. Based on the shadow, element 1 and element 2 in the associated element list whose elevation is higher than that of element 1, the terminal device can first draw elements 3 and 4 whose elevation is not higher than that of element 1, such as Figure 7B As shown in interface 705A and interface 705B in . Optionally, the drawing order between element 3 and element 4 is not limited, for example, the original drawing order set in the layout file can be adopted. Another option is to draw element 3 and element 4 based on the three-dimensional height of element 3 and element 4. For example, if the three-dimensional height of element 3 is greater than the three-dimensional height of element 4, element 3 can be drawn first, and then element 4 can be drawn.

[0155] Then, the terminal device draws the shadow of element 1, such as Figure 7B Then, the terminal device draws element 1 and element 2, as shown in interface 706. Figure 7B As shown in interface 707A and interface 707B in . Optionally, the drawing order between element 1 and element 2 is not limited. For example, the original drawing order set in the layout file can be adopted. Another option is that based on the fact that the stereoscopic height of element 2 is greater than the stereoscopic height of element 1, element 2 can be drawn first, and then element 1. In this way, the terminal device can accurately display the shadow of element 1 by placing the drawing order of elements 3 and 4 before the drawing order of element 1, and placing the drawing order of the shadow of element 1 before the drawing order of elements 1 and element 2. It can also reduce the display interference of the surrounding elements of element 1, and can also consider the occlusion relationship of other elements to the shadow of element 1 based on physical optics.

[0156] In mode C-3, in addition to considering the elevation between elements to determine the occlusion relationship between elements, the terminal device can also determine the occlusion relationship in response to user operations. For example, Figure 8A schematic diagram of an interface of a display method provided in an embodiment of the present application. When the terminal device detects a touch operation on element 801A, the shadow 801B of element 801A can be displayed to increase the layering of element 801A; wherein the touch operation can be, for example, a touch operation, a long press operation, a click operation, a double click operation, etc. In this scenario, other elements will not have an occlusion effect on the shadow 801B of element 801. Referring to the contents introduced in Method C-1 and Method C-2, the drawing of element 801A and its shadow can be achieved based on the occlusion relationship.

[0157] by Fig. 7A The scenarios introduced are used as examples. Fig.9A A flow chart of a display method provided in an embodiment of the present application. The flow chart may include the following steps:

[0158] Step 901: The terminal device obtains the stereoscopic height of a first element. The first element may be, for example, element 1 in the above embodiment.

[0159] Step 902: The terminal device determines the shadow of the first element according to the stereoscopic height.

[0160] Step 903: The terminal device obtains a list of associated elements related to the shadow. The list of associated elements may be, for example, element 2, element 3, and element 4 in the above-mentioned embodiment.

[0161] Step 904: The terminal device selects at least one second element in the associated element list whose stereoscopic height is higher than the stereoscopic height of the first element. The at least one second element may be, for example, element 2 in the above embodiment.

[0162] Based on the shadow of the first element and the list of associated elements obtained in steps 901 to 904 , the following steps 905 to 907 may be used to implement UI drawing, or the following steps 908 to 910 may be used to implement UI drawing.

[0163] Step 905: The terminal device determines a display outline of a visible portion of the shadow according to the shadow, the first element and the at least one second element.

[0164] Step 906: The terminal device draws the first element and the elements included in the associated element list. It can be understood that the terminal device draws the elements based on the containers corresponding to the elements.

[0165] Step 907: The terminal device draws the visible part of the shadow based on the display outline of the visible part of the shadow. The terminal device may draw the shadow outside the container of the first element, for example, on the interface.

[0166] Through the above method, from the operating system side of the terminal device, it is possible to draw a shadow for the element. During the drawing process, the display outline of the actual displayed shadow is determined by considering the element and the visual elements on the UI, and the actual displayed shadow is drawn outside the container of the element, which can solve the problem of the element's container truncating the element's shadow. This method does not require developers to consider the restrictions on the shadow size imposed by the element's container. In addition, this method can also solve the occlusion relationship between elements, so that a more realistic shadow display effect can be obtained.

[0167] Step 908: The terminal device draws at least one third element in the association list except the at least one second element. The at least one third element may be, for example, element 3 and element 4 in the above embodiment.

[0168] Step 909: The terminal device draws the shadow of the element. It can be understood that the terminal device draws the shadow of the element after drawing the third element.

[0169] Step 910: The terminal device draws the first element and the at least one second element. The at least one second element may be, for example, element 2 in the aforementioned embodiment. It is understood that the terminal device draws the shadow of the element before drawing the first element and the at least one second element. In an optional embodiment, based on the fact that the stereoscopic height of the second element is greater than the stereoscopic height of the first element, the terminal device may first draw the at least one second element and then draw the first element.

[0170] Through the above method, from the operating system side of the terminal device, it is possible to draw shadows for elements. During the drawing process, by considering the elements and the visual elements on the UI, the drawing order can be set to ensure that the drawn elements and their shadows have no display impact on the surrounding elements, and the physical occlusion relationship can be reflected, thereby improving the hierarchy and authenticity of the displayed shadows.

[0171] Fig.10 A flow chart of a display method provided in an embodiment of the present application may include the following steps:

[0172] Step 1001: In response to a first interface refresh signal, determine a shadow of a first element included in a first interface to be displayed.

[0173] Step 1002: Based on the shadow of the first element, display a first interface, wherein the first interface includes the first element and the visible part of the shadow, and the visible part of the shadow is obtained based on the shadow of the first element; wherein the parent element of the first element is the second element, and the second element is a visible element or an invisible element; the parent element of the shadow is a third element, and the third element is the root element of the first interface, or an element between the second element and the root element, and the second element is different from the root element.

[0174] Based on the above embodiments, the present application also provides a terminal device, which includes multiple functional modules; the multiple functional modules interact with each other to implement the functions performed by the terminal device in each method described in the embodiments of the present application. The multiple functional modules can be implemented based on software, hardware, or a combination of software and hardware, and the multiple functional modules can be arbitrarily combined or divided based on the specific implementation. Fig.9A In the embodiment shown, the terminal device performs steps 901 to 907, or performs Fig. 9B In the embodiment shown, the terminal device executes steps 901 to 904 and 908 to 910. Alternatively, execute Fig.10 In the illustrated embodiment, the terminal device executes steps 1001 to 1002.

[0175] Based on the above embodiments, the present application further provides a terminal device, which includes at least one processor and at least one memory, wherein the at least one memory stores computer program instructions, and when the terminal device is running, the at least one processor executes the functions executed by the terminal device in each method described in the embodiments of the present application. Fig.9A In the embodiment shown, the terminal device performs steps 901 to 907, or performs Fig. 9B In the embodiment shown, the terminal device executes steps 901 to 904 and 908 to 910. Alternatively, execute Fig.10 In the illustrated embodiment, the terminal device executes steps 1001 to 1002.

[0176] Based on the above embodiments, the present application also provides a computer program product, which includes: a computer program (also referred to as code, or instructions), which enables a computer to execute the methods described in the embodiments of the present application when the computer program is executed.

[0177] Based on the above embodiments, the present application further provides a computer-readable storage medium, in which a computer program is stored. When the computer program is executed by a computer, the computer executes the methods described in the embodiments of the present application.

[0178] Based on the above embodiments, the present application further provides a chip, which is used to read a computer program stored in a memory to implement the methods described in the embodiments of the present application.

[0179] Based on the above embodiments, the present application provides a chip system, which includes a processor for supporting a computer device to implement the methods described in the embodiments of the present application. In a possible design, the chip system also includes a memory, which is used to store the necessary programs and data of the computer device. The chip system can be composed of a chip, or it can include a chip and other discrete devices. It should be understood by those skilled in the art that the embodiments of the present application can be provided as a method, a system, or a computer program product. Therefore, the present application can adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present application can adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program codes.

[0180] The present application is described with reference to the flowchart and / or block diagram of the method, device (system), and computer program product according to the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the process and / or box in the flowchart and / or block diagram can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device produce a device for implementing the function specified in one process or multiple processes in the flowchart and / or one box or multiple boxes in the block diagram.

[0181] These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer-readable memory produce a manufactured product including an instruction device that implements the functions specified in one or more processes in the flowchart and / or one or more boxes in the block diagram.

[0182] These computer program instructions may also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, whereby the instructions executed on the computer or other programmable device provide steps for implementing the functions specified in one or more processes in the flowchart and / or one or more boxes in the block diagram.

[0183] Obviously, those skilled in the art can make various changes and modifications to the present application without departing from the scope of protection of the present application. Thus, if these modifications and variations of the present application fall within the scope of the claims of the present application and their equivalents, the present application is also intended to include these modifications and variations.

Claims

1. A display method, characterized in that: Applied to terminal equipment, including: In response to the first interface refresh signal, determining a shadow of a first element included in the first interface to be displayed; Based on the shadow of the first element, display a first interface, where the first interface includes the first element and a visible portion of the shadow, where the visible portion of the shadow is obtained based on the shadow of the first element; Among them, the parent element of the first element is the second element, and the second element is a visible element or an invisible element; the parent element of the shadow is a third element, and the third element is the root element of the first interface, or an element between the second element and the root element, and the second element is different from the root element.

2. The method according to claim 1, characterized in that The first interface further includes a fourth element; wherein a display area of ​​the fourth element and a display area of ​​the shadow have an overlapping area; The visible portion of the shadow is obtained based on the shadow of the first element and the fourth element; wherein a display area of ​​the visible portion of the shadow has no overlapping area with a display area of ​​the fourth element.

3. The method according to claim 2, characterized in that The three-dimensional height of the fourth element is greater than the three-dimensional height of the first element.

4. The method according to claim 2 or 3, characterized in that: The displaying a first interface based on the shadow of the first element includes: determining an outline of a visible portion of the shadow based on the shadow of the first element, the first element, and the fourth element; The first interface is displayed; wherein the visible portion of the shadow is obtained according to the outline.

5. The method according to claim 2 or 3, characterized in that: The step of displaying the first interface based on the shadow of the first element comprises the following steps performed in sequence: Draw a shadow of the first element on the first interface; Drawing the first element and the fourth element on the first interface; The drawn first interface is displayed.

6. The method according to claim 5, characterized in that The first interface further includes a fifth element; a display area of ​​the fifth element and a display area of ​​the shadow have an overlapping area, and a three-dimensional height of the fifth element is less than or equal to a three-dimensional height of the first element; Before drawing the shadow of the first element on the first interface, the method further includes: Draw the fifth element.

7. The method according to claim 6, characterized in that Drawing the first element and the fourth element on the first interface includes the following steps performed in sequence: Drawing the first element on the first interface; After drawing the first element, drawing the fourth element on the first interface.

8. The method according to any one of claims 1 to 7, characterized in that The first interface is the desktop interface, lock screen interface, or APP interface of the terminal device.

9. A terminal device, characterized in that: The system comprises at least one processor coupled to at least one memory, wherein the at least one processor is configured to read a computer program stored in the at least one memory to execute the method according to any one of claims 1 to 8.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores instructions, which, when executed on a computer, enable the computer to execute the method according to any one of claims 1 to 8.

11. A computer program product comprising instructions, characterized in that When the computer program product is run on a computer, the computer is caused to execute the method according to any one of claims 1 to 8.

Images