Graph display method and device, electronic equipment and medium

Abstract

The invention discloses a graph generation method and device, electronic equipment and a medium. The graph generation method comprises the steps that graph features of a target graph are generated through a symbol distance function; determining mapping position information of the target graph in the target screen based on the graph features of the target graph; determining a target display size of the target graph in the target screen based on the physical parameters of the target screen, and obtaining actual display position information of the target graph in the target screen based on the physical parameters and the mapping position information of the target graph in the target screen; and displaying the target graph in the target screen based on the graph feature of the target graph, the target display size and the actual display position information. According to the method and the device, when the program runs, the pixel information of the graph is dynamically calculated to adapt to different screen size resolutions, so that the effect of picture consistency can still be presented to a user in different screens, and the watching experience of the user is improved.

Description

Technical Field

[0001] This application relates to the field of computer technology, specifically to graphics display methods, devices, electronic devices, and media. Background Technology

[0002] The game includes various dynamic visual effects, such as animated user interfaces, player interaction animations, and various screen-based special effects elements. These effects may appear inconsistent on different devices due to variations in screen resolution.

[0003] In related technologies, in order to adapt to different screen sizes and ensure that the screen effect is consistent across all devices, it is generally necessary to directly scale the material or create images or frames of the same content at corresponding sizes for devices with different screen resolutions, thereby achieving a consistent screen effect across multiple devices with different screen resolutions.

[0004] However, directly using scaling for adaptation can result in the loss of significant structural texture variations during the scaling process. This reduces texture detail, leading to inconsistent presentation of the same content for users on different screen sizes, resulting in a poor visual experience and negatively impacting product retention and conversion rates. Creating multiple duplicate files to adapt to different screen resolutions results in a large number of duplicate and adaptation files within the game package. This excessive use of duplicate files hinders the implementation and performance of other elements. Summary of the Invention

[0005] In view of this, this application provides a graphics display method, apparatus, electronic device, and medium to solve the problems that arise from directly scaling materials or creating the same content of corresponding size for devices with different screen resolutions, resulting in reduced texture detail, a large number of duplicate game packages and adaptation files, which affect the final rendering effect.

[0006] In a first aspect, this application provides a graphic display method, the method comprising: The graphic features of the target graphic are generated using the signed distance function; Based on the graphic features of the target graphic, determine the mapping position information of the target graphic on the target screen; Based on the physical parameters of the target screen, the target display size of the target graphic on the target screen is determined. Based on the physical parameters and the mapping position information of the target graphic on the target screen, the actual display position information of the target graphic on the target screen is obtained. Based on the graphic features of the target graphic, the target display size, and the actual display position information, the target graphic is displayed on the target screen.

[0007] Secondly, this application provides a graphic display device, the device comprising: The generation module is used to generate graphic features of the target graphic using the signed distance function; The first determining module is used to determine the mapping position information of the target graphic on the target screen based on the graphic features of the target graphic. The second determining module is used to determine the target display size of the target graphic on the target screen based on the physical parameters of the target screen, and to obtain the actual display position information of the target graphic on the target screen based on the physical parameters and the mapping position information of the target graphic on the target screen. The display module is used to display the target graphic on the target screen based on the graphic features of the target graphic, the target display size, and the actual display position information.

[0008] Thirdly, this application provides an electronic device, including: a memory and a processor, which are communicatively connected to each other. The memory stores computer instructions, and the processor executes the computer instructions to perform the graphic display method of the first aspect or any corresponding embodiment described above.

[0009] Fourthly, this application provides a computer-readable storage medium storing computer instructions for causing a computer to perform the graphic display method of the first aspect or any corresponding embodiment described above.

[0010] Fifthly, this application provides a computer program product, including computer instructions for causing a computer to execute the graphical display method described in the first aspect or any corresponding embodiment thereof.

[0011] This application provides a graphic display method that generates graphic features of a target graphic using a signed distance function; then, based on the graphic features of the target graphic, determines the mapping position information of the target graphic on a target screen; based on the physical parameters of the target screen, determines the target display size of the target graphic on the target screen; and based on the physical parameters and the mapping position information of the target graphic on the target screen, obtains the actual display position information of the target graphic on the target screen; finally, based on the graphic features, target display size, and actual display position information of the target graphic, the target graphic is displayed on the target screen. These steps enable the program to automatically adjust the target display size of the target graphic according to the screen size and resolution during runtime, and simultaneously adjust the final display position of the target graphic on the target screen according to the screen size and resolution. This achieves dynamic calculation of the graphic's pixel information to adapt to different screen sizes and resolutions, ensuring a consistent visual experience for the user across different screens and improving the user's viewing experience. Attached Figure Description

[0012] To more clearly illustrate the technical solutions in the specific embodiments or related technologies of this application, the drawings used in the description of the specific embodiments or related technologies will be briefly introduced below. Obviously, the drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0013] Figure 1 This is a schematic diagram illustrating an application scenario according to an embodiment of this application; Figure 2 This is a flowchart illustrating a graphical display method according to an embodiment of this application; Figure 3 This is a schematic diagram of the constituent parts of the target graphic according to an embodiment of this application; Figure 4 This is a schematic diagram of another component part of the target drawing according to an embodiment of this application; Figure 5 This is a schematic diagram of another component part of the target graphic according to an embodiment of this application; Figure 6 This is a further component of the target graphic according to an embodiment of this application; Figure 7 This is an illustration of the target graphic's coordinates mapped to the target area according to an embodiment of this application; Figure 8 This is a flowchart illustrating another graphical display method according to an embodiment of this application; Figure 9 This is a schematic diagram illustrating the effect of displaying the target graphic on a small screen according to an embodiment of this application; Figure 10 This is a schematic diagram illustrating the effect of displaying the target graphic in a medium-sized screen according to an embodiment of this application; Figure 11 This is a schematic diagram illustrating the effect of displaying the target graphic on a large screen according to an embodiment of this application; Figure 12 This is a schematic diagram showing the effect of rendering the target graphic according to an embodiment of this application; Figure 13 This is a structural block diagram of a graphic display device according to an embodiment of this application; Figure 14 This is a schematic diagram of the hardware structure of an electronic device according to an embodiment of this application. Detailed Implementation

[0014] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0015] It is understood that before using the technical solutions disclosed in the various embodiments of this disclosure, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this disclosure in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.

