A display method and an electronic device

Abstract

The application discloses a display method and an electronic device, relates to the display field, and is used for enhancing the display effect of a first image on a display interface, thereby enhancing the difference between the first image and a background image, and making the first image easy to be recognized. The method comprises the following steps: in response to a first event, a first interface is displayed. The first event is used for triggering the electronic device to display a second interface. The second interface comprises the first image and a background image located below a layer corresponding to the first image. The first image is obtained based on a SVG source file of text and / or an icon. The first interface comprises the first image, a second image and the background image from top to bottom. The second image is obtained based on the contour of the first image and the color of the first image at a position corresponding to the background image.

Description

Technical Field

[0001] This application relates to the field of display, and more particularly to a display method and an electronic device. Background Technology

[0002] Typically, the display interface of an electronic device can include a background image and a primary image (such as text, icons, etc.), with the primary image positioned above the corresponding layer of the background image. When the background image is a solid color or opaque, the primary image is significantly different from the background image, making it easy to identify and resulting in a better visual experience for the user. However, when the background image is an immersive scene, the characteristics of immersive scenes, such as image blurring, semi-transparency, and low color contrast, make the primary image less distinct from the background image, making it harder to identify and resulting in a poorer visual experience for the user. Summary of the Invention

[0003] This application provides a display method and an electronic device for enhancing the display effect of a first image on a display interface, thereby enhancing the distinction between the first image and the background image and making the first image easier to identify.

[0004] To achieve the above objectives, this application adopts the following technical solution:

[0005] In a first aspect, a display method is provided, comprising: an electronic device displaying a first interface in response to a first event. The first event is used to trigger the electronic device to display a second interface. The second interface includes a first image and a background image located below a layer corresponding to the first image. The first image is obtained from an SVG source file based on text and / or icons. The first interface includes a first image, a second image, and a background image. The second image is located below the layer corresponding to the first image and above the layer corresponding to the background image. The second image is obtained based on the outline of the first image and the color of the first image at a corresponding position in the background image.

[0006] The outline of the second image is derived from the outline of the first image, therefore the outline of the second image is identical to that of the first image. Simultaneously, the color of the second image is derived from the color of the first image at the corresponding position in the background image, making the color of the second image quite similar to the background image. The second image is overlaid below the layer corresponding to the first image. This enhances the display effect of the first image, such as improving its color and recognizability, making it more prominent and easier to identify. Furthermore, the similarity between the colors of the second image and the background image ensures a harmonious color scheme between the first and background images, resulting in a more coordinated overall style for the first interface.

[0007] In one possible implementation of the first aspect, the above-mentioned response to the first event to display the first interface may include: First, the electronic device, in response to the first event, acquires a first image and a background image. Then, the electronic device obtains a second image based on the outline of the first image and the color of the first image at the corresponding position in the background image. Finally, the electronic device places the second image below the layer corresponding to the first image and above the layer corresponding to the background image, and composites the background image, the first image, and the second image to display the first interface.

[0008] In another possible implementation of the first aspect, the electronic device obtains a second image based on the outline of the first image and the color of the first image at the corresponding position in the background image. This may include: First, the electronic device performs coordinate transformation on the relative coordinates of the first image to obtain the screen coordinates of the first image. Then, based on the screen coordinates of the first image, the electronic device obtains a third image from the background image. Thus, the screen coordinates of the third image are the same as the screen coordinates of the first image, making the position of the third image on the background image the same as the position of the first image on the background image. Next, the electronic device obtains a fourth image from the third image that has the same outline as the first image. Therefore, the RGB value of the fourth image is related to the RGB value of the first image at the corresponding position in the background image. Finally, the electronic device performs display enhancement processing on the fourth image to obtain the second image.

[0009] In another possible implementation of the first aspect, the electronic device acquires a fourth image from the third image that has the same outline as the first image, comprising: the electronic device using a second color calculation formula to acquire a fourth image from the third image that has the same outline as the first image.

[0010] Here, the formula for calculating the second color can be: .

[0011] in, The first initial RGB value for the fourth image; The second target RGB value of the third image; The first transparency of the first image, and Used to represent the outline of the first image.

[0012] In another possible implementation of the first aspect, the electronic device acquires a third image from a background image based on the screen coordinates of the first image, comprising: first, the electronic device acquires a fifth image from the background image based on the screen coordinates of the first image. Here, the screen coordinates of the fifth image are the same as the screen coordinates of the first image, so the position of the fifth image on the background image is the same as the position of the first image on the background image. Then, the electronic device adjusts the RGB values ​​of the fifth image to obtain the third image.

[0013] In other words, the fifth image is the original image of the third image, and the third image is the fifth image after adjusting its RGB values.

[0014] In another possible implementation of the first aspect, the electronic device adjusts the RGB values ​​of the fifth image to obtain the third image, including: first, the electronic device substitutes the second initial RGB values ​​of the fifth image and the first saturation matrix into the first saturation calculation formula to obtain the second target RGB values. Then, the electronic device adjusts the RGB values ​​of the fifth image from the second initial RGB values ​​to the second target RGB values ​​to obtain the third image.

[0015] Here, the formula for calculating the first saturation can be:

[0016]

[0017] in, This is the second initial RGB value; The second target RGB value; This is the first saturation matrix.

[0018] In another possible implementation of the first aspect, the electronic device substitutes the second initial RGB value and the first saturation matrix of the fifth image into the first saturation calculation formula to obtain the second target RGB value, including: First, the electronic device adds a target filter to the layer corresponding to the fifth image to adjust the second initial RGB value of the fifth image to a third RGB value. The target filter is used to weaken the color of the fifth image. Next, the electronic device substitutes the third RGB value and the first saturation matrix of the fifth image into the first saturation calculation formula to obtain the second target RGB value.

[0019] In another possible implementation of the first aspect, the electronic device enhances the display effect of the fourth image to obtain a second image, including: First, the electronic device stores the first image and the fourth image in a tree structure. The node containing the first image is the upper-level node, and the node containing the fourth image is the lower-level node, with the lower-level node changing according to the changes in the upper-level node. Then, based on the display attributes of the first image, the electronic device performs motion effect adaptation processing on the fourth image to obtain a sixth image that completely overlaps with the first image. The display attributes can include attributes unrelated to color, such as positioning attributes and motion effect attributes. The RGB values ​​of the sixth image are the RGB values ​​of the fourth image. Finally, the electronic device adjusts the RGB values ​​of the sixth image from a first target RGB value to a third target RGB value to obtain the second image.

[0020] In another possible implementation of the first aspect, before adjusting the RGB values ​​of the sixth image from the first target RGB value to the third target RGB value to obtain the second image, the method further includes: adjusting the RGB values ​​of the fourth image from the first initial RGB value to the first target RGB value. The first target RGB value corresponds to the target saturation of the fourth image.

[0021] In another possible implementation of the first aspect, the electronic device adjusts the RGB values ​​of the fourth image from the first initial RGB values ​​to the first target RGB values, comprising: first, substituting the first initial RGB values ​​of the fourth image and the second saturation matrix into the second saturation calculation formula to obtain the first target RGB values; then, adjusting the RGB values ​​of the fourth image from the first initial RGB values ​​to the first target RGB values.

[0022] Here, the formula for calculating the second saturation can be:

[0023]

[0024] in, The first initial RGB value; The first target RGB value; This is the second saturation matrix.

[0025] In another possible implementation of the first aspect, the electronic device adjusts the RGB value of the sixth image from the first target RGB value to the third target RGB value, including: the electronic device adjusting the RGB value of the sixth image from the first target RGB value to the third target RGB value by increasing the brightness of the sixth image.

[0026] In another possible implementation of the first aspect, the electronic device increases the brightness of the sixth image by adjusting the RGB values ​​of the sixth image from a first target RGB value to a third target RGB value, comprising: first, the electronic device converts the first target RGB value to a first HSV value; then, the electronic device adjusts the HSV values ​​of the sixth image from the first HSV value to a second HSV value; then, the electronic device converts the second HSV value to a third target RGB value; and finally, the electronic device adjusts the RGB values ​​of the sixth image from the first target RGB value to the third target RGB value.

[0027] In the first HSV value mentioned above, V represents the first lightness, and in the second HSV value, V represents the second lightness, and the second lightness is greater than the first lightness.

[0028] In another possible implementation of the first aspect, the electronic device converts the first target RGB value into a first HSV value by substituting the first target RGB value into a third color calculation formula to obtain the first HSV value.

[0029] Here, the formula for calculating the third color can be:

[0030]

[0031]

[0032]

