Display method and related device

Abstract

The embodiments of the present application belong to the technical field of computers, and disclose a display method and a related device, which are used for improving the integrity and uniformity of user interfaces and improving user experience. The method comprises: displaying a user interface, the user interface containing a target interface element displayed with a first image region as a background region, the target interface element being obtained by rendering a first target image which serves as a rendering object, and the first target image being obtained by subjecting a screenshot of the first image region to preset image processing; and, in response to the background region of the target interface element changing from the first image region to a second image region, using a second target image as a rendering object to re-render on the user interface the target interface element, the second target image being obtained by subjecting a screenshot of the second image region to the preset image processing.

Description

Display method and related device

[0001] The present application claims priority to the Chinese patent application No. 202411311270.4, filed on September 19, 2024, and entitled "A display method and related device", the content of which is incorporated herein by reference in its entirety. TECHNICAL FIELD

[0002] Embodiments of the present application relate to the technical field of computer, and in particular, to a display method and related device. BACKGROUND

[0003] A user interface (UI) is an important medium for interaction and information exchange between a system and a user. It not only can provide intuitive guidance and instructions for the user, but also can allow the user to input data and complete interaction. For a UI component with a small area in the user interface, the function of the interface can be more enriched, and the content in the interface can be highlighted. Meanwhile, the overall quality of the interface can be improved. However, the UI component with a small area is often distinguished from the overall interface, which can easily cause poor immersion and poor aesthetics, and affect the user experience.

[0004] In the related art, the UI component with a small area is usually processed in pure color or semi-transparent, so as to avoid too large contrast with the background interface and affect the aesthetics.

[0005] However, in the above method, the background interface of the small-area UI component is inconsistent or has differences, and in the case of background interface switching, the small-area UI component can be displayed unevenly, and the overall and aesthetics are poor, thereby causing poor user experience. SUMMARY

[0006] Embodiments of the present application provide a display method and related device, which can adapt the target interface element with a small area in the user interface to the interface background of the target interface element, improve the overall and uniformity of the user interface, and improve the user experience.

[0007] In a first aspect, a display method is provided. The method is applied to an electronic device, and includes: displaying a user interface, the user interface including a target interface element displayed with a first image region as a background region; the target interface element is rendered with a first target image as a rendering object, the first target image being obtained by performing a preset image processing on a screenshot of the first image region; in response to the background region of the target interface element changing from the first image region to a second image region, re-rendering the target interface element in the user interface with a second target image as a rendering object; the second target image being obtained by performing a preset image processing on a screenshot of the second image region.

[0008] It can be learned from the above that, in the user interface including the target interface element, the target image of the target interface is obtained by preset image processing on a screenshot of the background region where the target interface element is located, which can adapt the display effect of the target interface element to the background region where the target interface element is located, thereby enhancing the display effect of the target interface element, ensuring the readability of the target interface element, improving the integrity and aesthetics of the user interface, and thus improving the user experience.

[0009] In a possible implementation, the preset image processing includes inverse brightness processing using a preset inverse brightness curve, the inverse brightness curve being used to represent a numerical relationship between the background region of the target interface element and the brightness of the target image, and the target image includes a first target image and a second target image.

[0010] It can be learned from the above that the inverse brightness curve presents an opposite effect to the conventional brightness curve, which can make the target image obtained by processing more adaptive to the user interface, thereby enhancing the display effect.

[0011] In a possible implementation, the numerical relationship is a negative correlation relationship.

[0012] It can be learned from the above that the numerical relationship between the background region of the target interface element and the brightness of the target image is a negative correlation relationship, which can make the inverse brightness curve have an inverse color effect, enhance the display effect of the target image, and thus ensure the readability of the target interface element rendered by taking the target image as a rendering object.

[0013] In a possible implementation, the target inverse brightness curve is determined according to the brightness state level of the screenshot of the second image region, the brightness state level is divided according to a preset brightness threshold, different brightness state levels correspond to different inverse brightness curves, and the screenshot of the second image region is subjected to inverse brightness processing according to the target inverse brightness curve to obtain a second target image.

[0014] It can be learned from the above that the target inverse brightness curve is determined according to the brightness state level of the screenshot of the second image region, which can enhance the display effect of the second target image subjected to the target inverse brightness processing, and ensure that the display effect of the target interface element can adapt to the image region of the background interface.

[0015] In a possible implementation, a screenshot brightness value of the second image region is obtained, and the brightness state level of the screenshot of the second image region is determined according to the screenshot brightness value of the second image region and a preset brightness threshold.

[0016] It can be learned from the above that the brightness state level of the screenshot of the second image region is determined according to the screenshot brightness value of the second image region and the preset brightness threshold, which can ensure the accuracy of the determined target inverse brightness curve.

[0017] In a possible implementation, the target brightness threshold is determined according to the brightness state level of the screenshot of the first image region; the target brightness threshold represents a brightness threshold corresponding to the brightness state level of the screenshot of the first image region; if the screenshot brightness value of the second image region is less than or equal to the target brightness threshold, it is determined that the brightness state level of the second image region is the same as the brightness state level of the screenshot of the first image region; if the screenshot brightness value of the second image region is greater than the target brightness threshold, it is determined that the brightness state level of the second image region is a brightness state level one level higher than the brightness state level of the screenshot of the first image region.

[0018] As can be seen from the above, the target brightness threshold is determined according to the state level of the first image region, and then the brightness state level of the second image region is determined according to the target brightness threshold and the brightness value of the second image region, which can save the computing power of the CPU and avoid comparing the brightness value of the second image region with the brightness threshold interval one by one, thereby improving the performance of the electronic device.

[0019] In a possible implementation, the average color of the screenshot of the second image region is determined; the average color represents a ratio of a sum of color values of each pixel in the screenshot of the second image region to a total number of pixels; and the brightness value of the second image region is determined according to the average color.

[0020] As can be seen from the above, the average color can be used as the representative color of the second image region, so that the brightness value of the second image region is determined more accurately by using the average color.

[0021] In a possible implementation, the color value of each pixel in the screenshot of the second image region is obtained; and the screenshot brightness value of the second image region is determined according to a sum of the color values of each pixel in the screenshot of the second image region.

[0022] As can be seen from the above, in the determination of the screenshot brightness value of the second image region by using the sum of the color values of each pixel in the screenshot of the second image region, the color values of each pixel in the screenshot of the second image region can be directly traversed and calculated in a graphics processing unit (GPU), which can effectively reduce the occupation of the central processing unit (CPU) and improve the performance of the electronic device.

[0023] In a possible implementation, the saturation value of the screenshot of the second image region is reduced.

[0024] As can be seen from the above, by reducing the saturation value of the screenshot of the second image region, the display effect of the second target image obtained by performing the inverse brightness processing on the screenshot of the second image region according to the target inverse brightness curve is more prominent and different from the second image region, thereby ensuring the readability of the target interface element.

[0025] In a possible implementation manner, the second target image is subjected to blur processing.

[0026] As can be seen, the electronic device subjects the second target image to blur processing, which can enhance the display effect of the second target image. The target interface element rendered with the second target image as a rendering object can be easily recognized and used by the user, and the readability of the target interface element is enhanced.