[0016] It should be noted that, in the description of this application, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. The terms "first," "second," etc., in this application are used to distinguish similar objects and are not used to describe a specific order or sequence.

[0017] In some dynamic visual effects displays, special effects elements need to be shown. However, these special effects elements need to be adapted to different screen sizes due to the influence of screen resolution when played on different media, while also ensuring that the visual effect remains consistent with other devices.

[0018] In related technologies, in order to display all these elements on the screen, the materials are directly scaled and adapted to achieve consistent visual effects across multiple device screen sizes and resolutions. Alternatively, based on the screen size and resolution of common models, multiple copies of the same content of the same size are created for the same image or sequence of frames to adapt to the consistent visual effects of various screen models.

[0019] However, directly using scaling for adaptation can result in the loss of significant structural texture variations during the scaling process. This reduces texture detail, leading to inconsistent presentation of the same content for users on different screen sizes, resulting in a poor visual experience and negatively impacting product retention and conversion rates. Creating multiple duplicate files to adapt to different screen resolutions results in a large number of duplicate and adaptation files within the game package. This excessive use of duplicate files hinders the implementation and performance of other elements.

[0020] Based on this, this application proposes a graphics display method as an optional application scenario for this application embodiment, such as... Figure 1As shown, the application scenario includes: mobile game terminal device 201 (such as smartphones and tablets) and graphics texture generation and adaptation server 202 (a core processing unit integrating SDF graphics definition module, RepeatUV standardized coordinate module, and AntialiasingStep anti-aliasing module). The two work together to form a full-link architecture for "dynamic function icon generation and multi-resolution adaptation" in the game, which is suitable for UI scenarios such as skill icons, item icons, and task prompt icons in the game that need to maintain visual consistency across devices.

[0021] Among them, the mobile game terminal device 201 is responsible for collecting its own screen resolution (such as 720×1280, 1080×1920, 2160×3840) and device pixel ratio, loading game UI interface resources, responding to user operations (such as clicking the item bar, viewing skill details), and transmitting the device hardware parameters to the server 202 in real time. The server 202 undertakes the core processing tasks, including defining target graphics based on SDF functions (such as item icons with jagged edges), establishing a standardized device coordinate system through RepeatUV, dynamically calculating scaling factors and displacement compensation parameters adapted to different resolutions, calling the AntialiasingStep function to eliminate jagged edges at scaled edges, generating pixel color data after gradient filling, and finally feeding back the processed graphic texture data to the terminal device 201 to ensure that item / skill icons maintain a lossless visual effect (no stretching, no jagged edges) on mobile game terminals with different screen sizes and resolutions, while avoiding the problem of traditional pre-baked textures occupying a lot of memory (reducing from tens of MB to a few KB).

[0022] According to an embodiment of this application, a graphical display method embodiment is provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0023] This embodiment provides a graphical display method that can be used in the aforementioned server 102. Figure 2 This is a flowchart illustrating a graphical display method according to an embodiment of this application, such as... Figure 2 As shown, the process includes the following steps: Step S201: Generate the graphic features of the target graphic using the signed distance function.

[0024] Optionally, SDF (Signed Distance Field) is a method for describing shapes using functions, used to calculate the directed distance from any point in space to the surface of a specified shape. For each point in space, it returns the shortest distance from that point to the shape boundary, with negative values ​​for internal points, positive values ​​for external points, and 0 values ​​for the boundary. Its core idea is to use distance information to achieve smooth graphic effects.

[0025] SDF can be used to generate basic shapes, such as circles, rectangles, and triangles, and supports dynamic adjustment of parameters such as position, size, and corner radius.

[0026] Meanwhile, since SDF defines simple geometric shapes, more complex graphics can be generated by combining these simple geometric shapes with Boolean operations such as union, intersection, and difference, as well as translation, rotation, and scaling operations.

[0027] Specifically, this application embodiment generates image features of complex target graphics based on SDF, uses these graphic features to achieve a numerical description of shape space features, and then uses rendering logic to convert them into visible graphics. The process is as follows: 1. Define the main rhombus shape. The rhombus is obtained by rotating a rectangle (see...). Figure 3 ): The `rectSDF` function is used to define a rectangle, which takes coordinate point `p` and rectangle size `size`. The rectangle SDF calculation logic is as follows: first, calculate the distance from the point to the four sides of the rectangle, then use `min(max(),0.0)` and `length()` to get the final distance, and rotate the coordinate system 45 degrees clockwise to make the rectangle a rhombus. After the rotation, the rectangle will visually present a rhombus shape in subsequent rendering.

[0028] 2. The flattened hexagon at the base of the rhombus. Obtained by scaling a regular hexagon (see...). Figure 4 ): The hexagonSDF function is used to define a regular hexagon, which takes the coordinate point p and the radius radius. The hexagon SDF calculation logic is as follows: the calculation is simplified by transforming the point to the first quadrant, and then the distance to the hexagon's side is calculated. The implementation of 60% compression along the y-axis is achieved by enlarging the y-coordinate by 1 / 0.6 times. This process flattens the regular hexagon in the vertical direction, forming a hexagon with a specific ratio.

[0029] 3. The jagged effect on both sides of the bottom of the rhombus. This is achieved by arranging multiple small rectangles (see...). Figure 5 ): First, define a large rhombus as the base, initialize the SDF value of the combination of smaller rhombuses to a very large number (1000.0), and then create multiple smaller rhombuses in a loop: Calculate the angle of each small rhombus; Calculate the position of each small rhombus and distribute it around the outer edge of the large rhombus; Calculate the SDF of each small rhombus and combine all the small rhombuses using the min() function; The logic for calculating the position of the small rhombus is: distance from the center = size of the large rhombus + size of the small rhombus + spacing; By removing the excess parts in the upper half, the jagged effect on both sides of the bottom is ultimately created.

[0030] 4. Shape Combinations Combine all shapes using the intersection operation of SDF: The `max()` function is used to intersect shapes, combining rhombuses, flattened hexagons, and jagged edges through intersection operations to obtain the final target graphic (see [link]). Figure 6 ).

