Rounded square frame rendering method and device, map rendering method

Abstract

The embodiments of the present disclosure disclose a method and device for rendering a rounded square frame, and a map rendering method, the method comprising: dividing the rounded square frame to be rendered into multiple areas, including: a rounded edge area, a quadrilateral edge area, and a quadrilateral middle area; the shape of the rounded edge area is a part of a circle with a radius of a preset circle radius value and is less than or equal to a quarter of a circle, the quadrilateral edge area is located between the two rounded edge areas, and the quadrilateral middle area is surrounded by the rounded edge area and the quadrilateral edge area; triangulating each of the multiple areas to obtain rendering positions of multiple triangle vertices after triangulation; assigning pixel radius values to triangle vertices based on the shortest distance between the triangle vertices and the edge of the quadrilateral middle area; transmitting the rendering positions and pixel radius values of the triangle vertices to a GPU, so that the GPU renders the rounded square frame based on the rendering positions and pixel radius values of the triangle vertices.

Description

Technical Field

[0001] The present disclosure relates to the field of image technology, and in particular to a method and device for rendering a rounded square frame, and a map rendering method. Background Art

[0002] With the development of technology, the variety of application software is increasing, and the visual effects of application software interfaces are becoming increasingly important. For example, when displaying text or icons in software applications, a square background frame is often added to enhance the visual effect. This square background frame can be designed in a variety of styles, such as solid color fill, pattern fill, stroke, and rounded corners.

[0003] Existing techniques for rendering a rounded square background frame typically involve preparing a pattern for the rounded background frame (for example, by having an artist draw it using drawing software), directly drawing that pattern as the background, and then adding other patterns, such as text or icons, on top of it. However, this approach fails to control the ratio of the rounded corner radius to the background frame size. As the length and width of the rounded square background frame are stretched, the rounded corners become distorted, meaning they are no longer a quarter of a perfect circle.

[0004] Therefore, in response to the above technical problems, a solution needs to be proposed that can flexibly change the size, rounded corner size, etc. of the rounded square background frame. Summary of the Invention

[0005] The embodiments of the present disclosure provide a method and device for rendering a rounded square frame, and a map rendering method.

[0006] In a first aspect, an embodiment of the present disclosure provides a method for rendering a rounded square frame, comprising:

[0007] Dividing the rounded square frame to be rendered into a plurality of regions, the plurality of regions comprising: a rounded edge region, a quadrilateral edge region, and a quadrilateral middle region; the rounded edge region is a portion of a circle having a radius equal to a preset circle radius and less than or equal to a quarter of a circle; the quadrilateral edge region is located between two rounded edge regions; and the quadrilateral middle region is surrounded by the rounded edge region and the quadrilateral edge region;

[0008] Performing triangulation on each of the plurality of regions to obtain rendering positions of a plurality of triangle vertices after triangulation;

[0009] Assigning pixel radius values to the triangle vertices based on the shortest distance between the triangle vertices and the edge of the middle area of the quadrilateral; wherein the pixel radius values of the triangle vertices located at the edge of the rounded square frame are the preset circle radius value, and the pixel radius values of the triangle vertices located at the edge of the middle area of the quadrilateral are 0;

[0010] The rendering positions of the triangle vertices and the pixel radius values are transmitted to a GPU, so that the GPU renders the rounded square box based on the rendering positions of the triangle vertices and the pixel radius values.

[0011] Furthermore, triangulating each of the multiple regions to obtain rendering positions of multiple triangle vertices after triangulation includes:

[0012] Divide the edge area of the quadrilateral and the middle area of the quadrilateral into two right triangles respectively, and obtain rendering positions of the triangle vertices of the two right triangles;

[0013] The rounded edge area is divided into a plurality of equilateral triangles with side lengths equal to the preset circle radius value, and rendering positions of triangle vertices of the plurality of equilateral triangles are obtained.

[0014] Furthermore, transmitting the rendering position of the triangle vertex and the pixel radius value to a GPU includes:

[0015] Transmitting the rendering positions of the triangle vertices to the triangle vertex shader of the GPU;

[0016] The pixel radius values of the triangle vertices are transmitted to the pixel shader of the GPU.

[0017] Furthermore, after transmitting the triangle vertices and the pixel radius value of the triangle to the GPU, the method further includes:

[0018] A graphics optimization program is started in the GPU so that the graphics optimization program performs soft interpolation coloring on the pixels at the edge of the rounded square box based on the pixel radius value of each pixel in the rounded square box output by the GPU; the pixel radius value of the pixel is the shortest distance from the pixel to the edge of the middle area of the quadrilateral.

[0019] Furthermore, based on the pixel radius value of each pixel in the rounded square frame output by the GPU, performing soft interpolation coloring on the pixels at the edge of the rounded square frame includes:

[0020] Determining a probability that the pixel is an interior pixel and a transparency coefficient of the pixel based on the pixel radius value, the inner edge radius value, and the outer edge radius value; the inner edge radius value and the outer edge radius value are both smaller than the pixel radius value, and the inner edge radius value is smaller than the outer edge radius value;

[0021] A global preset color used for rendering the rounded square frame is adjusted based on the probability of the internal pixel and the transparency coefficient of the pixel, so that the pixels in the rounded square frame are colored based on the adjusted global preset color.

[0022] Furthermore, determining the probability that the pixel is an internal pixel and the transparency coefficient of the pixel based on the pixel radius value, the inner edge radius value, and the outer edge radius value includes:

[0023] The probability that the pixel is an internal pixel is determined based on the size relationship between the pixel radius value and the inner edge radius value r1; when the pixel radius value is less than or equal to r1-delta, the probability that the pixel is an internal pixel is 1; when the pixel radius value is greater than or equal to r1+delta, the probability that the pixel is an internal pixel is 0; when the pixel radius value is in the interval range of (r1-delta, r1+delta), the probability that the pixel is an internal pixel is within the interval range of (0, 1), wherein r1 is a positive number less than the preset circle radius value, and delta is a positive number less than the width of one pixel;

[0024] The transparency coefficient of the pixel is determined based on the size relationship between the pixel radius value and the outer edge radius value r2; when the pixel radius value is greater than or equal to r2-delta, the transparency coefficient of the pixel is a coefficient of 0 indicating complete transparency; when the pixel radius value is less than or equal to r2-delta, the transparency coefficient of the pixel is a coefficient of 1 indicating opacity; when the pixel radius value is in the interval range of (r2-delta, r2+delta), the transparency coefficient of the pixel is within the interval range of (0, 1), wherein r2 is a positive number greater than the inner edge radius value and less than the preset circle radius value.

[0025] Furthermore, the global preset color includes an internal color and a stroke color; adjusting the global preset color used for rendering the rounded square frame based on the probability of the internal pixels and the transparency coefficient of the pixels, so as to color the pixels in the rounded square frame based on the adjusted global preset color, includes:

[0026] Calculating a processed color of the pixel based on the probability that the pixel is an interior pixel, the interior color, and the stroke color;

[0027] Calculating a processed transparency of the pixel based on a transparency coefficient of the pixel and an original transparency output by the GPU;

[0028] The pixels in the rounded square frame are rendered based on the processed colors of the pixels and the processed transparency of the pixels.

[0029] In a second aspect, an embodiment of the present invention provides a map rendering method, which includes:

[0030] Get map rendering data;

[0031] When rendering a map based on the map rendering data, a background in the shape of a rounded square frame is added to the display objects on the map based on the method described in the first aspect.

[0032] In a third aspect, an embodiment of the present invention provides a rendering device for a rounded square frame, comprising: a CPU and a GPU;