[0033] in, , , ; ( , , () is the first target RGB value; , , The first HSV value is 0. , .

[0034] In another possible implementation of the first aspect, the electronic device converts the second HSV value into a third target RGB value by substituting the second HSV value into a fourth color calculation formula to obtain the third target RGB value.

[0035] Here, the formula for calculating the fourth color can be:

[0036]

[0037]

[0038]

[0039]

[0040]

[0041] in,( , , ) is the third target RGB value; , , () is the second HSV value.

[0042] In another possible implementation of the first aspect, the electronic device adjusts the RGB value of the sixth image from the first target RGB value to the third target RGB value, including: the electronic device performs color fusion on the sixth image and the first image to adjust the RGB value of the sixth image from the first target RGB value to the third target RGB value.

[0043] In another possible implementation of the first aspect, the aforementioned electronic device employs a color fusion method between the sixth image and the first image, adjusting the RGB value of the sixth image from a first target RGB value to a third target RGB value. This includes: first, the electronic device substituting the first transparency of the first image, the RGB value of the first image, and the first target RGB value of the sixth image into a fifth color calculation formula to obtain the third target RGB value. Then, the electronic device adjusts the first target RGB value to the third target RGB value.

[0044] Here, the formula for calculating the fifth color can be:

[0045]

[0046] in,( , , () represents the third target RGB value; The RGB values ​​of the first image; The first target RGB value; The first transparency of the first image.

[0047] In another possible implementation of the first aspect, the electronic device adjusts the RGB value of the sixth image from the first target RGB value to the third target RGB value by: the electronic device increasing the brightness of the sixth image and performing color fusion on the sixth image and the first image to adjust the first target RGB value to the third target RGB value.

[0048] In another possible implementation of the first aspect, after acquiring the second image, the electronic device can further adjust the transparency of the first image from a first transparency level to a second transparency level. Here, the transparency of the second image changes with the transparency of the first image, and the transparency of the second image is the same as the transparency of the first image.

[0049] In another possible implementation of the first aspect, the first interface is matched with the ambient light information of the light environment in which the electronic device is located. The ambient light information may include ambient illuminance and ambient color temperature.

[0050] In another possible implementation of the first aspect, the electronic device places the second image below the layer corresponding to the first image and above the layer corresponding to the background image, and composites the background image, the first image, and the second image to display the first interface. This includes: First, the electronic device places the second image below the layer corresponding to the first image and above the layer corresponding to the background image, and composites the background image, the first image, and the second image to obtain a third interface. Next, the electronic device adjusts the RGB values ​​of the third interface using its color temperature conversion matrix to display the first interface. The color temperature conversion matrix is ​​obtained based on the ambient light information of the lighting environment in which the electronic device is located. That is, the color temperature conversion matrix is ​​related to the lighting environment in which the electronic device is located.

[0051] In another possible implementation of the first aspect, the electronic device uses a color temperature conversion matrix to adjust the RGB values ​​of the third interface to display the first interface, including: first, the electronic device uses the color temperature conversion matrix and the fourth initial RGB value of the third interface to obtain a fourth target RGB value. Then, the electronic device adjusts the fourth initial RGB value of the third interface to the fourth target RGB value and displays the first interface.

[0052] Since the color temperature conversion matrix is ​​based on the ambient light information of the electronic device's lighting environment, adjusting the RGB values ​​of the third interface using the color temperature conversion matrix will match the first interface with the lighting environment of the electronic device, further enhancing the user's visual experience.

[0053] In another possible implementation of the first aspect, the electronic device uses the color temperature conversion matrix of the electronic device and the fourth initial RGB value of the third interface to obtain the fourth target RGB value, including: the electronic device substitutes the color temperature conversion matrix of the electronic device and the fourth initial RGB value of the third interface into the first color calculation formula to obtain the fourth target RGB value.

[0054] Here, the formula for calculating the first color can be:

[0055]

[0056] in, This is the fourth initial RGB value; The fourth target RGB value; This is the color temperature conversion matrix.

[0057] Secondly, this application provides an electronic device including a display screen, a processor, and a memory. The memory stores instructions, and when the processor executes the instructions, the method described in the first aspect and any embodiment thereof is executed to obtain a first interface. The display screen is used to display the first interface.

[0058] Thirdly, a computer-readable storage medium is provided, including instructions that, when executed on an electronic device, cause the electronic device to perform the method as described in the first aspect and any embodiment thereof.

[0059] Fourthly, a computer program product containing instructions is provided, which, when executed on the aforementioned electronic device, cause the electronic device to perform the method as described in the first aspect and any embodiment thereof.

[0060] Fifthly, a chip system is provided, including a processor for supporting an electronic device in implementing the functions described in the first aspect above. In one possible design, the electronic device further includes interface circuitry for receiving signals from other devices (e.g., memory) or sending signals to other devices (e.g., a communication interface). The chip system may include a chip and may also include other discrete devices.

[0061] The technical effects of the second to fifth aspects can be found in the technical effects of the first aspect and any of its embodiments, and will not be repeated here. Attached Figure Description

[0062] Figure 1 This is one of the schematic diagrams of the display interface of an electronic device in conventional technology;

[0063] Figure 2 This is the second schematic diagram of the display interface of an electronic device in conventional technology;

[0064] Figure 3 This is the third schematic diagram of the display interface of an electronic device in conventional technology;

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

[0066] Figure 5 A schematic diagram of the software architecture of an electronic device provided in an embodiment of this application;

[0067] Figure 6 This is one of the flowcharts illustrating a display method provided in an embodiment of this application;

[0068] Figure 7 A schematic diagram of a bitmap image provided in an embodiment of this application;

[0069] Figure 8 This application provides a schematic diagram of the grouping structure of an SVG source file.

[0070] Figure 9 A schematic diagram of a display interface provided in an embodiment of this application;

[0071] Figure 10 A second schematic flowchart illustrating a display method provided in an embodiment of this application;

[0072] Figure 11 This application provides a schematic diagram illustrating the relationship between a third image and a background image in an embodiment of the present application.

[0073] Figure 12 A third schematic flowchart illustrating a display method provided in an embodiment of this application;

[0074] Figure 13 This application provides a schematic diagram illustrating the relationship between a first image and a fourth image in an embodiment of the present application.

[0075] Figure 14 This is one of the schematic diagrams illustrating the display effect of a first image provided in an embodiment of this application;

[0076] Figure 15 A second schematic diagram illustrating the display effect of a first image provided in an embodiment of this application;

[0077] Figure 16 This is a schematic diagram of a chip system provided in an embodiment of this application. Detailed Implementation

[0078] The terms "first" and "second" used in the embodiments of this application are only used to distinguish features of the same type and should not be construed as indicating relative importance, quantity, order, etc.

[0079] The terms "exemplary" or "for example" used in the embodiments of this application are used to indicate examples, illustrations, or descriptions. Any embodiment or design described as "exemplary" or "for example" in this application should not be construed as being more preferred or advantageous than other embodiments or designs. Specifically, the use of terms such as "exemplary" or "for example" is intended to present the relevant concepts in a specific manner.

[0080] The terms "coupling" and "connection" used in the embodiments of this application should be interpreted broadly. For example, they can refer to a physical direct connection or an indirect connection achieved through electronic devices, such as a connection achieved through resistors, inductors, capacitors or other electronic devices.

[0081] First, some concepts involved in the embodiments of this application will be introduced.

[0082] Scalable vector graphics (SVG) are a type of markup language used to describe two-dimensional vector graphics, based on Extensible Markup Language (XML). Scalable vector graphics do not lose their graphic quality when enlarged or resized.

[0083] Color values ​​(alpha, red, green, blue, ARGB) are a color encoding method that includes four components: alpha (transparency), red (red), green (green), and blue (blue). Alpha (transparency) values ​​range from 0 to 255, representing the degree of transparency from completely transparent to completely opaque. Red values ​​range from 0 to 255, representing progressively increasing brightness of red, green, and blue. All four components are integers and can be converted to hexadecimal numbers for use.

[0084] Bitmap images, also known as bitmaps, are a common image data format. A bitmap consists of a matrix of pixels, with each pixel having a specific color value. Bitmaps can be used to represent various types of images (such as icons, text, etc.).

[0085] In user experience (UX) design, content is typically categorized into four levels based on its importance, excluding background images (such as icons and text). These are typically level 1, level 2, level 3, and level 4 content. The following example uses icons and text as examples.

[0086] Table 1 shows a classification table for text in conventional technology. Table 2 shows a classification table for icons in conventional technology.

[0087] Table 1

[0088]

[0089] As shown in Table 1, when the above content is text, the transparency varies between different text levels, and the transparency decreases as the text level increases. However, the RGB values ​​of each text level can be the same. For example, the RGB values ​​of each text level can all be #666666 (i.e., the color of each text level is medium gray). Of course, the RGB values ​​of each text level can also be different.

[0090] Table 2

[0091]

[0092] As shown in Table 2, when the above content consists of icons, the transparency varies between different icon levels, and the transparency decreases as the icon level increases. Furthermore, the RGB values ​​of each icon level are the original RGB values ​​of the corresponding SVG.

[0093] When the background image of the display interface is a solid color or opaque, the color value difference between the first image and the background image is relatively large. This makes the first image easily recognizable, resulting in a better visual experience for the user. However, when the background image is an immersive scene, due to the characteristics of immersive scenes such as image blurring, semi-transparency, and low color contrast, the color value difference between the first image and the background image is smaller. This makes the first image harder to recognize, leading to a poorer visual experience for the user.

[0094] To address the aforementioned technical problems, a conventional solution involves the electronic device, in response to a user's trigger, switching the RGB values ​​of the first image on the display interface to the target RGB values ​​(which differ significantly from the background image's RGB values), thereby enhancing the display effect of the first image. However, this approach still suffers from the following issues:

[0095] When the first image is at level one, its transparency is 100% (i.e., completely opaque), and its RGB values ​​differ from the background image's. This results in a significant color difference between the first and background images, making the first image easily recognizable. However, this also leads to a large stylistic difference between the first and background images, resulting in an inconsistent overall style of the display interface.

[0096] When the level of the first image is any level from level two to level four, even if the RGB values ​​of the first image are different from those of the background image, the first image is still not easy to recognize because of its high transparency (e.g., 30%-80%), which makes it semi-transparent.

[0097] The following example uses a mobile phone as an electronic device, combined with... Figures 1-3 This paper introduces the solutions found in conventional techniques.

[0098] In a scenario, such as Figure 1As shown, the mobile phone displays an emergency call interface 100. The emergency call interface 100 includes: a first background image 101, and a first card 102, a second card 103, and a third card 104 located on the first background image 101. The first background image 101 includes the primary text "Personal Emergency Information". The first card 102 includes the secondary text "110" and the tertiary text "Police". The second card 103 includes the secondary text "120" and the tertiary text "Medical Emergency". The third card 104 includes the secondary text "119" and the tertiary text "Fire".

[0099] Wherein: The first background image 101 is a gradient pink (not shown in the figure), and its transparency is 90% (not shown in the figure). The first-level text is blue (i.e., the target RGB value is #0000FF), and its transparency is 100%. That is, the color value of the first-level text is 100% + #0000FF. The second-level text is white (i.e., the target RGB value is #FFFFFF), and its transparency is 80%. That is, the color value of the second-level text is 80% + #FFFFFF. The third-level text is white, and its transparency is 50%. That is, the color value of the third-level text is 50% + #FFFFFF.

[0100] Because the primary text is completely opaque and its RGB values ​​are completely different from those of the background image, it is easily recognizable. However, the significant color difference between the primary text and the background image creates an inconsistent overall style for the emergency call interface 100.

[0101] Although the RGB values ​​of the level 2 and level 3 text are completely different from those of the background image, the colors of the level 2 and level 3 text match those of the background image. Furthermore, due to the high transparency of the level 2 and level 3 text, they appear semi-transparent, making them difficult to recognize.

[0102] It should be noted that, Figure 1 In order to represent different colors, a solid rectangle represents blue with 100% transparency, a solid underline represents white with 80% transparency, and a dashed rectangle represents white with 50% transparency.

[0103] In another scenario, such as Figure 2As shown, the mobile phone displays a notification interface 200. The notification interface 200 includes: a second background image 210, and multiple notification cards such as an incoming call notification card 220 and a smart interconnection notification card 230 located on the second background image 210. Among them, the color of the second background image 210 is black (not shown in the figure), and the transparency of the second background image 210 is 100% (not shown in the figure). The color of the incoming call notification card 220 is gray and the transparency is 100%. The incoming call notification card 220 includes first-level texts "Hang up" and "Answer". The color of the first-level texts is blue and the transparency is 100%. The color of the smart interconnection notification card 230 is gray and the transparency is 100%. The smart interconnection notification card 230 includes a first-level icon 2301. The color of the first-level icon is blue and the transparency is 100%.

[0104] Since the first-level texts and the first-level icon are completely opaque, and the color of the first-level texts is completely different from the color of the incoming call notification card 220, and the color of the first-level icon 2301 is completely different from the color of the smart interconnection notification card 230, the first-level texts and the first-level icon are easily recognizable. However, the color difference between the first-level texts and the incoming call notification card 220 is relatively large, and the color difference between the first-level icon 2301 and the smart interconnection notification card 230 is relatively large, making the overall style of the notification interface 200不协调.

[0105] In another scenario, as Figure 3 shown, the mobile phone displays a search interface 300. The search interface 300 includes: a third background image 301, a search box 310, a first search result card 320, a second search result card 330, a third search result card 340, and other search result cards. The content in the first search result card 320, the second search result card 330, and the third search result card 340 are the search results of the mobile phone in response to the search term entered in the search box 310.

[0106] Among them, the color of the third background image 301 is black (not shown in the figure), and the transparency of the second background image 210 is 100% (not shown in the figure). The colors of the first search result card 320, the second search result card 330, and the third search result card 340 are gray and the transparency is 100%.

[0107] Among them, when the mobile phone responds to the search term "Ying" entered in the search box 310: The first search result card 320 displays: "Ying" - Search. Among them, "Ying" is a first-level text. The color of the first-level text is blue and the transparency is 100%.

[0108] It should be noted that the word "不协调" in the original text seems to be incorrect or incomplete. I translated it as "不协调" as it is, but it might need to be corrected to a proper expression in the context.Among them, the second search result card 330 shows: the application market, the icon corresponding to the application market, and the application ranking control 3301, the high-quality application control 3302, the SIM card application 1, the icon corresponding to the SIM card application 1, the SIM card application 2, and the icon corresponding to the SIM card application 2. Among them, the "ying" in the application market, the "ying" in the SIM card application 1, the "ying" in the SIM card application 2, the application ranking control 3301, and the high-quality application control 3302 are all first-level texts.

[0109] Among them, the third search result card 340 shows: the browser, the icon corresponding to the browser, and the installation control 3401. Among them, the installation control 3401 is a first-level text.

[0110] Since the first-level text is completely opaque and the color of the first-level text is completely different from the colors of the respective search result cards, the first-level text is very easy to identify. However, the large color difference between the first-level text and the colors of the respective search result cards makes the overall style of the search interface 300不协调.

[0111] In summary, the technical means in the conventional technology still cannot solve the above technical problems.

[0112] For this reason, the embodiments of the present application provide a display method and an electronic device. When the electronic device responds to an event (such as a user operation, etc.) for triggering the display interface, it can display a first interface. Among them, the interface triggered by the event may include a first image and a background image located below the layer corresponding to the first image. In order to make the first image easily recognizable, the first interface displayed by the electronic device further includes a second image located below the layer corresponding to the first image and above the layer corresponding to the background image.

[0113] At the same time, the outline of the second image is obtained based on the outline of the first image, so the outline of the second image is the same as the outline of the first image. At the same time, the color of the second image is obtained based on the color of the first image at the corresponding position of the background image, so that the color of the second image is relatively close to the color of the background image. The second image is superimposed and set below the layer corresponding to the first image. In this way, the display effect of the first image can be enhanced, such as enhancing the color and recognition degree of the first image, etc., so that the first image is more prominent and easier to identify. In addition, the color of the second image is relatively close to the color of the background image, making the color style of the first image related to the color of the background image, so that the overall style of the first interface is relatively协调.

[0114] The electronic device involved in this application embodiment can be a device with display and data processing functions. The electronic device can be mobile or fixed. It can be deployed on land (e.g., indoors or outdoors, handheld or vehicle-mounted), on water (e.g., ships), or in the air (e.g., airplanes, balloons). This electronic device can be referred to as user equipment (UE), access terminal, terminal unit, subscriber unit, terminal station, mobile station (MS), mobile station, terminal agent, or terminal device, etc. For example, the electronic device can be a mobile phone, tablet computer, laptop computer, etc. This application embodiment does not limit the specific type and structure of the electronic device. The following describes one possible structure of the electronic device.

[0115] Taking mobile phones as an example, Figure 4 This diagram illustrates the hardware structure of an electronic device 400 according to an embodiment of this application. The electronic device 400 may include: a processor 410, a memory 420, a universal serial bus (USB) interface 430, a power management module 440, an antenna, a communication module 450, a display screen 460, an audio module 470, a camera 480, a sensor module 490, etc.

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

[0117] Processor 410 may include one or more processing units, such as: application processor (AP), modem processor, graphics processing unit (GPU), image signal processor (ISP), controller, memory, video codec, digital signal processor (DSP), baseband processor, and / or neural network processor. Network processing units (NPUs), etc. Different processing units can be independent devices or integrated into one or more processors. The controller can be the nerve center and command center of the electronic device 400. The controller can generate operation control signals based on instruction opcodes and timing signals to control instruction fetching and execution.

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

[0119] In some embodiments, processor 410 may include one or more interfaces. The interface may include an integrated circuit (interface). Integrated circuit (I2C) interface, integrated circuit built-in audio (inter... Integrated Circuitsound (I2S) interface, Pulse Code Modulation (PCM) interface, Universal Asynchronous Receiver / Transmitter (UART) interface, Mobile Industry Processor Interface (MIPI), General Purpose Input / Output (GPIO) interface. The interface includes purpose input / output (GPIO), subscriber identity module (SIM) interface, and / or universal serial bus (USB) interface 430, etc.

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

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

[0122] The power management module 440 is used to connect the battery to the processor 410. The power management module 440 receives battery and / or power input to power the processor 410, memory 420, communication module 450, display screen 460, and camera 480, etc. The power management module 440 can also be used to monitor parameters such as battery capacity, battery cycle count, and battery health status (leakage current, impedance). In some other embodiments, the power management module 440 may also be located within the processor 410.

[0123] Communication module 450 can provide applications on electronic device 400 including wireless local area networks (WLAN) (such as wireless fidelity, Wi-Fi) Solutions for wireless communications include Fibre and Cable (Fi) networks, Bluetooth (BT), Global Navigation Satellite System (GNSS), Frequency Modulation (FM), Near Field Communication (NFC), and Infrared (IR). The communication module 450 can be one or more devices integrating at least one communication processing module. The communication module 450 receives electromagnetic waves via an antenna, performs frequency modulation and filtering of the electromagnetic wave signal, and sends the processed signal to the processor 410. The communication module 450 can also receive signals to be transmitted from the processor 410, perform frequency modulation and amplification, and then convert them into electromagnetic waves for radiation via the antenna.

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

[0125] Electronic device 400 implements display functions through a GPU, a display screen 460, and an application processor. The GPU is a microprocessor for image processing, connecting the display screen 460 and the application processor. The GPU is used to perform mathematical and geometric calculations and for graphics rendering. Processor 410 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0126] Display screen 460 is used to display images, videos, etc. Display screen 460 includes a display panel. The display panel can be a liquid crystal display (LCD) or an organic light-emitting diode (OLED). OLED (Organic Light Emitting Diode), also known as active matrix organic light emitting diode or active matrix organic light emitting diode. Matrix organic light-emitting diode (AMOLED), flexible light-emitting diode (flexible light-emitting diode). emittingdiode, FLED), Mini LED, Micro OLED, Micro OLED, quantum dot light-emitting diodes (QLED), etc.

[0127] Electronic device 400 can achieve shooting function through ISP, camera 480, video codec, GPU, display 460 and application processor.

[0128] The audio module 470 is used to convert digital audio information into analog audio signal output, and also to convert analog audio input into digital audio signal. The audio module 470 can also be used for encoding and decoding audio signals. In some embodiments, the audio module 470 may be located in the processor 410, or some functional modules of the audio module 470 may be located in the processor 410.

[0129] The camera 480 is used to capture still images or videos. An optical image of an object is generated through the lens and projected onto a photosensitive element. This photosensitive element can be a charge-coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) sensor. oxide Semiconductor (CMOS) phototransistors. The photosensitive element converts light signals into electrical signals, which are then passed to the photoelectric image sensor (ISP) for conversion into digital image signals. The ISP outputs the digital image signals to the digital signal processing DSP. The DSP converts the digital image signals into standard RGB, YUV, and other image formats.