[0031] In addition, the embodiments of this application can also switch different SDF functions through macro definitions or parameterized interfaces (such as #ifdefined(STARSHAPE)). The same set of shader code can generate countless variations by adjusting the parameters. Compared with storing a large number of texture maps, the package size can be reduced by more than 90%.

[0032] Step S202: Based on the graphic features of the target graphic, determine the mapping position information of the target graphic on the target screen.

[0033] Optionally, after obtaining the graphic features of the target graphic based on SDF, the target screen currently displaying the target graphic is obtained, and then the mapping position information of the target graphic on the target screen is obtained.

[0034] Specifically, step a1 involves obtaining the pixel coordinates of the target screen.

[0035] Step a2: Map the pixel coordinates of the target screen to the target range to obtain the target coordinate system about the target screen.

[0036] Step a3: Based on the graphic features of the target graphic, map the coordinates of the target graphic to the target range to obtain the mapping position information of the target graphic in the target coordinate system. Optionally, since this embodiment displays the same graphic on different screen sizes, and the screen resolutions of different devices are inconsistent, normalization processing is required. In this case, the screen resolution is mapped to the range (-1.0, 1.0) to facilitate subsequent distributed calculations.

[0037] Specifically, the pixel coordinates of the target screen are obtained, and then the pixel coordinates of the target screen that will display the target graphic are mapped to coordinates (-1.0, 1.0). The target screen pixel coordinates are first scaled to the range of (0.0, 1.0), and then offset and scaled to map the range of (0.0, 1.0) to the target range of (-1.0, 1.0).

[0038] Thus, a target coordinate system with a mapping range of (-1.0, 1.0) is constructed for the target screen.

[0039] The target graphic generated by SDF is based on the center of the image, and the coordinates of this target graphic are marked as the origin (0.0, 0.0).

[0040] Since the coordinates of the target screen have already been mapped to the target area, in order to display the target graphic reasonably on the target screen, it is necessary to normalize the coordinates of the target graphic as well.

[0041] Specifically, the current coordinates of the target graphic on the target screen are mapped to the target range x, y = (-1.0, 1.0). Furthermore, when the effective region value of the target graphic is generated using SDF to be 1.0, the minimum and maximum values ​​of the target graphic on the x and y axes are found. These extreme values ​​define the "bounding box" of the target graphic, that is, the rectangular region occupied by the target graphic in the original coordinate space (see...). Figure 7 ).

[0042] Next, calculate the x and y axis range lengths: x_range = x_max - x_min, y_range = y_max - y_min. After obtaining the length and width of the target graphic, convert the center (x_center, y_center) of the target graphic to the origin (0.0, 0.0). After performing normalization mapping, the original left boundary x_min is mapped as follows: x_min × scale_x (x-axis scaling factor) + offset_x (x-axis offset) = x_min × scale_x - x_center × scale_x = -1.

[0043] After mapping the original right boundary x_max: x_max×scale_x-x_center×scale_x=(x_max-x_center)×scale_x=(x_range / 2)×(2 / x_range)=1.

[0044] Similarly, for the y-axis, the original upper and lower boundaries y_min and y_max are mapped to -1 and 1, respectively.

[0045] This ultimately yields the mapping position information of the target graphic within the target coordinate system (i.e., x, y = (-1.0, 1.0)). For example, the coordinates of the current pixel in the fragment shader, with the origin at the bottom left corner of the screen, x increasing from left to right (0 to resolution.x), and y increasing from bottom to top (0 to resolution.y). For instance, if the center pixel of the screen is at resolution = (1920, 1080), the coordinates of the current pixel in the target coordinate system are (960, 540). Here, resolution is the resolution of the current screen (or rendering area), in pixels. For example, a screen with a width of 1920 pixels and a height of 1080 pixels.

[0046] After the coordinates of the target graphic are mapped to the target range, the y-axis range is strictly within [-1,1], and the X-axis range is automatically adjusted according to the screen aspect ratio.

[0047] Step S204: Based on the physical parameters of the target screen, determine the target display size of the target graphic on the target screen, and based on the physical parameters and the mapping position information of the target graphic on the target screen, obtain the actual display position information of the target graphic on the target screen.

[0048] Optionally, the server will obtain the physical parameters of the target screen, including screen size, screen resolution, screen width, and screen height. Based on these physical parameters, the original size of the target graphic can be adaptively adjusted to obtain a target display size that adapts to the target screen resolution. It should be noted that the target display size here should be the size information after scaling and adjustment to adapt to the target screen resolution.

[0049] Similarly, based on these physical parameters and the mapping position information of the target graphic on the target screen obtained from the above embodiments, the actual display position information of the target graphic on the target screen can be determined. It should be noted that the actual display position information here refers to the final position that the target graphic should be displayed on the target screen after being adapted to the target screen and moved.

[0050] Specifically, in step b1, the target coordinates of the target graphic displayed on the target screen are obtained.

[0051] Step b2: Based on the physical parameters and target coordinates, obtain the actual displacement of the target graphic from the mapped position information to the target coordinates.

[0052] Step b3: Obtain the actual display position information of the target graphic based on the actual displacement.

[0053] Optionally, During actual screen rendering, the target graphic at the origin position is not displayed. Instead, the target graphic is displayed after being shifted, rotated, or scaled to the target coordinates as a whole (the target position here refers to the actual position of the target graphic on the target screen).

[0054] At this point, it is necessary to obtain the actual displacement of the target graphic from the current coordinates in the target coordinate system to the target coordinates. Since the actual displacement is determined based on the current coordinates and the target coordinates, in addition to knowing the coordinate values ​​of the current coordinates, it is also necessary to know the coordinate values ​​of the target coordinates.

[0055] The RepeatUV function is then used to tile the target graphic. Tiling the graphic facilitates the calculation of the target graphic's coordinates at the target coordinate system.

[0056] Specifically, the backend server can obtain the original graphic size of the target graphic (i.e., the size information before scaling) and the screen size information of the target screen in real time. Then, based on the screen size of the target screen and the original graphic size of the target graphic, it determines the number of tiles of the target graphic on the coordinate axes (x-axis and y-axis).

[0057] For example, if the target graphic is 10×10 pixels in the positive direction and needs to fill a 200×100 rectangle on the target screen, 20 graphics need to be distributed along the x-axis and 10 along the y-axis, for a total of 200 target graphics.

[0058] If only the eighth square in the second row is currently displayed, and the others are hidden, then based on the number of tiles obtained above, the coordinate axis information corresponding to the selected target graphic being tiled on the target screen is obtained, that is, the coordinates x-axis = 8, y-axis = 2. Then, based on x-axis = 8 and y-axis = 2, the corresponding screen coordinates are (-0.25, -0.7). These screen coordinates are the actual display position information of the target graphic on the target screen.