[0033] The CPU divides a rounded square frame to be rendered into a plurality of regions, performs triangulation on each of the plurality of regions to obtain triangle vertices of a plurality of triangles, assigns a pixel radius value to each triangle vertex in the triangle, and transmits the triangle vertices and the pixel radius value of the triangle to the GPU; wherein the plurality of regions include: four rounded edge regions, four quadrilateral edge regions located between the four rounded edge regions, and a quadrilateral middle region located in the middle of the rounded square frame; the shape of the rounded edge region is a quarter circle with a radius of a preset circle radius value; the triangle vertices of the triangles are respectively located at the edge of the rounded square frame and the edge of the quadrilateral middle region; the radius value of the triangle vertices located at the edge of the rounded square frame is the preset circle radius value, and the radius value of the triangle vertices located at the edge of the quadrilateral middle region is 0;

[0034] The GPU draws the rounded square box based on triangle vertices of the triangle and the pixel radius value.

[0035] Furthermore, the GPU performs soft interpolation coloring on the pixels at the edge of the rounded square frame based on a pixel radius value of each pixel in the rounded square frame; the pixel radius value of the pixel is the shortest distance from the pixel to the edge of the middle area of the quadrilateral.

[0036] In a fourth aspect, an embodiment of the present invention provides a rendering device for a rounded square frame, comprising:

[0037] a region division module configured to divide the rounded square frame to be rendered into a plurality of regions, the plurality of regions comprising: a rounded edge region, a quadrilateral edge region, and a quadrilateral middle region; the rounded edge region being a portion of a circle having a radius equal to a preset radius and being less than or equal to a quarter of a circle, the quadrilateral edge region being located between two rounded edge regions, and the quadrilateral middle region being surrounded by the rounded edge region and the quadrilateral edge region;

[0038] A triangulation module is configured to triangulate each of the plurality of regions to obtain rendering positions of a plurality of triangle vertices after triangulation;

[0039] a radius value assigning module, configured to assign pixel radius values to the triangle vertices based on the shortest distance between the triangle vertices and the edge of the middle area of the quadrilateral; wherein the pixel radius value of the triangle vertices located at the edge of the rounded square frame is the preset circle radius value, and the pixel radius value of the triangle vertices located at the edge of the middle area of the quadrilateral is 0;

[0040] The transmitting module is configured to transmit the rendering position of the triangle vertex and the pixel radius value to the GPU, so that the GPU renders the rounded square box based on the rendering position of the triangle vertex and the pixel radius value.

[0041] In a fifth aspect, an embodiment of the present invention provides a map rendering device, which includes:

[0042] An acquisition module, configured to acquire map rendering data;

[0043] An adding module is configured to add a background in the shape of a rounded square frame to the display object on the map based on the device described in the fourth aspect when rendering the map based on the map rendering data.

[0044] The functions can be implemented by hardware or by hardware executing corresponding software. The hardware or software includes one or more modules corresponding to the functions.

[0045] In one possible design, the apparatus includes a memory and a processor. The memory is configured to store one or more computer instructions that enable the apparatus to perform the corresponding method, and the processor is configured to execute the computer instructions stored in the memory. The apparatus may also include a communication interface for communicating with other devices or a communication network.

[0046] In a sixth aspect, an embodiment of the present disclosure provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory, wherein the processor executes the computer program to implement the method described in any one of the above aspects.

[0047] In a seventh aspect, an embodiment of the present disclosure provides a computer-readable storage medium for storing computer instructions used by any of the above-mentioned devices, and when the computer instructions are executed by a processor, they are used to implement the method described in any of the above-mentioned aspects.

[0048] In an eighth aspect, an embodiment of the present disclosure provides a computer program product, which includes computer instructions, and when the computer instructions are executed by a processor, they are used to implement the method described in any of the above aspects.

[0049] The technical solutions provided by the embodiments of the present disclosure may have the following beneficial effects:

[0050] When rendering a rounded square frame, the embodiment of the present disclosure divides the rounded square frame to be rendered into multiple areas based on the size of the rounded square frame, and the multiple areas may include a rounded edge area, a quadrilateral edge area, and a quadrilateral middle area; triangulates each area to obtain rendering positions of the triangle vertices of multiple triangles, assigns a pixel radius value to the triangle vertex of each triangle, and after the triangle vertex and pixel radius value of each triangle are transmitted to the GPU, the GPU renders the rounded square frame based on the rendering positions of the triangle vertices of the triangle and the pixel radius value.

[0051] Through the above method, the rounded square frame is divided into multiple triangles and then sent to the GPU for rendering. The GPU can automatically calculate the pixel radius value of each pixel in each triangle based on the rendering position and pixel radius value of the received triangle vertices. Then, based on the pixel radius value, each pixel is rendered at the corresponding position, ultimately drawing multiple triangles, which are then stitched together to form the rounded square frame. This method can improve the rendering performance of the rounded square frame and enable the flexible adjustment of the rounded square frame's size.

[0052] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0053] Other features, objectives and advantages of the present disclosure will become more apparent through the following detailed description of non-limiting embodiments in conjunction with the accompanying drawings. In the accompanying drawings:

[0054] Figure 1 A flowchart showing a method for rendering a rounded square frame according to an embodiment of the present disclosure is shown;

[0055] Figure 2 A schematic diagram showing the effect of the area after the rounded square frame is divided according to one embodiment of the present disclosure;

[0056] Figure 3 A schematic diagram showing the display effect of a rounded square frame with a stroke effect according to an embodiment of the present disclosure is shown;

[0057] Figure 4 A schematic diagram showing the effect of edge jaggedness on a triangle rendered by a GPU according to an embodiment of the present disclosure is shown;

[0058] Figure 5 A flowchart showing a map rendering method according to an embodiment of the present disclosure is shown;

[0059] Figure 6 A schematic diagram showing the effect of using a rounded square frame as the background of an icon on a map according to an embodiment of the present disclosure;

[0060] Figure 7 A structural block diagram showing a rendering device for a rounded square frame according to an embodiment of the present disclosure is shown;

[0061] Figure 8 It is a structural diagram of an electronic device suitable for implementing the rounded square frame rendering method and / or map rendering method according to an embodiment of the present disclosure. DETAILED DESCRIPTION

[0062] Hereinafter, exemplary embodiments of the present disclosure will be described in detail with reference to the accompanying drawings so that those skilled in the art can easily implement them. In addition, for the sake of clarity, parts not related to the description of the exemplary embodiments are omitted in the accompanying drawings.

[0063] In the present disclosure, it should be understood that terms such as "including" or "having" are intended to indicate the presence of features, numbers, steps, behaviors, components, parts, or combinations thereof disclosed in the present specification, and do not exclude the possibility that one or more other features, numbers, steps, behaviors, components, parts, or combinations thereof exist or are added.

[0064] It should also be noted that, in the absence of conflict, the embodiments and features of the embodiments of the present disclosure may be combined with each other. The present disclosure will be described in detail below with reference to the accompanying drawings and in combination with the embodiments.

[0065] The details of the embodiments of the present disclosure are described in detail below through specific examples.

[0066] Figure 1 FIG. 1 is a flow chart showing a method for rendering a rounded square frame according to an embodiment of the present disclosure. Figure 1 As shown, the method for rendering the rounded square frame includes the following steps:

[0067] In step S101, a rounded square frame to be rendered is divided into a plurality of regions, the plurality of regions including: a rounded edge region, a quadrilateral edge region, and a quadrilateral middle region; the rounded edge region is a portion of a circle having a radius equal to a preset circle radius and less than or equal to a quarter of a circle, the quadrilateral edge region is located between two rounded edge regions, and the quadrilateral middle region is surrounded by the rounded edge region and the quadrilateral edge region;