[0027] In a second aspect, a display apparatus is provided. The embodiments of the present application can divide the display apparatus into functional modules according to the method provided in the first aspect. For example, each functional module can be divided according to each function, or two or more functions can be inherited in one processing module. For example, the display apparatus can be divided into a display module and a processing module according to functions. The possible technical solutions and beneficial effects of each functional module described above can be referred to the technical solutions provided in the first aspect or the corresponding possible implementation manners, which will not be described herein.

[0028] In a third aspect, the embodiments of the present application provide a computing device cluster. The computing device cluster includes at least one computing device. Each computing device includes a processor and a memory for storing processor-executable instructions. The processor is configured to execute the instructions, so that the computing device executes the display method described above.

[0029] In a fourth aspect, the embodiments of the present application provide a computer-readable storage medium. The computer-readable storage medium stores at least one computer program. The computer program is loaded and executed by a processor to implement the display method of the above aspect.

[0030] In a fifth aspect, the embodiments of the present application provide a computer program product or a computer program. The computer program product or the computer program includes computer instructions stored in a computer-readable storage medium. The processor of the computing node reads the computer instructions from the computer-readable storage medium. The processor executes the computer instructions, so that the computing node executes the display method provided in various optional implementation manners of the above aspect.

[0031] The specific description of the second aspect to the fifth aspect and various implementation manners thereof in the embodiments of the present application can refer to the detailed description in the first aspect and various implementation manners thereof. The beneficial effects of the second aspect to the fifth aspect and various implementation manners thereof can refer to the beneficial effect analysis in the first aspect and various implementation manners thereof, which will not be described herein.

[0032] These aspects or other aspects of the embodiments of the present application will be more apparent in the following description. BRIEF DESCRIPTION OF DRAWINGS

[0033] Fig. 1 shows a schematic diagram of an interface element display effect provided by a related art;

[0034] Fig. 2 shows a schematic diagram of an interface element display effect provided by a related art;

[0035] Fig. 3 shows a schematic diagram of an interface element display effect provided by a related art;

[0036] Fig. 4 shows a schematic diagram of a hardware structure of a mobile phone 100 provided by an embodiment of the present application;

[0037] Fig. 5 shows a schematic diagram of a software structure of a mobile phone 100 provided by an embodiment of the present application;

[0038] Fig. 6 shows a schematic diagram of a display method provided by an embodiment of the present application;

[0039] Fig. 7 shows a schematic diagram of a display effect of a target interface element provided by an embodiment of the present application;

[0040] Fig. 8 shows a schematic diagram of a scenario in which a background area of a target interface element changes from a first image area to a second image area provided by an embodiment of the present application;

[0041] Fig. 9 shows a schematic diagram of another scenario in which a background area of a target interface element changes from a first image area to a second image area provided by an embodiment of the present application;

[0042] Fig. 10 shows a schematic diagram of still another scenario in which a background area of a target interface element changes from a first image area to a second image area provided by an embodiment of the present application;

[0043] Fig. 11 shows a schematic diagram of a method for rendering a target interface element provided by an embodiment of the present application;

[0044] Fig. 12 shows a schematic diagram of a display effect of a preset image processing provided by an embodiment of the present application;

[0045] Fig. 13 shows a schematic diagram of a display device structure provided by an embodiment of the present application;

[0046] Fig. 14 shows a schematic diagram of a hardware structure of a mobile phone 100 provided by an embodiment of the present application; DETAILED DESCRIPTION

[0047] The technical solutions in the embodiments of the present application will be described below with reference to the drawings in the embodiments of the present application. In the description of the present application, unless otherwise specified, " / " represents an "or" relationship between the objects before and after the " / ", for example, A / B can represent A or B; in the present application, "and / or" is only a description of the relationship between the associated objects, which means that there can be three relationships, for example, A and / or B, which can represent the following three cases: A alone, A and B together, and B alone, where A and B can be singular or plural. In addition, in the description of the present application, unless otherwise specified, "multiple" means two or more than two. "At least one of the following" or similar expressions means any combination of the items, including any combination of single or multiple items. For example, at least one of a, b, or c can represent a, b, c, a-b, a-c, b-c, or a-b-c, where a, b, and c can be single or multiple. In addition, in order to clearly describe the technical solutions of the embodiments of the present application, in the embodiments of the present application, "first", "second", and the like are used to distinguish the same or similar items with basically the same function and role.

[0048] Those skilled in the art can understand that "first", "second", and the like do not limit the quantity and execution order, and "first", "second", and the like do not necessarily mean different. At the same time, in some embodiments of the present application, "exemplary" or "for example" is used to represent an example, illustration or description. Any embodiment or design scheme described as "exemplary" or "for example" in the embodiments of the present application should not be interpreted as more preferred or more advantageous than other embodiments or design schemes. Rather, the use of "exemplary" or "for example" is intended to present the relevant concept in a specific manner, for ease of understanding.

[0049] First, the application scenarios of the embodiments of the present application are exemplarily introduced.

[0050] For electronic devices with display functions, to enrich their functions and improve user experience, the user interface usually includes multiple interface elements. For example, the lock screen display, the off-screen display and other user interfaces of mobile phones, tablet computers, smart watches and the like usually include interface elements for indication. The interface elements are usually small in area, such as navigation bar, page turning point or folder control, etc. Although the interface elements in the user interface can enrich the functions of the interface and be easy for users to operate, they often affect the integrity and aesthetics of the user interface.

[0051] In some related technologies, taking the navigation bar as an example, FIG. 1 shows a schematic diagram I of a display effect of an interface element provided by a related technology. The user interface includes a navigation bar, and the display effect of the navigation bar is a solid color, which enhances the display effect of the navigation bar and is easy for users to use. However, the integrity of the user interface is destroyed.

[0052] In some other related technologies, FIG. 2 shows a schematic diagram II of a display effect of an interface element provided by a related technology. The user interface includes a navigation bar, and a negative color filter is added to the navigation bar, and a semi-transparent effect is also added, which can enhance the display effect of the navigation bar while reducing the impact of the navigation bar on the display of the user interface. However, as shown in FIG. 1, in the case where the brightness of the background where the navigation bar is located has a large difference, the color of the navigation bar is not uniform, which affects the aesthetics.

[0053] In some other related technologies, FIG. 3 shows a schematic diagram III of a display effect of an interface element provided by a related technology. The user interface includes a navigation bar, and the display effect of the navigation bar is a solid color, and a negative color filter is added to the navigation bar, which enhances the display effect of the navigation bar. However, the integrity of the user interface is destroyed, the aesthetics is reduced, and thus the user experience is poor.

[0054] Therefore, embodiments of the present application provide a display method, which is applied to an electronic device, and the method includes that the electronic device displays a user interface, and the user interface includes a target interface element displayed with a first image area as a background area. The target interface element is rendered with a first target image as a rendering object, and the first target image is obtained by performing a preset image processing on a screenshot of the first image area. The electronic device re-renders the target interface element with a second target image as a rendering object in the user interface in response to the background area of the target interface element changing from the first image area to a second image area. The second target image is obtained by performing a preset image processing on a screenshot of the second image area. The first image area is an area indicated by a position of the target interface element in the user interface.