[0130] The sensor module 490 may include an ambient light sensor, a pressure sensor, a gravity sensor, etc. The ambient light sensor can acquire ambient light information about the environment in which the electronic device is located. Ambient light information may include ambient illuminance, ambient color temperature, etc.

[0131] In some embodiments, an ambient light sensor can simultaneously acquire all ambient light information, such as ambient illuminance and ambient color temperature. In this case, the sensor module 490 may include one ambient light sensor. In other embodiments, an ambient light sensor can acquire one type of ambient light information. In this case, the sensor module 490 may include at least two different types of ambient light sensors, each acquiring ambient light information such as ambient illuminance and ambient color temperature. In still other embodiments, an ambient light sensor can acquire multiple types of ambient light information. In this case, the sensor module 490 may include at least one different type of ambient light sensor. This application embodiment uses the example of an ambient light sensor simultaneously acquiring all ambient light information for illustration.

[0132] Understandably, the implementation of electronic device functions generally requires not only hardware support but also software cooperation.

[0133] The software system of an electronic device can adopt a layered architecture, event-driven architecture, microkernel architecture, microservice architecture, or cloud architecture. This application uses the layered architecture of the Android operating system® as an example to illustrate the software structure of an electronic device.

[0134] Figure 5 A schematic diagram of the software architecture of an electronic device provided in an embodiment of this application is shown.