[0068] In step S102, triangulation is performed on each of the plurality of regions to obtain rendering positions of a plurality of triangle vertices after triangulation;

[0069] In step S103, pixel radius values are assigned to the triangle vertices based on the shortest distance between the triangle vertices and the edge of the middle area of the quadrilateral; wherein the pixel radius value of the triangle vertices located at the edge of the rounded square frame is the preset circle radius value, and the pixel radius value of the triangle vertices located at the edge of the middle area of the quadrilateral is 0;

[0070] In step S104 , the rendering positions of the triangle vertices and the pixel radius values are transmitted to a GPU, so that the GPU renders the rounded square frame based on the rendering positions of the triangle vertices and the pixel radius values.

[0071] In this embodiment, the rounded square box rendering method can be executed on the client's CPU. In order to automatically render the rounded square box and flexibly change the size of the rounded square box, the rounded square box to be rendered is divided into multiple areas based on its size in the embodiment of the present disclosure.

[0072] The multiple areas include edge areas and middle areas, the edge areas include rounded edge areas and quadrilateral edge areas, each corner of the rounded square box can correspond to one or more rounded edge areas, the shape of the rounded edge area can be a part of a circle with a radius of a preset circle radius value, when a corner of the rounded square box corresponds to a rounded edge area, the rounded edge area is a quarter circle, and the radius value is the preset circle radius value.

[0073] The quadrilateral edge region is located between the two rounded edge regions. The quadrilateral edge region may include multiple quadrilateral edge regions. The side length of each quadrilateral edge region corresponding to the radius of the rounded edge region is a preset circle radius value. The rounded edge region and the quadrilateral edge region surround the middle region. In some embodiments, there may be one or more quadrilateral edge regions between the two rounded edge regions.

[0074] The middle area can also be a quadrilateral, and the middle area of the quadrilateral is the area of the rounded square frame excluding the edge area. The middle area can be a complete area or multiple areas after further division. In some embodiments, the middle area can be divided into multiple quadrilateral middle areas.

[0075] After dividing the rounded square frame into multiple regions, triangulation can be performed on each region. One method of triangulation is to divide the rounded edge region into multiple triangular regions to approximately represent a portion of a circle corresponding to the rounded edge region, while each of the quadrilateral edge region and the quadrilateral middle region can be directly divided into two triangles. Of course, it is understood that each of the quadrilateral edge region and the quadrilateral middle region can also be divided into more than two triangles. The specific method can be determined based on actual needs and is not specifically limited here.

[0076] After dividing the rounded square frame into regions and subdividing each region into triangles, the rendering positions of the triangle vertices of each triangle can be obtained. It is understood that each triangle has three triangle vertices, and the rendering positions of the triangle vertices can be relative positions on the software application interface. It is understood that the rendering positions of the triangle vertices can be determined based on the size of the rounded square frame, the region division method, and the rendering position of the rounded square frame. The rounded square frame and the rendering position of the rounded square frame can be specified through parameters in the rendering task.

[0077] In some embodiments, after triangulation, the vertices of the obtained triangles are located at the edge of the rounded square frame and / or the edge of the middle area.

[0078] In some embodiments, two of the vertices of the triangle obtained after the rounded edge region is divided are located at the arc edge of the rounded edge region, and the triangle is an equilateral triangle with two equal sides having a preset circle radius value. Therefore, the other vertex of the triangle is located at the edge of the entire middle region (if the middle region is divided into a quadrilateral middle region, the entire middle region is the quadrilateral middle region; if the middle region is divided into multiple quadrilateral middle regions, the entire middle region is the complete region composed of the multiple quadrilateral middle regions). In some embodiments, the other vertex of the triangle coincides with one of the vertices of the middle region. Of course, it is understandable that the rounded edge region can also be triangulated in other ways, not limited to the above-mentioned ways.

[0079] In some embodiments, two of the four triangular vertices in the quadrilateral edge region are located at the edges of the rounded square frame, while the other two are located at the edges of the entire middle region. One or more triangular vertices in the quadrilateral edge region may overlap with one or more triangular vertices in the middle region. Therefore, the lengths of two parallel sides of the quadrilateral edge region are equal to the predetermined circle radius. Of course, it is understood that the quadrilateral edge region may also be triangulated in other ways, not limited to the above-described methods.

[0080] In some embodiments, the four triangle vertices of the quadrilateral middle region may be located at the edges of the complete middle region. Of course, it is understandable that the quadrilateral middle region may also be triangulated in other ways, not limited to the above-mentioned ways.

[0081] Figure 2 Schematic diagram showing the effect of the area after the rounded square frame is divided according to one embodiment of the present disclosure. Figure 2 As shown, the rounded square box is divided into 9 areas, including 8 edge areas and one middle area. The 8 edge areas include 4 rounded edge areas and 4 quadrilateral edge areas. The quadrilateral edge area is located between the two rounded edge areas. The four corners of the rounded square box correspond to the rounded edge areas, and each rounded edge area corresponds to a quarter circle. Among them, the solid lines in the edge area and the middle area represent the triangulation schemes obtained after triangulating the multiple areas separately. The rounded edge area uses multiple triangles to approximate the quarter circle, while the quadrilateral edge area and the quadrilateral middle area are each divided into two triangles. W represents the width of the rounded square box, H represents the height of the rounded square box, and R is the preset circle radius value.

[0082] After obtaining the rendering positions of the triangle vertices obtained by segmentation, a pixel radius value can also be assigned to each triangle vertex in the triangle. The pixel radius value is the shortest distance from the triangle vertex to the edge of the complete middle area. For example, the pixel radius value of the triangle vertices in the rounded edge area that are away from the edge of the rounded square frame, that is, located at the edge of the complete middle area, is 0, while the pixel radius value of the triangle vertices in the rounded edge area that are located at the edge of the rounded square frame is a preset circle radius value. Similarly, the pixel radius value of the triangle vertices in the quadrilateral edge area that are away from the edge of the rounded square frame, that is, located at the edge of the complete middle area, is 0, while the pixel radius value of the triangle vertices in the quadrilateral edge area that are located at the edge of the rounded square frame is a preset circle radius value; the pixel radius value of the triangle vertices in the quadrilateral middle area is 0.

[0083] After dividing the rounded square box into regions and then triangulating each region, the rendering position of each triangle vertex can be determined, and a pixel radius value can be assigned to each triangle vertex based on the shortest distance from the triangle vertex to the edge of the middle region.

[0084] Afterwards, the rendering position of each triangle vertex and the pixel radius value of the triangle vertex can be transmitted to the GPU, and the GPU can render the pixels corresponding to the triangle vertex and the pixels inside the triangle defined by the triangle vertex based on the rendering position and pixel radius value of the triangle vertex.

[0085] During the rendering process, the GPU automatically calculates the pixel radius of each pixel within the triangle based on the input triangle vertex rendering position and pixel radius value. It can also determine the rendering position of each pixel based on the pixel radius value, thereby rendering the entire triangle. After the GPU completes rendering the multiple triangles defined by the input triangle vertices, the multiple triangles are spliced together to form the rounded square frame.

[0086] In an embodiment of the present disclosure, when rendering a rounded square box, the rounded square box to be rendered is divided into multiple areas based on the size of the rounded square box, and the multiple areas may include a rounded edge area, a quadrilateral edge area, and a quadrilateral middle area; each area is triangulated to obtain rendering positions of triangle vertices of multiple triangles, and a pixel radius value is assigned to the triangle vertex of each triangle. After the triangle vertex and pixel radius value of each triangle are transmitted to the GPU, the GPU renders the rounded square box based on the rendering positions of the triangle vertices of the triangle and the pixel radius value.