[0055] That is, in the user interface including the target interface element, the target image of the target interface is obtained by performing a preset image processing on a screenshot of a background area where the target interface element is located, which can adapt the display effect of the target interface element to the background area where the target interface element is located, thereby improving the integrity and aesthetics of the user interface.

[0056] On the other hand, the target interface element is rendered by the target image, and the target image is obtained by performing a preset image processing on a screenshot of the first image area, instead of directly taking the screenshot of the first background area as a rendering object, which can enhance the display effect of the target interface element and is easy for users to distinguish and use.

[0057] In summary, by performing preset image processing on the screenshot of the first image region, the first target image is obtained, and the target interface element is rendered and displayed by taking the first target image as the rendering object, which can avoid the problem of stiff display of the target element in the user interface, and ensure the readability of the target interface element. At the same time, the overall and aesthetic properties of the user interface are improved, thereby improving the user experience.

[0058] Secondly, the system architecture of the embodiment of the present application is exemplarily introduced.

[0059] The electronic device provided in the embodiment of the present application can include a mobile phone, a smart watch, a tablet computer, a foldable electronic device, a desktop computer, a laptop computer, a handheld computer, a notebook computer, an Ultra-Mobile Personal Computer (UMPC), a netbook, a cellular phone, a Personal Digital Assistant (PDA), an Augmented Reality (AR) device, a Virtual Reality (VR) device, an Artificial Intelligence (AI) device, a wearable device, a vehicle-mounted device, and the like. The specific type of the electronic device is not specially limited in the embodiment of the present application.

[0060] Moreover, the operating system installed in the electronic device includes, but is not limited to or other operating systems. The specific type of the electronic device and the type of the operating system installed in the electronic device are not limited in the present application. Those skilled in the art can determine the type of the electronic device and the installed operating system according to actual needs, and these designs do not exceed the protection scope of the embodiment of the present application.

[0061] The electronic device in the embodiment of the present application can be implemented by a mobile phone. FIG. 4 shows a hardware structure schematic diagram of a mobile phone 100 provided in the embodiment of the present application.

[0062] As shown in FIG. 4, the mobile phone 100 can 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 headset jack 170D, a sensor module 180, a key 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc.

[0063] The sensor module 180 can include a pressure sensor 180A, a gyroscope sensor 180B, a barometric pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, and a bone conduction sensor 180M, etc.

[0064] It can be understood that the structure shown in the embodiments of the present application does not constitute a specific limitation on the mobile phone 100. In other embodiments of the present application, the mobile phone 100 can include more or fewer components than shown, or combine certain components, or split certain components, or different component arrangements. The components shown can be implemented in hardware, software, or a combination of software and hardware.

[0065] The processor 110 can include one or more processing units, for example: the processor 110 can include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Different processing units can be independent devices, or can be integrated in one or more processors.

[0066] The controller can be the nerve center and command center of the mobile phone 100. The controller can generate operation control signals according to instruction operation codes and timing signals to complete the control of fetching instructions and executing instructions.

[0067] The processor 110 can also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory can hold instructions or data that the processor 110 has just used or is using repeatedly. If the processor 110 needs to use the instructions or data again, it can be called directly from the memory. This avoids repeated access and reduces the waiting time of the processor 110, thus improving the efficiency of the system.

[0068] In some embodiments, the processor 110 can include one or more interfaces. The interface can 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.

[0069] The wireless communication function of the mobile phone 100 can be realized through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor, and the baseband processor, etc.

[0070] The antenna 1 and the antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in the mobile phone 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be multiplexed to improve the utilization rate of the antennas. For example: the antenna 1 can be multiplexed as a diversity antenna of a wireless local area network. In some other embodiments, the antenna can be used in combination with a tuning switch.

[0071] The mobile communication module 150 can support 2G / 3G / 4G / 5G / future communication networks or more advanced communication standards, which are not limited in the present application.

[0072] The wireless communication module 160 can provide solutions for wireless communication including wireless local area networks (WLAN) (e.g., wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR) technology, etc. The wireless communication module 160 can be one or more devices that integrate at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, frequency-modulates and filters the electromagnetic wave signals, and transmits the processed signals to the processor 110. The wireless communication module 160 can also receive signals to be transmitted from the processor 110, frequency-modulate them, amplify them, and radiate them as electromagnetic waves via the antenna 2.

[0073] The phone 100 implements display functions through a GPU, a display screen 194, an application processor, etc. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 can include one or more GPUs that execute program instructions to generate or change display information.

[0074] The display screen 194 is used to display user interfaces, etc. The display screen 194 includes a display panel. The display panel can 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 Miniled, a MicroLed, a Micro-oLed, a quantum dot light emitting diode (QLED), etc. In some embodiments, the phone 100 can include 1 or N display screens 194, where N is a positive integer greater than 1.

[0075] The phone 100 can implement a shooting function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, an application processor, etc.

[0076] ISP is used to process the data feedback by the camera 193. For example, when taking a photo, the shutter is opened, the light is transmitted to the camera photosensitive element through the lens, the light signal is converted into an electrical signal, and the camera photosensitive element transmits the electrical signal to the ISP for processing and conversion into a visible image to the naked eye. The ISP can also optimize the noise, brightness, and skin color of the image through algorithms. The ISP can also optimize the exposure, color temperature, and other parameters of the shooting scene. In some embodiments, the ISP can be arranged in the camera 193.

[0077] The mobile phone 100 can realize audio functions through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the earphone interface 170D, and the application processor, etc. For example, music playing, recording, etc.

[0078] In a possible implementation, the display screen is configured to display a user interface, wherein the user interface includes a target interface element displayed with a first image area as a background area; the target interface element is rendered with a first target image as a rendering object, and the first target image is obtained by performing preset image processing on a screenshot of the first image area. The display screen is further configured to, in response to the background area of the target interface element changing from the first image area to a second image area, re-render the target interface element in the user interface with a second target image as a rendering object, and the second target image is obtained by performing preset image processing on a screenshot of the second image area.

[0079] The software system of the mobile phone 100 can adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture. The embodiment of the application takes the Android system with a layered architecture as an example to exemplarily illustrate the software structure of the mobile phone 100.

[0080] FIG. 5 shows a software structure diagram of the mobile phone 100 according to an embodiment of the application.

[0081] As shown in FIG. 5, the layered architecture divides the software into several layers, and each layer has a clear role and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom, the application layer, the application framework layer and system library, and the kernel layer.

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

[0083] As shown in FIG. 5, the application packages can include camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, short message, etc.

[0084] The application framework layer provides application programming interfaces (APIs) and programming frameworks for applications in the application layer. The application framework layer includes some pre-defined functions.

[0085] As shown in FIG. 5, the application framework layer can include a window manager, a content provider, a view system, a telephony manager, a resource manager, a notification manager, etc.

[0086] The window manager is used to manage window programs. The window manager can acquire a display screen size, determine whether there is a status bar, lock a screen, and capture a screen, etc.

