Display method and electronic equipment

Abstract

The invention discloses a display method and electronic equipment, relates to the field of display, and is used for enhancing the display effect of a first image on a display interface so as to enhance the difference between the first image and a background image, so that the first image is easy to identify. The method comprises the following steps: displaying a first interface in response to a first event; the first event is used for triggering the electronic equipment to display the 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 the SVG source file of the text and / or the icon. The first interface sequentially comprises a first image, a second image and a 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 the corresponding position of the background image.

Description

Technical Field

[0001] Embodiments of the present application relate to the field of displays, and in particular, to a display method and an electronic device. Background Art

[0002] Generally, the display interface of an electronic device may include a background image and a first image (such as text, icons, etc.), and the first image is located above the corresponding layer of the background image. When the background image is a solid color or the background image is opaque, the difference between the first image and the background image is large, making the first image easy to identify, thus providing a better visual experience for the user. However, when the background image is an immersive scene, due to the characteristics of the immersive scene such as blurred images, semi-transparency, and small color contrast, the difference between the first image and the background image is small, resulting in the first image being not easily identifiable, thus leading to a poor visual experience for the user. Summary of the Invention

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

[0004] To achieve the above object, the present application adopts the following technical solutions:

[0005] In a first aspect, a display method is provided. The method includes: the electronic device displays 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 the layer corresponding to the first image. The first image is obtained based on the SVG source file of text and / or icons. The first interface includes the first image, a second image, and the 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 the corresponding position in the background image.

[0006] Since the outline of the second image is obtained based on the outline of the first image, 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 in 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 rate 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, and making the overall style of the first interface more coordinated.

[0007] In a possible implementation of the first aspect, the above-mentioned displaying the first interface in response to the first event may include: First, the electronic device obtains a first image and a background image in response to the first event. Then, the electronic device obtains a 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. 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 synthesizes 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 above-mentioned obtaining, by the electronic device, a 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 may include: First, the electronic device performs coordinate conversion processing on the relative coordinates of the first image to obtain the screen coordinates of the first image. Then, the electronic device obtains a third image from the background image based on the screen coordinates of the first image. In this way, the screen coordinates of the third image are the same as the screen coordinates of the first image, so that the position of the third image on the background image is 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 contour as the first image. Therefore, the RGB values of the fourth image are related to the RGB values of the first image at the corresponding position in the background image. Finally, the electronic device performs display effect enhancement processing on the fourth image to obtain the second image.

[0009] In another possible implementation of the first aspect, the above-mentioned obtaining, by the electronic device, a fourth image from the third image that has the same contour as the first image includes: The electronic device obtains a fourth image from the third image that has the same contour as the first image by using a second color calculation formula.