[0059] Step S205: Based on the graphic features of the target graphic, the target display size, and the actual display position information, display the target graphic on the target screen.

[0060] Optionally, after determining the actual displacement of the target graphic from its current coordinates to the target coordinates, the target graphic with the target display size is moved to the target coordinates based on the actual displacement. Then, the target graphic is rendered using a renderer, and the graphic features of the SDF are combined to ensure that the target graphic is displayed at the actual display position on the target screen after subsequent rendering.

[0061] This application provides a graphic display method that generates graphic features of a target graphic using a signed distance function; then, based on the graphic features of the target graphic, determines the mapping position information of the target graphic on a target screen; based on the physical parameters of the target screen, determines the target display size of the target graphic on the target screen; and based on the physical parameters and the mapping position information of the target graphic on the target screen, obtains the actual display position information of the target graphic on the target screen; finally, based on the graphic features, target display size, and actual display position information of the target graphic, the target graphic is displayed on the target screen. These steps enable the program to automatically adjust the target display size of the target graphic according to the screen size and resolution during runtime, and simultaneously adjust the final display position of the target graphic on the target screen according to the screen size and resolution. This achieves dynamic calculation of the graphic's pixel information to adapt to different screen sizes and resolutions, ensuring a consistent visual experience for the user across different screens and improving the user's viewing experience.

[0062] This embodiment provides a graphical display method that can be used in the aforementioned server 102. Figure 8 This is a flowchart illustrating another graphical display method according to an embodiment of this application, such as... Figure 8 As shown, the process includes the following steps: Step S801: Generate the graphic features of the target graphic using the signed distance function. For details, please refer to [link to relevant documentation]. Figure 2 Step S201 of the illustrated embodiment will not be described again here.

[0063] Step S802: Based on the graphic features of the target graphic, determine the mapping position information of the target graphic on the target screen. For details, please refer to [link to relevant documentation]. Figure 2 Step S202 of the illustrated embodiment will not be described again here.

[0064] Step S803: Determine the target display size of the target graphic on the target screen based on the physical parameters of the target screen.

[0065] Specifically, step S803 includes: Step S8031: Determine the scaling factor of the target screen based on the screen size and screen resolution in the physical parameters.

[0066] Optionally, some physical parameters of the target screen can be obtained, such as screen size and screen resolution. Common screen resolutions include 720x1280 and 1080x1920. Common screen sizes include: mobile phone screens such as 8.9 inches and 11.1 inches; and monitor screens such as 15-20 inches and 24-34 inches.

[0067] There is no direct correlation between screen size and resolution, but they work together to affect display quality. For example, a 27-inch monitor may use a 1080P or 2K resolution, with the number of pixels determined by both the screen ratio and size.

[0068] After obtaining the target screen's screen size and resolution, a universal scaling factor that adapts to that screen size and resolution can be obtained.

[0069] Alternatively, the scaling factor can be obtained using a more refined calculation method, specifically: Based on the screen resolution, a basic scaling factor is determined for the target graphic relative to the screen resolution of the target screen, and the target graphic is initially scaled based on this basic scaling factor.

[0070] Here, the base scaling factor is calculated as: target pixel size / design unit size. Based on the device resolution (e.g., 1920×1080), the screen width or height is chosen as the reference (usually width is chosen to avoid portrait / landscape adaptation issues). The target pixel size equals the device's horizontal resolution (e.g., 1920). Assuming normalized coordinates are used in the design, as in the previous embodiment where the screen range is defined as (-1, 1), then both the horizontal and vertical dimensions occupy 2 units, and the design unit size is 2.0.

[0071] To adapt to screens of different sizes, we need to calculate the screen size compensation value: (size compensation value = 600.0 / minDim).

[0072] Here, using "600 physical pixels" as the baseline short side length can be defined as the preset baseline size, and then scaling compensation can be applied to screens of different sizes: Enlarge the graphic on small screens (short side < 600px) and shrink the graphic on large screens (short side > 600px) to ensure that the "relative size" of the graphic is consistent visually.

[0073] For a mobile phone screen (short side minDim=300px): 600.0 / 300=2.0→2 is the size compensation value. At this point, the base scaling factor needs to be doubled (for image enlargement) to obtain the final scaling factor.

[0074] For a flat screen (short side minDim=800px): 600.0 / 800=0.75 → 0.75 is the size compensation value. At this point, the base scaling factor needs to be changed to 0.75 times the original (the image is reduced) to obtain the final scaling factor.

[0075] For a screen with a short side of exactly 600px: 600.0 / 600=1.0 → The base scaling factor remains unchanged, and the base scaling factor is the final scaling factor.

[0076] Step S8032: Determine the size adjustment parameters of the target graphic based on the scaling factor.

[0077] Optionally, after obtaining the scaling factor of the target graphic from the above embodiments, it is only necessary to obtain the size adjustment parameters of the target graphic according to the scaling factor, and then adjust the size of the target graphic according to the size adjustment parameters.

[0078] Step S8033: Determine the preset screen width pixel range based on the screen resolution.

[0079] Optionally, scaling the target graphic based on the size adjustment parameters only yields an initial scaled size. The initial scaled size still needs to be adjusted according to the screen width pixels of the target screen.

[0080] When adjusting the initial scaling size based on the target screen's screen width in pixels, it's necessary to determine a preset screen width pixel range based on the screen resolution. For a small screen (720×1280), the preset screen width pixel range is <1300; for a medium screen (1080×1920), the preset screen width pixel range is <2000; and for a large screen (2160×3840), the preset screen width pixel range is <4000.

[0081] Step S8034: Based on the size adjustment parameters and the preset screen width pixel range, adjust the target graphic to determine the adjusted target display size.

[0082] Optionally, after scaling the target graphic based on the size adjustment parameters to obtain the initial scaled size, the server compares the obtained width pixels of the target screen with a preset screen width pixel range. For example, if the target screen is a small screen, the preset screen width pixel range is <1300. The server then compares the width pixels of the target screen with the preset screen width pixel range to determine whether it falls within the <1300 range. If the width pixels of the target screen are <1300, the initial scaled size of the target graphic is increased further, for example, set to 0.6, to obtain the target display size.