[0087] The content provider is used to store and acquire data, and make the data accessible to applications. The data can include videos, images, audios, dialed and received calls, browsing history and bookmarks, a phone book, etc.

[0088] The view system includes visual controls, such as a control for displaying text, a control for displaying pictures, etc. The view system can be used to build an application. A display interface can be composed of one or more views. For example, a display interface including a short message notification icon can include a view for displaying text and a view for displaying pictures.

[0089] The telephony manager is used to provide communication functions of the mobile phone 100. For example, management of a call state (including call connection, call hang-up, etc.).

[0090] The resource manager provides various resources for applications, such as localized strings, icons, pictures, layout files, video files, etc.

[0091] The notification manager enables an application to display notification information in a status bar. The notification manager can be used to convey a message of the notification type, which can automatically disappear after a short stay without user interaction. For example, the notification manager is used to notify a download completion, a message reminder, etc. The notification manager can also be a notification appearing in a system top status bar in a form of a graph or a scrolling bar text, such as a notification of an application running in the background, or a notification appearing on a screen in a form of a dialogue window. For example, a text information is prompted in a status bar, a prompt sound is emitted, the electronic device vibrates, an indicator light flashes, etc.

[0092] The Android Runtime includes a core library and a virtual machine. The Android Runtime is responsible for scheduling and management of the Android system.

[0093] The core library includes two parts: one part is a function function called by the java language, and the other part is the core library of the Android.

[0094] The application program layer and the application framework layer run in a virtual machine. The virtual machine executes java files of the application program layer and the application framework layer as binary files. The virtual machine is used to perform functions such as management of object life cycles, stack management, thread management, management of security and exceptions, and garbage collection.

[0095] The system library can include a plurality of functional modules. For example, a detection module, a display module, and a sending module.

[0096] In a possible implementation, the display module is configured to display a user interface. The user interface includes a target interface element displayed with a first image region as a background region. The target interface element is rendered with a first target image as a rendering object, and the first target image is obtained by performing preset image processing on a screenshot of the first image region. The display module is further configured to, in response to a background region of the target interface element changing from the first image region to a second image region, re-render the target interface element with a second target image as a rendering object in the user interface, where the second target image is obtained by performing preset image processing on a screenshot of the second image region.

[0097] The kernel layer is a layer between hardware and software. The kernel layer at least includes a display driver, a camera driver, an audio driver, and a sensor driver.

[0098] It should be noted that the system architecture and application scenarios described in the embodiments of the present application are used to more clearly illustrate the technical solutions of the embodiments of the present application, and do not constitute a limitation on the technical solutions provided by the embodiments of the present application. It can be known by those skilled in the art that, with the evolution of system architecture and the appearance of new business scenarios, the technical solutions provided by the embodiments of the present application are also applicable to similar technical problems.

[0099] For ease of understanding, the display method provided by the present application is exemplarily introduced below in combination with the accompanying drawings. The display method is applicable to the mobile phone 100 shown in FIG. 4.

[0100] FIG. 6 shows a flow diagram of a display method according to an embodiment of the present application. As shown in FIG. 6, the display method includes the following steps:

[0101] S101, the electronic device displays a user interface.

[0102] In the embodiments of the present application, the user interface includes a target interface element displayed with a first image region as a background region. The target interface element includes a user interface (UI) component with a small area, such as a navigation bar, an icon, a pop-up window, an indication control, and the like. The user interface usually includes one or more target interface elements. The first image region includes a background region indicated by a position of the user interface where the target interface element is located.

[0103] The target interface element is rendered by taking the first target image as a rendering object, and the first target image is obtained by performing preset image processing on a screenshot of the first image region.

[0104] Taking the target interface element including a navigation bar as an example, FIG. 7 shows a schematic diagram of a display effect of a target interface element according to an embodiment of the present application. As shown in FIG. 7, when the mobile phone 100 is in a lock screen interface, the image displayed on the lock screen interface is a lock screen wallpaper, and the lock screen interface includes a navigation bar at the bottom. That is, the first image region at the position of the navigation bar is the lock screen wallpaper. The navigation bar is rendered by taking the screenshot of the lock screen wallpaper after preset image processing as a rendering object. Specifically, the screenshot of the lock screen wallpaper is subjected to preset image processing to obtain a first target image, and the navigation bar is rendered by taking the first target image as a rendering object. The preset processing includes inverse brightness processing using an inverse brightness curve. The inverse brightness curve is used to represent the numerical relationship between the brightness of the background region of the target interface element and the target image. The target image includes the first target image. That is, the brightness of the first target image and the brightness of the screenshot of the lock screen wallpaper satisfy the inverse brightness curve. The numerical relationship represented by the inverse brightness curve is a negative correlation.

[0105] Therefore, the display content of the navigation bar is the same as the display content of the lock screen wallpaper at the position. Since the first target image for rendering the navigation bar is the screenshot of the lock screen wallpaper after preset image processing, the effect of the navigation bar is enhanced, which facilitates user identification and use, and ensures the readability of the target interface element. The display effect of the navigation bar shown in FIG. 7 can adapt to the lock screen wallpaper at the position of the navigation bar, avoid the problem of rigid display of the target interface element in the user interface, improve the overallity and aesthetics of the user interface, and thus improve the user experience.

[0106] In S102, the electronic device re-renders the target interface element by taking the second target image as a rendering object in the user interface in response to the background region of the target interface element changing from the first image region to the second image region.

[0107] The second target image is obtained by performing preset image processing on a screenshot of the second image region.

[0108] For example, when the position of the target interface element is fixed, the change of the background region of the target interface element from the first image region to the second image region includes the switching of the user interface of the background where the target interface element is located. That is, the electronic device can respond to the user interface switching operation of the user, which can be a sliding operation, a page turning operation, or a click into a new interface, etc. The user interface where the target interface element is located is switched from the first interface to the second interface, and then the background region of the target interface element changes from the first image region of the first interface to the second image region of the second interface.

[0109] In the case that the target interface element is not fixed in position, that is, the target interface element can move in the user interface. In the case that the user interface does not switch, the electronic device responds to a movement operation of the user, specifically, a drag operation, a downward sliding operation, a translation operation, etc. The position of the user interface in which the target interface element is located changes from the first position to the second position, and the background area of the target interface element changes from the first image area of the first position of the user interface to the second image area of the second position.

[0110] For example, FIG. 8 shows a scene diagram in which the background area of a target interface element changes from a first image area to a second image area according to an embodiment of the present application. As shown in FIG. 8, the target interface element includes a navigation bar. When the mobile phone 100 is in a lock screen interface, the navigation bar is located at the bottom of the lock screen interface, and the background area of the navigation bar is a lock screen wallpaper at this time. The background interface in which the navigation bar is located is a first image area. If the mobile phone 100 responds to an unlocking operation or a upward sliding operation of the user, the display interface is a home screen interface at this time, the navigation bar is located at the bottom of the home screen interface, and the background area of the navigation bar is a home screen wallpaper; that is, the background interface in which the navigation bar is located is a second image area. The lock screen wallpaper and the home screen wallpaper are different image wallpapers.