[0010] Here, the second color calculation formula may be: (R 1 G 1 B 1 ) = alpha 1 × (R' 2 G' 2 B' 2 ).

[0011] Among them, (R 1 G 1 B 1 ) is the first initial RGB value of the fourth image; (R' 2 G' 2 B' 2 ) is the second target RGB value of the third image; alpha 1 is the first transparency of the first image, and alpha 1 is used to reflect the contour of the first image.

[0012] In another possible implementation of the first aspect, the above-mentioned electronic device obtains a third image from the background image based on the screen coordinates of the first image, including: First, the electronic device obtains 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 those 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] That is to say, the fifth image is the original image of the third image, and the third image is the image obtained by adjusting the RGB values of the fifth image.

[0014] In another possible implementation of the first aspect, the above-mentioned 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 first saturation calculation formula can be:

[0016]

[0017] where, (R 2 G 2 B 2 ) are the second initial RGB values; (R' 2 G' 2 B' 2 ) are the second target RGB values; is the first saturation matrix.

[0018] In another possible implementation of the first aspect, the above-mentioned 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, including: First, the electronic device adds a target filter to the layer corresponding to the fifth image to adjust the second initial RGB values of the fifth image to the third RGB values. Among them, the target filter is used to weaken the color of the fifth image. Then, the electronic device substitutes the third RGB values of the fifth image and the first saturation matrix into the first saturation calculation formula to obtain the second target RGB values.

[0019] In another possible implementation of the first aspect, the above-mentioned electronic device performs display effect enhancement processing on 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. Among them, the node where the first image is located is the upper-layer node, and the node where the fourth image is located is the lower-layer node, and the lower-layer node changes with the change of the upper-layer node. Then, the electronic device performs dynamic effect adaptation processing on the fourth image based on the display attributes of the first image to obtain a sixth image that completely coincides with the first image. Among them, the display attributes can be attributes unrelated to color such as positioning attributes and dynamic effect attributes. The RGB value of the sixth image is the RGB value of the fourth image. Finally, the electronic device adjusts the RGB value of the sixth image from the first target RGB value to the third target RGB value to obtain the second image.

[0020] In another possible implementation of the first aspect, before the electronic device adjusts the RGB value of the sixth image from the first target RGB value to the third target RGB value to obtain the second image, the above method further includes: The electronic device adjusts the RGB value of the fourth image from the first initial RGB value to the first target RGB value. Among them, the first target RGB value corresponds to the target saturation of the fourth image.

[0021] In another possible implementation of the first aspect, the above-mentioned electronic device adjusts the RGB value of the fourth image from the first initial RGB value to the first target RGB value, including: First, the electronic device 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.

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

[0023]

[0024] Among them, (R 1 G 1 B 1 ) is the first initial RGB value; (R' 1 G' 1 B' 1 ) is the first target RGB value; is the second saturation matrix.

[0025] In another possible implementation of the first aspect, the above-mentioned 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 adjusts 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 above-mentioned electronic device adjusts the RGB values of the sixth image from the first target RGB values to the third target RGB values by increasing the brightness of the sixth image, including: First, the electronic device converts the first target RGB values into first HSV values. Then, the electronic device adjusts the HSV values of the sixth image from the first HSV values to second HSV values. Next, the electronic device converts the second HSV values into the third target RGB values. Finally, the electronic device adjusts the RGB values of the sixth image from the first target RGB values to the third target RGB values.

[0027] Wherein, the V in the above-mentioned first HSV value is the first brightness, the V in the second HSV value is the second brightness, and the second brightness is greater than the first brightness.

[0028] In another possible implementation of the first aspect, the above-mentioned electronic device converts the first target RGB values into first HSV values, including: The electronic device substitutes the first target RGB values into the third color calculation formula to obtain the first HSV values.

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

[0030]

[0031]

[0032] V 1 = C max

[0033] Wherein, (R' 1 , G' 1 , B' 1 ) are the first target RGB values; (H 1 , S 1 , V 1 ) are the first HSV values; Cmax = max(r 1 , g 1 , b 1 ), Cmin = min(r 1 , g 1 , b 1 ).

[0034] In another possible implementation of the first aspect, the above-mentioned electronic device converts the second HSV values into the third target RGB values, including: The electronic device substitutes the second HSV values into the fourth color calculation formula to obtain the third target RGB values.

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

[0036]

[0037] C = V 2 ×S 2

[0038]

[0039] m = V 2 -C

[0040] (R' 3 , G' 3 , B' 4 ) = ((r 2 + m) × 255, (g 2 + m) × 255, (b 2 + m) × 255)

[0041] Among them, (R' 3 , G' 3 , B' 3 ) is the third target RGB value; (H 2 , S 2 , V 2 ) is the second HSV value.

[0042] In another possible implementation manner of the first aspect, the above-mentioned 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 adjusts the RGB value of the sixth image from the first target RGB value to the third target RGB value by means of color fusion of the sixth image and the first image.

[0043] In another possible implementation manner of the first aspect, the above-mentioned electronic device adjusts the RGB value of the sixth image from the first target RGB value to the third target RGB value by means of color fusion of the sixth image and the first image, including: First, the electronic device substitutes 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 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 fifth color calculation formula can be:

[0045]

[0046] Among them, (R' 3 , G' 3 , B'3) is the third target RGB value; (R 6 , G 6 , B 6 ) is the RGB value of the first image; (R' 1 , G'1 , B' 1 ) is the first target RGB value; alpha 1 is the first transparency of the first image.

[0047] In another possible implementation of the first aspect, the above 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 adjusts the first target RGB value to the third target RGB value by increasing the brightness of the sixth image and performing color fusion on the sixth image and the first image.

[0048] In another possible implementation of the first aspect, after the electronic device obtains the second image, it can also adjust the transparency of the first image from the first transparency to the second transparency. Among them, 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 above first interface matches the ambient light information of the light environment where the electronic device is located. Among them, the ambient light information may include: ambient illuminance and ambient color temperature.

[0050] In another possible implementation of the first aspect, the above electronic device places the second image below the corresponding layer of the first image and above the corresponding layer of the background image, synthesizes the background image, the first image and the second image, and displays the first interface, including: First, the electronic device places the second image below the corresponding layer of the first image and above the corresponding layer of the background image, synthesizes the background image, the first image and the second image, and obtains the third interface. Then, the electronic device adjusts the RGB value of the third interface using the color temperature conversion matrix of the electronic device and displays the first interface. Among them, the color temperature conversion matrix is obtained based on the ambient light information of the light environment where the electronic device is located. That is to say, the color temperature conversion matrix is related to the light environment where the electronic device is located.

[0051] In another possible implementation of the first aspect, the above electronic device adjusts the RGB value of the third interface using the color temperature conversion matrix of the electronic device and displays the first interface, including: First, 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. 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 obtained based on the ambient light information of the light environment where the electronic device is located. Therefore, after adjusting the RGB value of the third interface using the color temperature conversion matrix, the obtained first interface matches the light environment where the electronic device is located, which can further improve the user's visual experience.

[0053] In another possible implementation of the first aspect, the above-mentioned electronic device uses the color temperature conversion matrix of the electronic device and the fourth initial RGB value of the third interface to obtain a 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 first color calculation formula can be:

[0055]

[0056] Among them, (R 4 G 4 B 4 ) is the fourth initial RGB value; (R' 4 G' 4 B' 4 ) is the fourth target RGB value; is the color temperature conversion matrix.

[0057] In a second aspect, the present application provides an electronic device, including a display screen, a processor, and a memory. Instructions are stored in the memory. When the processor executes the instructions, the method as described in the first aspect and any of its implementation manners is executed to obtain a first interface. The display screen is used to display the first interface.

[0058] In a third aspect, a computer-readable storage medium is provided, including instructions. When the instructions are executed on an electronic device, the electronic device can execute the method as described in the first aspect and any of its implementation manners.

[0059] In a fourth aspect, a computer program product containing instructions is provided. When the instructions run on the above-mentioned electronic device, the electronic device executes the method as described in the first aspect and any of its implementation manners.

[0060] In a fifth aspect, a chip system is provided. The chip system includes a processor for supporting the electronic device to implement the functions involved in the first aspect. In a possible design, the electronic device further includes an interface circuit, and the interface circuit can be used to receive signals from other devices (such as a memory), or send signals to other devices (such as a communication interface). The chip system may include a chip and may also include other discrete devices.

[0061] Among them, for the technical effects of the second aspect to the fifth aspect, reference can be made to the technical effects of the first aspect and any of its implementation manners, which will not be elaborated here. Description of the Drawings

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

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

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

[0065] Figure 4 It is the schematic diagram of the structure of an electronic device provided by an embodiment of the present application;

[0066] Figure 5 It is the schematic diagram of the software architecture of an electronic device provided by an embodiment of the present application;

[0067] Figure 6 It is the first schematic diagram of the flowchart of a display method provided by an embodiment of the present application;

[0068] Figure 7 It is the schematic diagram of a bitmap image provided by an embodiment of the present application;

[0069] Figure 8 It is the schematic diagram of the grouping structure of an SVG source file provided by an embodiment of the present application;

[0070] Figure 9 It is the schematic diagram of a display interface provided by an embodiment of the present application;

[0071] Figure 10 It is the second schematic diagram of the flowchart of a display method provided by an embodiment of the present application;

[0072] Figure 11 It is the schematic diagram of the relationship between a third image and a background image provided by an embodiment of the present application;

[0073] Figure 12 It is the third schematic diagram of the flowchart of a display method provided by an embodiment of the present application;

[0074] Figure 13 It is the schematic diagram of the relationship between a first image and a fourth image provided by an embodiment of the present application;

[0075] Figure 14 It is the first schematic diagram of the display effect of a first image provided by an embodiment of the present application;

[0076] Figure 15 It is the second schematic diagram of the display effect of a first image provided by an embodiment of the present application;

[0077] Figure 16 It is the schematic diagram of the structure of a chip system provided by an embodiment of the present application. Detailed implementation manners

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

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

[0080] The terms "coupling" and "connection" involved in the embodiments of the present application should be understood in a broad sense. For example, they may refer to a direct physical 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 the present application are introduced.

[0082] Scalable vector graphics (SVG) is a markup language based on extensible markup language (XML) for describing two-dimensional vector graphics. The quality of scalable vector graphics will not be lost when enlarged or resized.

[0083] Color value (alpha red green blue, ARGB) is a color encoding method that includes four components: transparency (alpha), red, green, and blue. The transparency value range is 0-255, indicating the degree of transparency from completely transparent to completely opaque. The red value range is 0-255, indicating that the brightness of red gradually increases. The green value range is 0-255, indicating that the brightness of green gradually increases. The blue value range is 0-255, indicating that the brightness of blue gradually increases. These four components are all integers, and they can be converted into hexadecimal numbers when used.

[0084] A bitmap image, also known as a bitmap, is a commonly used image data format. A bitmap consists of a pixel matrix, and each pixel has a certain color value. A bitmap can be used to represent various images (such as icons, text, etc.).

[0085] Generally, when conducting user experience (UX) design, according to the importance of the content (such as icons and text, etc., the first images) other than the background image in the display interface, the content can be divided into 4 levels. For example, primary content, secondary content, tertiary content, and quaternary content. Here, taking the content as icons and text as an example for introduction.

[0086] Table 1 shows a classification table of text levels in the conventional technology. Table 2 shows a classification table of icon levels in the conventional technology.

[0087] Table 1

[0088] Gear Color value Primary text 100% + Fixed RGB value Secondary text 80% + Fixed RGB value Tertiary text 50% + Fixed RGB value Quarternary text 30% + Fixed RGB value

[0089] It can be seen from Table 1 that when the above content is text, the transparency between different levels of text is different, and as the text level increases, the transparency of the text decreases. However, the RGB values of different levels of text can be the same. For example, the RGB of each level of text can be #666666 (that is, the color of each level of text is medium gray). Of course, the RGB values of different levels of text can also be different.

[0090] Table 2

[0091] Gear Color value Primary icon 100% + Original RGB value of the SVG of the primary icon Secondary icon 80% + Original RGB value of the SVG of the secondary icon Tertiary icon 50% + Original RGB value of the SVG of the tertiary icon Quarternary icon 30% + Original RGB value of the SVG of the quarternary icon

[0092] It can be seen from Table 2 that when the above content is icons, the transparency between different levels of icons is different, and as the icon level increases, the transparency of the icon decreases. At the same time, the RGB value of each level of icon is the original RGB value of the SVG corresponding to each level of icon.

[0093] When the background image of the display interface is a solid color or the background image of the display interface is opaque, the difference in color values between the first image and the background image is relatively large. In this way, the first image is easily recognizable, thus providing a better visual experience for the user. However, when the background image is an immersive scene, due to the characteristics of the immersive scene such as blurred image, semi-transparency, and small color contrast, the difference in color values between the first image and the background image is relatively small. In this way, the first image is not easily recognizable, resulting in a poor visual experience for the user.

[0094] To solve the above technical problems, a solution in the conventional technology is that the electronic device responds to the user's trigger operation and switches the RGB value of the first image on the display interface to the target RGB value (the target RGB value has a large difference from the RGB value of the background image), so as to highlight the display effect of the first image. However, there are still the following problems after such processing:

[0095] When the first image is at level one, since the transparency of the first image is 100% (i.e., completely opaque), and the RGB value of the first image is different from that of the background image, the color values ​​of the first image and the background image are quite different, making the first image easy to identify. However, the styles of the first image and the background image after such processing are quite different, making the overall style of the display interface inconsistent.

[0096] When the level of the first image is any level from level 2 to level 4, even if the RGB value of the first image is different from the RGB value of the background image, due to the high transparency of the first image (such as 30%-80%), the first image is semi-transparent, so the first image is still not easy to be recognized.

[0097] The following takes the mobile phone as an example. Figures 1 - 3 The solution method in the conventional technology is introduced.

[0098] In one scenario, Figure 1 As 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. Among them, the first background image 101 includes a primary text "Personal Emergency Information". The first card 102 includes a secondary text "110" and a tertiary text "Police". The second card 103 includes a secondary text "120" and a tertiary text "Medical First Aid". The third card 104 includes a secondary text "119" and a tertiary text "Fire Alarm".

[0099] Wherein: the color of the first background image 101 is gradient pink (not shown in the figure), and the transparency of the first background image 101 is 90% (not shown in the figure). The color of the primary text is blue (i.e., the target RGB value is #0000FF), and the transparency of the primary text is 100%. In other words, the color value of the primary text is: 100%+#0000FF. The color of the secondary text is white (i.e., the target RGB value is #FFFFFF), and the transparency of the secondary text is 80%. In other words, the color value of the secondary text is: 80%+#FFFFFF. The color of the tertiary text is white, and the transparency of the tertiary text is 50%. In other words, the color value of the tertiary text is: 50%+#FFFFFF.

[0100] Since the primary text is completely opaque and the RGB value of the primary text is completely different from the RGB value of the background image, the primary text is easily identifiable. However, the color of the primary text is quite different from the color of the background image, making the overall style of the emergency call interface 100 inconsistent.

[0101] Although the RGB values ​​of the secondary text and the RGB values ​​of the tertiary text are also completely different from the RGB values ​​of the background image, the color of the secondary text and the color of the tertiary text match the color of the background image. In addition, due to the high transparency of the secondary text and the transparency of the tertiary text, the secondary text and the tertiary text are semi-transparent, making the secondary text and the tertiary text difficult to identify.

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

[0103] In another scenario, Figure 2 As shown, the mobile phone displays a notification interface 200. The notification interface 200 includes: a second background image 210, and a plurality of 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 the primary text "Hang up" and "Answer". The color of the primary text 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 primary icon 2301. The color of the primary icon is blue and the transparency is 100%.

[0104] Since the primary text and primary icon are completely opaque, and the color of the primary text is completely different from the color of the incoming call notification card 220, and the color of the primary icon 2301 is completely different from the color of the smart interconnection notification card 230, the primary text and the primary icon are easily identifiable. However, the color of the primary text is quite different from the color of the incoming call notification card 220, and the color of the primary icon 2301 is quite different from the color of the smart interconnection notification card 230, making the overall style of the notification interface 200 inconsistent.

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

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

[0107] In the mobile phone, in response to the search word "should" input in the search box 310, the first search result card 320 displays: "should"-search. In the first search result card 320, "should" is a primary text. The color of the primary text is blue and the transparency is 100%.

[0108] The second search result card 330 displays: application market, the icon corresponding to the application market, application ranking control 3301, premium application control 3302, SIM card application 1, the icon corresponding to SIM card application 1, SIM card application 2, and the icon corresponding to SIM card application 2. The word "should" in the application market, the word "should" in SIM card application 1, the word "should" in SIM card application 2, the application ranking control 3301, and the premium application control 3302 are all primary texts.

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

[0110] Since the primary text is completely opaque and the color of the primary text is completely different from the color of each search result card, the primary text is easily identifiable. However, the color of the primary text is quite different from the color of each search result card, making the overall style of the search interface 300 inconsistent.

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

[0112] To this end, an embodiment of the present application provides a display method and an electronic device. When the electronic device responds to an event (such as a user operation, etc.) for triggering a display interface, the first interface can be displayed. 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 easy to identify, the first interface displayed by the electronic device also includes a second image located below the layer corresponding to the first image and above the layer corresponding to the background image.

[0113] Meanwhile, the contour of the second image is obtained based on the contour of the first image, so the contour of the second image is the same as that of the first image. Meanwhile, the color of the second image is obtained based on the color of the first image at the corresponding position in the background image, such 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 corresponding layer of the first image. In this way, the display effect of the first image can be enhanced, such as enhancing the color and recognition of the first image, so that the first image is more prominent and easier to recognize. 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, and making the overall style of the first interface more coordinated.

[0114] The electronic device involved in the embodiments of the present application can be a device with display and data processing functions. The electronic device can be mobile or fixed. The electronic device can be deployed on land (such as indoor or outdoor, handheld or vehicle-mounted, etc.), can also be deployed on water (such as a ship, etc.), and can also be deployed in the air (such as an airplane, a balloon, etc.). This electronic device can be called a user equipment (UE), an access terminal, a terminal unit, a subscriber unit, a terminal station, a mobile station (MS), a mobile platform, a terminal agent, or a terminal device, etc. For example, this electronic device can be a mobile phone, a tablet computer, a laptop computer, etc. The embodiments of the present application do not limit the specific type and structure of the electronic device. A possible structure of the electronic device will be described below.

[0115] Taking the electronic device as a mobile phone as an example, Figure 4 FIG. shows a schematic hardware structure diagram of an electronic device 400 provided by the embodiments of the present 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 can be 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 shown in the figure, or combine certain components, or split certain components, or have different component arrangements. The illustrated components can be implemented in hardware, software, or a combination of software and hardware.

[0117] The processor 410 may include one or more processing units. For example, the processor 410 may include an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Among them, different processing units may be independent devices or integrated in one or more processors. The controller may be the nerve center and command center of the electronic device 400. The controller may generate operation control signals according to the instruction operation code and timing signal to complete the control of fetching and executing instructions.

[0118] A memory may also be provided in the processor 410 for storing instructions and data. In some embodiments, the memory in the processor 410 is a cache memory. This memory may save the instructions or data that the processor 410 has just used or recycled. If the processor 410 needs to use the instruction or data again, it can directly call it 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, the processor 410 may include one or more interfaces. The interfaces may include an inter-integrated circuit (I2C) interface, an inter-integrated circuit sound (I2S) interface, a pulse code modulation (PCM) interface, a universal asynchronous receiver / transmitter (UART) interface, a mobile industry processor interface (MIPI), a general-purpose input / output (GPIO) interface, a subscriber identity module (SIM) interface, and / or a universal serial bus (USB) interface 430, etc.

[0120] It can be understood that the interface connection relationships between the modules illustrated in this embodiment are only illustrative and do not constitute a structural limitation on the electronic device. In other embodiments, the electronic device may also adopt different interface connection methods in the above embodiments, or a combination of multiple interface connection methods.

[0121] The memory 420 can be used to store computer-executable program code, and the executable program code 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. Among them, the program storage area can store the operating system and applications required for at least one function (such as the sound playback function, the interface display function, etc.). The data storage area can store data created during the use of the electronic device (such as notification messages). In addition, the memory 420 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a 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 and supplies power to the processor 410, the memory 420, the communication module 450, the display screen 460, the display screen 460, and the 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, impedance). In some other embodiments, the power management module 440 may also be provided in the processor 410.

[0123] The communication module 450 may provide solutions for wireless communications applied to the electronic device 400, including wireless local area networks (WLANs) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR), etc. The communication module 450 may 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 processing on the electromagnetic wave signals, and sends the processed signals to the processor 410. The communication module 450 may also receive signals to be sent from the processor 410, perform frequency modulation on them, amplify them, and convert them into electromagnetic waves through the antenna for radiation.

[0124] In some embodiments, the antenna of the electronic device 400 is coupled to the communication module 450, so that the electronic device 400 can communicate with the network and other devices through 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 technology, etc. The GNSS may include Global Positioning System (GPS), Beidou Navigation Satellite System (BDS), Global Navigation Satellite System (GLONASS), and / or Galileo Satellite Navigation System (GALILEO).

[0125] The electronic device 400 implements the display function through the GPU, the display screen 460, and the application processor, etc. The GPU is a microprocessor for image processing, and is connected to the display screen 460 and the application processor. The GPU is used to execute mathematical and geometric calculations for graphics rendering. The processor 410 may include one or more GPUs, which execute program instructions to generate or change display information.

[0126] The display screen 460 is used to display images, videos, etc. The display screen 460 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a Mini-LED, a Micro-OLED, a Micro-OLED, a quantum dot light-emitting diode (QLED), etc.

[0127] The electronic device 400 can implement the shooting function through the ISP, the camera 480, the video codec, the GPU, the display screen 460, and the application processor, etc.

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

[0129] The camera 480 is used to capture static images or videos. An object generates an optical image through the lens and projects it onto the photosensitive element. The photosensitive element can be a charge-coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, and then transmits the electrical signal to the ISP to convert it into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into an image signal in a standard RGB, YUV, etc. format.

[0130] The sensor module 490 can include an ambient light sensor, a pressure sensor, a gravity sensor, etc. Among them, the ambient light sensor can obtain the ambient light information of the environment where the electronic device is located. The ambient light information can include ambient illuminance, ambient color temperature, etc.

[0131] In some embodiments, an ambient light sensor can acquire all ambient light information such as ambient illuminance and ambient color temperature simultaneously. At this time, the sensor module 490 may include an ambient light sensor. In other embodiments, an ambient light sensor can acquire one type of ambient light information. At this time, the sensor module 490 may include at least two different types of ambient light sensors to acquire ambient light information such as ambient illuminance and ambient color temperature respectively. In other embodiments, an ambient light sensor can acquire multiple types of ambient light information. At this time, the sensor module 490 may include at least one different type of ambient light sensor. In the embodiments of the present application, an example is given where an ambient light sensor can acquire all ambient light information simultaneously for introduction.

[0132] It can be understood that generally, in addition to the support of hardware, the implementation of the functions of an electronic device also requires the cooperation of software.

[0133] The software system of an electronic device can adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservices architecture, or a cloud architecture. In the embodiments of the present application, the Android is taken as an example to exemplarily illustrate the software structure of the electronic device.

[0134] Figure 5 FIG. shows a schematic diagram of the software architecture of an electronic device provided by the embodiments of the present application.

[0135] The layered architecture divides the software into several layers, and each layer has a clear role and division of labor. The layers communicate through software interfaces. In some embodiments, as Figure 4 shown, Android is divided into five layers, from top to bottom are the application layer, the application framework layer, the Android runtime and system libraries, the hardware abstraction layer, and the kernel layer.

[0136] Among them, the application layer may include a series of application packages. As Figure 5 shown, the application packages may include: application programs such as a gallery, videos, and text messages.

[0137] Among them, the application framework layer provides application programming interfaces (APIs) and programming frameworks for the application programs in the application layer. The application framework layer includes some predefined functions.

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

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

[0140] The display effect enhancement module is used to obtain 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.

[0141] Specifically, first, the display effect enhancement module can perform coordinate transformation processing on the relative coordinates of the first image to obtain the screen coordinates of the first image. Then, the display effect enhancement module sends the first screen coordinates to the GPU of the hardware abstraction layer and receives the third image sent by the GPU. Then, the display effect enhancement module obtains the fourth image from the third image that is the same as the contour of the first image. Finally, the display effect enhancement module performs display effect enhancement processing on the fourth image to obtain the second image.

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

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

[0144] The color temperature adjustment module is used to obtain the ambient light information from the kernel layer and obtain the color temperature conversion matrix based on the ambient light information. In addition, the color temperature adjustment module also adjusts the RGB values of the display interface based on the color temperature conversion matrix.

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

[0146] The core libraries include two parts: one part is the functional functions that need to be called by the Java language, and the other part is the core libraries of Android.

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

[0148] The system library can include multiple functional modules. For example: surface manager, Media Libraries, 3D graphics processing library (e.g., OpenGL ES), 2D graphics engine (e.g., SGL), etc.

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

[0150] The media library supports the playback and recording of various common audio and video formats, as well as static image files, etc. The media library can support multiple audio and video coding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.

[0151] The media library can include a MediaProvider, which stores the data of multimedia files, such as audio, video, image and other data.

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

[0153] The 2D graphics engine is the drawing engine for 2D drawing.

[0154] Among them, the hardware abstraction layer can include a color temperature adjustment module and a processor such as a GPU. The GPU is used to obtain a third image from the background image according to the screen coordinates of the first image and send the third image to the display effect enhancement module of the application framework layer.

[0155] It should be noted that the background image here may include not only the underlying background image involved in the embodiments of the present application, but also 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 value in the image to achieve contrast mapping and brightness balance.

[0157] Among them, the kernel layer is the layer between the hardware and the software. The kernel layer can include a display screen driver, a sensor driver, etc. The display screen driver is used to drive the display screen to display the first interface. The display screen driver is also used to send the layers synthesized by the composite display module to the display screen for display. The sensor driver is used to drive the ambient light sensor to collect light information and obtain ambient light information based on the light information.

[0158] In the embodiments of the present application, the display method described can be applied to electronic devices (such as mobile phones, tablets, etc.) with the above-mentioned software and hardware structures. In addition, the display method provided by the embodiments of the present application can be applied to scenarios such as extended reality (XR) scenarios and dark modes. Among them, the XR scenario can include: virtual reality (VR) scenarios, augmented reality (AR) scenarios, etc. Among them, when applied to the dark mode, the electronic device also needs to perform an inverse color processing on the interface before displaying the interface.

[0159] The following will be combined with Figures 6 - 15 to introduce the display method provided by the embodiments of the present application.

[0160] Figure 6 FIG. 11 shows one of the flow diagrams of a display method provided by the embodiments of the present application. As Figure 6 shown, the display method provided by the embodiments of the present application may include:

[0161] S601. The electronic device responds to a first event and obtains a first image and a background image.

[0162] Among them, the first event is an event used to trigger the electronic device to display an interface (such as a second interface). The first event may be a trigger operation of the user on the electronic device (such as a click operation, a swipe operation, etc.), a screen-on event (such as after the electronic device is brought close to the user, the display screen of the electronic device is lit), but is not limited thereto. 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] Among them, the first image may be an image of any level. The transparencies of images of different levels are different. In the embodiments of the present application, the levels of the first image may include: first level, second level, third level, fourth level, etc.

[0164] Specifically, the first image may be drawn by the electronic device based on the SVG source file of text and / or icons. The SVG source file may include: default width and height (width / height), target canvas width and height (viewportwidth / viewportheight), path, and fill color. But it is not limited thereto. Among them, 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 may indicate the outline of the text or icon. The fill color may be called the color value, including: the RGB value and transparency of the text or icon.

[0165] The process by which an electronic device obtains a first image is briefly introduced below:

[0166] In one embodiment, in response to a first event, the electronic device may obtain SVG source files of text and / or icons. Then, the electronic device may parse the SVG source files to obtain the default width and height, the target canvas width and height, paths, and fill colors corresponding to the SVG source files. Next, the electronic device may apply for a blank bitmap cache according to the default width and height, that is, the electronic device applies for a memory space according to the default width and height for drawing the bitmap. Next, the electronic device obtains the target canvas according to 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. Finally, after the electronic device fills the outline of the text or icon with the parsed fill color, it 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 the present application.

[0167] Among them, the processes of the electronic device for drawing the outline, filling the color, and adjusting the transparency can be implemented in groups. The following is described in combination with Figure 7 and Figure 8 for illustration.

[0168] Figure 7 FIG. shows a schematic diagram of a bitmap image provided by an embodiment of the present application. Figure 8 FIG. shows a schematic diagram of a grouped structure of an SVG source file provided by an embodiment of the present application.

[0169] Exemplarily, as Figure 7 shown, the bitmap image 700 includes: a first part 710 and a second part 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 part 710 and the second part 720 respectively. Therefore, the SVG source file corresponding to the bitmap image can also include three groups.

[0170] As Figure 8 shown, the SVG source file corresponding to the above bitmap image can include three groups. Among them, 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 above first part is drawn through the first path. The third group 830 includes a second path, and the above second part is drawn through the second path. The node of the second group 820 is the first child node. The node of the third group 830 is the second child node. The first child node and the second child node are both child nodes of the parent node, and the first child node and the second child node are sibling child nodes.

[0171] The background image is also drawn by the electronic device. For the specific drawing process, reference can be made to the drawing process of the above-mentioned first image or the relevant introduction in the prior art, which will not be elaborated in this embodiment of the present application.

[0172] Figure 9 Fig. 4 shows one of the schematic diagrams of a display interface provided by an embodiment of the present application. The following will briefly introduce the process by which the electronic device obtains the background image in conjunction with Figure 9 ...

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

[0174] In some embodiments, the background image involved in this embodiment of the present application may be the underlying background image. In other embodiments, the background image is an image after the underlying background image and the three cards are superimposed.

[0175] S602. The electronic device obtains a 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.

[0176] Among them, the contour of the second image is the same as that of the first image, and the second image completely coincides with the first image. Therefore, the position of the first image corresponding to the background image is the same as the position of the second image corresponding to the background image. The color of the second image is related to the color of the first image at the corresponding position in the background image.

[0177] Optionally, in conjunction with Figure 6 ... Figure 10 shown, in this embodiment of the present application, S602 may include:

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

[0179] Generally, during the image display process of the electronic device, there are two coordinate systems. One is the coordinate system with the upper left corner of the screen as the origin, and the coordinates in this coordinate system can be called screen coordinates or absolute coordinates. The other is the coordinate system with the upper left corner of the control container as the origin, and the coordinates in this coordinate system can be called relative coordinates.

[0180] When the electronic device draws the first image, it is drawn based on the coordinate system with the upper left corner of the control container corresponding to the first image as the origin. That is to say, 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] Based on this, in order to determine the position corresponding to the first image on the background image, the electronic device needs to perform coordinate conversion processing 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 the electronic device converting the relative coordinates into screen coordinates can refer to the introduction in the prior art, and this application embodiment will not elaborate on it.

[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, as Figure 11 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 value of the third image is different from the RGB value at the corresponding position of the third image on the background image. Among them, the size of the first image 1130 is determined by the width and height of the first image 1130. That is to say, 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 the size of the first image.

[0185] Optionally, in the process of the electronic device obtaining the third image from the background image, the following two scenarios may be included:

[0186] In one scenario, the saturation of the background image is low (that is, the saturation of the background image does not meet the preset requirements), resulting in a relatively dull color of the background image, so that the color of the third image directly obtained from the background image is also relatively dull, and finally the display effect of the obtained second image is not good. Therefore, in this scenario, the electronic device can increase the saturation of the image.

[0187] Optionally, in this scenario, the above 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 to say, in this embodiment, the fifth image can be directly obtained from the background image. Then, the electronic device adjusts the RGB value of the fifth image to obtain the third image. That is to say, the fifth image is the original image of the third image. The third image is the fifth image after adjusting the RGB value. In this way, the saturation of the third image is relatively high and the color is relatively vivid, so that the display effect of the finally obtained second image is better.

[0188] Specifically, the process by which the electronic device adjusts the RGB values of the fifth image to obtain the third image may include: 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, and the third image can be obtained. Among them, the second target RGB values correspond to the target saturation of the third image.

[0189] Exemplarily, the first saturation calculation formula can be expressed by the following formula (1):

[0190]

[0191] Among them, (R 2 G 2 B 2 ) are the second initial RGB values of the fifth image; (R' 2 G' 2 B' 2 ) are the second target RGB values; 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 the present application refer to the RGB values of each pixel in the image. For example, the second initial RGB values of the fifth image refer to the second initial RGB values of each pixel in the fifth image. Therefore, when the electronic device adjusts the RGB values of the fifth image from the second initial RGB values to the second target RGB values, it means that: the electronic device adjusts the RGB values of each pixel in the fifth image from the second initial RGB values to the corresponding second target RGB values.

[0194] In another scenario, the color at the position corresponding to the first image on the background image is relatively rich, making the background image here look relatively messy. That is to say, the color of the fifth image is relatively rich, resulting in the fifth image looking relatively messy. At this time, after increasing the saturation of the fifth image, the color of the fifth image will become more vivid, and coupled with the relatively rich color of the fifth image, the fifth image after increasing the saturation looks even more messy. In this way, the third image obtained from the fifth image will also look relatively messy, resulting in a poor display effect of the finally obtained second image. Therefore, in this scenario, the electronic device can add a target filter on the layer corresponding to the fifth image to weaken the color of the image, thereby reducing the types of colors in the image.

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

[0196] Among them, the target filter may include: a blur filter, a gradient filter, but not limited thereto. Among them, the blur filter may include a Gaussian blur filter, a further blur filter, a special blur filter, a box blur filter, a radial blur filter, a surface blur filter, etc. The gradient filter may include a hard gradient filter, a soft gradient filter, etc.

[0197] S1003. The electronic device obtains a fourth image from the third image that has the same contour as the first image.

[0198] Among them, the contour of the fourth image is the same as the contour of the first image, and the fourth image is a part of the third image. Therefore, the color of the fourth image is the color at the corresponding position of the third image to the first image.

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

[0200] Exemplarily, the second color calculation formula may be expressed by the following formula (2):

[0201] (R 1 G 1 B 1 ) = alpha 1 ×(R' 2 G' 2 B' 2 ) (2)

[0202] Among them, (R 1 G 1 B 1 ) is the first initial RGB value of the fourth image; (R' 2 G' 2 B' 2 ) is the second target RGB value of the third image; alpha 1 is the first transparency of the first image, and alpha 1 can be used to reflect the contour of the first image.

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

[0204] Among them, the contour of the fourth image is the same as 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 perform display effect enhancement processing on the second image located below the layer corresponding to the first image to obtain the second image with enhanced display effect. In this way, after the first image and the second image 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] Optionally, as Figure 12 shown, in the embodiment of the present application, the above S1004 may include:

[0206] S1201. The electronic device stores the first image and the fourth image in a tree structure, where the first image is the upper node and the fourth image is the lower node.

[0207] Among them, the tree structure is a non-linear storage structure. Each data element in the tree structure can be called a node. The upper node is the parent node of the lower node, and the lower node is the child node of the upper node. The child node changes with the change of the parent node.

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

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

[0210] Among them, the first-layer node corresponds to the root node, the second-layer node is the first child node of the first-layer node, the third-layer node is the second child node of the first-layer node, and the fourth-layer node is the child node of the third-layer node. That is to say, the first child node and the second child node are sibling nodes.

[0211] As can be seen from the above: The fourth image is the child node of the first image. That is to say, the first image is the upper node and the fourth image is the lower 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 that of the first image. For another example, 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 that of the first image. For still another example, 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 that of the first image.

[0213] S1202. The electronic device performs dynamic effect adaptation processing on the fourth image based on the display attributes of the first image to obtain a sixth image that completely coincides with the first image.

[0214] Among them, the display attributes may include attributes unrelated to color such as the positioning attributes and dynamic effect attributes of the first image.

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

[0216] For another example, the dynamic effect attributes of the first image may include: the first image flashing at a fixed frequency, animation effects such as the first image scaling, etc.

[0217] Since the fourth image is a lower-level node of the first image, the display attributes of the first image will also act on the fourth image. That is to say, the electronic device will perform dynamic 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 coincide with the first image. However, during the dynamic effect adaptation processing, no processing is done on the color of the fourth image. Therefore, the RGB values of the sixth image are the same as those of the fourth image.

[0218] As Figure 14 shown in A of Figure 14 before the dynamic effect adaptation processing is performed on the fourth image, the first image 1130 and the fourth image 1410 do not coincide. As Figure 14 shown in B of Figure 14 , after the electronic device performs dynamic effect adaptation processing on the fourth image 1410 based on the display attributes of the first image 1130, the sixth image corresponding to the fourth image 1410 is obtained, and the sixth image completely coincides with the first image 1130. At this time, since the first image and the sixth image completely coincide, 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] Since the sixth image completely coincides with the first image after the dynamic effect adaptation process, therefore Figure 14 the sixth image is not shown in

[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 relatively dull color of the fourth image. That is to say, the first initial RGB value of the fourth image does not reach the first target RGB value. In this way, the display effect of the second image obtained from the fourth image is not good. At this time, the electronic device needs to adjust the RGB value of the fourth image from the above first initial RGB value to the first target RGB value.

[0221] In one embodiment, first, the electronic device can substitute 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] Exemplarily, the second saturation calculation formula can be represented by the following formula (3):

[0223]

[0224] where (R 1 G 1 B 1 ) is the second initial RGB value; (R' 1 G' 1 B' 1 ) is the second target RGB value; is the second saturation matrix.

[0225] In another scenario, if the first initial RGB value of the fourth image is equal to the first target RGB value, that is, 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 anymore. In this embodiment, the first initial RGB value of the fourth image is 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] Among them, the sixth image is obtained by performing a dynamic effect adaptation process on the fourth image, and this dynamic effect adaptation process does not include color adjustment. Therefore, the RGB value of the sixth image is the same as the RGB value 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 the embodiments of the present application, after the electronic device obtains the sixth image that completely coincides with the first image, it will also perform color adjustment on the sixth image to obtain the second image. The color adjustment may include at least one of the following: increasing the brightness of the sixth image and color blending the sixth image and the first image. The following is an introduction by cases.

[0229] In one embodiment, the color adjustment includes increasing the brightness of the sixth image. At this time, for the electronic device to increase the brightness of the sixth image, it may include: First, the electronic device converts the first target RGB value into the first HSV value. Then, the electronic device adjusts the HSV value of the sixth image from the first HSV value to the second HSV value. Finally, the electronic device converts the second HSV value into the third target RGB value.

[0230] Among them, V in the first HSV value represents the first brightness, and V in the second HSV value represents the second brightness. The second brightness is greater than the first brightness. That is to say, V in the first HSV value is greater than V in the second HSV value. Based on this, the brightness of the image can be increased, thereby enhancing the color of the image. In this way, the color of the second image obtained from the sixth image is relatively vivid.

[0231] Exemplarily, for the electronic device to convert the first target RGB value into the first HSV value, it may include: The electronic device substitutes the second target RGB value into the third color calculation formula to obtain the first HSV value.

[0232] For example, the third color calculation formula may be represented by the following formulas (4)-(6):

[0233]

[0234]

[0235] V 1 = Cmax (6)

[0236] Among them, (R' 1 G' 1 B' 1 ) is the first target RGB value; (H 1 S 1 V 1 ) is the first HSV value; C max = max(r 1 g 1 b 1 ), C min = min(r 1 g 1 b 1 ).

[0237] Exemplarily, for the electronic device to convert the second HSV value into the third target RGB value, it may include: the electronic device substitutes the second HSV value into the fourth color calculation formula to obtain the third target RGB value.

[0238] For example, the fourth color calculation formula may be represented by the following formulas (7) - (11):

[0239]

[0240] C = V 2 × S 2 (8)

[0241]

[0242] m = V 2 - C (10)

[0243] (R' 3 , G' 3 , B' 3 ) = ((r 2 + m) × 255, (g 2 + m) × 255, (b 2 + m) × 255) (11)

[0244] Wherein, (R' 3 , G' 3 , B' 3 ) is the third target RGB value; (H 2 S 2 V 2 ) is the second HSV value.

[0245] In another embodiment, the color adjustment includes color fusion of the sixth image and the first image. At this time, for the electronic device to perform color fusion on the sixth image and the first image, it may include: First, the electronic device substitutes 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 to obtain the third target RGB value. Then, the electronic device adjusts the first target RGB value to the third target RGB value.

[0246] Exemplarily, the fifth color calculation formula may be represented by the following formula (12):

[0247]

[0248] Wherein, (R' 3 , G' 3 , B' 3 ) is the third target RGB value; (R 6 , G 6 , B6 ) are the RGB values of the first image; (R' 1 , G' 1 , B' 1 ) are the first target RGB values; alpha 1 is the first transparency of the first image.

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

[0250] Of course, when the color adjustment simultaneously includes increasing the brightness of the sixth image and performing color fusion on the sixth image and the first image, the electronic device may also first perform color fusion on the sixth image and the first image and then increase the brightness of the sixth image. In this regard, the embodiments of the present application will not elaborate further.

[0251] Optionally, after obtaining the second image, the electronic device may adjust the transparency of the first image from the first transparency to the second transparency according to the level of the first image. Since the first image is the upper node of the fourth image and the second image is the fourth image after adjusting the RGB values, the first image is the upper node of the second image. Therefore, when the electronic device adjusts the transparency of the first image, the transparency of the second image changes with the transparency of the first image, so that the transparency of the second image is also adjusted to the second transparency. That is to say, during the process of the electronic device adjusting the transparency of the first image, the transparency of the second image is the same as that of the first image.

[0252] Exemplarily, if the first image is a first-level image, the second transparency is 100%. If the first image is a second-level image, the second transparency is 80%. If the first image is a third-level image, the second transparency is 50%. If the first image is a fourth-level image, the second transparency is 30%.

[0253] Such as Figure 15As shown in A in [reference], when the first image is a secondary image, before the display method provided by the embodiments of the present application is used to process the first image, the display effect of the first image is as shown in the first target image 1510. After the display method provided by the embodiments of the present application is used to process the first image, the display effect of the first image is as shown in the second target image 1520. By comparison, it can be seen that the display effect (such as color, recognition, 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.

[0254] As Figure 15 As shown in B in [reference], when the first image is a tertiary image, before the display method provided by the embodiments of the present application is used to process the first image, the display effect of the first image is as shown in the third target image 1530. After the display method provided by the embodiments of the present application is used to process the first image, the display effect of the first image is as shown in the fourth target image 1540. By comparison, it can be seen that the display effect (such as color, recognition, 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.

[0255] As Figure 15 As shown in C in [reference], when the first image is a quaternary image, before the display method provided by the embodiments of the present application is used to process the first image, the display effect of the first image is as shown in the fifth target image 1550. After the display method provided by the embodiments of the present application is used to process the first image, the display effect of the first image is as shown in the sixth target image 1560. By comparison, it can be seen that the display effect (such as color, recognition, 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.

[0256] 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 will become more obvious, making the display effect of the first image more prominent.

[0257] 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, synthesizes the background image, the first image, and the second image, and displays the first interface.

[0258] Specifically, after obtaining the second image, the first image, and the background image, the electronic device will arrange the layers corresponding to each image in order. From bottom to top, they are: 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 will perform a synthesis process on the arranged layers and display the first interface.

[0259] Optionally, before displaying the first interface, the electronic device can also adjust the color of the interface obtained by synthesizing each layer (such as the third interface) so that the finally displayed first interface matches the ambient light information of the light environment where the electronic device is located. Among them, the ambient light information may include: ambient light intensity and ambient color temperature.

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

[0261] Among them, the color temperature conversion matrix is obtained by the electronic device according to the ambient light information of the light environment where the electronic device is located. The color temperature conversion matrix is the conversion matrix of the RGB values of the white point color coordinates of the third 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 the historical moment. The historical moment is earlier than the current moment, and the light environment where the electronic device is located at the historical moment is different from the light environment where the electronic device is located at the current moment. That is to say, the ambient light information at the current moment is different from the ambient light information at the historical moment.

[0262] Exemplarily, the electronic device adjusts the RGB values of the third interface using a color temperature conversion matrix to display the 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 of 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 to display the first interface.

[0263] Among them, 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 represented by the following formula (13):

[0264]

[0265] Among them, (R 4 G 4 B 4 ) is the fourth initial RGB value; (R' 4 G' 4 B' 4 ) is the fourth target RGB value; is the color temperature conversion matrix.

[0266] It should be noted that the method for determining the color temperature conversion matrix can refer to the relevant introduction in the prior art, and the embodiments of the present application will not elaborate on this.

[0267] Such asFigure 16 As shown in Figure 16 , an embodiment of the present application further 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 can be interconnected through a line. The processor 1610 is used to support the electronic device to implement each step in the above method embodiment, and the at least one interface circuit 1620 can be used to receive signals from other devices (such as a memory), or send signals to other devices (such as a communication interface). The chip system may include a chip and may also include other discrete devices.

[0268] An embodiment of the present application further provides a computer storage medium. The computer storage medium includes instructions that, when running on the above-mentioned electronic device, cause the electronic device to execute each step in the above method embodiment.

[0269] An embodiment of the present application further provides a computer program product including instructions that, when running on the above-mentioned electronic device, cause the electronic device to execute each step in the above method embodiment.

[0270] For the technical effects of the chip system, computer storage medium, and computer program product, refer to the technical effects of the foregoing method embodiments.

[0271] It should be understood that in various embodiments of the present application, the magnitudes of the serial numbers of the above processes do not mean the order of execution. The execution order of each process should be determined according to its function and internal logic, and should not constitute any limitation to the implementation process of the embodiments of the present application.

[0272] Those of ordinary skill in the art can realize that the modules and algorithm steps of each example described in combination with the embodiments disclosed herein can be implemented by electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are executed in a hardware or software manner depends on the specific application and design constraints of the technical solution. Professional technicians can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of the present application.

[0273] Those skilled in the art can clearly understand that for the convenience and conciseness of description, the specific working processes of the systems, devices, and modules described above can refer to the corresponding processes in the foregoing method embodiments, and will not be elaborated herein.

[0274] In 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 example, the division of the modules is only a logical function division. In actual implementation, there may be other division methods. For example, multiple modules or components can be combined or integrated into another device, or some features can be ignored or not executed. Another point is that the displayed or discussed couplings or direct couplings or communication connections to each other can be through some interfaces. The indirect couplings or communication connections of devices or modules can be in electrical, mechanical, or other forms.

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

[0276] In addition, the functional modules in each embodiment of this application can be integrated in one device, or each module can exist physically alone, or two or more modules can be integrated in one device.

[0277] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented using a software program, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the processes or functions described in the embodiments of this application are generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. 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 in a wired manner (such as coaxial cable, optical fiber, digital subscriber line (DSL)) or wirelessly (such as infrared, wireless, microwave, etc.). The computer storage medium can be any available medium that the computer can access or a data storage device such as a server or data center that contains one or more integrated media. The available medium can be a magnetic medium (such as a floppy disk, hard disk, magnetic tape), an optical medium (such as a DVD), or a semiconductor medium (such as a solid state disk (SSD)), etc.

[0278] As described above, it is only the specific implementation manner of this application, but the protection scope of this application is not limited thereto. Any person skilled in the art within the technical scope disclosed by this application can easily think of changes or substitutions, which should all be covered within the protection scope of this application. Therefore, the protection scope of this application shall be subject to the protection scope of the claims described.

Claims

1. A display method, characterized in that, applied to an electronic device, the electronic device includes a display screen, and the method includes: In response to a first event, display a first interface; 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 the layer corresponding to the first image, and the first image is obtained based on the SVG source file of text and / or icons; Wherein, the first interface includes: the first image, a second image, and the 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 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 step of displaying the first interface in response to the first event includes: In response to the first event, obtain the first image and the background image; Based on the outline of the first image and the color of the first image at the corresponding position in the background image, obtain the second image; Place the second image below the layer corresponding to the first image and above the layer corresponding to the background image, synthesize the background image, the first image, and the second image, and display the first interface.

3. The method according to claim 2, characterized in that, The step of obtaining the 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 includes: Perform coordinate conversion processing on the relative coordinates of the first image to obtain the screen coordinates of the first image; Based on the screen coordinates of the first image, obtain a third image 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; Perform display effect enhancement processing on the fourth image to obtain the second image.

4. The method according to claim 3, characterized in that, The step of obtaining the fourth image from the third image that has the same outline as the first image includes: Adopt a second color calculation formula to obtain the fourth image from the third image that has the same outline as the first image; The second color calculation formula is: (R 1 G 1 B 1 ) = alpha 1 × (R' 2 G' 2 B' 2 ) Among them, (R 1 G 1 B 1 ) is the first initial RGB value of the fourth image; (R' 2 G' 2 B' 2 ) is the second target RGB value of the third image; alpha 1 is the first transparency of the first image, and the alpha 1 is used to reflect the contour 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, obtain a fifth image from the background image; wherein, the screen coordinates of the fifth image are the same as the screen coordinates of the first image; Adjust the RGB values of the fifth image 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 values of the fifth image and a first saturation matrix into a first saturation calculation formula to obtain the second target RGB values; Adjust the RGB values of the fifth image from the second initial RGB values to the second target RGB values to obtain the third image; The first saturation calculation formula is: wherein, the (R 2 G 2 B 2 ) is the second initial RGB value; the (R' 2 G' 2 B' 2 ) is the second target RGB value; the is the first saturation matrix.

7. The method according to claim 6, wherein, The step of substituting 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 includes: Adding a target filter to the layer corresponding to the fifth image to adjust the second initial RGB values of the fifth image to third RGB values; wherein, the target filter is used to weaken the colors of the fifth image; Substitute the third RGB values of the fifth image and the first saturation matrix into the first saturation calculation formula to obtain the second target RGB values.

8. The method according to any one of claims 3-7, wherein, The step of performing a display effect enhancement process on the fourth image to obtain the second image includes: Storing the first image and the fourth image in a tree structure; wherein, the node where the first image is located is the upper node, the node where the fourth image is located is the lower node, and the lower node changes with the change of the upper node; Based on the display attributes of the first image, perform a dynamic effect adaptation process on the fourth image to obtain a sixth image that completely coincides with the first image; wherein, the display attributes include a positioning attribute and a dynamic effect attribute; the RGB values of the sixth image are the same as the RGB values of the fourth image; Adjust the RGB values of the sixth image from the first target RGB values to the third target RGB values to obtain the second image; wherein, the first target RGB values are related to the first initial RGB values.

9. The method according to claim 8, wherein, Before adjusting the RGB values of the sixth image from the first target RGB values to the third target RGB values to obtain the second image, the method further includes: Adjust the RGB values of the fourth image from the first initial RGB values to the first target RGB values; wherein, the first target RGB values correspond to the target saturation of the fourth image.

10. The method according to claim 9, wherein, The step of adjusting the RGB values of the fourth image from the first initial RGB values to the first target RGB values includes: Substitute 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; Adjust the RGB values of the fourth image from the first initial RGB values to the first target RGB values; The second saturation calculation formula is: Among them, the (R 1 G 1 B 1 ) is the first initial RGB value; the (R′ 1 G′ 1 B′ 1 ) is the first target RGB value; the is the second saturation matrix.

11. The method according to any one of claims 8-10, wherein, The step of adjusting the RGB values of the sixth image from the first target RGB values to the third target RGB values includes: Adjust the first target RGB values to the third target RGB values by increasing the brightness of the sixth image.

12. The method according to claim 11, wherein, Adjusting the first target RGB value to a third target RGB value by increasing the brightness of the sixth image includes: Converting the first target RGB value to a first HSV value; Adjusting the HSV value of the sixth image from the first HSV value to a 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; Converting the second HSV value to the third target RGB value; Adjusting the first target RGB value to the third target RGB value.

13. The method according to claim 12, wherein, Converting the first target RGB value to a first HSV value includes: Substituting the first target RGB value into a third color calculation formula to obtain the first HSV value; The third color calculation formula is: V 1 = Cmax Among them, (R′ 1 , G′ 1 , B′ 1 ) is the first target RGB value; (H 1 , S 1 , V 1 ) is the first HSV value; C max = max(r 1 , g 1 , b 1 ), C min = min(r 1 , g 1 , b 1 ).

14. The method according to claim 12 or 13, wherein, Converting the second HSV value to the third target RGB value includes: Substituting the second HSV value into a fourth color calculation formula to obtain the third target RGB value; The fourth color calculation formula is: C = V 2 × S 2 m = V 2 -C (R′ 3 , G′ 3 , B' 4 ) = ((r 2 + m) × 255, (g 2 + m) × 255, (b 2 + m) × 255) where (R′ 3 , G′ 3 , B′ 3 ) is the third target RGB value; (H 2 , S 2 , V 2 ) is the second HSV value.

15. The method according to any one of claims 8 - 10, wherein, Adjusting the RGB value of the sixth image from the first target RGB value to the third target RGB value includes: Adjusting the first target RGB value 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, wherein, 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 a fifth color calculation formula to obtain the third target RGB value; Adjusting the first target RGB value to the third target RGB value; The fifth color calculation formula is: Among them, (R′ 3 , G′ 3 , B′ 3 ) is the third target RGB value; (R 6 , G 6 , B 6 ) is the RGB value of the first image; (R′ 1 , G′ 1 , B′ 1 ) is the first target RGB value; alpha 1 is the first transparency of the first image.

17. The method according to any one of claims 8 - 10, wherein, Adjusting the RGB value of the sixth image from the first target RGB value to the third target RGB value includes: Adjusting the first target RGB value to the third target RGB value by increasing the brightness of the sixth image and performing color fusion on the sixth image and the first image.

18. The method according to any one of claims 2 - 17, wherein, After obtaining the second image, the method further includes: Adjusting the transparency of the first image from the first transparency to a second transparency; wherein, 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.

19. The method according to any one of claims 1 - 18, wherein, The first interface matches the ambient light information of the light environment where the electronic device is located; wherein, the ambient light information includes: ambient illuminance and ambient color temperature.

20. The method according to claim 19, wherein, the step of placing the second image below the corresponding layer of the first image and above the corresponding layer of the background image, and synthesizing the background image, the first image and the second image to display the first interface includes: placing the second image below the corresponding layer of the first image and above the corresponding layer of the background image, and synthesizing the background image, the first image and the second image to obtain a third interface; adjusting the RGB values of the third interface using the color temperature conversion matrix of the electronic device, and displaying the first interface; wherein, the color temperature conversion matrix is related to the light environment where the electronic device is located.

21. The method according to claim 20, wherein, 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: obtaining a fourth target RGB value using the color temperature conversion matrix of the electronic device and the fourth initial RGB value of the third interface; adjusting the fourth initial RGB value of the third interface to the fourth target RGB value, and displaying the first interface.

22. The method according to claim 21, wherein, the step of obtaining a fourth target RGB value 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 a first color calculation formula to obtain the fourth target RGB value; the first color calculation formula is: Among them, (R 4 G 4 B 4 ) is the fourth initial RGB value; (R' 4 G' 4 B' 4 ) is the fourth target RGB value; is the color temperature conversion matrix.

23. An electronic device, wherein, it includes a display screen, a processor and a memory, instructions are stored in the memory, when the processor executes the instructions, the method according to 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, wherein, it includes instructions, when the instructions are executed on an electronic device, the electronic device is caused to execute the method according to any one of claims 1-22.

Images