[0135] A layered architecture divides software into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. In some embodiments, such as... Figure 5 As shown, the Android operating system® is divided into five layers, from top to bottom: application layer, application framework layer, Android runtime and system libraries, hardware abstraction layer, and kernel layer.

[0136] The application layer can include a series of application packages. For example... Figure 5 As shown, the application package may include applications such as gallery, video, and SMS.

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

[0138] like Figure 5 As shown, the application framework layer may include, but is not limited to, a display enhancement module, a layer rendering thread (RenderThread), and a color temperature adjustment module.

[0139] The RenderThread is a proxy thread provided by the GPU to the application, running in the background to render the first image, background image, etc., involved in the embodiments of this application. For example, the RenderThread first traverses the rendering nodes (RenderNode) to obtain the first image, second image, and background image, and renders them in a top-down hierarchical order to form an overlay effect.

[0140] The display enhancement module is used to obtain a second image based on the outline of the first image and the color of the first image at the corresponding position in the background image.

[0141] Specifically, first, the display enhancement module performs coordinate transformation on the relative coordinates of the first image to obtain its screen coordinates. Next, the display enhancement module sends the first screen coordinates to the GPU in the Hardware Abstraction Layer (HAL) and receives the third image from the GPU. Then, the display enhancement module extracts a fourth image from the third image that has the same outline as the first image. Finally, the display enhancement module performs display enhancement processing on the fourth image to obtain the second image.

[0142] In other embodiments, after obtaining the screen coordinates of the first image, the display enhancement module can obtain a background image from the application layer. Next, based on the screen coordinates of the first image, the display enhancement module obtains a third image with the same size as the first image from the background image. Then, the display enhancement module obtains a fourth image with the same outline as the first image from the third image. Finally, the display enhancement module performs display enhancement processing on the fourth image to obtain the second image.

[0143] It should be noted that the background image obtained by the display enhancement module from the application layer includes the underlying background image involved in the embodiments of this application.

[0144] The color temperature adjustment module obtains ambient light information from the kernel layer and uses this information to generate a color temperature conversion matrix. Additionally, the color temperature adjustment module adjusts the RGB values ​​of the display interface based on the color temperature conversion matrix.

[0145] The Android Runtime comprises the core libraries and the virtual machine. The Android Runtime is responsible for the scheduling and management of the Android system.

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

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

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

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

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

[0151] A media library can include media providers, which store data for multimedia files, such as audio, video, and images.

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

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

[0154] The hardware abstraction layer may include a color temperature adjustment module and processors such as a GPU. The GPU is used to obtain a third image from the background image based on the screen coordinates of the first image, and then send the third image to the display enhancement module of the application framework layer.

[0155] It should be noted that the background image here includes not only the underlying background image involved in the embodiments of this application, but may also include cards and the like located above the corresponding layer of the underlying background image.

[0156] The color temperature adjustment module can also be used to adjust the brightness values ​​in an image to achieve contrast mapping and brightness balance.

[0157] The kernel layer serves as the layer between hardware and software. It may contain display drivers, sensor drivers, etc. The display driver drives the display to show the primary interface. It also sends layers composited by the composite display module to the display. The sensor driver drives the ambient light sensor to collect light information and obtains ambient light information based on that information.

[0158] The display method described in this application embodiment can be applied to electronic devices (such as mobile phones, tablets, etc.) with the aforementioned hardware and software structure. Furthermore, the display method provided in this application embodiment can be applied to extended reality (XR) scenes, dark mode, and other scenarios. XR scenes can include virtual reality (VR) scenes and augmented reality (AR) scenes. When applied in dark mode, the electronic device needs to invert the colors of the interface before displaying it.

[0159] The following is combined Figures 6-15 The display method provided in the embodiments of this application will be described.

[0160] Figure 6 This illustration shows one of the flowcharts of a display method provided in an embodiment of this application. Figure 6 As shown, the display method provided in this application embodiment may include:

[0161] S601, The electronic device responds to the first event and acquires the first image and the background image.