[0111] FIG. 9 shows another scene diagram in which the background area of a target interface element changes from a first image area to a second image area according to an embodiment of the present application. As shown in FIG. 9, the target interface element includes a navigation bar. The display interface of the mobile phone 100 is a first application interface, and the navigation bar is located at the bottom of the first application interface. At this time, the background area of the navigation bar is the first application interface, and the background interface in which the navigation bar is located is a first image area. If the mobile phone 100 responds to a upward sliding operation of the user, the display interface is an application superposition interface at this time, and application switching is performed. When the user selects an application, the display interface of the mobile phone 100 is a second application interface, and the navigation bar is located at the bottom of the second application interface. At this time, the background area of the navigation bar is the second application interface, and the background interface in which the navigation bar is located is a second image area. The first application interface and the second application interface are different.

[0112] FIG. 10 shows a schematic diagram of a scenario in which the background area of a target interface element changes from a first image area to a second image area according to an embodiment of the present application. As shown in FIG. 10, the target interface element includes a shortcut control, which is used to customize the function of the shortcut control, for example, screen capture, screen locking, and adjusting the volume, etc., to achieve a shortcut operation and provide convenience for the user. If the display interface of the mobile phone 100 is a lock screen interface, the shortcut control is located at the upper right side of the lock screen interface. At this time, the area of the lock screen wallpaper where the shortcut control is located is the first image area where the shortcut control is located. If the shortcut control responds to the movement operation of the user, at this time the shortcut control is located at the lower left side of the lock screen interface. At this time, the area of the lock screen wallpaper where the shortcut control is located is the second image area where the shortcut control is located.

[0113] In the scenario in which the background area of the target interface element changes from the first image area to the second image area, the background area of the folder control changes with the position of the folder control when the target interface element includes the folder control. Therefore, it can be known that the scenario and the manner in which the background area of each target interface element changes from the first image area to the second image area are only examples and do not constitute a limitation on the technical solutions provided by the embodiments of the present application. With the evolution of the user interface and the emergence of new business scenarios, the technical solutions provided by the embodiments of the present application are also applicable to similar technical problems.

[0114] FIG. 11 shows a flowchart of a method for rendering a target interface element according to an embodiment of the present application. At this time, the electronic device responds to the change of the background area of the target interface element from the first image area to the second image area. As shown in FIG. 11, the method for rendering the target interface element includes the following steps:

[0115] S201, the electronic device acquires the brightness value of the screenshot of the second image area.

[0116] The second image area is the background area indicated by the position of the target interface element in the user interface.

[0117] For example, before re-rendering the target interface element, the electronic device acquires the screenshot of the second image area and acquires the brightness value of the screenshot of the second image area.

[0118] For example, the electronic device determines an average color of the screenshot of the second image region; and determines a brightness value of the screenshot of the second image region according to the average color. The average color represents a ratio of a sum of color values of each pixel in the screenshot of the second image region to a total number of pixels. Specifically, the electronic device obtains the color values of all the pixels in the screenshot of the second image region and the total number of pixels, and obtains the average color of the screenshot of the second image region as the color value of a pixel / the total number of pixels. The electronic device converts the average color into a brightness value. Generally, the formula L=k1*R+k2*G+k3*B is used, where k1, k2, and k3 are constant coefficients, and R, G, and B represent the values of red, green, and blue in a color model, respectively.

[0119] The formula for determining the average color brightness value is only an example, and other ways of obtaining the brightness value are also applicable, and do not limit the determination of the brightness value of the screenshot of the second image region. In the above method, the average color can be used as a representative color of the second image region, so that the brightness value of the second image region is more accurate.

[0120] Optionally, the electronic device obtains the color value of each pixel in the screenshot of the second image region; and determines the brightness value of the screenshot of the second image region according to a sum of the color values of each pixel in the screenshot of the second image region. Specifically, the electronic device traverses each pixel in the screenshot of the second image region, and directly uses the formula L=k1*R+k2*G+k3*B to determine the brightness value of the screenshot of the second image region.

[0121] In the above method, the color value of each pixel in the screenshot of the second image region can be processed in a graphics processing unit (GPU), which can effectively reduce the occupation of a central processing unit (CPU) and improve the performance of the electronic device.

[0122] In S202, the electronic device determines a brightness state level of the screenshot of the second image region.

[0123] In one possible implementation, the electronic device obtains the brightness value of the screenshot of the second image region; and determines the brightness state level of the screenshot of the second image region according to the brightness value of the screenshot of the second image region and a preset brightness threshold.

[0124] The brightness state level is divided according to the preset brightness threshold. Different preset brightness threshold intervals correspond to different brightness state levels.

[0125] For example, the preset luminance threshold values include L1, L2 and L3, where L1 < L2 < L3. Since different preset luminance threshold intervals correspond to different luminance state levels, the luminance threshold interval [0, L1] corresponds to the first state level; the luminance threshold interval (L1, L2] corresponds to the second state level; the luminance threshold interval (L2, L3] corresponds to the third state level; and the luminance value greater than L3 corresponds to the fourth state level. The luminance degrees of the first state level, the second state level, the third state level and the fourth state level gradually increase. If the screenshot luminance value of the second image region is in the luminance threshold interval (L1, L2], the luminance state level of the screenshot of the second image region is the second state level.

[0126] In a possible implementation, the electronic device determines a target luminance threshold value according to the luminance state level of the screenshot of the first image region, where the target luminance threshold value represents the luminance threshold value corresponding to the luminance state level of the screenshot of the first image region. If the screenshot luminance value of the second image region is less than or equal to the target luminance threshold value, it is determined that the luminance state level of the second image region is the same as the luminance state level of the screenshot of the first image region. If the screenshot luminance value of the second image region is greater than the target luminance threshold value, it is determined that the luminance state level of the second image region is one level higher than the luminance state level of the screenshot of the first image region.

[0127] For example, the luminance state levels include the first state level, the second state level and the third state level, the luminance degrees of the first state level, the second state level and the third state level gradually increase, and the preset luminance threshold values include the first luminance threshold value L1 and the second luminance threshold value L2. Therefore, the luminance threshold interval [0, L1] corresponds to the first state level; the luminance threshold interval (L1, L2] corresponds to the second state level; and the luminance value greater than L2 corresponds to the third state level. Before determining the luminance state level of the screenshot of the second image region, a target luminance threshold value is determined according to the luminance state level of the screenshot of the first image region. If the luminance state level of the screenshot of the first image region is the first state level, the target luminance threshold value can be determined as the first luminance threshold value L1. For the luminance value L of the screenshot of the second image region, if L <= L1, the luminance state level of the screenshot of the second image region is the same as the luminance state level of the screenshot of the first image region, which is the first state level. If L > L1, the luminance state level of the second image region is one level higher than the luminance state level of the screenshot of the first image region, which is the second state level.

[0128] If the brightness state level of the screenshot of the first image region is the second state level, the target brightness threshold can be determined as the second brightness threshold L2. For the brightness value L of the screenshot of the second image region, if L<=L2, the brightness state level of the screenshot of the second image region is the same as that of the screenshot of the first image region, i.e., the second state level. If L>L2, the brightness state level of the second image region is one level higher than that of the screenshot of the first image region, i.e., the third state level.

