Background fuzzy processing method and device for display interface, equipment and storage medium

Abstract

The invention provides a background fuzzy processing method and device for a display interface, equipment and a storage medium, and relates to the field of computers, in particular to the technical field of computer vision and image processing. According to the specific implementation scheme, an overall fuzzy image is generated according to a background image of a display interface; acquiring a position area of a fuzzy component needing to display a fuzzy effect in the display interface in real time; and according to the position area of the blurring component, defining a display area of the overall blurring image, so that the overall blurring image is visible only in the area overlapped with the position of the blurring component. According to the technical scheme provided by the embodiment of the invention, the performance overhead of background fuzzy processing during list scrolling can be reduced, and interface jamming is avoided.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and more particularly to the field of computer vision and image processing technology. Background Technology

[0002] With the widespread adoption and improved performance of mobile smart devices, modern mobile applications are increasingly focusing on the visual effects and user experience of the User Interface (UI). To create a layered and immersive visual interface, developers often use background blur (such as Gaussian blur) effects, especially on components such as lists, dialog boxes, or pop-ups, to visually separate the content from the background and thus highlight the core information. Summary of the Invention

[0003] This disclosure provides a method, apparatus, device, and storage medium for blurring the background of a display interface.

[0004] According to one aspect of this disclosure, a method for blurring the background of a display interface is provided, comprising:

[0005] Generate an overall blurred image based on the background image of the display interface;

[0006] Real-time acquisition of the location area of ​​the blurred component in the display interface that needs to display a blurred effect;

[0007] Based on the location area of ​​the blurring component, the display area of ​​the overall blurring image is defined so that the overall blurring image is only visible in the area overlapping with the location of the blurring component.

[0008] According to another aspect of this disclosure, a background blurring processing device for a display interface is provided, comprising:

[0009] The blur module is used to generate an overall blurred image based on the background image of the display interface;

[0010] The region acquisition module is used to acquire the location region of the blurred component that needs to display a blurred effect in the display interface in real time.

[0011] The display module is used to define the display area of ​​the overall blurred image based on the position area of ​​the blurred component, so that the overall blurred image is only visible in the area overlapping with the position of the blurred component.

[0012] According to another aspect of this disclosure, an electronic device is provided, comprising:

[0013] At least one processor; and

[0014] The memory is communicatively connected to the at least one processor; wherein,

[0015] The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform any of the methods described in the present disclosure.

[0016] According to another aspect of this disclosure, a non-transitory computer-readable storage medium is provided storing computer instructions, wherein the computer instructions are used to cause the computer to perform any of the methods according to embodiments of this disclosure.

[0017] According to another aspect of this disclosure, a computer program product is provided, including a computer program that, when executed by a processor, implements any of the methods according to embodiments of this disclosure.

[0018] The technical solution of this disclosure can reduce the performance overhead of background blur processing when scrolling the list and avoid interface lag.

[0019] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of this disclosure, nor is it intended to limit the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0020] The accompanying drawings are provided to better understand this solution and do not constitute a limitation of this disclosure. Wherein:

[0021] Figure 1 This is a schematic flowchart of a background blur processing method for a display interface according to an embodiment of the present disclosure;

[0022] Figure 2 This is a schematic diagram of the hierarchical structure of a display interface according to an embodiment of the present disclosure;

[0023] Figure 3 This is a plan view of a display interface according to an embodiment of the present disclosure;

[0024] Figure 4 This is a schematic flowchart of a background blur processing device for a display interface according to an embodiment of the present disclosure;

[0025] Figure 5 This is a block diagram of an electronic device used to implement embodiments of the present disclosure. Detailed Implementation

[0026] The exemplary embodiments of this disclosure are described below with reference to the accompanying drawings, including various details of the embodiments to aid understanding, and should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope of this disclosure. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.

[0027] In related technologies, in order to enhance visual appeal and information hierarchy, application UI design often requires blurring the backgrounds of components such as list items, dialog boxes, or cards. Gaussian blur is a widely used effect.

[0028] Currently, the mainstream technical solution to achieve this effect is to adopt a "real-time cropping and real-time calculation" mode. Specifically, when a component that requires a background blur effect (hereinafter referred to as "blurred component") scrolls or appears on the screen, the program will perform the following steps: 1) Obtain the precise position and size of the blurred component on the screen; 2) Based on the position and size, crop the corresponding area bitmap from the complete background image; 3) Perform Gaussian blur operation on the cropped bitmap; 4) Set the blurred bitmap generated after the operation to the blurred component as its background.