[0162] The first event is the event that triggers the electronic device to display an interface (such as the second interface). The first event can be a user action on the electronic device (such as a click or swipe), a screen-on event (such as the screen lighting up when the electronic device is brought close to the user), but it is not limited to these. The second interface may include a first image and a background image. The layer corresponding to the background image is located below the layer corresponding to the first image.

[0163] The first image can be any level of image. Different levels of images have different levels of transparency. In this embodiment, the level of the first image can include: level one, level two, level three, and level four, etc.

[0164] Specifically, the first image can be drawn by an electronic device based on an SVG source file containing text and / or icons. The SVG source file can include: default width and height, target canvas width and height, path, and fill color. However, it is not limited to these. The default width and height refer to the width and height of the text or icon corresponding to the SVG source file. The canvas width and height refer to the width and height of the canvas used to draw the text or icon. The path can indicate the outline of the text or icon. The fill color can be referred to as a color value, including the RGB values ​​and transparency of the text or icon.

[0165] The following is a brief description of the process by which an electronic device acquires the first image:

[0166] In one embodiment, in response to a first event, the electronic device can acquire the SVG source file of the text and / or icon. Then, the electronic device can parse the SVG source file to obtain the default width and height, target canvas width and height, path, and fill color corresponding to the SVG source file. Next, the electronic device can allocate a blank bitmap cache based on the default width and height; that is, the electronic device allocates a memory space based on the default width and height for drawing the bitmap. Next, the electronic device obtains the target canvas based on the target canvas width and height and binds the target canvas to the blank bitmap cache. Next, the electronic device draws the outline of the text or icon on the canvas according to the path. Finally, the electronic device fills the outline of the text or icon with the parsed fill color and adjusts the transparency of the filled outline to the corresponding transparency to obtain the bitmap image corresponding to the text or icon. The bitmap image corresponding to the text or icon is the first image involved in the embodiments of this application.

[0167] In this process, the electronic device can perform the processes of drawing outlines, filling colors, and adjusting transparency in groups. The following section will combine these steps... Figure 7 and Figure 8 Please provide an explanation.

[0168] Figure 7 This illustration shows a schematic diagram of a bitmap image provided in an embodiment of this application. Figure 8 This illustration shows a schematic diagram of the grouping structure of an SVG source file provided in an embodiment of this application.

[0169] For example, such as Figure 7 As shown, the bitmap image 700 includes a first portion 710 and a second portion 720. Therefore, the bitmap image 700 can be divided into three groups. One group corresponds to the entire bitmap image, and the other two groups correspond to the first portion 710 and the second portion 720, respectively. Therefore, the SVG source file corresponding to this bitmap image can also include three groups.

[0170] like Figure 8 As shown, the SVG source file corresponding to the bitmap image can include three groups. The first group 810 corresponds to the bitmap image. The node corresponding to the first group is the parent node. The second group 820 includes a first path, and the first part mentioned above is drawn using the first path. The third group 830 includes a second path, and the second part mentioned above is drawn using the second path. The node in the second group 820 is the first child node. The node in the third group 830 is the second child node. Both the first and second child nodes are children of the parent node, and they are child nodes of the same level.

[0171] The background image is also drawn by the electronic device. For the specific drawing process, please refer to the drawing process of the first image described above, or to relevant descriptions in the prior art; this application will not elaborate further on this aspect.

[0172] Figure 9 This illustration shows one of the schematic diagrams of a display interface provided in an embodiment of this application. The following is in conjunction with... Figure 9 This section provides a brief overview of the process by which electronic devices acquire background images.

[0173] like Figure 9 As shown, the first display interface 900 of the mobile phone may include a layer 910 corresponding to the underlying background image and a layer 920 corresponding to the three cards, but is not limited to these. The layer 920 corresponding to the three cards is located above the layer 910 corresponding to the underlying background image.

[0174] In some embodiments, the background image involved in this application may be a base background image. In other embodiments, the background image is an image resulting from the overlay of the base background image and three cards.

[0175] S602, the electronic device obtains a second image based on the outline of the first image and the color of the first image at the corresponding position in the background image.

[0176] The outline of the second image is the same as that of the first image, and the second image completely overlaps with the first image. Therefore, the position of the first image on the background image is the same as the position of the second image on the background image. The color of the second image is related to the color of the first image at the corresponding position on the background image.

[0177] Optional, combined Figure 6 ,like Figure 10 As shown in the embodiments of this application, S602 may include:

[0178] S1001. The electronic device performs coordinate transformation on the relative coordinates of the first image to obtain the screen coordinates of the first image.

[0179] Typically, electronic devices use two coordinate systems during image display. One is a coordinate system with the top-left corner of the screen as the origin; coordinates in this system can be called screen coordinates or absolute coordinates. The other is a coordinate system with the top-left corner of the control container as the origin; coordinates in this system can be called relative coordinates.

[0180] When an electronic device draws the first image, it does so using a coordinate system with the top-left corner of the control container corresponding to the first image as the origin. In other words, the coordinates of the first image are relative coordinates. The size of the background image is related to the screen of the electronic device; therefore, the coordinates of the background image are screen coordinates (or absolute coordinates).

[0181] Therefore, in order to determine the position of the first image on the background image, the electronic device needs to perform coordinate transformation on the relative coordinates of the first image to obtain the screen coordinates of the first image.

[0182] It should be noted that the specific process of converting relative coordinates into screen coordinates by the electronic device can be found in the description in the prior art, and will not be repeated in the embodiments of this application.

[0183] S1002. The electronic device obtains a third image from the background image based on the screen coordinates of the first image.

[0184] Among them, such as Figure 11 As shown, the third image 1110 is related to the background image 1120 and the first image 1130. Specifically, the size of the third image 1110 is the same as the size of the first image 1130, and the position of the third image 1110 on the background image 1120 is the same as the position of the first image 1130 on the background image 1120. However, the RGB values ​​of the third image are different from the RGB values ​​of the third image at the corresponding positions in the background image. The size of the first image 1130 is determined by its width and height. That is, the size of the first image 1130 is determined by the default width and height in the corresponding SVG source file of the first image 1130. Of course, the screen coordinates of the first image can also reflect its size.

[0185] Optionally, the electronic device may include the following two scenarios in the process of acquiring a third image from a background image:

[0186] In one scenario, the background image has low saturation (i.e., the saturation of the background image does not meet the preset requirements), resulting in a duller color in the background image. Consequently, the third image, which is directly obtained from the background image, also appears dull, ultimately leading to a poor display effect of the second image. Therefore, in this scenario, electronic devices can enhance the image saturation.

[0187] Optionally, in this scenario, S1002 may include: First, the electronic device obtains a fifth image from the background image based on the screen coordinates of the first image. That is, in this embodiment, the fifth image may be obtained directly from the background image. Then, the electronic device adjusts the RGB values ​​of the fifth image to obtain a third image. In other words, the fifth image is the original image of the third image. The third image is the fifth image after adjusting the RGB values. In this way, the third image has higher saturation and more vibrant colors, resulting in a better display effect for the final second image.

[0188] Specifically, the process by which the electronic device adjusts the RGB values ​​of the fifth image to obtain the third image can include: First, the electronic device substitutes the second initial RGB values ​​and the first saturation matrix of the fifth image into the first saturation calculation formula to obtain the second target RGB values. Next, the electronic device adjusts the RGB values ​​of the fifth image from the second initial RGB values ​​to the second target RGB values, thus obtaining the third image. The second target RGB values ​​correspond to the target saturation of the third image.

[0189] For example, the formula for calculating the first saturation can be expressed by the following formula (1):

[0190] (1)

[0191] in, The second initial RGB value for the fifth image; The second target RGB value; This is the first saturation matrix.

[0192] Of course, if the saturation of the background image meets the preset requirements, the electronic device can directly obtain the third image from the background image.

[0193] It should be noted that an image is composed of multiple pixels. Therefore, the RGB values ​​involved in the embodiments of this application refer to the RGB values ​​of each pixel in the image. For example, the second initial RGB value of the fifth image refers to the second initial RGB value of each pixel in the fifth image. Therefore, adjusting the RGB values ​​of the fifth image from the second initial RGB value to the second target RGB value by the electronic device means that the electronic device adjusts the RGB value of each pixel of the fifth image from the second initial RGB value to the corresponding second target RGB value.

[0194] In another scenario, the first image has a richer color palette at the corresponding location on the background image, making the background image appear cluttered. In other words, the fifth image's rich color palette contributes to its cluttered appearance. Increasing the saturation of the fifth image would make its colors even more vibrant, but given its already rich color palette, this would further exacerbate the cluttered appearance. Consequently, the third image derived from the fifth image would also appear cluttered, resulting in a poor display of the final second image. Therefore, in this scenario, the electronic device could add a target filter to the layer corresponding to the fifth image to weaken the image's colors, thereby reducing the number of colors in the image.