[0129] If the brightness state level of the screenshot of the first image region is the third state level, the target brightness threshold can be determined as the second brightness threshold L2. For the brightness value L of the screenshot of the second image region, since the brightness state level is the highest to the third state level, if L>L2, the brightness state level of the second image region is the third state level; if L<=L2, the brightness state level of the second image region is the second state level.

[0130] Optionally, for the brightness state level including only the first state level and the second state level, the preset brightness threshold includes the first brightness threshold L1 and the second brightness threshold L2. The brightness degree of the second state level is greater than that of the first state level, i.e., the brightness value of the image in the second state level is greater than that of the image in the first state level. If the brightness state level of the screenshot of the first image region is the first state level, the target brightness threshold can be determined as the first brightness threshold L1. For the brightness value L of the screenshot of the second image region, if L<=L1, the brightness state level of the screenshot of the second image region is the first state level. If L>L1, the brightness state level of the second image region is the second state level.

[0131] If the brightness state level of the screenshot of the first image region is the second state level, the target brightness threshold can be determined as the first brightness threshold L2. For the brightness value L of the screenshot of the second image region, if L<=L2, the brightness state level of the screenshot of the second image region is the first state level. If L>L2, the brightness state level of the second image region is the second state level.

[0132] The above method of determining the target brightness threshold from the state level of the first image region, and then determining the brightness state level of the second image region according to the target brightness threshold and the brightness value of the second image region, can save the CPU computing power, avoid comparing the brightness value of the second image region with the brightness threshold interval one by one, and improve the performance of the electronic device. On the other hand, since the user interface display brightness does not change across levels, the accuracy of determining the brightness state machine of the second image region can be improved.

[0133] In S203, the electronic device performs preset image processing on the screenshot of the second image region according to the brightness state level of the second image region, to obtain a second target image.

[0134] The preset image processing includes inverse brightness processing using a preset inverse brightness curve, which represents the numerical relationship between the brightness of the background area of ​​the target interface element and the brightness of the target image; the target image includes a first target image and a second target image.

[0135] In one possible implementation, the electron determines the target inverse brightness curve based on the brightness state level of the screenshot of the second image region; and performs inverse brightness processing on the screenshot of the second image region based on the target inverse brightness curve to obtain the second target image.

[0136] The brightness state level is divided according to a preset brightness threshold; different brightness state levels correspond to different inverse brightness curves.

[0137] For example, a target inverse brightness curve is determined based on the mapping relationship between the brightness state level of the screenshot of the second image region and the inverse brightness curve, as well as the brightness state level of the screenshot of the second image region. The target inverse brightness curve is the inverse brightness curve that matches the screenshot of the second image region.

[0138] The inverse brightness curve is a curve that is the opposite of the regular brightness curve, producing the opposite effect. By applying the inverse brightness curve to the RGB three color channels in the screenshot of the second image area, an inverted color effect can be achieved. Using different inverse brightness curves for image areas with different brightness levels allows the processed target image to be more adapted to the user interface, thereby enhancing the display effect.

[0139] For example, taking a brightness state level that includes a first state level and a second state level as an example, the inverse brightness curve corresponding to the first state level is the first inverse brightness curve; the inverse brightness curve corresponding to the second state level is the second inverse brightness curve. Specifically, the first inverse brightness curve can be y = x - k1*L + b1; the second inverse brightness curve can be y = x - k2*L + b2. Here, x represents the input brightness value, and y represents the output brightness value. k1, k2 and b1, b2 represent constant coefficients. If the brightness state level of the screenshot of the second image region is the first state level, then the inverse brightness curve of the screenshot target of the second image region is the first inverse brightness curve y = x - k1*L + b1. The electronic device traverses all pixels in the screenshot of the second image region, substitutes the color channel value in each pixel into the x value in the first inverse brightness curve, and calculates the resulting y value, which is the color channel value in the pixel of the second target image. That is, the preset image processing of the screenshot of the second image region is completed.

[0140] FIG. 12 shows a display effect diagram of preset image processing according to an embodiment of the present application. As shown in FIG. 12, the brightness values of the pixels in the screenshot 301 of the second image region are not uniform, including bright areas and dark areas. The division of the bright areas and the dark areas is relative. The screenshot 301 of the second image region is subjected to inverse brightness processing according to the target inverse brightness curve, to obtain a second target image 302. Since the numerical relationship between the screenshot 301 of the second image region and the brightness of the second target image represented by the inverse brightness curve is a negative correlation, the distribution of the brightness of the second target image 302 is opposite. That is, the bright areas and the dark areas of the second target image are opposite relative to the screenshot 301 of the second image region.

[0141] In a possible implementation, before the screenshot of the second image region is subjected to inverse brightness processing according to the target inverse brightness curve to obtain the second target image, the saturation value of the screenshot of the second image region is reduced.

[0142] Specifically, the saturation value of the screenshot of the second image region is reduced to below 1, so that the display effect of the second target image obtained by subjecting the screenshot of the second image region to inverse brightness processing according to the target inverse brightness curve is more prominent and different from the second image region.

[0143] In a possible implementation, before the screenshot of the second image region is subjected to inverse brightness processing according to the target inverse brightness curve to obtain the second target image, the saturation value of the screenshot of the second image region is reduced.

[0144] In a possible implementation, before the screenshot of the second image region is subjected to inverse brightness processing according to the target inverse brightness curve to obtain the second target image, the saturation value of the screenshot of the second image region is reduced.

[0145] Specifically, the saturation value of the screenshot of the second image region is reduced to below 1, so that the display effect of the second target image obtained by subjecting the screenshot of the second image region to inverse brightness processing according to the target inverse brightness curve is more prominent and different from the second image region.

[0146] To sum up, the embodiment of the present application provides a display method, which is applied to an electronic device. The method comprises the following steps: the electronic device displays a user interface, and the user interface comprises a target interface element displayed with a first image area as a background area. The target interface element is rendered with a first target image as a rendering object, and the first target image is obtained by performing preset image processing on a screenshot of the first image area. The electronic device re-renders the target interface element with a second target image as a rendering object in the user interface in response to the background area of the target interface element changing from the first image area to a second image area. The second target image is obtained by performing preset image processing on a screenshot of the second image area. That is to say, in the user interface comprising the target interface element, the target image of the target interface element is obtained by performing preset image processing on a screenshot of the background area where the target interface element is located, so that the display effect of the target interface element can be adapted to the background area where the target interface element is located, thereby improving the integrity and aesthetics of the user interface. Therefore, by performing preset image processing on the screenshot of the first image area to obtain the first target image, and rendering and displaying the target interface element with the first target image as a rendering object, the problem that the target element is displayed stiffly in the user interface can be avoided, and the readability of the target interface element is ensured. Meanwhile, the integrity and aesthetics of the user interface are improved, thereby improving the user experience.