[0083] Similarly, if the target screen is a medium screen, the preset screen width pixel range is <2000. Then, the width pixel of the target screen is compared with the preset screen width pixel range to determine whether it falls within the <2000 range. If the width pixel of the target screen is <2000, the initial scaling size of the target graphic does not need to be adjusted, for example, the size can be kept at 0.5.

[0084] If the target screen is a large screen, the preset screen width pixel range is <4000. The target screen width pixel is then compared with the preset screen width pixel range to determine if it falls within the <4000 range. If the target screen width pixel is <4000, the initial scaling size of the target graphic is further reduced, for example, to 0.4, to obtain the target display size.

[0085] Specifically, step S8031 includes: Step S8031': Obtain the relative displacement of the current coordinates with respect to the target coordinates.

[0086] Optionally, in this embodiment of the application, it is necessary to obtain the relative displacement of the current coordinates of the target graphic with respect to the target coordinates, convert it into the displacement offset during actual rendering, and ensure that the visual effect of the displacement is consistent on different screen sizes through aspect ratio compensation.

[0087] Step S8032': Based on physical parameters and relative displacement, determine the initial displacement of the target graphic from the current coordinates to the target coordinates.

[0088] Optionally, the width and height of the target screen are obtained from its physical parameters, and then the aspect ratio of the target screen is calculated as resolution.x / resolution.y (e.g., 1920 / 1080≈1.778, i.e., 16:9). 16:9 is used as the aspect ratio compensation value to adjust the relative displacement. This compensation value is added to the relative displacement to obtain the initial displacement of the target graphic from the current coordinates to the target coordinates.

[0089] It should be noted that in the target coordinate system (where both the x-axis and y-axis are (-1, 1)), the actual pixel lengths corresponding to the same x and y values ​​are different (in a widescreen display, 1 unit in the x-direction is longer than 1 unit in the y-direction). Multiplying by the aspect ratio compensation value ensures that the "visual proportion" of the horizontal displacement is consistent with that in the vertical direction.

[0090] In the vertical direction, no additional compensation is needed; the relative displacement can be used directly as the initial displacement. This is because the y-range of the standardized coordinates (-1, 1) already corresponds to the screen height, and the horizontal compensation ensures that the two are proportionally consistent.

[0091] Step S8033': Determine the preset screen width pixel range based on the screen resolution in the physical parameters.

[0092] Optionally, the current aspect ratio compensation value and relative displacement only provide the initial displacement, and the initial displacement still needs to be adjusted according to the screen width pixels of the target screen.

[0093] When adjusting the initial scaling size based on the target screen's screen width in pixels, it's necessary to determine a preset screen width pixel range based on the screen resolution. For a small screen (720×1280), the preset screen width pixel range is <1300; for a medium screen (1080×1920), the preset screen width pixel range is <2000; and for a large screen (2160×3840), the preset screen width pixel range is <4000.

[0094] Step S8034': Adjust the initial displacement based on the preset screen width pixel range to obtain the adjusted actual displacement.

[0095] Optionally, the server compares the obtained width pixels of the target screen with a preset screen width pixel range. For example, if the target screen is a small screen, the preset screen width pixel range is <1300. In this case, the server compares the width pixels of the target screen with the preset screen width pixel range to determine whether it falls within the <1300 range. If the width pixels of the target screen are <1300, the server moves the initial displacement of the target graphic upwards a little, for example, by 0.1 on the y-axis, and sets position=vec2(0.0,0.1) to obtain the actual displacement.

[0096] Similarly, if the target screen is a medium screen, the preset screen width pixel range is <2000. Then, the width pixel of the target screen is compared with the preset screen width pixel range to determine whether it falls within the <2000 range. If the width pixel of the target screen is <2000, the initial displacement of the target graphic does not need to be adjusted. For example, the coordinates can be kept still, position=vec2(0.0,0.0).

[0097] If the target screen is a large screen, the preset screen width pixel range is <4000. The target screen width pixel is compared with the preset screen width pixel range to determine if it falls within the <4000 range. If the target screen width pixel is <4000, the initial displacement of the target graphic is moved down a little, for example, by 0.1 on the y-axis, position=vec2(0.0,-0.1), to obtain the actual displacement.

[0098] like Figure 9 , Figure 10 , Figure 11 As shown, Figure 9 In a small screen, the target graphic generated by SDF (located in the middle) is scaled down and shifted, and the final target graphic is displayed in the target position in the lower right corner. Figure 10In a medium-sized screen, the target graphic generated by SDF (located in the middle) is scaled and shifted, and then the final target graphic is displayed in the target position in the lower right corner. Figure 11 The process involves enlarging and shifting the target graphic generated by SDF (located in the center) on a large screen, and then displaying the final target graphic at the target position in the lower right corner.

[0099] It should be noted that the target graphic in the middle is a pattern generated by SDF and is not displayed on the actual screen. The bottom right corner shows the target position and final size of the target graphic, which need to be displayed on the screen.

[0100] Step S804: Based on the graphic features of the target graphic, the target display size, and the actual display position information, display the target graphic on the target screen. For details, please refer to [link to relevant documentation]. Figure 2 Step S205 of the illustrated embodiment will not be described again here.

[0101] In this embodiment, instead of relying on pre-stored textures, the required target graphics are generated directly in the GPU by dynamically calculating the pixel information of the graphics during program runtime, reducing memory and performance consumption. The computation is more efficient than memory reading, and the mobile TBR architecture avoids bandwidth bottlenecks.

[0102] As an optional embodiment, the method further includes: Step c1: Obtain the correspondence between the preset rendering parameters and the coordinates of the rendered parts in the target graphic, wherein the rendering range of the preset rendering parameters is limited to a preset range.

[0103] Step c2: Render the target graphic based on the correspondence.

[0104] Optionally, after generating the target graphic using SDF, the target graphic needs to be filled with color to achieve subsequent rendering and display.

[0105] Specifically, the target graphic needs to be divided into parts to obtain the coordinates of the rendered parts in the target graphic. Then, preset rendering parameters are set for each rendered part to obtain the correspondence between the preset rendering parameters and the coordinates of the rendered part. Finally, based on the correspondence, the shader is called to render the rendered part to obtain the rendered target graphic.

[0106] To achieve a target graphic with a gradient effect, calculate the gradient factor in the vertical direction and map the y coordinates (range [-rectSize.y,rectSize.y]) within the rectangle to a gradient factor of [0.0,1.0].