[0195] Specifically, after acquiring the fifth image, the electronic device first adds a target filter to the layer corresponding to the fifth image, adjusting the second initial RGB value of the fifth image to the third RGB value. Then, the electronic device substitutes the third RGB value of the fifth image and the first saturation matrix into the above formula (1) to obtain the second target RGB value.

[0196] The target filter can include, but is not limited to, blur filters and gradient filters. Blur filters can include Gaussian blur filters, further blur filters, special blur filters, box blur filters, radial blur filters, surface blur filters, etc. Gradient filters can include hard gradient filters, soft gradient filters, etc.

[0197] S1003, The electronic device acquires a fourth image from the third image that has the same outline as the first image.

[0198] The fourth image has the same outline as the first image, and it is a part of the third image. Therefore, the color of the fourth image is the color of the corresponding position in the third image as in the first image.

[0199] Optionally, when acquiring the fourth image, the electronic device may use the second color calculation formula to obtain a fourth image from the third image that has the same outline as the first image.

[0200] For example, the formula for calculating the second color can be expressed by the following formula (2):

[0201] (2)

[0202] in, The first initial RGB value for the fourth image; The second target RGB value of the third image; The first transparency of the first image, and It can be used to represent the outline of the first image.

[0203] S1004. The electronic device performs display enhancement processing on the fourth image to obtain the second image.

[0204] In this design, the outline of the fourth image is identical to that of the first image, and the layer corresponding to the fourth image is located below the layer corresponding to the first image. To enhance the display effect of the first image, the electronic device also needs to enhance the display effect of the second image located below the layer corresponding to the first image, resulting in an enhanced second image. Thus, when the first and second images are superimposed, the style of the first image matches the style of the background image, and the display effect of the first image is stronger.

[0205] Optional, such as Figure 12As shown in the embodiments of this application, the above-mentioned S1004 may include:

[0206] S1201. The electronic device stores the first image and the fourth image in a tree structure, with the first image as the upper-level node and the fourth image as the lower-level node.

[0207] A tree structure is a non-linear storage structure. Each data element in a tree structure can be called a node. The parent node of a higher-level node is the parent node of the lower-level node, and the lower-level node is the child node of the parent node. The child nodes change as the parent node changes.

[0208] like Figure 13 As shown in A, image 1300 includes: a layer corresponding to the background image 1120, two layers corresponding to the first images 1130, and two layers corresponding to the fourth images. The layers corresponding to the first images 1130, the fourth images, and the background image 1120 are placed sequentially from top to bottom. Since the layer corresponding to the fourth images is located below the layer corresponding to the first images 1130, therefore... Figure 13 The layer corresponding to the fourth image is not shown.

[0209] like Figure 13 As shown in B, after storing image 1300, background image 1120, first image 1130 and fourth image in a tree structure, the tree structure can be represented from top to bottom as follows: image 1300 is the first layer node, background image 1120 is the second layer node, the two first images 1130 are the third layer nodes, and the two fourth images are the fourth layer nodes.

[0210] In this hierarchy, the first-level node corresponds to the root node, the second-level node is the first child of the first-level node, the third-level node is the second child of the first-level node, and the fourth-level node is a child of the third-level node. In other words, the first and second child nodes are sibling nodes of each other.

[0211] As can be seen from the above, the fourth image is a child node of the first image. That is, the first image is the upper-level node and the fourth image is the lower-level node. Therefore, when the electronic device adjusts the first image, the fourth image will also be adjusted accordingly.

[0212] For example, when the electronic device adjusts the color of the first image, the color of the fourth image will also be adjusted accordingly, so that the color of the fourth image is the same as the color of the first image. Similarly, when the electronic device adjusts the position of the first image, the position of the fourth image will also be adjusted accordingly, so that the position of the fourth image is the same as the position of the first image. And again, when the electronic device adjusts the size of the first image, the size of the fourth image will also be adjusted accordingly, so that the size of the fourth image is the same as the size of the first image.

[0213] S1202. Based on the display attributes of the first image, the electronic device performs motion effect adaptation processing on the fourth image to obtain a sixth image that completely overlaps with the first image.

[0214] The display attributes may include color-independent attributes such as the positioning attributes and animation attributes of the first image.

[0215] For example, the positioning attributes of the first image may include: setting the offset between the left outer margin boundary and the left boundary of the first image (left), setting the offset between the right outer margin boundary and the right boundary of the first image (right), setting the offset between the top outer margin boundary and the top boundary of the first image (top), and setting the offset between the bottom outer margin boundary and the bottom boundary of the first image (bottom).

[0216] For example, the animation properties of the first image may include: the first image flashing at a fixed frequency, the first image being scaled, and other animation effects.

[0217] Since the fourth image is a lower-level node of the first image, the display attributes of the first image will also affect the fourth image. In other words, the electronic device will perform motion effect adaptation processing on the fourth image based on the display attributes of the first image to obtain the sixth image. In this way, the sixth image can completely overlap with the first image. However, during the motion effect adaptation process, no color processing is performed on the fourth image. Therefore, the RGB values ​​of the sixth image are the same as the RGB values ​​of the fourth image.

[0218] like Figure 14 As shown in A, before the fourth image is animated, the first image 1130 and the fourth image 1410 do not overlap. Figure 14 As shown in B, the electronic device performs motion effect adaptation processing on the fourth image 1410 based on the display attributes of the first image 1130, resulting in a sixth image corresponding to the fourth image 1410, and the sixth image completely overlaps with the first image 1130. At this time, since the first image and the sixth image completely overlap, the display effect of the first image 1130 is more prominent, and the color of the first image 1130 is related to the background image.

[0219] Because the sixth image completely overlaps with the first image after the motion effect adaptation process, therefore Figure 14 The sixth image is not shown.

[0220] In one scenario, the saturation of the fourth image is still low (i.e., the saturation of the fourth image does not meet the preset requirements), resulting in a dull color. In other words, the initial RGB value of the fourth image has not reached the target RGB value. This will lead to poor display quality of the second image obtained from the fourth image. In this case, the electronic device needs to adjust the RGB value of the fourth image from the initial RGB value to the target RGB value.

[0221] In one embodiment, the electronic device first substitutes the first initial RGB value of the fourth image and the second saturation matrix into the second saturation calculation formula to obtain the first target RGB value. Then, the electronic device adjusts the RGB value of the fourth image from the first initial RGB value to the first target RGB value.

[0222] For example, the formula for calculating the second saturation can be expressed by the following formula (3):

[0223] (3)

[0224] in, This is the second initial RGB value; The second target RGB value; This is the second saturation matrix.

[0225] In another scenario, if the initial RGB value of the fourth image is equal to the first target RGB value, meaning the saturation of the fourth image meets the requirements, then the electronic device does not need to adjust the RGB value of the fourth image further. In this embodiment, the initial RGB value of the fourth image is the same as the first target RGB value of the fourth image.

[0226] S1203, The electronic device adjusts the first target RGB value of the sixth image to the third target RGB value to obtain the second image.

[0227] The sixth image is obtained by applying motion effect adaptation processing to the fourth image. This motion effect adaptation processing does not include color adjustment; therefore, the RGB values ​​of the sixth image are the same as those of the fourth image. The first target RGB value of the fourth image is the first target RGB value of the sixth image.

[0228] In this embodiment, after acquiring a sixth image that completely overlaps with the first image, the electronic device further adjusts the color of the sixth image to obtain a second image. Color adjustment may include at least one of the following methods: increasing the brightness of the sixth image, or color fusion of the sixth image and the first image. These are described in detail below.

[0229] In one embodiment, color adjustment includes increasing the brightness of a sixth image. In this case, increasing the brightness of the sixth image by the electronic device may include: first, converting a first target RGB value to a first HSV value; then, adjusting the HSV value of the sixth image from the first HSV value to a second HSV value; and finally, converting the second HSV value to a third target RGB value.

[0230] In this HSV value, V represents the first brightness, and V represents the second brightness. The second brightness is greater than the first brightness. That is, the V in the first HSV value is greater than the V in the second HSV value. Based on this, the brightness of the image can be increased, thereby enhancing the image's colors. Thus, the second image obtained from the sixth image has more vibrant colors.

[0231] For example, the electronic device converting the first target RGB value into the first HSV value may include: the electronic device substituting the second target RGB value into a third color calculation formula to obtain the first HSV value.

[0232] For example, the formula for calculating the third color can be expressed by the following formulas (4)-(6):

[0233] (4)

[0234] (5)

[0235] (6)

[0236] in, , , ; The first target RGB value; The first HSV value; , .