[0147] In some schemes, multiple embodiments of the present application can be combined, and the combined scheme is implemented. Optionally, some operations in the processes of the method embodiments are optionally combined, and / or the order of some operations is optionally changed. Moreover, the execution order between the steps of each process is only exemplary, and does not constitute a limitation on the execution order between the steps, and other execution orders between the steps can also be used. It is not intended to indicate that the execution order is the only execution order in which the operations can be performed.

[0148] A person of ordinary skill in the art can think of various ways to reorder the operations described in the embodiments of the present application. In addition, it should be pointed out that the process details involved in some embodiments of the present application are also applicable in a similar manner to other embodiments, or different embodiments can be combined for use.

[0149] In addition, some steps in the method embodiments can be equivalently replaced by other possible steps. Alternatively, some steps in the method embodiments can be optional and can be deleted in some use scenarios. Alternatively, other possible steps can be added to the method embodiments.

[0150] Moreover, each method embodiment can be implemented individually or in combination.

[0151] The display apparatus provided in the embodiments of the present application can realize the functions in the display method. The display apparatus comprises at least one of the hardware structure and the software module corresponding to each function. Those skilled in the art can easily realize the units and algorithm steps of the examples described in combination with the embodiments disclosed in the present application in the form of hardware or a combination of hardware and computer software. Whether a certain function is realized in the form of hardware or in the form of computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to realize the described functions for each specific application, but such implementation should not be considered beyond the scope of the embodiments of the present application.

[0152] The embodiments of the present application can divide the functional units of the first apparatus according to the above-mentioned method examples. For example, each functional unit can be divided according to each function, or two or more functions can be integrated in one processing unit. The integrated unit can be realized in the form of hardware or in the form of a software functional unit. It should be noted that the division of units in the embodiments of the present application is illustrative, and is only a logical functional division. When actually implemented, there can be another division method.

[0153] For example, FIG. 13 shows a schematic diagram of a display apparatus structure provided by the embodiments of the present application. As shown in FIG. 13, the display apparatus can be applied to an electronic device. The display apparatus 400 comprises:

[0154] The display module 401 is configured to display a user interface, and the user interface comprises a target interface element displayed with a first image area as a background area. The target interface element is rendered with a first target image as a rendering object, and the first target image is obtained by performing preset image processing on a screenshot of the first image area.

[0155] The processing module 402 is configured to, in response to the background area of the target interface element changing from the first image area to a second image area, re-render the target interface element with a second target image as a rendering object in the user interface. The second target image is obtained by performing preset image processing on a screenshot of the second image area.

[0156] In a possible implementation manner, the display apparatus 400 further comprises an acquisition module configured to acquire a screenshot brightness value of the second image area.

[0157] In a possible implementation manner, the processing module 402 is further configured to determine a target inverse brightness curve according to a brightness state level of the screenshot of the second image area. The brightness state level is divided according to preset brightness thresholds. Different brightness state levels correspond to different inverse brightness curves. The screenshot of the second image area is subjected to inverse brightness processing according to the target inverse brightness curve to obtain the second target image.

[0158] In a possible implementation, the processing module 402 is further configured to determine the brightness state level of the screenshot of the second image region according to the screenshot brightness value of the second image region and a preset brightness threshold.

[0159] In a possible implementation, the processing module 402 is further configured to determine a target brightness threshold according to the brightness state level of the screenshot of the first image region; the target brightness threshold represents a brightness threshold corresponding to the brightness state level of the screenshot of the first image region.

[0160] If the screenshot brightness value of the second image region is less than or equal to the target brightness threshold, it is determined that the brightness state level of the second image region is the same as the brightness state level of the screenshot of the first image region.

[0161] If the screenshot brightness value of the second image region is greater than the target brightness threshold, it is determined that the brightness state level of the second image region is one level higher than the brightness state level of the screenshot of the first image region.

[0162] In a possible implementation, the processing module 402 is further configured to determine an average color of the screenshot of the second image region; the average color represents a ratio of a sum of color values of each pixel in the screenshot of the second image region to a total number of pixels; and the processing module 402 is further configured to determine the screenshot brightness value of the second image region according to the average color.

[0163] In a possible implementation, the processing module 402 is further configured to obtain color values of each pixel in the screenshot of the second image region; and the processing module 402 is further configured to determine the screenshot brightness value of the second image region according to a sum of the color values of each pixel in the screenshot of the second image region.

[0164] In a possible implementation, the processing module 402 is further configured to reduce a saturation value of the screenshot of the second image region.

[0165] In a possible implementation, the processing module 402 is further configured to perform a blur processing on the second target image.

[0166] Embodiments of the present application also provide an electronic device, which can be the mobile phone described above. FIG. 14 shows a hardware structure schematic diagram of a mobile phone 100 according to an embodiment of the present application. As shown in FIG. 14, the mobile phone can include one or more processors 1410, a memory 1420 and a communication interface 1430.

[0167] The memory 1420 and the communication interface 1430 are coupled to the processor 1410. For example, the memory 1420, the communication interface 1430 and the processor 1410 can be coupled together through a bus 1440.

[0168] The communication interface 1430 is configured to perform data transmission with other devices. The memory 1420 stores computer program code. The computer program code includes computer instructions, which, when executed by the processor 1410, cause the electronic device to perform the related method steps in the embodiments of the present application.

[0169] The processor 1410 can be a processor or a controller, for example, a central processing unit (CPU), a general-purpose processor, a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic device, a transistor logic device, a hardware component, or any combination thereof. It can implement or execute the various exemplary logical blocks, modules and circuits described in combination with the present disclosure. The processor can also be a combination of computing functions, such as one or more microprocessor combinations, combinations of DSP and microprocessor, etc.

[0170] The bus 1440 can be a peripheral component interconnect (PCI) bus or an extended industry standard architecture (EISA) bus, etc. The bus 1440 can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, only one thick line is shown in FIG. 14, but it does not mean that there is only one bus or only one type of bus.

[0171] The embodiments of the present application also provide an electronic device, which includes a memory and one or more processors; the memory is coupled with the processor; wherein the memory stores computer program code, and the computer program code includes computer instructions, which, when executed by the processor, cause the electronic device to perform the related method steps in the above method embodiments.

[0172] The embodiments of the present application also provide a communication device, which includes a memory and one or more processors; the memory is coupled with the processor; wherein the memory stores computer program code, and the computer program code includes computer instructions, which, when executed by the processor, cause the communication device to perform the related method steps in the above method embodiments.

[0173] The embodiment of the present application further provides a computer readable storage medium, which stores computer program codes. When the processor executes the computer program codes, the electronic device executes the related method steps in the method embodiment.

[0174] The embodiment of the present application further provides a computer program product, which contains instructions. When the instructions are run on the computer or the processor, the computer or the processor executes the related method steps in the method embodiment.

[0175] Those skilled in the art can realize that the units and algorithm steps of the examples described in combination with the embodiments disclosed herein can be realized in electronic hardware or a combination of computer software and electronic hardware. Whether the functions are realized in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to realize the described functions for each specific application, but such implementation should not be considered beyond the scope of the present application.