[0107] That is, in this embodiment of the application, the gradient factor range is limited by using the clamp function to restrict the rendering range of the preset rendering parameters to a preset range of 0.0 to 1.0. Here, the gradient factor is limited to a range of 0.0 to 1.0.

[0108] Calculate the final gradient colors by using the mix function to blend the two base colors according to the gradient factor: When gradientFactor=0.0, the bottom color (light gray) is fully displayed. When gradientFactor=1.0, the top color topColor (dark gray) is fully displayed; For intermediate values, mix them proportionally (e.g., 0.5 is an intermediate color between two shades of gray).

[0109] Through the above steps, a vertical gradient from light gray at the bottom to dark gray at the top is achieved within a rectangular area of ​​standardized coordinates (see...). Figure 12 Furthermore, regardless of the screen aspect ratio, the gradient effect maintains the correct proportions and range, and no abnormal colors appear in the area outside the rectangle.

[0110] As an optional embodiment, the method further includes: Step d1: Obtain the color model values ​​of the target screen.

[0111] Step d2: Determine the hue of the preset area of ​​the target screen based on the color model values.

[0112] Step d3: Determine the rendering color of the target graphic based on the hue of the preset area.

[0113] Step d4: Render the target graphic based on the rendering color.

[0114] Optionally, in this embodiment of the application, in order to ensure that the target graphic color and the background are sufficiently distinguishable and to avoid color assimilation with the background (e.g., when the background is green grass, the SDF graphic cannot be green), the target graphic color should be green.

[0115] Implementation principle: Real-time screen color sampling – dynamic contrast calculation – adaptive color adjustment.

[0116] Implementation steps: Step 1: Real-time capture of screen background color: When rendering with GPU shaders, the target pixel area and the remaining pixel area of ​​the SDF-generated graphics are distinguished. The sample is taken once every 100-200ms, and the average HSV (HSV color model) value is extracted in units of 16×16 pixels per frame.

[0117] Step Two: Avoid Color Assimilation Using the HSV values ​​of the screen pixels obtained in step one, the most frequently occurring HSV values ​​are selected as the primary background color. Hue is then used to categorize and distinguish between reds (0-30) and oranges (30-60), thus differentiating between red, orange, yellow, green, cyan, and blue, and avoiding hues that are too close to the primary background color within a 15-degree range.

[0118] Step 3: Dynamically calculate the target graphic color in the SDF and perform color avoidance calculation: Based on the background color characteristics in steps one and two, the target graphic color is offset by +30 degrees from the HSV color space to avoid assimilation with the main background color.

[0119] As an optional embodiment, the method further includes: Step e1: Obtain the outline edge pixels of the target graphic.

[0120] Step e2: Determine the width range of the smooth transition based on the scaling factor and the pixels at the contour edge.

[0121] Step e3: Smooth the width range based on the smoothing function to obtain the smoothing result based on the target graphic.

[0122] Optionally, first obtain the outline edge pixels of the target image, then obtain the distance between the outline edge pixels and the target image, represented by the value of "d", to determine the inclusion relationship between the outline edge pixels and the target image: if it is determined that an outline edge pixel is inside the target image (d<0), that is, the target image contains the outline edge pixel; if it is outside the target image (d>0), that is, the target image does not contain the outline edge pixel; if it is on the outline edge of the target image (d=0).

[0123] At the outline edge of the target graphic, that is, the transition zone from the inside to the outside, a special treatment is applied: Set the area completely inside the target graphic to be completely opaque (the transparency parameter returns 1.0). Set the area completely outside the target graphic to be completely transparent (the transparency parameter returns 0.0). Near the edge, a "semi-transparent transition zone" (i.e., a smooth transition area) is created, which is also the area where the transparency gradually changes from 1.0 to 0.0.

[0124] The width of this smooth transition area is automatically adjusted based on the scaling factor, approximately half a pixel. This ensures that the edges of the target image are not abrupt steps (jagged edges), but rather a smooth gradient that looks more natural.

[0125] In this embodiment of the application, by implementing a gradient transition on the outline edge source of the target graphic, the blurring / aliasing problem caused by traditional texture scaling can be solved.

[0126] This embodiment also provides a graphic display device for implementing the above embodiments and preferred embodiments; details already described will not be repeated. As used below, the term "module" can refer to a combination of software and / or hardware that performs a predetermined function. Although the device described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.

[0127] This embodiment provides a graphics display device, such as... Figure 13 As shown, it includes: The generation module 1301 is used to generate graphic features of the target graphic using a signed distance function; The first determining module 1302 is used to determine the mapping position information of the target graphic on the target screen based on the graphic features of the target graphic. The second determining module 1303 is used to determine the target display size of the target graphic on the target screen based on the physical parameters of the target screen, and to obtain the actual display position information of the target graphic on the target screen based on the physical parameters and the mapping position information of the target graphic on the target screen. Display module 1304 is used to display the target graphic on the target screen based on the graphic features of the target graphic, the target display size, and the actual display position information.

[0128] In some optional implementations, the first determining module 1302 is used to obtain the pixel coordinates of the target screen; map the pixel coordinates of the target screen to the target range to obtain the target coordinate system about the target screen; and based on the graphic features of the target graphic, map the coordinates of the target graphic to the target range to obtain the mapping position information of the target graphic in the target coordinate system.

[0129] In some optional embodiments, the second determining module 1303 is used to obtain the target coordinates of the target graphic displayed on the target screen; based on the physical parameters and the target coordinates, obtain the actual displacement of the target graphic from the mapped position information to the target coordinates; and obtain the actual display position information of the target graphic based on the actual displacement. In some optional embodiments, the display module 1304 is used to determine the scaling factor of the target screen based on the screen size and screen resolution in the physical parameters; determine the size adjustment parameters of the target graphic based on the scaling factor; determine the preset screen width pixel range based on the screen resolution; and adjust the target graphic based on the size adjustment parameters and the preset screen width pixel range to determine the adjusted target display size.

[0130] In some optional implementations, the display module 1304 is configured to: determine a basic scaling factor of the target graphic relative to the target screen based on the screen resolution, wherein the basic scaling factor is used to perform initial scaling of the target graphic; determine a size compensation value of the target graphic relative to the target screen based on the screen size and a preset reference size, wherein the preset reference size is used to judge the size of the screen size, and the size compensation value is used to perform precise scaling based on the initial scaling of the target graphic; and obtain a scaling factor based on the basic scaling factor and the size compensation value.