[0237] For example, the electronic device converting the second HSV value into a third target RGB value may include: the electronic device substituting the second HSV value into a fourth color calculation formula to obtain the third target RGB value.

[0238] For example, the formula for calculating the fourth color can be expressed by the following formulas (7)-(11):

[0239] (7)

[0240] (8)

[0241] (9)

[0242] (10)

[0243] (11)

[0244] in, The third target RGB value; This is the second HSV value.

[0245] In another embodiment, color adjustment includes color fusion of the sixth image and the first image. In this case, the electronic device performing color fusion of the sixth image and the first image may include: first, the electronic device substituting the first transparency of the first image, the RGB values ​​of the first image, and the first target RGB values ​​of the sixth image into a fifth color calculation formula to obtain a third target RGB value. Then, the electronic device adjusts the first target RGB value to the third target RGB value.

[0246] For example, the formula for calculating the fifth color can be represented by the following formula (12):

[0247] (12)

[0248] in,( , , () represents the third target RGB value; The RGB values ​​of the first image;

[0249] The first target RGB value; The first transparency of the first image.

[0250] In another embodiment, color adjustment may sequentially include increasing the brightness of the sixth image and performing color fusion between the sixth image and the first image. In this case, the color adjustment process may include: first, the electronic device converts a first target RGB value to a first HSV value. Second, the electronic device adjusts the HSV value of the sixth image from the first HSV value to a second HSV value. Third, the electronic device converts the second HSV value to a fifth target RGB value. Then, the electronic device substitutes the first transparency of the first image, the RGB value of the first image, and the fifth target RGB value into a fifth color calculation formula to obtain a third target RGB value. Finally, the electronic device adjusts the first target RGB value to the third target RGB value.

[0251] Of course, when color adjustment simultaneously includes increasing the brightness of the sixth image and color merging the sixth image and the first image, the electronic device can also first perform color merging on the sixth image and the first image, and then increase the brightness of the sixth image. This will not be elaborated further in the embodiments of this application.

[0252] Optionally, after acquiring the second image, the electronic device can adjust the transparency of the first image from a first transparency level to a second transparency level, based on the level of the first image. Since the first image is the upper-level node of the fourth image, and the second image is the fourth image after adjusting its RGB values, the first image is indeed the upper-level node of the second image. Therefore, when the electronic device adjusts the transparency of the first image, the transparency of the second image changes accordingly, causing the transparency of the second image to also be adjusted to the second transparency level. In other words, during the process of adjusting the transparency of the first image, the transparency of the second image remains the same as the transparency of the first image.

[0253] For example, if the first image is a Level 1 image, the second transparency is 100%. If the first image is a Level 2 image, the second transparency is 80%. If the first image is a Level 3 image, the second transparency is 50%. If the first image is a Level 4 image, the second transparency is 30%.

[0254] like Figure 15 As shown in A, when the first image is a secondary image, before processing the first image using the display method provided in this application embodiment, the display effect of the first image is as shown in the first target image 1510. After processing the first image using the display method provided in this application embodiment, the display effect of the first image is as shown in the second target image 1520. A comparison shows that the display effect (such as color, clarity, etc.) of the second target image 1520 is more prominent, and the display style of the second target image 1520 is more coordinated with the style of the background image 1500.

[0255] like Figure 15 As shown in B, when the first image is a level 3 image, before processing the first image using the display method provided in this application embodiment, the display effect of the first image is as shown in the third target image 1530. After processing the first image using the display method provided in this application embodiment, the display effect of the first image is as shown in the fourth target image 1540. A comparison shows that the display effect (such as color, recognizability, etc.) of the fourth target image 1540 is more prominent, and the display style of the fourth target image 1540 is more coordinated with the style of the background image 1500.

[0256] like Figure 15 As shown in C, when the first image is a level four image, before processing the first image using the display method provided in this application embodiment, the display effect of the first image is as shown in the fifth target image 1550. After processing the first image using the display method provided in this application embodiment, the display effect of the first image is as shown in the sixth target image 1560. A comparison shows that the display effect (such as color, clarity, etc.) of the sixth target image 1560 is more prominent, and the display style of the sixth target image 1560 is more coordinated with the style of the background image 1500.

[0257] Next, by comparing the second target image 1520, the fourth target image 1540, and the sixth target image 1560, it can be seen that as the transparency gradually decreases, the color of the second image located below the layer corresponding to the first image becomes more obvious, making the display effect of the first image more prominent.

[0258] S603. The electronic device places the second image below the layer corresponding to the first image and above the layer corresponding to the background image, and combines the background image, the first image and the second image to display the first interface.

[0259] Specifically, after acquiring the second image, the first image, and the background image, the electronic device arranges the layers corresponding to each image in order, from bottom to top: the layer corresponding to the background image, the layer corresponding to the second image, and the layer corresponding to the first image. Then, the electronic device composites these arranged layers and displays the first interface.

[0260] Optionally, before displaying the first interface, the electronic device can also adjust the colors of the interface (such as the third interface) obtained after compositing the various layers, so that the final displayed first interface matches the ambient light information of the lighting environment in which the electronic device is located. The ambient light information can include: ambient illuminance and ambient color temperature.

[0261] In one embodiment, the electronic device synthesizes a background image, a first image, and a second image to obtain a third interface. Then, the electronic device uses a color temperature conversion matrix to adjust the RGB values ​​of the third interface to obtain a first interface.

[0262] The color temperature conversion matrix is ​​derived by the electronic device based on the ambient light information of its surrounding environment. Specifically, it's a matrix that converts the RGB values ​​of the white point coordinates of the third-party interface between the historical screen color temperature and the current screen color temperature. The current screen color temperature is the screen color temperature of the electronic device at the current moment. The historical screen color temperature is the screen color temperature of the electronic device at a previous moment. Historical moments are earlier than the current moment, and the lighting environment of the electronic device at a previous moment differs from that at the current moment. In other words, the ambient light information at the current moment is different from the ambient light information at a previous moment.

[0263] For example, an electronic device uses a color temperature conversion matrix to adjust the RGB values ​​of a third interface to display a first interface, including: First, the electronic device uses the color temperature conversion matrix and the fourth initial RGB value of each pixel in the third interface to obtain the corresponding fourth target RGB value for each pixel. Then, the electronic device adjusts the RGB value of each pixel in the third interface from the fourth initial RGB value to the corresponding fourth target RGB value, and displays the first interface.

[0264] The electronic device can substitute the color temperature conversion matrix and the fourth initial RGB value into the first color calculation formula to obtain the fourth target RGB value. The first color calculation formula can be expressed by the following formula (13):

[0265] (13)

[0266] in, This is the fourth initial RGB value; The fourth target RGB value; This is the color temperature conversion matrix.

[0267] It should be noted that the method for determining the color temperature conversion matrix can be found in the relevant descriptions in the prior art, and will not be repeated in the embodiments of this application.

[0268] like Figure 16 As shown in the illustration, this application also provides a chip system. The chip system 1600 includes at least one processor 1610 and at least one interface circuit 1620. The at least one processor 1610 and the at least one interface circuit 1620 are interconnected via lines. The processor 1610 is used to support an electronic device in implementing the various steps in the above method embodiments, and the at least one interface circuit 1620 is used to receive signals from other devices (e.g., memory) or to send signals to other devices (e.g., a communication interface). The chip system may include a chip and may also include other discrete devices.

[0269] This application also provides a computer storage medium including instructions that, when executed on the electronic device, cause the electronic device to perform the steps in the above method embodiments.

[0270] This application also provides a computer program product including instructions that, when executed on the electronic device, cause the electronic device to perform the steps in the method embodiments described above.

[0271] The technical effects of the chip system, computer storage medium, and computer program product are similar to those in the preceding method embodiments.

[0272] It should be understood that in the various embodiments of this application, the order of the above-mentioned processes does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0273] Those skilled in the art will recognize that the modules and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented 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 implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0274] Those skilled in the art will understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and modules described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0275] In the several embodiments provided in this application, it should be understood that the disclosed systems, devices, and methods can be implemented in other ways. For example, the device embodiments described above are merely illustrative; for instance, the division of modules is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple modules or components may be combined or integrated into another device, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between devices or modules may be electrical, mechanical, or other forms.

[0276] The modules described as separate components may or may not be physically separate. The components shown as modules may or may not be physical modules; that is, they may be located on one device or distributed across multiple devices. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs.

[0277] In addition, the functional modules in the various embodiments of this application can be integrated into one device, or each module can exist physically separately, or two or more modules can be integrated into one device.

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

[0279] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

Claims

1. A display method, characterized in that, Applied to an electronic device, the electronic device including a display screen, the method includes: In response to a first event, a first interface is displayed; the first event is used to acquire a first image and a background image located below the layer corresponding to the first image, wherein the first image is obtained based on an SVG source file of text and / or icons; The first interface includes: a first image, a second image, and a background image; wherein the second image is located below the layer corresponding to the first image and above the layer corresponding to the background image; the second image is obtained based on the outline of the first image and the color of the first image at the corresponding position in the background image.