[0029] However, the aforementioned existing technologies have significant performance bottlenecks and technical shortcomings in practical applications, especially in list scrolling scenarios involving multiple fuzzy components:

[0030] High computational cost: Image processing algorithms such as Gaussian blur are computationally intensive operations that consume significant CPU or GPU resources. When multiple blurred components in the list slide into or out of the screen rapidly, these costly calculations need to be triggered and executed frequently.

[0031] Processing time is long: The entire process, from cropping the bitmap and performing blur calculations to finally setting the background, can easily take longer than a single frame's rendering cycle on most low- to mid-range mobile devices. Even on high-end devices, the risk of timeouts still exists when there are more blur components or a larger blur radius.

[0032] This results in a poor user experience: Because the above processing takes too long, it cannot guarantee that each frame will be rendered completely. This directly causes users to experience noticeable stuttering and frame drops when scrolling through the list, which seriously disrupts the smoothness of the application operation and reduces the user experience.

[0033] In order to at least partially solve one or more of the above-mentioned problems and other potential problems, the embodiments of this disclosure provide a background blur processing method for display interfaces. By using the technical solutions of the embodiments of this disclosure, the performance overhead of background blur processing during list scrolling can be significantly reduced without sacrificing visual effects, thus avoiding interface lag.

[0034] This embodiment provides a method for blurring the background of a display interface, aiming to solve the problem of list scrolling stuttering caused by real-time and repeated fuzzy calculations in the prior art. Figure 1 This is a flowchart illustrating a background blurring method for a display interface provided according to an embodiment of this disclosure. For example... Figure 1 As shown, the method includes at least the following steps:

[0035] S110. Generate an overall blurred image based on the background image of the display interface.

[0036] In a specific application scenario, such as the interface of an Android mobile application, this interface has a background image. The background image can be a static image resource or a dynamically generated wallpaper. This step, during interface initialization and loading, first obtains the complete background image and then performs a one-time blurring operation on the entire background image using graphics processing technology, generating a bitmap with the same size as the original background image but with a blurred effect. This bitmap is the overall blurred image. This overall blurred image is stored in memory for later use.

[0037] S120. Real-time acquisition of the position area of ​​the blurred component in the display interface that needs to display a blurred effect.

[0038] Blurry components are UI elements on the interface that require a blurred background, such as a list item, card, or dialog box. As the user scrolls the list, the position of these blurred components on the screen changes in real time. This step listens to the list's scrolling events and continuously calculates and obtains the precise coordinates and size of each blurred component on the screen during scrolling. These coordinates and size together define the position area of ​​the blurred component.

[0039] S130. Based on the location area of ​​the blur component, limit the display area of ​​the overall blur image so that the overall blur image is only visible in the area overlapping with the location of the blur component.

[0040] After obtaining the location area of ​​the blurred component, this step does not perform new blur calculations on the background image. Instead, it uses this location area information to control the display area, or visible range, of the overall blurred image already generated in the first step. Through specific drawing instructions, the overall blurred image is rendered only in the area that completely overlaps with the blurred component, while other areas remain invisible. The blurred component has a transparent background to allow the overall blurred image beneath it, with its defined display area, to be visible. Because the blurred component itself has a transparent background, what shines through is the precisely defined overall blurred image beneath it, thus visually achieving the effect of a blurred component background.

[0041] According to the solution of this disclosure embodiment, by adopting the strategy of "generate once, reuse many times", the time-consuming fuzzy calculation operation is separated from the frequently triggered list scrolling event and executed only once during interface initialization. During scrolling, only position acquisition and display area limitation operations with minimal computational load are performed, which greatly reduces system performance overhead and completely solves the problem of interface lag and frame drops caused by real-time fuzzy calculation, significantly improving the smoothness of user experience.

[0042] In one possible implementation, this embodiment further defines the hierarchical structure of the display interface based on the foregoing embodiments. (Refer to...) Figure 2 As shown:

[0043] The display interface includes a list layer 203 containing the display components, an intermediate layer 202 containing the blurred image, and a background layer 201 containing the background image, arranged from top to bottom.

[0044] To implement this solution, the interface layout needs to be layered along the Z-axis (depth) direction.

[0045] Background layer 201: Located at the bottom layer, used to display the original, clear background image. In Android development, this can be an ImageView.