[0087] Through the above method, the rounded square box is divided into multiple triangles and then sent to the GPU for drawing. The GPU can automatically calculate the pixel radius value of each pixel in each triangle based on the rendering position and pixel radius value of the received triangle vertices, and then render each pixel at the corresponding position based on the pixel radius value. Finally, multiple triangles are drawn, and then these multiple triangles are spliced to form a rounded square box. In this way, the rendering performance of the rounded square box can be improved, and when the size of the rounded square box needs to be changed, it is only necessary to obtain the rendering position and / or pixel radius value of the changed triangle vertex based on the changed size, and then the GPU automatically renders it again, which can flexibly change the size of the rounded square box, the range of rounded corners, etc.

[0088] In an optional implementation of this embodiment, step S102, i.e., the step of triangulating each of the multiple regions to obtain rendering positions of multiple triangle vertices after triangulation, further includes the following steps:

[0089] Divide the edge area of the quadrilateral and the middle area of the quadrilateral into two right triangles respectively, and obtain rendering positions of the triangle vertices of the two right triangles;

[0090] The rounded edge area is divided into a plurality of equilateral triangles with side lengths equal to the preset circle radius value, and rendering positions of triangle vertices of the plurality of equilateral triangles are obtained.

[0091] In this optional implementation, when dividing the quadrilateral edge area and the quadrilateral edge area, the two diagonal vertices of the quadrilateral can be directly connected to divide it into two right triangles, and the three vertices of each right triangle are three of the four vertices of the quadrilateral, that is, the rendering positions of the triangle vertices of the two right triangles are the vertex positions of the quadrilateral.

[0092] When segmenting the rounded edge region, multiple points can be selected from the arc edge of the rounded edge region. Two adjacent points among the selected points and the center of the circle corresponding to the rounded edge region are used as the vertices of the three triangles after segmentation. The resulting triangles are all equilateral triangles, and the equal sides are equal to the preset circle radius. In some embodiments, the multiple points selected from the arc edge of the rounded edge region can be selected at equal or non-equidistant distances. If the points are selected at equal distances, the resulting triangles are of equal size.

[0093] In an optional implementation of this embodiment, step S104, i.e., the step of transmitting the rendering position of the triangle vertex and the pixel radius value to the GPU, further includes the following steps:

[0094] Transmitting the rendering positions of the triangle vertices to the triangle vertex shader of the GPU;

[0095] The pixel radius values of the triangle vertices are transmitted to the pixel shader of the GPU.

[0096] In this optional implementation, the three triangle vertices of each triangle are transmitted to the triangle vertex shader as a set of vertex data, and the pixel radius value of the triangle is transmitted to the pixel shader as attribute data. The triangle vertex shader and pixel shader of the GPU automatically draw the triangle vertices and the pixels corresponding to each point on the triangle defined by the triangle vertices. In addition, the GPU can also calculate the pixel radius value of each pixel. Based on the pixel radius value and the rendering position of the triangle vertex, the relative position of each pixel relative to the triangle vertex can be determined. Based on the relative position, different colors, transparency, etc. can be given to each pixel based on parameter settings, thereby enabling adjustment of stroke thickness, etc.

[0097] In an optional implementation of this embodiment, after step S104, i.e., transmitting the triangle vertices and the pixel radius value of the triangle to the GPU, the method further includes the following steps:

[0098] A graphics optimization program is started in the GPU so that the graphics optimization program performs soft interpolation coloring on the pixels at the edge of the rounded square box based on the pixel radius value of each pixel in the rounded square box output by the GPU; the pixel radius value of the pixel is the shortest distance from the pixel to the edge of the middle area of the quadrilateral.

[0099] In this optional implementation, when the GPU renders a triangle graphic based on the rendering position and pixel radius value of the triangle vertices, it will also automatically calculate the pixel radius values of other pixels in the triangle except for the triangle vertices. The pixel radius values of other pixels are also the shortest distance from the other pixels to the edge of the middle area.

[0100] In order to achieve edge anti-aliasing effect, the embodiment of the present disclosure starts a graphics optimization program in the GPU. The graphics optimization program obtains the pixel radius value of each pixel automatically calculated by the vertex shader and pixel shader in the GPU, and performs soft interpolation coloring on the pixels at the edge of the rounded square box based on the pixel radius value.

[0101] Figure 3 Schematic diagram showing the display effect of a rounded square frame with a stroke effect according to an embodiment of the present disclosure. Figure 3 As shown, in order to reflect the details of the flexible interpolation coloring scheme, Figure 3 Retained in Figure 2 The solid lines within each region of the triangulation scheme are shown in the figure. You can see that the fill color range is somewhat smaller than the full area of the rounded square. This is to implement edge anti-aliasing, which will be described in detail below.

[0102] The disclosed embodiment utilizes a GPU to achieve edge anti-aliasing and stroking effects. The solid lines in the triangulation scheme can be referred to as "triangulated segments", and the endpoints of all triangulated segments are passed to the vertex shader of the GPU as triangle vertices. In addition to the position contained in the display interface, each triangle vertex includes a pixel radius value. The pixel radius value is a floating point number ranging from 0 to 1. The pixel radius values of the four vertices in the middle area are set to 0, and the other vertices are on the outer edge of the rounded square box, and their pixel radius values are set to the preset circle radius value R. The triangle vertices are passed to the vertex shader of the GPU, and the pixel radius value is output to the fragment shader. After rasterization, each shaded pixel has an interpolated pixel radius value. The pixel radius value of each pixel in the middle area is 0; and the pixel radius value of each pixel in the rounded edge area and the quadrilateral edge area increases linearly as the distance from the outer edge of the rounded square box decreases. That is, the closer to the middle area, the closer the pixel radius value is to 0, and the closer to the outer edge of the rounded square box, the closer the pixel radius value is to R.

[0103] For the convenience of description, the edge of the middle area can be called the reference edge. Figure 3 The reference edge is highlighted with a thick line. After the above operation, each pixel in the rounded square box has a pixel radius value. The pixel radius value of the pixel in the rounded edge area and the quadrilateral edge area represents the shortest distance between the pixel and the reference edge, while the pixel radius value of the pixel in the middle area is equal to 0.

[0104] The GPU can be used to calculate the color of each pixel in the rounded square box and classify the pixels based on the pixel radius value. Two radius values can be pre-set: the inner edge radius value r1 of the stroke and the outer edge radius value r2 of the stroke.

[0105] Based on the inner edge radius r1 and outer edge radius r2 of the stroke, pixels can be divided into three categories: the first category is internal pixels with a radius value less than r1; the second category is stroked pixels with a radius value between r1 and r2; and the third category is transparent pixels with a radius value greater than r2. Due to the limited number of pixels, if the pixels are strictly classified based on the comparison of the above-mentioned pixel radius values with the inner edge radius values and the outer edge radius values, and different colors are then rendered for pixels of different categories, jagged edges will be generated at the edges of the graphics. To achieve an anti-aliasing effect, in the embodiment of the present disclosure, the pixels at the edges of the rounded square frame are softly interpolated and colored. That is, the pixels are colored using a soft interpolation method so that the colors between the edge pixels change slowly based on the changes in the pixel radius values, avoiding the appearance of jagged shapes.

[0106] Figure 4 FIG. 1 shows a schematic diagram showing the effect of edge jaggedness on a triangle rendered by a GPU according to an embodiment of the present disclosure. Figure 4 As shown, the triangle vertices input to the GPU are A1, A2, and A3 respectively. Each triangle vertex corresponds to a pixel, and multiple pixels are drawn between each two vertices. Each pixel is a square shape, so the multiple pixels between each two vertices will produce a jagged shape.