[0131] In some optional implementations, the display module 1304 is used to scale the target graphic based on size adjustment parameters to obtain an initial scaled size; obtain the width pixels of the target screen; compare the width pixels of the target screen with a preset screen width pixel range, and adjust the initial scaled size based on the comparison result to obtain the target size.

[0132] In some optional implementations, the display module 1304 is used to obtain the relative displacement of the current coordinates with respect to the target coordinates; determine the initial displacement of the target graphic from the current coordinates to the target coordinates based on the physical parameters and the relative displacement; determine a preset screen width pixel range based on the screen resolution in the physical parameters; and adjust the initial displacement based on the preset screen width pixel range to obtain the adjusted actual displacement.

[0133] In some optional implementations, the display module 1304 is used to acquire the width and height of the target screen from the physical parameters; determine the aspect ratio compensation value based on the width and height; and determine the initial displacement based on the aspect ratio compensation value and the relative displacement.

[0134] In some optional implementations, the display module 1304 is used to obtain the width pixels of the target screen; compare the width pixels of the target screen with a preset screen width pixel range, and adjust the initial displacement based on the comparison result to obtain the actual displacement.

[0135] In some optional implementations, the display module 1304 is used to determine the number of tiles of the target graphic on the coordinate axis based on the screen size of the target screen and the original graphic size of the target graphic; to determine the coordinate axis information corresponding to the selected target graphic being tiled on the target screen based on the number of tiles; and to determine the target coordinates based on the coordinate axis information.

[0136] In some alternative embodiments, the device further includes: The first acquisition module is used to acquire the correspondence between preset rendering parameters and the coordinates of the rendered parts in the target graphic, wherein the rendering range of the preset rendering parameters is limited to a preset range. The first rendering module is used to render the target graphic based on the correspondence.

[0137] In some alternative embodiments, the device further includes: The second acquisition module is used to acquire the color model values ​​of the target screen; The third determining module is used to determine the hue of the preset area of ​​the target screen based on the color model values; The fourth determination module is used to determine the rendering color of the target graphic based on the hue of the preset area; The second rendering module is used to render the target graphic based on the rendering color.

[0138] In some alternative embodiments, the device further includes: The third acquisition module is used to acquire the outline edge pixels of the target graphic; The fifth determining module is used to determine the width range of the smooth transition based on the scaling factor and the pixels at the contour edge; The module is used to smooth the width range based on a smoothing function, and obtain the smoothing result based on the target graphic.

[0139] In some optional implementations, the fifth determining module is used to determine the distance between the contour edge pixels and the target graphic; determine the inclusion relationship between the contour edge pixels and the target graphic based on the distance; set the transparency parameter based on the inclusion relationship to obtain a smooth transition region; and adjust the smooth transition region based on the scaling factor to obtain the width range of the smooth transition.

[0140] The screen-based graphics display device provided in this disclosure can execute the graphics display method provided in any embodiment of this disclosure, and has the corresponding functional modules and beneficial effects for executing the method. Further functional descriptions of the various modules and units described above are the same as in the corresponding embodiments described above, and will not be repeated here.

[0141] Figure 14 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this disclosure.

[0142] The following is a detailed reference. Figure 14 The diagram illustrates a structural schematic suitable for implementing an electronic device according to embodiments of the present disclosure. The electronic device may include a processor (e.g., a central processing unit, graphics processor, etc.) 1401, which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 1402 or a program loaded from memory 1408 into random access memory (RAM) 1403. The RAM 1403 also stores various programs and data required for the operation of the electronic device. The processor 1401, ROM 1402, and RAM 1403 are interconnected via a bus 1404. An input / output (I / O) interface 1405 is also connected to the bus 1404.

[0143] Typically, the following devices can be connected to I / O interface 1405: input devices 1406 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 1407 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; memory devices 1408 including, for example, magnetic tapes, hard disks, etc.; and communication devices 1409. Communication device 1409 allows electronic devices to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 14 Electronic devices with various devices are shown, but it should be understood that it is not required to implement or have all of the devices shown, and more or fewer devices may be implemented or have instead.

[0144] In particular, according to embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this disclosure include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication device 1409, or installed from memory 1408, or installed from ROM 1402. When the computer program is executed by processor 1401, it performs the functions defined in the graphical display method of embodiments of this disclosure.

[0145] Figure 14 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of the embodiments disclosed herein.

[0146] This application also provides a computer-readable storage medium. The methods described in this application can be implemented in hardware or firmware, or implemented as recordable on a storage medium, or implemented as computer code downloaded over a network and originally stored on a remote storage medium or a non-transitory machine-readable storage medium and then stored on a local storage medium. Thus, the methods described herein can be processed by software stored on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. The storage medium can be a magnetic disk, optical disk, read-only memory, random access memory, flash memory, hard disk, or solid-state drive, etc.; further, the storage medium can also include combinations of the above types of memory. It is understood that computers, processors, microprocessor controllers, or programmable hardware include storage components capable of storing or receiving software or computer code. When the software or computer code is accessed and executed by the computer, processor, or hardware, the graphical display method shown in the above embodiments is implemented.

[0147] A portion of this application can be applied as a computer program product, such as computer program instructions, which, when executed by a computer, can invoke or provide the methods and / or technical solutions according to this application through the operation of the computer. Those skilled in the art will understand that the forms in which computer program instructions exist in a computer-readable medium include, but are not limited to, source files, executable files, installation package files, etc. Correspondingly, the ways in which computer program instructions are executed by a computer include, but are not limited to: the computer directly executing the instructions, or the computer compiling the instructions and then executing the corresponding compiled program, or the computer reading and executing the instructions, or the computer reading and installing the instructions and then executing the corresponding installed program. Here, the computer-readable medium can be any available computer-readable storage medium or communication medium accessible to a computer.

[0148] Although embodiments of this application have been described in conjunction with the accompanying drawings, those skilled in the art can make various modifications and variations without departing from the spirit and scope of this application, and such modifications and variations all fall within the scope defined by the appended claims.

Claims

1. A method for displaying graphics, characterized in that, The method includes: The graphic features of the target graphic are generated using the signed distance function; Based on the graphic features of the target graphic, determine the mapping position information of the target graphic on the target screen; Based on the physical parameters of the target screen, the target display size of the target graphic in the target screen is determined, and based on the physical parameters and the mapping position information of the target graphic in the target screen, the actual display position information of the target graphic in the target screen is obtained. Based on the graphic features of the target graphic, the target display size, and the actual display position information, the target graphic is displayed on the target screen.