[0046] Intermediate layer 202: Located above the background layer, it is used to hold and draw the overall blurred image generated in step S110. It can also be a standalone ImageView or a custom View.

[0047] List layer 203: Located at the top level, used to display a scrolling list consisting of multiple display components. Display components include at least one of the following: text box component, label component, icon component, button component, and input box component. Blur component 204 can be any one or more of the display components.

[0048] In one example, such as Figure 3As shown, the list layer's display components include icon components, label components, text box 1 components, text box 2 components, dialog box components, option box 1 components, option box 2 components, input box components, button 1 components, button 2 components, and button 3 components. Among these, label components, text box 1 components, text box 2 components, option box 1 components, option box 2 components, and input box components can be fuzzy components, while the remaining components, such as dialog box components, can be non-fuzzy components. As new content or information is generated, new text box components or dialog box components will be arranged below the already generated components in context, forming a component list. Text box components and dialog box components can be scrolled in the display interface to view previously viewed content or information.

[0049] The backgrounds of the blurred components in this list are set to transparent, or at least partially transparent (e.g., setting the background transparency to 80% or higher), to ensure that the blurred image of the intermediate layer can be "seen through". The backgrounds of other display components can be set as needed; for example, they can be opaque solid color backgrounds or transparent backgrounds. However, since the overall blurred image of the intermediate layer is only displayed in the area 206 corresponding to the blurred component, the other areas 207 of the overall blurred image are not displayed or visible. Therefore, if the background of the non-blurred component 205 (other display components) is transparent, the background image will be directly visible underneath it, and it will not have a blurred effect by seeing through the overall blurred image.

[0050] According to the scheme of this disclosure, a clear, bottom-up three-layer structure of "background layer - middle layer - list layer" provides the foundation for the visual presentation of this disclosure. It ensures that each visual element is drawn in the correct order, and guarantees that the top transparent component can correctly reveal the cropped blurred image of the middle layer, thus creating a perfectly blended blurred effect seen by the end user. This makes the page display more aesthetically pleasing, giving the blurred component a frosted glass-like display effect.

[0051] In one possible implementation, S130 defines the display area of ​​the overall blurred image based on the location area of ​​the blurred component, and further includes the following steps:

[0052] S310. Create a path object.

[0053] A path object, such as the android.graphics.Path class in the Android Application Programming Interface (API), is a data structure used to encapsulate and describe two-dimensional geometric paths (composed of line segments, curve segments, etc.). This step first instantiates an empty path object in the program to store the position information of the blurred component later.

[0054] S320. Add the position information of the blurred component's location area to the path object.

[0055] After obtaining the location region of the blur component (usually a rectangle object), the methods provided by the path object are called to add and encapsulate the position and size information of this rectangle into the path object created in the previous step. In this way, the path object specifically defines a geometric region that is completely equivalent to the blur component.

[0056] S330. Limit the display of the overall blurred map to the area defined by the path object.

[0057] When finally rendering the interface, this path object is used as the basis to constrain the drawing range of the overall blurred image. All image portions outside the geometric area defined by the path object will be ignored or not rendered.

[0058] According to the scheme of this disclosure, a path object is used as an intermediate medium to transform the location region into a specific geometric description that can be directly used by a graphics API. This approach has high flexibility and extensibility, and can define not only simple rectangles, but also rounded rectangles, circles, and even arbitrary irregular shapes, providing the possibility for realizing diverse fuzzy regions.

[0059] In one possible implementation, S330 limits the display of the overall blurred map to the area defined by the path object, further including the following steps:

[0060] S331. When drawing the overall blurred image, the canvas is cropped according to the path object so that only the overall blurred image part within the path object is displayed.

[0061] The canvas, such as the android.graphics.Canvas class in the Android API, is the target interface for all drawing operations performed by an application. It provides a series of drawing command APIs. Clip is one of the advanced commands, which can restrict all subsequent drawing operations to a preset area.