2. The method according to claim 1, characterized in that, The response to the first event, displaying the first interface, includes: In response to the first event, acquire the first image and the background image; The second image is obtained based on the outline of the first image and the color of the first image at the corresponding position in the background image; The second image is placed below the layer corresponding to the first image and above the layer corresponding to the background image, and the background image, the first image, and the second image are combined to display the first interface.

3. The method according to claim 2, characterized in that, The process of obtaining the second image based on the contour of the first image and the color of the first image at the corresponding position in the background image includes: The relative coordinates of the first image are transformed to obtain the screen coordinates of the first image; Based on the screen coordinates of the first image, a third image is obtained from the background image; wherein the screen coordinates of the third image are the same as the screen coordinates of the first image; Obtain a fourth image from the third image that has the same outline as the first image; The fourth image is then subjected to display enhancement processing to obtain the second image.

4. The method according to claim 3, characterized in that, The step of obtaining a fourth image from the third image that has the same outline as the first image includes: Using a second color calculation formula, a fourth image with the same outline as the first image is obtained from the third image; The second color calculation formula is: in, The first initial RGB value of the fourth image; The second target RGB value of the third image; The first transparency of the first image, and the Used to represent the outline of the first image.

5. The method according to claim 3 or 4, characterized in that, The step of obtaining the third image from the background image based on the screen coordinates of the first image includes: Based on the screen coordinates of the first image, a fifth image is obtained from the background image; wherein the screen coordinates of the fifth image are the same as the screen coordinates of the first image; The RGB values ​​of the fifth image are adjusted to obtain the third image.

6. The method according to claim 5, characterized in that, The step of adjusting the RGB values ​​of the fifth image to obtain the third image includes: Substitute the second initial RGB value of the fifth image and the first saturation matrix into the first saturation calculation formula to obtain the second target RGB value; The RGB values ​​of the fifth image are adjusted from the second initial RGB values ​​to the second target RGB values ​​to obtain the third image; The formula for calculating the first saturation is: Among them, the The second initial RGB value; The second target RGB value; This is the first saturation matrix.

7. The method according to claim 6, characterized in that, The step of substituting the second initial RGB value of the fifth image and the first saturation matrix into the first saturation calculation formula to obtain the second target RGB value includes: A target filter is added to the layer corresponding to the fifth image to adjust the second initial RGB value of the fifth image to the third RGB value; wherein, the target filter is used to weaken the color of the fifth image; The third RGB value of the fifth image and the first saturation matrix are substituted into the first saturation calculation formula to obtain the second target RGB value.

8. The method according to claim 3 or 4, characterized in that, The step of enhancing the display effect of the fourth image to obtain the second image includes: The first image and the fourth image are stored in a tree structure; wherein the node containing the first image is the upper-level node, the node containing the fourth image is the lower-level node, and the lower-level node changes as the upper-level node changes; Based on the display attributes of the first image, the fourth image is subjected to motion effect adaptation processing to obtain a sixth image that completely overlaps with the first image; wherein, the display attributes include positioning attributes and motion effect attributes; the RGB values ​​of the sixth image are the same as the RGB values ​​of the fourth image; The RGB value of the sixth image is adjusted from the first target RGB value to the third target RGB value to obtain the second image; wherein the first target RGB value is related to the first initial RGB value.

9. The method according to claim 8, characterized in that, Before adjusting the RGB values ​​of the sixth image from the first target RGB value to the third target RGB value to obtain the second image, the method further includes: The RGB value of the fourth image is adjusted from the first initial RGB value to the first target RGB value; wherein the first target RGB value corresponds to the target saturation of the fourth image.

10. The method according to claim 9, characterized in that, Adjusting the RGB values ​​of the fourth image from the first initial RGB values ​​to the first target RGB values ​​includes: Substituting the first initial RGB value and the second saturation matrix of the fourth image into the second saturation calculation formula, the first target RGB value is obtained; Adjust the RGB value of the fourth image from the first initial RGB value to the first target RGB value; The formula for calculating the second saturation is: Among them, the The first initial RGB value; The first target RGB value; This is the second saturation matrix.

11. The method according to claim 8, characterized in that, The step of adjusting the RGB value of the sixth image from the first target RGB value to the third target RGB value includes: The first target RGB value is adjusted to the third target RGB value by increasing the brightness of the sixth image.

12. The method according to claim 11, characterized in that, The method of adjusting the first target RGB value to the third target RGB value by increasing the brightness of the sixth image includes: Convert the first target RGB value into a first HSV value; The HSV value of the sixth image is adjusted from the first HSV value to the second HSV value; wherein, V in the first HSV value is the first brightness, and V in the second HSV value is the second brightness, and the second brightness is greater than the first brightness; Convert the second HSV value into the third target RGB value; Adjust the first target RGB value to the third target RGB value.

13. The method according to claim 12, characterized in that, Converting the first target RGB value to a first HSV value includes: Substitute the first target RGB value into the third color calculation formula to obtain the first HSV value; The formula for calculating the third color is: in, , , ; ( , , () is the RGB value of the first target; , , ) is the first HSV value; , .

14. The method according to claim 12 or 13, characterized in that, Converting the second HSV value to the third target RGB value includes: Substituting the second HSV value into the fourth color calculation formula, the third target RGB value is obtained; The formula for calculating the fourth color is: in,( , , () is the RGB value of the third target; , , ) is the second HSV value.

15. The method according to claim 8, characterized in that, The step of adjusting the RGB value of the sixth image from the first target RGB value to the third target RGB value includes: The first target RGB value is adjusted to the third target RGB value by performing color fusion on the sixth image and the first image.

16. The method according to claim 15, characterized in that, The step of adjusting the RGB value of the sixth image from the first target RGB value to the third target RGB value includes: Substituting the first transparency of the first image, the RGB value of the first image, and the first target RGB value of the sixth image into the fifth color calculation formula, the third target RGB value is obtained. Adjust the first target RGB value to the third target RGB value; The formula for calculating the fifth color is: in, The third target RGB value; The RGB values ​​of the first image; The first target RGB value; The first transparency of the first image.

17. The method according to claim 8, characterized in that, The step of adjusting the RGB value of the sixth image from the first target RGB value to the third target RGB value includes: The first target RGB value is adjusted to the third target RGB value by increasing the brightness of the sixth image and performing color fusion between the sixth image and the first image.

18. The method according to any one of claims 2-4, characterized in that, After acquiring the second image, the method further includes: Adjust the transparency of the first image from a first transparency level to a second transparency level; The transparency of the second image varies with the transparency of the first image, and the transparency of the second image is the same as that of the first image.

19. The method according to any one of claims 1-4, characterized in that, The first interface is matched with the ambient light information of the light environment in which the electronic device is located; wherein, the ambient light information includes: ambient illuminance and ambient color temperature.

20. The method according to claim 19, characterized in that, Placing the second image below the layer corresponding to the first image and above the layer corresponding to the background image, compositing the background image, the first image, and the second image, and displaying the first interface includes: The second image is placed below the layer corresponding to the first image and above the layer corresponding to the background image, and the background image, the first image and the second image are combined to obtain the third interface; The color temperature conversion matrix of the electronic device is used to adjust the RGB values ​​of the third interface to display the first interface; wherein, the color temperature conversion matrix is ​​related to the lighting environment in which the electronic device is located.

21. The method according to claim 20, characterized in that, The step of adjusting the RGB values ​​of the third interface using the color temperature conversion matrix of the electronic device and displaying the first interface includes: The fourth target RGB value is obtained by using the color temperature conversion matrix of the electronic device and the fourth initial RGB value of the third interface; Adjust the fourth initial RGB value of the third interface to the fourth target RGB value, and then display the first interface.

22. The method according to claim 21, characterized in that, The step of obtaining the fourth target RGB value by using the color temperature conversion matrix of the electronic device and the fourth initial RGB value of the third interface includes: Substituting the color temperature conversion matrix of the electronic device and the fourth initial RGB value of the third interface into the first color calculation formula, the fourth target RGB value is obtained; The first color calculation formula is: in, The fourth initial RGB value; The fourth target RGB value; Let be the color temperature conversion matrix.

23. An electronic device, characterized in that, The device includes a display screen, a processor, and a memory, wherein the memory stores instructions, and when the processor executes the instructions, the method described in any one of claims 1-22 is executed to obtain a first interface, and the display screen is used to display the first interface.

24. A computer-readable storage medium, characterized in that, Includes instructions that, when executed on an electronic device, cause the electronic device to perform the method as described in any one of claims 1-22.

Images