2. The method according to claim 1, characterized in that, The step of determining the mapping position information of the target graphic on the target screen based on the graphic features of the target graphic includes: Obtain the pixel coordinates of the target screen; The pixel coordinates of the target screen are mapped to the target area to obtain the target coordinate system with respect to the target screen; Based on the graphic features of the target graphic, the coordinates of the target graphic are mapped to the target range to obtain the mapping position information of the target graphic in the target coordinate system.

3. The method according to claim 2, characterized in that, The step of obtaining the actual display position information of the target graphic on the target screen based on the physical parameters and the mapping position information of the target graphic on the target screen includes: Obtain the target coordinates of the target graphic displayed on the target screen; Based on the physical parameters and the target coordinates, the actual displacement of the target graphic from the mapped position information to the target coordinates is obtained; The actual display position information of the target graphic is obtained based on the actual displacement.

4. The method according to claim 1, characterized in that, Determining the target display size of the target graphic on the target screen based on the physical parameters of the target screen includes: Based on the screen size and screen resolution in the physical parameters, the scaling factor of the target screen is determined; The size adjustment parameters of the target graphic are determined based on the scaling factor; Based on the screen resolution, a preset screen width pixel range is determined; Based on the size adjustment parameters and the preset screen width pixel range, the target graphic is adjusted to determine the adjusted target display size.

5. The method according to claim 4, characterized in that, Determining the scaling factor of the target screen based on the screen size and screen resolution in the physical parameters includes: Based on the screen resolution, a basic scaling factor is determined for the target graphic relative to the target screen, wherein the basic scaling factor is used to perform an initial scaling of the target graphic; Based on the screen size and a preset reference size, a size compensation value for the target graphic relative to the target screen is determined, wherein the preset reference size is used to evaluate the size of the screen size, and the size compensation value is used to accurately scale the target graphic based on the initial scaling. The scaling factor is obtained based on the base scaling factor and the size compensation value.

6. The method according to claim 4, characterized in that, The step of adjusting the target graphic based on the size adjustment parameters and the preset screen width pixel range to determine the adjusted target display size includes: The target graphic is scaled based on the size adjustment parameters to obtain an initial scaled size; Obtain the width of the target screen in pixels; The target screen width in pixels is compared with the preset screen width in pixels, and the initial scaling size is adjusted based on the comparison result to obtain the target display size.

7. The method according to claim 3, characterized in that, The step of obtaining the actual displacement of the target graphic from the mapped position information to the target coordinates based on the physical parameters and the target coordinates includes: Obtain the relative displacement of the mapped position information with respect to the target coordinates; Based on the physical parameters and the relative displacement, the initial displacement of the target graphic from the mapped position information to the target coordinates is determined; Based on the screen resolution in the physical parameters, a preset screen width pixel range is determined; The initial displacement is adjusted based on the preset screen width pixel range to obtain the adjusted actual displacement.

8. The method according to claim 7, characterized in that, Determining the initial displacement of the target graphic from the mapped position information to the target coordinates based on the physical parameters and the relative displacement includes: Obtain the width and height of the target screen from the physical parameters; Based on the width and the height, determine the aspect ratio compensation value; The initial displacement is determined based on the aspect ratio compensation value and the relative displacement.

9. The method according to claim 7, characterized in that, The adjustment of the initial displacement based on the preset screen width pixel range to obtain the adjusted actual displacement includes: Obtain the width of the target screen in pixels; The width pixels of the target screen are compared with the preset screen width pixel range, and the initial displacement is adjusted based on the comparison result to obtain the actual displacement.

10. The method according to claim 3, characterized in that, The step of obtaining the target coordinates of the target graphic displayed on the target screen includes: Based on the screen size of the target screen and the original graphic size of the target graphic, determine the number of tiles of the target graphic on the coordinate axis; Based on the number of tiles, determine the coordinate axis information corresponding to the selected target graphic being tiled on the target screen; The target coordinates are determined based on the coordinate axis information.

11. The method according to claim 1, characterized in that, The method further includes: Obtain the correspondence between preset rendering parameters and the coordinates of the rendered parts in the target graphic, wherein the rendering range of the preset rendering parameters is limited to a preset range; The target graphic is rendered based on the correspondence.

12. The method according to claim 1, characterized in that, The method further includes: Obtain the color model values ​​of the target screen; Based on the color model values, determine the hue of the preset area of ​​the target screen; The rendering color of the target graphic is determined based on the hue of the preset region; The target graphic is rendered based on the rendered color.

13. The method according to claim 4, characterized in that, The method further includes: Obtain the outline edge pixels of the target graphic; The width range of the smooth transition is determined based on the scaling factor and the outline edge pixels; The width range is smoothed using a smoothing function to obtain a smoothing result based on the target graphic.

14. The method according to claim 13, characterized in that, Determining the width range of the smooth transition based on the scaling factor and the contour edge pixels includes: Determine the distance between the contour edge pixels and the target graphic; The inclusion relationship between the contour edge pixels and the target graphic is determined based on the distance. Based on the inclusion relationship, a transparency parameter is set to obtain a smooth transition region; The smooth transition region is adjusted based on the scaling factor to obtain the width range of the smooth transition.

15. A graphic display device, characterized in that, The device includes: The generation module is used to generate graphic features of the target graphic using the signed distance function; The first determining module is used to determine the mapping position information of the target graphic in the target screen based on the graphic features of the target graphic; The second determining module is used to determine the target display size of the target graphic in the target screen based on the physical parameters of the target screen, and to obtain the actual display position information of the target graphic in the target screen based on the physical parameters and the mapping position information of the target graphic in the target screen. The display module is used to display the target graphic on the target screen based on the graphic features of the target graphic, the target display size, and the actual display position information.

16. An electronic device, characterized in that, include: A memory and a processor are communicatively connected, the memory stores computer instructions, and the processor executes the computer instructions to perform the graphics display method according to any one of claims 1 to 14.

17. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions for causing the computer to perform the graphic display method according to any one of claims 1 to 14.

18. A computer program product, characterized in that, Includes computer instructions for causing a computer to perform the graphics display method according to any one of claims 1 to 14.

Images