CN-122018735-A - UI component processing method, vehicle display device, storage medium and program product

CN122018735ACN 122018735 ACN122018735 ACN 122018735ACN-122018735-A

Abstract

The application provides a processing method of a UI component, vehicle-mounted display equipment, storage media and a program product, wherein the method comprises the steps of generating a water film wrapping layer according to target contour data of the UI component, wherein the target contour data are used for representing geometric form characteristics of a target contour of the UI component, the water film wrapping layer is matched with the geometric form of the target contour, and in the embodiment of the application, the water film wrapping layer is constructed according to the target contour data, and the form of the water film wrapping layer can be matched with the actual contour of the UI component, so that the problem of visual distortion of a glassy state effect, such as edge blurring and the like caused by the fact that the actual contour form is not considered can be basically avoided, and the visual display effect of the glassy state of the UI component is remarkably improved.

Inventors

YANG QIAOHUI
WANG ZHE
Luo Qinyue
LIN ZHIGUI
FU GUANG

Assignees

上汽通用五菱汽车股份有限公司

Dates

Publication Date: 20260512
Application Date: 20260119

Claims (12)

1. A method for processing a UI component, applied to a vehicle, the vehicle including a vehicle-to-machine interface, the vehicle-to-machine interface including the UI component, the method comprising: Generating a water film wrapping layer according to target contour data of a UI component, wherein the target contour data are used for representing geometric form characteristics of a target contour of the UI component, and the water film wrapping layer is matched with the geometric form of the target contour; and adding the water film wrapping layer to a first preset position on the UI component to obtain the UI component with the water glass effect.
2. The method of claim 1, wherein the target profile data of the UI component comprises a curvature and a shape of the target profile of the UI component, the generating a water film wrap from the target profile data of the UI component comprising: According to the curvature of the target outline of the UI component, determining the frame thickness of the water film wrapping layer, wherein the curvature is positively correlated with the frame thickness; And generating a water film wrapping layer according to the shape of the target outline of the UI component and the thickness of the frame.
3. The method of claim 2, wherein generating a water film wrapping layer according to the shape of the target outline of the UI component and the bezel thickness comprises: Determining a water film generation anchor point according to the curvature of a target contour of the UI component and the shape of the target contour, wherein the density of the water film generation anchor point is positively correlated with the curvature of the target contour; And generating the water film wrapping layer according to the water film generation anchor point and the thickness of the frame.
4. The method as recited in claim 1, further comprising: judging the type of the UI component; And if the type of the UI component is an application type, executing fuzzy processing of a first fuzzy degree on a superposition area of the UI component, wherein the superposition area of the UI component is a superposition area of the UI component and the water film wrapping layer.
5. The method as recited in claim 1, further comprising: Acquiring a first subarea and a second subarea of a superposition area of the UI component, wherein the contrast of the first subarea is larger than or equal to a preset contrast, the contrast of the second subarea is smaller than the preset contrast, and the superposition area is the superposition area of the UI component and the water film wrapping layer; And executing fuzzy processing of a second fuzzy degree on the first subarea, and executing fuzzy processing of a third fuzzy degree on the second subarea, wherein the second fuzzy degree is smaller than the third fuzzy degree.
6. The method as recited in claim 1, further comprising: determining static visual effect parameters of the water film wrapping layer according to the type of the UI component, wherein the static visual effect parameters comprise transparency, blurring degree and/or refraction degree; and determining dynamic visual effect parameters of the water film wrapping layer according to the running state of the vehicle, wherein the dynamic visual effect parameters comprise the fluctuation range of the water film and the attenuation speed of the water flow trace.
7. The method of claim 6, wherein the determining the static visual effect parameter of the water film wrap according to the type of the UI component comprises: If the type of the UI component is an application type, determining that the transparency of the water film wrapping layer is first transparency, the blurring degree is fourth blurring degree and the refracting degree is first refracting degree; If the type of the UI component is a card type, determining that the transparency of the water film wrapping layer is second transparency, the blurring degree is fifth blurring degree and the refracting degree is second refracting degree; Wherein the first transparency is less than the second transparency, the fourth degree of blur is greater than the fifth degree of blur, and the first degree of refraction is greater than the second degree of refraction.
8. The method as recited in claim 1, further comprising: Determining pressing force according to touch operation of a user on the UI component; According to the pressing force, the water wave diffusion effect of the water film wrapping layer is determined, and the pressing force and the water wave diffusion effect are positively correlated.
9. The method as recited in claim 1, further comprising: and rendering high light at a second preset position of the water film wrapping layer, wherein the intensity of the high light is in negative correlation with the illumination intensity of the vehicle, and the second preset position is a position where the curvature of the outline of the water film wrapping layer is larger than the preset curvature.
10. A vehicle-mounted display apparatus, characterized by comprising: A processor; a memory; And a computer program, wherein the computer program is stored in the memory, which when executed by the processor, causes the in-car display device to perform the method of any one of claims 1 to 9.
11. A computer readable storage medium, characterized in that the computer readable storage medium stores a computer program which, when executed by a processor, implements the method of any one of claims 1 to 9.
12. A vehicle comprising the vehicle display apparatus of claim 10.