[0107] In an optional implementation of this embodiment, the step of performing soft interpolation coloring on the pixels at the edge of the rounded square frame based on the pixel radius value of each pixel in the rounded square frame output by the GPU further includes the following steps:

[0108] Determining a probability that the pixel is an interior pixel and a transparency coefficient of the pixel based on the pixel radius value, the inner edge radius value, and the outer edge radius value; the inner edge radius value and the outer edge radius value are both smaller than the pixel radius value, and the inner edge radius value is smaller than the outer edge radius value;

[0109] A global preset color used for rendering the rounded square frame is adjusted based on the probability of the internal pixel and the transparency coefficient of the pixel, so that the pixels in the rounded square frame are colored based on the adjusted global preset color.

[0110] In this optional implementation, the inner edge radius value and the outer edge radius value can be pre-set, the outer edge radius value is greater than the inner edge radius value, and the probability of whether a pixel is an inner pixel is related to the pixel radius value of the pixel. When the pixel radius value is less than the inner edge radius value, the probability of it being an inner pixel is 1. When the pixel radius value is greater than the outer edge radius value, the probability of it being an inner pixel is 0. When the pixel radius value is near the inner edge radius value, the probability of it being an inner pixel is between 0 and 1. The transparency coefficient of the pixel is related to the pixel radius value. When the pixel radius value of the pixel is less than the outer edge radius value, the transparency coefficient is 1, indicating that it is completely opaque. When the pixel radius value is greater than the outer edge radius value, that is, it is not an inner pixel, the transparency coefficient when it is an outer pixel is 0, indicating that it is completely transparent. When the pixel radius value is near the outer edge radius value, the transparency coefficient is between 0 and 1.

[0111] After determining the probability of a pixel being an interior pixel and the transparency coefficient in the above manner, the global preset color specified in the drawing task can be adjusted based on the probability and transparency coefficient of the interior pixel, and each pixel in the rounded square box can be colored using the adjusted global preset color. In this way, an anti-aliased rounded square box can be obtained, where the color of the interior pixels is the global preset color, while the exterior pixels are transparent pixels. The color of the pixels between the interior and exterior pixels can smoothly transition from the interior pixel color to the transparent color, thus avoiding jagged edges on the rounded square box.

[0112] In an optional implementation of this embodiment, the step of determining the probability that the pixel is an interior pixel and the transparency coefficient of the pixel based on the pixel radius value, the inner edge radius value, and the outer edge radius value further includes the following steps:

[0113] The probability that the pixel is an internal pixel is determined based on the size relationship between the pixel radius value and the inner edge radius value r1; when the pixel radius value is less than or equal to r1-delta, the probability that the pixel is an internal pixel is 1; when the pixel radius value is greater than or equal to r1+delta, the probability that the pixel is an internal pixel is 0; when the pixel radius value is in the interval range of (r1-delta, r1+delta), the probability that the pixel is an internal pixel is within the interval range of (0, 1), wherein r1 is a positive number less than the preset circle radius value, and delta is a positive number less than the width of one pixel;

[0114] The transparency coefficient of the pixel is determined based on the size relationship between the pixel radius value and the outer edge radius value r2; when the pixel radius value is greater than or equal to r2-delta, the transparency coefficient of the pixel is a coefficient of 0 indicating complete transparency; when the pixel radius value is less than or equal to r2-delta, the transparency coefficient of the pixel is a coefficient of 1 indicating opacity; when the pixel radius value is in the interval range of (r2-delta, r2+delta), the transparency coefficient of the pixel is within the interval range of (0, 1), wherein r2 is a positive number greater than the inner edge radius value and less than the preset circle radius value.

[0115] In this optional implementation, a positive number delta is predefined, and delta can be a number less than the width of a pixel, for example, a width of 0.5 pixels. When the pixel radius value is less than or equal to r1-delta, the probability that it is an internal pixel is 1. When the pixel radius value is greater than or equal to r1+delta, the probability that it is an internal pixel is 0. When the pixel radius value is between (r1-delta, r1+delta), the probability that it is an internal pixel is between 0 and 1. It should be noted that the pixel radius value, the inner edge radius value r1, the outer edge radius value r2, and the preset circle radius value R are all in pixels.

[0116] When the pixel radius value of a pixel is less than or equal to r2-delta, the transparency coefficient is 1, indicating that it is completely opaque, and when the pixel radius value is greater than or equal to r2+delta, its transparency coefficient is 0, indicating that it is completely transparent, and when the pixel radius value is between r1-delta and r1+delta, its transparency coefficient is between 0-1.

[0117] In an optional implementation of this embodiment, the global preset color includes an interior color and a stroke color; and the step of adjusting the global preset color used for rendering the rounded square frame based on the probability of the interior pixels and the transparency coefficient of the pixels, so as to color the pixels in the rounded square frame based on the adjusted global preset color, further includes the following steps:

[0118] Calculating a processed color of the pixel based on the probability that the pixel is an interior pixel, the interior color, and the stroke color;

[0119] Calculating a processed transparency of the pixel based on a transparency coefficient of the pixel and an original transparency output by the GPU;

[0120] The pixels in the rounded square frame are rendered based on the processed colors of the pixels and the processed transparency of the pixels.

[0121] In this optional implementation, in the rounded square box rendering task, a global preset color can be manually or otherwise pre-set. The global preset color may include, but is not limited to, an interior color and a stroke color. When the GPU renders the rounded square box (actually rendering each triangle that makes up the rounded square box separately),

[0122] In order to achieve anti-aliasing and stroking effects, the embodiment of the present disclosure is based on the method mentioned above, and calculates the probability of each pixel corresponding to an internal pixel and the transparency coefficient based on the pixel radius value of each pixel. In order to achieve the stroking effect and avoid edge jaggedness of pixels on the outer edge of the rounded square frame, the embodiment of the present disclosure can calculate the processed color of each pixel based on the probability of being an internal pixel, the internal color, and the boundary color. At the same time, the original transparency automatically calculated by the GPU is processed based on the above transparency coefficient to obtain the processed transparency. The processed color is used to color each pixel during rendering, and the transparency of each pixel is set to the corresponding processed transparency.

[0123] The following example illustrates an implementation method of performing flexible interpolation coloring on pixels in an embodiment of the present disclosure.

[0124] Set global parameters. These global parameters can be set in the rendering task and passed from the CPU to the GPU. The global parameters include: color_inner (inner color), color_border (stroke color), r1 (inner edge radius of the stroke), and r2 (outer edge radius of the stroke).

[0125] Pixel parameters: r (pixel radius, automatically calculated by the GPU based on the radius of the triangle vertices passed in by the CPU), gl_FragColor (pixel color, the actual display color of the pixels in each triangle rendered by the GPU, including the processed color and processed transparency mentioned above). Pixel color can be represented as a four-bit vector, with the first three bits representing the RGB color and the fourth bit representing the transparency.

[0126] float delta = 0.5; / / flexible gradient, representing 0.5 pixels

[0127] float is_inner=1.0-smoothstep(r1-delta,r1+delta,r); / / Probability of internal pixels

[0128] float transparency = 1.0-smoothstep(r2-delta,r2+delta,r); / / transparency coefficient

[0129] gl_FragColor = color_inner * is_inner + color_border * (1.0 - is_inner); / / Pixel color is calculated based on the internal color, stroke color, and the probability of the internal pixel

[0130] gl_FragColor.a*=transparency; / / Pixel transparency is calculated based on the original transparency a and the transparency coefficient automatically calculated by the GPU.

[0131] Among them, smoothstep is a smooth step function, and the calculation process of smoothstep(edge0,edge1,x) is as follows:

[0132] Let t=clamp((x-edge0) / (edge1-edge0),0.0,1.0), there is smoothstep(edge0,edge1,x)=t*t*(3.0-2.0*t);

[0133] The truncation function clamp(x,a,b)

[0134] =a,if x <a;

[0135] =x,if a<=x <b;

[0136] =b,if x>=b.

[0137] In this embodiment, the smoothstep feature is used to interpolate the color of the pixel, thereby avoiding edge jaggedness caused by calculations of either 0 or 1.

[0138] The embodiment of the present disclosure is conducive to using the GPU for calculations, which can improve rendering performance. In addition, by changing the parameters of the rounded square box, such as the values of W, H, r1, and r2 mentioned above, the size, rounded corner size, and stroke thickness of the rounded square box can be flexibly changed; at the same time, the embodiment of the present disclosure also has good edge anti-aliasing capabilities (smooth edges).

[0139] Figure 5 FIG. 1 is a flow chart showing a map rendering method according to an embodiment of the present disclosure. Figure 5 As shown, the map rendering method includes the following steps:

[0140] In step S501, map rendering data is obtained;

[0141] In step S502, when rendering a map based on the map rendering data, a background in the shape of a rounded square frame is added to the display objects on the map based on the rounded square frame rendering method.

[0142] In this embodiment, during the map rendering process, text, icons, etc. may need to be displayed in appropriate locations. In order to optimize the display effect, it may be necessary to add a rounded square frame to the text and icons as a background, and the rounded square frame can also be processed with effects such as stroke.

[0143] In the embodiment of the present disclosure, the rounded square box rendering method described above can be used to render the rounded square box on the map. For specific details, please refer to the description of the rounded square box rendering method described above, which will not be repeated here.

[0144] Figure 6 Schematic diagram showing the effect of using a rounded square frame as the background of an icon on a map according to an embodiment of the present disclosure. Figure 6 As shown, the text Wuyuan Bridge is displayed on the map, and the visual effect of Wuyuan Bridge is optimized by adding a background frame, that is, a rounded square frame. The rounded square frame is also stroked to highlight its display effect.

[0145] Figure 7 FIG. 1 shows a structural block diagram of a rendering device for a rounded square frame according to an embodiment of the present disclosure. Figure 7 As shown, the rendering device of the rounded square frame includes: a CPU 701 and a GPU 702;

[0146] The CPU 701 divides the rounded square frame to be rendered into multiple regions, performs triangulation on each of the multiple regions to obtain triangle vertices of multiple triangles, assigns a pixel radius value to each triangle vertex in the triangle, and transmits the triangle vertices and the pixel radius value to the GPU 702; wherein the multiple regions include: four rounded edge regions, four quadrilateral edge regions located between the four rounded edge regions, and a quadrilateral middle region located in the middle of the rounded square frame; the rounded edge regions are shaped like quarter circles with a radius of a preset circle radius; the triangle vertices of the triangles are respectively located at the edge of the rounded square frame and the edge of the quadrilateral middle region; the radius value of the triangle vertices located at the edge of the rounded square frame is the preset circle radius value, and the radius value of the triangle vertices located at the edge of the quadrilateral middle region is 0;

[0147] The GPU 702 draws the rounded square box based on the triangle vertices of the triangle and the pixel radius value.

[0148] The specific details of this embodiment can be found in the above description of the method for rendering a rounded square frame, which will not be repeated here.

[0149] In an optional implementation of this embodiment, triangulating each of the multiple regions to obtain rendering positions of multiple triangle vertices after triangulation includes:

[0150] Divide the edge area of the quadrilateral and the middle area of the quadrilateral into two right triangles respectively, and obtain rendering positions of the triangle vertices of the two right triangles;

[0151] The rounded edge area is divided into a plurality of equilateral triangles with side lengths equal to the preset circle radius value, and rendering positions of triangle vertices of the plurality of equilateral triangles are obtained.

[0152] In an optional implementation of this embodiment, transmitting the rendering position of the triangle vertex and the pixel radius value to the GPU 702 includes:

[0153] Transmitting the rendering positions of the triangle vertices to the triangle vertex shader of the GPU 702;

[0154] The pixel radius values of the triangle vertices are sent to the pixel shader of the GPU 702 .

[0155] In an optional implementation of this embodiment, the GPU 702 calculates the pixel radius value of each pixel in the rounded square box based on the pixel radius value, and performs soft interpolation coloring on the pixels in the rounded square box based on the pixel radius value; the pixel radius value of the pixel is the closest distance between the pixel and the edge of the middle area of the quadrilateral.

[0156] In an optional implementation of this embodiment, the GPU 702 calculates a pixel radius value of each pixel in the rounded square box based on the pixel radius value, and performs soft interpolation coloring on the pixels in the rounded square box based on the pixel radius value, including:

[0157] The GPU 702 determines a probability that the pixel is an interior pixel and a transparency coefficient of the pixel based on the pixel radius value, the inner edge radius value, and the outer edge radius value; the inner edge radius value and the outer edge radius value are both smaller than the pixel radius value, and the inner edge radius value is smaller than the outer edge radius value;

[0158] The GPU 702 adjusts the global preset color used for rendering the rounded square frame based on the probability of the internal pixel and the transparency coefficient of the pixel, so as to color the pixels in the rounded square frame based on the adjusted global preset color.

[0159] In an optional implementation of this embodiment, the GPU 702 determines the probability that the pixel is an interior pixel and the transparency coefficient of the pixel based on the pixel radius value, the inner edge radius value, and the outer edge radius value, including:

[0160] The GPU 702 determines the probability that the pixel is an internal pixel based on the relationship between the pixel radius value and the inner edge radius value r1; when the pixel radius value is less than or equal to r1-delta, the probability that the pixel is an internal pixel is 1; when the pixel radius value is greater than or equal to r1+delta, the probability that the pixel is an internal pixel is 0; when the pixel radius value is in the interval (r1-delta, r1+delta), the probability that the pixel is an internal pixel is in the interval (0, 1), where r1 is a positive number less than the preset circle radius value, and delta is a positive number less than the width of one pixel;

[0161] The GPU 702 determines the transparency coefficient of the pixel based on the size relationship between the pixel radius value and the outer edge radius value r2; when the pixel radius value is greater than or equal to r2-delta, the transparency coefficient of the pixel is a coefficient of 0 indicating complete transparency; when the pixel radius value is less than or equal to r2-delta, the transparency coefficient of the pixel is a coefficient of 1 indicating opacity; when the pixel radius value is in the interval range of (r2-delta, r2+delta), the transparency coefficient of the pixel is within the interval range of (0, 1), wherein r2 is a positive number greater than the inner edge radius value and less than the preset circle radius value.

[0162] In an optional implementation of this embodiment, the global preset color includes an interior color and a stroke color; the GPU 702 adjusts the global preset color used for rendering the rounded square frame based on the probability of the interior pixels and the transparency coefficient of the pixels, so as to color the pixels in the rounded square frame based on the adjusted global preset color, including:

[0163] Calculating a processed color of the pixel based on the probability that the pixel is an interior pixel, the interior color, and the stroke color;

[0164] Calculating a processed transparency of the pixel based on the transparency coefficient of the pixel and the original transparency output by the GPU 702;

[0165] The pixels in the rounded square frame are rendered based on the processed colors of the pixels and the processed transparency of the pixels.

[0166] The specific details of the above embodiment can be found in the description of the rendering method of the rounded square frame above, which will not be repeated here.

[0167] The following are embodiments of the apparatus disclosed herein, which can be used to execute embodiments of the method disclosed herein.