[0062] The specific implementation of this step is as follows: In the `onDraw` method of the custom View responsible for drawing the overall blurred image, before calling the `drawBitmap` instruction, the `canvas.clipPath(path)` method is called first. Here, `path` is the path object with added position information in the previous embodiment. After this instruction is executed, the drawing area of ​​the canvas (such as...) Figure 2 The area shown in 206 is temporarily confined within the shape defined by the path (e.g., Figure 2(See area 204 in the image). When the command to draw the overall blurred image is subsequently executed, the system automatically renders only the image portion within the path, thus achieving precise area-specific display. Furthermore, when the position of the blurred component changes, the drawing area of ​​the canvas changes synchronously. In the above process, no actual cropping of the overall blurred image is performed; instead, unnecessary areas are directly masked at the rendering level.

[0063] According to the embodiments of this disclosure, utilizing the canvas clipping function is a high-performance graphics operation, typically performed by hardware acceleration (e.g., GPU). It avoids costly operations such as manually calculating pixels and creating new temporary bitmaps via the CPU, instead directly "masking" unnecessary areas at the rendering level. This results in almost no performance loss during the process of defining the display area, ensuring extremely smooth list scrolling.

[0064] In one possible implementation, S320 adds the location information of the blurred component's location region to the path object, further including:

[0065] S321. Generate the position information of a rounded rectangle with rounded corners by calling the addRoundRect method in the graphics drawing API.

[0066] In the UI design of related technologies, cards and components often have rounded corners. To ensure that the shape of the blurred background perfectly matches the rounded corners of the blurred component, this step does not directly use simple rectangle information. Instead, it calls methods in the graphics drawing API specifically designed for handling rounded rectangles, such as the addRoundRect() method in the Android Path class. This method allows passing in a rectangular area and an array that defines the rounded radii of all four corners.

[0067] S322. Add the position information of the rounded rectangle to the path object.

[0068] By calling the addRoundRect method mentioned above, the path object generates and stores a rectangular path with precisely rounded corners, rather than a simple right-angled rectangle.

[0069] According to the solution of the present disclosure, the edges of the blurred background can present smooth rounded corners, which can achieve pixel-level precise alignment with the rounded corner UI design of the upper list items, greatly improving the visual fidelity and design aesthetics of the interface, and avoiding the inconsistency of the blurred background having hard right angles while the UI components have rounded corners.

[0070] In one possible implementation, S120 acquires in real time the location area of ​​the blurred component in the display interface that needs to display a blurred effect, and further includes the following steps:

[0071] S121. During list scrolling, call the getGlobalVisibleRect method of the blurred component to dynamically calculate and obtain its visible position rectangle on the screen, so as to obtain the position area.

[0072] In practice, a scroll listener (OnScrollListener) can be set for the list view (such as RecyclerView). In the onScrolled callback method of this listener, all currently visible list items are iterated over. For each list item (i.e., a blurred component), its getGlobalVisibleRect() method is called. This method is a standard API provided by the Android View class, which calculates the absolute coordinates of the view relative to the entire phone screen and stores the result in the passed-in Rect object. This Rect object precisely represents the currently visible area of ​​the blurred component on the screen.

[0073] According to the solution of this disclosure embodiment, the dynamic position of a component during scrolling can be stably, efficiently, and accurately obtained by calling the getGlobalVisibleRect method provided by the system. This method considers all complex factors such as scroll offset and parent layout position, ensuring that the calculated position area is accurate and providing reliable data input for subsequent blur region clipping, thus guaranteeing perfect synchronization between the blur effect and the component position.

[0074] In one possible implementation, S110 generates an overall blurred image based on the background image of the display interface, further including the following steps:

[0075] S111. Use graphics processing libraries or hardware acceleration rendering technology to perform Gaussian blur calculation on the background image of the display interface to generate an overall blurred image.

[0076] Gaussian blur is an image blurring algorithm. To execute this algorithm efficiently, this step can be implemented using various techniques. For example, on the Android platform, the RenderScript framework or custom shaders written using OpenGL / Vulkan can be used to leverage GPU hardware acceleration. Alternatively, mature third-party graphics processing libraries such as Glide and Picasso can be used, which encapsulate efficient blur conversion algorithms. Choosing these techniques allows blurring a full-screen background image within milliseconds to tens of milliseconds.

[0077] According to the embodiments of this disclosure, by utilizing hardware acceleration technology specifically designed for graphics processing or a highly optimized graphics library, the initial step of generating the overall blurred image is made very fast, shortening the interface startup loading time. This ensures that while the solution brings a significant improvement in runtime performance, it does not negatively impact the initial loading performance of the application.

[0078] In one possible implementation, generating a complete blurred image is performed only once when the display interface is initialized, or regenerated when the background image changes.

[0079] This step clarifies the timing of time-consuming calculations in S110 to maximize performance gains.

[0080] Executed once during UI initialization: In the corresponding UI lifecycle method (such as onCreate or onViewCreated), the logic for generating the overall blurry image is executed once. The generated image is cached in memory for use throughout the entire lifecycle of the UI.

[0081] Regenerating the background image when it changes: In some applications, users may be allowed to change the background image. A listening mechanism needs to be set up so that when a change in the background image source is detected, the logic for regenerating the overall blurred image is triggered again, and the old image cached in memory is replaced with the new blurred image.

[0082] According to the solution of this disclosure, the most costly fuzzy computation is strictly controlled in the lowest frequency scenarios, completely avoiding any repetitive calculations during high-frequency user operations (such as scrolling). This "pre-computation and caching" design concept fundamentally changes the processing flow and is key to achieving a smooth user experience.

[0083] Figure 4 This is a schematic diagram of the structure of a background blur processing device for a display interface provided according to an embodiment of the present disclosure. Figure 4 As shown, the device includes:

[0084] The blur module 401 is used to generate an overall blurred image based on the background image of the display interface.

[0085] The region acquisition module 402 is used to acquire the location region of the blurred component that needs to be displayed in the display interface in real time.

[0086] Display module 403 is used to limit the display area of ​​the overall blurred image according to the position area of ​​the blurred component, so that the overall blurred image is only visible in the area overlapping with the position of the blurred component.

[0087] In one possible implementation, the display interface includes a list layer containing the display components arranged from top to bottom, an intermediate layer containing the blurred image, and a background layer containing the background image.

[0088] In one possible implementation, the display module 403 is used for:

[0089] Create a path object.

[0090] Add the location information of the blurred component's location area to the path object.

[0091] The display of the overall blurred map is limited to the area defined by the path object.

[0092] In one possible implementation, the display module 403 is used for:

[0093] When drawing the overall blurred image, the canvas is cropped based on the path object, so that only the overall blurred image portion within the path object is displayed.

[0094] In one possible implementation, the display module 403 is used for:

[0095] The position information of a rounded rectangle with rounded corners is generated by calling the addRoundRect method in the graphics drawing API.

[0096] Add the position information of the rounded rectangle to the path object.

[0097] In one possible implementation, the region acquisition module 402 is used for:

[0098] During list scrolling, the getGlobalVisibleRect method of the blurred component is called to dynamically calculate and obtain its visible position rectangle on the screen, thus obtaining the position area.

[0099] In one possible implementation, the fuzzy module 401 is used for:

[0100] Gaussian blur calculations are performed on the background image of the display interface using graphics processing libraries or hardware-accelerated rendering techniques to generate an overall blurred image.

[0101] In one possible implementation, generating a complete blurred image is performed only once when the display interface is initialized, or regenerated when the background image changes.

[0102] The specific functions and examples of each module and submodule of the apparatus in this disclosure can be found in the relevant descriptions of the corresponding steps in the above method embodiments, and will not be repeated here.

[0103] The acquisition, storage, and application of user personal information involved in the technical solution disclosed herein comply with the provisions of relevant laws and regulations and do not violate public order and good morals.

[0104] According to embodiments of this disclosure, this disclosure also provides an electronic device, a readable storage medium, and a computer program product.

[0105] Figure 5 A schematic block diagram of an example electronic device 500 that can be used to implement embodiments of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital assistants, cellular phones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the present disclosure described and / or claimed herein.

[0106] like Figure 5 As shown, device 500 includes a computing unit 501, which can perform various appropriate actions and processes based on a computer program stored in read-only memory (ROM) 502 or a computer program loaded from storage unit 508 into random access memory (RAM) 503. RAM 503 may also store various programs and data required for the operation of device 500. The computing unit 501, ROM 502, and RAM 503 are interconnected via bus 504. Input / output (I / O) interface 505 is also connected to bus 504.

[0107] Multiple components in device 500 are connected to I / O interface 505, including: input unit 506, such as keyboard, mouse, etc.; output unit 507, such as various types of monitors, speakers, etc.; storage unit 508, such as disk, optical disk, etc.; and communication unit 509, such as network card, modem, wireless transceiver, etc. Communication unit 509 allows device 500 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0108] The computing unit 501 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the computing unit 501 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 501 performs the various methods and processes described above, such as the background blurring method for a display interface. For example, in some embodiments, the background blurring method for a display interface can be implemented as a computer software program tangibly contained in a machine-readable medium, such as storage unit 508. In some embodiments, part or all of the computer program can be loaded and / or installed on device 500 via ROM 502 and / or communication unit 509. When the computer program is loaded into RAM 503 and executed by the computing unit 501, one or more steps of the background blurring method for a display interface described above can be performed. Alternatively, in other embodiments, the computing unit 501 can be configured to perform the background blurring method for a display interface by any other suitable means (e.g., by means of firmware).