Description

UI component processing method, vehicle display device, storage medium and program product Technical Field The present application relates to the field of image processing technologies, and in particular, to a processing method of a UI component, a vehicle display device, a storage medium, and a program product. Background And a User Interface (UI) component which is used as a core carrier for vehicle-mounted display and man-machine interaction in the mobile terminal, wherein the visual presentation quality of the UI component directly influences the interaction experience of a User. Especially in modern intelligent cabin field, car machine interface not only is the medium of information transmission, but also embodies the key window of vehicle science and technology level and brand feel. In recent years, a design style represented by "glass state" has been widely used in UI design of various operating systems because of its transparent and light visual characteristics. In the related art, a globally uniform image processing mode is generally employed to achieve the glassy effect. Specifically, a uniform, preset gaussian blur or similar filtering algorithm is applied to the entire UI component and a layer of fixed transparency mask is superimposed. However, for icons with complex outlines, such global blurring inevitably erodes the originally sharp edges, resulting in problems such as blurred edges, etc., which spoil the delicacy of the visual effect of the UI component and significantly affect the visual experience of the user. It should be noted that the information disclosed in the background section of the present application is only for enhancement of understanding of the general background of the present application and should not be taken as an admission or any form of suggestion that this information forms the prior art that is well known to a person skilled in the art. Disclosure of Invention The application provides a processing method of a UI component, a vehicle display device, a storage medium and a program product, which are beneficial to solving the problems that the glass state visual effect of the UI component in the related technology is poor and the visual experience of a user is influenced. In a first aspect, an embodiment of the present application provides a method for processing a UI component, which is applied to a vehicle, where the vehicle includes a vehicle-machine interaction interface, and the vehicle-machine interaction interface includes the UI component, and the method includes: Generating a water film wrapping layer according to target contour data of a UI component, wherein the target contour data are used for representing geometric form characteristics of a target contour of the UI component, and the water film wrapping layer is matched with the geometric form of the target contour; and adding the water film wrapping layer to a first preset position on the UI component to obtain the UI component with the water glass effect. In one possible implementation, the target profile data of the UI component includes a curvature and a shape of the target profile of the UI component, and generating the water film wrapping layer according to the target profile data of the UI component includes: According to the curvature of the target outline of the UI component, determining the frame thickness of the water film wrapping layer, wherein the curvature is positively correlated with the frame thickness; And generating a water film wrapping layer according to the shape of the target outline of the UI component and the thickness of the frame. In one possible implementation manner, the generating a water film wrapping layer according to the shape of the target outline of the UI component and the frame thickness includes: Determining a water film generation anchor point according to the curvature of a target contour of the UI component and the shape of the target contour, wherein the density of the water film generation anchor point is positively correlated with the curvature of the target contour; And generating the water film wrapping layer according to the water film generation anchor point and the thickness of the frame. In one possible implementation, the method further includes: judging the type of the UI component; And if the type of the UI component is an application type, executing fuzzy processing of a first fuzzy degree on a superposition area of the UI component, wherein the superposition area of the UI component is a superposition area of the UI component and the water film wrapping layer. In one possible implementation, the method further includes: Acquiring a first subarea and a second subarea of a superposition area of the UI component, wherein the contrast of the first subarea is larger than or equal to a preset contrast, the contrast of the second subarea is smaller than the preset contrast, and the superposition area is the superposition area of the UI component and the wat