[0168] According to an embodiment of the present disclosure, a device for rendering a rounded square frame can be implemented as part or all of an electronic device through software, hardware, or a combination of both. The device for rendering a rounded square frame includes:

[0169] a region division module configured to divide the rounded square frame to be rendered into a plurality of regions, the plurality of regions comprising: a rounded edge region, a quadrilateral edge region, and a quadrilateral middle region; the rounded edge region being a portion of a circle having a radius equal to a preset radius and being less than or equal to a quarter of a circle, the quadrilateral edge region being located between two rounded edge regions, and the quadrilateral middle region being surrounded by the rounded edge region and the quadrilateral edge region;

[0170] A triangulation module is configured to triangulate each of the plurality of regions to obtain rendering positions of a plurality of triangle vertices after triangulation;

[0171] a radius value assigning module, configured to assign pixel radius values to the triangle vertices based on the shortest distance between the triangle vertices and the edge of the middle area of the quadrilateral; wherein the pixel radius value of the triangle vertices located at the edge of the rounded square frame is the preset circle radius value, and the pixel radius value of the triangle vertices located at the edge of the middle area of the quadrilateral is 0;

[0172] The transmitting module is configured to transmit the rendering position of the triangle vertex and the pixel radius value to the GPU, so that the GPU renders the rounded square box based on the rendering position of the triangle vertex and the pixel radius value.

[0173] In an optional implementation of this embodiment, the triangulation module includes:

[0174] A first subdivision submodule is configured to divide the quadrilateral edge area and the quadrilateral middle area into two right triangles respectively, and obtain rendering positions of the triangle vertices of the two right triangles;

[0175] The second subdivision module is configured to subdivide the rounded edge area into a plurality of equilateral triangles with side lengths equal to the preset circle radius value, and obtain rendering positions of triangle vertices of the plurality of equilateral triangles.

[0176] In an optional implementation of this embodiment, the transmission module includes:

[0177] A first transmission submodule is configured to transmit the rendering position of the triangle vertex to the triangle vertex shader of the GPU;

[0178] The second transmission submodule is configured to transmit the pixel radius value of the triangle vertex to the pixel shader of the GPU.

[0179] In an optional implementation of this embodiment, after the transmitting module, the apparatus further includes:

[0180] A startup module is configured to start a graphics optimization program in the GPU, so that the graphics optimization program performs soft interpolation coloring on the pixels at the edge of the rounded square box based on the pixel radius value of each pixel in the rounded square box output by the GPU; the pixel radius value of the pixel is the shortest distance from the pixel to the edge of the middle area of the quadrilateral.

[0181] In an optional implementation of this embodiment, the startup module includes:

[0182] a first determining submodule configured to determine a probability that the pixel is an interior pixel and a transparency coefficient of the pixel based on the pixel radius value, the inner edge radius value, and the outer edge radius value; the inner edge radius value and the outer edge radius value are both smaller than the pixel radius value, and the inner edge radius value is smaller than the outer edge radius value;

[0183] The adjustment submodule is configured to adjust the global preset color used for rendering the rounded square frame based on the probability of the internal pixels and the transparency coefficient of the pixels, so as to color the pixels in the rounded square frame based on the adjusted global preset color.

[0184] In an optional implementation of this embodiment, the first determining submodule includes:

[0185] A second determination submodule is configured to determine a probability that the pixel is an internal pixel based on a size relationship between the pixel radius value and the inner edge radius value r1; when the pixel radius value is less than or equal to r1-delta, the probability that the pixel is an internal pixel is 1; when the pixel radius value is greater than or equal to r1+delta, the probability that the pixel is an internal pixel is 0; when the pixel radius value is in the interval range of (r1-delta, r1+delta), the probability that the pixel is an internal pixel is within the interval range of (0, 1), wherein r1 is a positive number less than the preset circle radius value, and delta is a positive number less than the width of one pixel;

[0186] The third determination submodule is configured to determine the transparency coefficient of the pixel based on the size relationship between the pixel radius value and the outer edge radius value r2; when the pixel radius value is greater than or equal to r2-delta, the transparency coefficient of the pixel is a coefficient of 0 indicating complete transparency; when the pixel radius value is less than or equal to r2-delta, the transparency coefficient of the pixel is a coefficient of 1 indicating opacity; when the pixel radius value is in the interval range of (r2-delta, r2+delta), the transparency coefficient of the pixel is within the interval range of (0, 1), wherein r2 is a positive number greater than the inner edge radius value and less than the preset circle radius value.

[0187] In an optional implementation of this embodiment, the global preset color includes an internal color and a stroke color; and the adjustment submodule includes:

[0188] a first calculation submodule, configured to calculate a processed color of the pixel based on the probability that the pixel is an interior pixel, the interior color, and the stroke color;

[0189] A second calculation submodule is configured to calculate the processed transparency of the pixel based on the transparency coefficient of the pixel and the original transparency output by the GPU;

[0190] The rendering submodule is configured to render the pixels in the rounded square frame based on the processed colors of the pixels and the processed transparency of the pixels.

[0191] The rendering device of the rounded square frame in this embodiment corresponds to the rendering method of the rounded square frame mentioned above. For specific details, please refer to the description of the rendering method of the rounded square frame mentioned above, which will not be repeated here.

[0192] According to an embodiment of the present disclosure, a map rendering device can be implemented as part or all of an electronic device through software, hardware, or a combination of both. The map rendering device includes:

[0193] An acquisition module, configured to acquire map rendering data;

[0194] The adding module is configured to add a background in the shape of a rounded square frame to the display object on the map based on the above-mentioned rounded square frame rendering device when rendering the map based on the map rendering data.

[0195] The map rendering device in this embodiment corresponds to the map rendering method described above. For specific details, please refer to the description of the map rendering method described above, which will not be repeated here.

[0196] Figure 8It is a structural diagram of an electronic device suitable for implementing the rounded square frame rendering method and / or map rendering method according to an embodiment of the present disclosure.

[0197] like Figure 8 As shown, the electronic device 800 includes a processing unit 801, which can be implemented as a processing unit such as a CPU, a GPU, an FPGA, an NPU, etc. The processing unit 801 can perform various processes in the embodiment of any of the above methods of the present disclosure according to a program stored in a read-only memory (ROM) 802 or a program loaded from a storage portion 808 into a random access memory (RAM) 803. In the RAM 803, various programs and data required for the operation of the electronic device 800 are also stored. The processing unit 801, the ROM 802, and the RAM 803 are connected to each other via a bus 804. An input / output (I / O) interface 805 is also connected to the bus 804.

[0198] The following components are connected to the I / O interface 805: an input section 806 including a keyboard, a mouse, and the like; an output section 807 including devices such as a cathode ray tube (CRT), a liquid crystal display (LCD), and a speaker; a storage section 808 including a hard disk; and a communication section 809 including a network interface card such as a LAN card or a modem. The communication section 809 performs communication processing via a network such as the Internet. A drive 810 is also connected to the I / O interface 805 as needed. A removable medium 811, such as a magnetic disk, an optical disk, a magneto-optical disk, or a semiconductor memory, is installed in the drive 810 as needed, so that computer programs read therefrom can be installed into the storage section 808 as needed.

[0199] In particular, according to embodiments of the present disclosure, any of the methods described above with reference to the embodiments of the present disclosure may be implemented as a computer software program. For example, embodiments of the present disclosure include a computer program product comprising a computer program tangibly embodied on a machine-readable medium, the computer program comprising program code for executing any of the methods described in the embodiments of the present disclosure. In such embodiments, the computer program may be downloaded and installed from a network via the communication portion 809 and / or installed from a removable medium 811.