[0176] The embodiment of the present application further provides a chip system, which comprises: a processor, and a memory coupled with the processor, the memory being configured to store programs or instructions, when the programs or instructions are executed by the processor, the chip system implements the method in any of the method embodiments.

[0177] Optionally, the processor in the chip system can be one or more. The processor can be realized by hardware or software. When realized by hardware, the processor can be a logic circuit, an integrated circuit, etc. When realized by software, the processor can be a general-purpose processor, which realizes by reading the software codes stored in the memory.

[0178] Optionally, the memory in the chip system can also be one or more. The memory can be integrated with the processor or set separately from the processor, and the embodiment of the present application does not make a specific limitation. Exemplarily, the memory can be a non-transient processor, for example, a read-only memory (ROM), which can be integrated with the processor on the same chip or set separately on different chips, and the embodiment of the present application does not make a specific limitation on the type of the memory and the setting mode of the memory and the processor.

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

[0180] The electronic device, computer storage medium or computer program product provided in the application are used to execute the corresponding method provided above, and thus the beneficial effects achieved thereby can refer to the beneficial effects of the corresponding method provided above, which will not be described herein again.

[0181] Through the description of the above embodiments, those skilled in the art can clearly understand that, for the convenience and brevity of description, only the division of the above functional modules is taken as an example for illustration, and in actual application, the above functions can be completed by different functional modules according to needs, that is, the internal structure of the device is divided into different functional modules to complete all or part of the functions described above.

[0182] In several embodiments provided in the application, it should be understood that the disclosed device and method can be implemented in other ways. For example, the device embodiments described above are only schematic, for example, the division of the modules or units is only a logical function division, and actual implementation can have another division manner, for example, a plurality of units or components can be combined or integrated into another device, or some features can be ignored or not executed. In addition, the coupling or direct coupling or communication connection between the units shown or discussed can be indirect coupling or communication connection through some interface, device or unit, and can be electrical, mechanical or other forms.

[0183] The units described as separate components can or can not be physically separate, and the components shown as units can be one physical unit or multiple physical units, which can be located in one place or distributed in multiple different places. According to actual needs, part or all of the units can be selected to achieve the purpose of the embodiment scheme.

[0184] In addition, each function unit in each embodiment of the present application can be integrated in one processing unit, or each unit can be physically present separately, or two or more units can be integrated in one unit. The integrated unit can be realized in the form of hardware or in the form of a software function unit.

[0185] If the integrated unit is realized in the form of a software function unit and sold or used as an independent product, it can be stored in a readable storage medium. Based on such understanding, the technical solutions of the embodiments of the present application essentially or say the parts that make contributions or the whole or part of the technical solutions can be embodied in the form of a software product. The software product is stored in a storage medium, including a plurality of instructions for causing an apparatus (which can be a single-chip microcomputer, a chip, etc.) or a processor to perform all or part of the steps of the method of each embodiment of the present application. The foregoing storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and various media that can store program codes.

[0186] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any change or replacement within the technical scope disclosed in the present application should be covered in the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claims.

Claims

1. A display method characterized by comprising: The method is applied to an electronic device, and the method comprises: displaying a user interface, the user interface comprising a target interface element displayed with a first image region as a background region; the target interface element is rendered with a first target image as a rendering object, the first target image being obtained by preset image processing on a screenshot of the first image region; in response to the background region of the target interface element changing from the first image region to a second image region, re-rendering the target interface element in the user interface with a second target image as a rendering object; the second target image being obtained by preset image processing on a screenshot of the second image region.

2. The display method according to claim 1, wherein The preset image processing comprises: inverse brightness processing using a preset inverse brightness curve, the inverse brightness curve being used to represent a numerical relationship between the background region of a target interface element and the brightness of a target image; the target image comprises the first target image and the second target image.

3. The display method according to claim 2, wherein The numerical relationship is a negative correlation relationship.

4. The display method according to claim 2 or 3, wherein The re-rendering the target interface element in the user interface with the second target image as a rendering object in response to the background region of the target interface element changing from the first image region to the second image region comprises: determining a target inverse brightness curve according to a brightness state level of the screenshot of the second image region; the brightness state level being divided according to a preset brightness threshold; different brightness state levels correspond to different inverse brightness curves; performing inverse brightness processing on the screenshot of the second image region according to the target inverse brightness curve to obtain the second target image.

5. The display method according to claim 4, wherein Before the determining a target inverse brightness curve according to a brightness state level of the screenshot of the second image region, the method further comprises: obtaining a screenshot brightness value of the second image region; determining the brightness state level of the screenshot of the second image region according to the screenshot brightness value of the second image region and the preset brightness threshold.

6. The display method according to claim 5, wherein The determining the brightness state level of the screenshot of the second image region according to the screenshot brightness value of the second image region and the preset brightness threshold comprises: determining a target brightness threshold according to a brightness state level of the screenshot of the first image region; the target brightness threshold representing a brightness threshold corresponding to the brightness state level of the screenshot of the first image region; if the screenshot brightness value of the second image region is less than or equal to the target brightness threshold, determining that the brightness state level of the second image region is the same as the brightness state level of the screenshot of the first image region; if the screenshot brightness value of the second image region is greater than the target brightness threshold, determining that the brightness state level of the second image region is one level higher than the brightness state level of the screenshot of the first image region.

7. The display method according to claim 5 or 6, wherein The obtaining the screenshot brightness value of the second image region comprises: determining an average color of the screenshot of the second image region; the average color representing a ratio of a sum of color values of each pixel in the screenshot of the second image region to a total number of pixels; determining the screenshot brightness value of the second image region according to the average color.

8. The display method according to claim 5 or 6, wherein The obtaining the brightness value of the second image region comprises: acquire a color value of each pixel in the screenshot of the second image region; determine a screenshot brightness value of the second image region according to a sum of the color values of each pixel in the screenshot of the second image region.

9. The display method according to any one of claims 4 to 8, wherein, Before the second image region is subjected to the inverse brightness processing according to the target inverse brightness curve to obtain the second target image, the method further comprises: decrease a saturation value of the screenshot of the second image region.

10. The display method according to any one of claims 4 to 9, wherein, The method further comprises: perform blur processing on the second target image.

11. A display device, characterized by comprising: The display device comprises: a display module configured to display a user interface, the user interface comprising a target interface element displayed with a first image region as a background region; the target interface element is rendered with a first target image as a rendering object, and the first target image is obtained by performing preset image processing on a screenshot of the first image region; a processing module configured to, in response to the background region of the target interface element being changed from the first image region to a second image region, re-render the target interface element with a second target image as a rendering object in the user interface; the second target image is obtained by performing preset image processing on a screenshot of the second image region.

12. An electronic device, comprising: The electronic device comprises a processor and a memory for storing instructions executable by the processor; The processor is configured to execute the instructions, so that the electronic device performs the display method according to any one of claims 1-10.

13. A computer program product, characterised in that, The computer program product contains instructions which, when executed by a computing device, cause the computing device to perform the display method according to any one of claims 1-10.

14. A computer-readable storage medium, characterized in that, The computer-readable storage medium comprises computer program instructions which, when executed by a computing device, cause the computing device to perform the display method according to any one of claims 1-10.

Images