[0109] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), payload-programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0110] The program code used to implement the methods of this disclosure may be written in any combination of one or more programming languages. This program code may be provided to a processor or controller of a general-purpose computer, special-purpose computer, or other programmable data processing apparatus, such that when executed by the processor or controller, the program code causes the functions / operations specified in the flowcharts and / or block diagrams to be implemented. The program code may be executed entirely on a machine, partially on a machine, as a standalone software package partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

[0111] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0112] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device for displaying information to the user (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor); and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the computer. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0113] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as a data server), or computing systems that include middleware components (e.g., an application server), or computing systems that include frontend components (e.g., a user computer with a graphical user interface or web browser through which a user can interact with embodiments of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., a communication network). Examples of communication networks include local area networks (LANs), wide area networks (WANs), and the Internet.

[0114] Computer systems can include clients and servers. Clients and servers are generally located far apart and typically interact via communication networks. Client-server relationships are created by computer programs running on the respective computers and having a client-server relationship with each other. Servers can be cloud servers, servers in distributed systems, or servers incorporating blockchain technology.

[0115] It should be understood that the various forms of processes shown above can be used to rearrange, add, or delete steps. For example, the steps described in this disclosure can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution disclosed in this disclosure can be achieved, and this is not limited herein.

[0116] The specific embodiments described above do not constitute a limitation on the scope of protection of this disclosure. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A method for processing background blur of a display interface, comprising: generating an overall blur image according to a background image of the display interface; obtaining a position area of a blur component in the display interface in real time, the blur component being required to exhibit a blur effect; defining a display area of the overall blur image according to the position area of the blur component, so that the overall blur image is only visible in an area overlapping the position of the blur component.