[0200] The flowcharts and block diagrams in the accompanying drawings illustrate the possible architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each box in the diagram or block diagram can represent a module, program segment or part of the code, and the module, program segment or part of the code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in an order different from that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flow chart, as well as the combination of boxes in the block diagram and / or flow chart, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or can be implemented using a combination of dedicated hardware and computer instructions.

[0201] The units or modules described in the embodiments of the present disclosure may be implemented in software or hardware. The units or modules described may also be provided in a processor, and the names of these units or modules do not, in certain circumstances, limit the units or modules themselves.

[0202] As another aspect, the present disclosure further provides a computer-readable storage medium. This computer-readable storage medium may be included in the apparatus described in the above embodiments, or may be a standalone computer-readable storage medium not incorporated into the apparatus. The computer-readable storage medium stores one or more programs, which are used by one or more processors to execute the methods described in the present disclosure.

[0203] The above description is merely a preferred embodiment of the present disclosure and an illustration of the technical principles employed. Those skilled in the art should understand that the scope of the invention herein is not limited to the technical solutions formed by the specific combination of the above-mentioned technical features, but also encompasses other technical solutions formed by any combination of the above-mentioned technical features or their equivalents without departing from the inventive concept. For example, a technical solution formed by replacing the above-mentioned features with (but not limited to) technical features with similar functions disclosed in this disclosure.

Claims

1. A method for rendering a rounded square frame, wherein: include: Dividing the rounded square frame to be rendered into a plurality of regions, the plurality of regions comprising: a rounded edge region, a quadrilateral edge region, and a quadrilateral middle region; the rounded edge region is a portion of a circle having a radius equal to a preset circle radius and less than or equal to a quarter of a circle; the quadrilateral edge region is located between two rounded edge regions; and the quadrilateral middle region is surrounded by the rounded edge region and the quadrilateral edge region; Performing triangulation on each of the plurality of regions to obtain rendering positions of a plurality of triangle vertices after triangulation; Assigning pixel radius values to the triangle vertices based on the shortest distance between the triangle vertices and the edge of the middle area of the quadrilateral; wherein the pixel radius values of the triangle vertices located at the edge of the rounded square frame are the preset circle radius value, and the pixel radius values of the triangle vertices located at the edge of the middle area of the quadrilateral are 0; The rendering positions of the triangle vertices and the pixel radius values are transmitted to a GPU, so that the GPU renders the rounded square box based on the rendering positions of the triangle vertices and the pixel radius values.

2. The method according to claim 1, wherein Triangulating each of the multiple regions to obtain rendering positions of multiple triangle vertices after triangulation includes: Divide the edge area of the quadrilateral and the middle area of the quadrilateral into two right triangles respectively, and obtain rendering positions of the triangle vertices of the two right triangles; The rounded edge area is divided into a plurality of equilateral triangles with side lengths equal to the preset circle radius value, and rendering positions of triangle vertices of the plurality of equilateral triangles are obtained.

3. The method according to claim 1 or 2, wherein: Transmitting the rendering position of the triangle vertex and the pixel radius value to a GPU, comprising: Transmitting the rendering positions of the triangle vertices to the triangle vertex shader of the GPU; The pixel radius values of the triangle vertices are transmitted to the pixel shader of the GPU.

4. The method according to claim 1 or 2, wherein: After transmitting the triangle vertices and the pixel radius value of the triangle to the GPU, the method further includes: A graphics optimization program is started in the GPU so that the graphics optimization program performs soft interpolation coloring on the pixels at the edge of the rounded square box based on the pixel radius value of each pixel in the rounded square box output by the GPU; the pixel radius value of the pixel is the shortest distance from the pixel to the edge of the middle area of the quadrilateral.

5. The method according to claim 4, wherein Based on the pixel radius value of each pixel in the rounded square box output by the GPU, performing soft interpolation coloring on the pixels at the edge of the rounded square box, comprising: Determining a probability that the pixel is an interior pixel and a transparency coefficient of the pixel based on the pixel radius value, the inner edge radius value, and the outer edge radius value; the inner edge radius value and the outer edge radius value are both smaller than the pixel radius value, and the inner edge radius value is smaller than the outer edge radius value; A global preset color used for rendering the rounded square frame is adjusted based on the probability of the internal pixel and the transparency coefficient of the pixel, so that the pixels in the rounded square frame are colored based on the adjusted global preset color.

6. The method according to claim 5, wherein: Determining a probability that the pixel is an interior pixel and a transparency coefficient of the pixel based on the pixel radius value, the inner edge radius value, and the outer edge radius value, including: The probability that the pixel is an internal pixel is determined based on the size relationship between the pixel radius value and the inner edge radius value r1; when the pixel radius value is less than or equal to r1-delta, the probability that the pixel is an internal pixel is 1; when the pixel radius value is greater than or equal to r1+delta, the probability that the pixel is an internal pixel is 0; when the pixel radius value is in the interval range of (r1-delta, r1+delta), the probability that the pixel is an internal pixel is within the interval range of (0, 1), wherein r1 is a positive number less than the preset circle radius value, and delta is a positive number less than the width of one pixel; The transparency coefficient of the pixel is determined based on the size relationship between the pixel radius value and the outer edge radius value r2; when the pixel radius value is greater than or equal to r2-delta, the transparency coefficient of the pixel is a coefficient of 0 indicating complete transparency; when the pixel radius value is less than or equal to r2-delta, the transparency coefficient of the pixel is a coefficient of 1 indicating opacity; when the pixel radius value is in the interval range of (r2-delta, r2+delta), the transparency coefficient of the pixel is within the interval range of (0, 1), wherein r2 is a positive number greater than the inner edge radius value and less than the preset circle radius value.

7. The method according to claim 5 or 6, wherein: The global preset color includes an internal color and a stroke color; adjusting the global preset color used for rendering the rounded square frame based on the probability of the internal pixels and the transparency coefficient of the pixels, so as to color the pixels in the rounded square frame based on the adjusted global preset color, includes: Calculating a processed color of the pixel based on the probability that the pixel is an interior pixel, the interior color, and the stroke color; Calculating a processed transparency of the pixel based on a transparency coefficient of the pixel and an original transparency output by the GPU; The pixels in the rounded square frame are rendered based on the processed colors of the pixels and the processed transparency of the pixels.

8. A map rendering method, wherein: include: Get map rendering data; When rendering a map based on the map rendering data, a background in the shape of a rounded square frame is added to the display objects on the map based on the method described in any one of claims 1 to 7.

9. A rendering device for a rounded square frame, wherein: include: CPU and GPU; The CPU divides the rounded square frame to be rendered into a plurality of regions, performs triangulation on each of the plurality of regions to obtain triangle vertices of a plurality of triangles, assigns a pixel radius value to each of the triangle vertices, and transmits the triangle vertices and the pixel radius values to the GPU; The multiple areas include: four rounded edge areas, four quadrilateral edge areas located between the four rounded edge areas, and a quadrilateral middle area located in the middle of the rounded square frame; the rounded edge areas are shaped like a quarter circle with a radius equal to a preset circle radius; the vertices of the triangles are located at the edges of the rounded square frame and the edges of the quadrilateral middle area, respectively; the radius of the vertices of the triangles located at the edges of the rounded square frame is a preset circle radius, and the radius of the vertices of the triangles located at the edges of the quadrilateral middle area is 0; The GPU draws the rounded square box based on triangle vertices of the triangle and the pixel radius value.

10. The apparatus according to claim 9, wherein The GPU performs soft interpolation coloring on the pixels at the edge of the rounded square frame based on the pixel radius value of each pixel in the rounded square frame; the pixel radius value of the pixel is the shortest distance from the pixel to the edge of the middle area of the quadrilateral.

Images