2. The method of claim 1, wherein, The display interface comprises a list layer in which display components are arranged from top to bottom, an intermediate layer in which the blur image is located, and a background layer in which the background image is located.

3. The method of claim 1, wherein, The defining of the display area of the overall blur image according to the position area of the blur component comprises: creating a path object; adding position information of the position area of the blur component to the path object; and defining the display of the overall blur image within an area defined by the path object.

4. The method of claim 3, wherein, The defining of the display of the overall blur image within the area defined by the path object comprises: clipping a canvas according to the path object when drawing the overall blur image, so that only the part of the overall blur image within the path object is displayed.

5. The method of claim 3, wherein, The adding of the position information of the position area of the blur component to the path object comprises: generating a rounded rectangle position information with rounded corners by calling an addRoundRect method in a graphics drawing API; and adding the rounded rectangle position information to the path object.

6. The method of claim 1, wherein, The obtaining of the position area of the blur component in the display interface in real time comprises: calling a getGlobalVisibleRect method of the blur component to dynamically calculate and obtain a visible position rectangle of the blur component on a screen during list scrolling, so as to obtain the position area.

7. The method of claim 1, wherein, The generating of the overall blur image according to the background image of the display interface comprises: performing Gaussian blur calculation on the background image of the display interface by using a graphics processing library or a hardware acceleration rendering technology, to generate the overall blur image.

8. The method of claim 1 or 7, wherein, The generating of the overall blur image is performed only once when the display interface is initialized, or is re-performed when the background image changes. 9.A device for processing background blur of a display interface, comprising: a blur module configured to generate an overall blur image according to a background image of the display interface; an area obtaining module configured to obtain a position area of a blur component in the display interface in real time, the blur component being required to exhibit a blur effect; and a display module configured to define a display area of the overall blur image according to the position area of the blur component, so that the overall blur image is only visible in an area overlapping the position of the blur component. 10.An electronic device, comprising: at least one processor; and a memory connected to the at least one processor in communication; wherein the memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-8.

11. A non-transitory computer readable storage medium having stored thereon computer instructions, wherein, The computer instructions are for causing the computer to perform the method according to any one of claims 1-8.

12. A computer program product comprising computer program which, when executed by a processor, implements the method according to any one of claims 1-8.

Images