Rendering method and device, computer equipment and storage medium

Abstract

The invention relates to a rendering method and device, computer equipment and a storage medium, and the method comprises the steps: obtaining a fillet parameter, and determining a reference graph according to the fillet parameter and a central point of an initial graph; and rendering the initial graph according to the reference graph to obtain a target graph. By using the rendering method provided by the invention, the efficiency of rendering the initial graph is relatively high.

Description

Technical Field

[0001] The present application relates to the field of graphics processing technology, and in particular to a rendering method, apparatus, computer equipment and storage medium. Background Art

[0002] With the development of computer technology, page view drawing technology is more and more widely used, among which UGUI (Unity Graphical User Interface) technology is a commonly used page drawing technology. In the process of using UGUI technology to develop page views, it is inevitable to use rectangular views with rounded corners and outlines to optimize page display effects.

[0003] In traditional technology, when using UGUI technology for front-end page development, Shader technology is usually used to add rounded corners and outline effects to rectangular components.

[0004] However, the conventional method of adding rounded corners and outlines to rectangular components is inefficient. Summary of the invention

[0005] Based on this, it is necessary to provide a rendering method, device, computer equipment and storage medium that can improve the efficiency of adding rounded corners and contour line effects to rectangular components in response to the above technical problems.

[0006] In a first aspect, the present application provides a rendering method, the method comprising:

[0007] Obtain fillet parameters, and determine the reference circle based on the fillet parameters and the center point of the initial figure;

[0008] The target graphic is obtained by rendering the initial graphic according to the reference circle.

[0009] In one embodiment, rendering the initial graphic according to the reference circle to obtain the target graphic includes:

[0010] The center point of the initial figure is taken as the coordinate origin, and the initial figure is folded in an axisymmetric manner to obtain the folded initial figure;

[0011] The folded initial figure is cut according to the reference circle to obtain the target figure.

[0012] In one embodiment, the folding operation includes any one of left folding, right folding, up folding, and down folding, or a combination of any one of the following:

[0013] Combination flip of left fold and up fold;

[0014] Combination flip of left fold and bottom fold;

[0015] Combination flip of right fold and up fold;

[0016] Combination flip of right fold and bottom fold.

[0017] In one embodiment, the folded initial graphic is clipped according to the reference circle to obtain the target graphic, including:

[0018] Determine the overlapping area between the reference circle and the folded initial figure;

[0019] Cutting other areas outside the overlapping area in the folded initial figure to obtain a cut figure;

[0020] The cropped graphics are expanded in an axisymmetric manner to obtain the target graphics.

[0021] In a second aspect, the present application provides a rendering method, the method comprising:

[0022] Obtain contour parameters, and determine the contour line corresponding to the initial figure according to the contour parameters;

[0023] The target graphic is obtained by rendering the initial graphic according to the contour line.

[0024] In one embodiment, rendering the initial graphic according to the contour line to obtain the target graphic includes:

[0025] Determine the display area of ​​the initial graphics and the display area of ​​the contour lines;

[0026] The target graphic is determined according to the color of the contour line, the display area of ​​the initial graphic and the display area of ​​the contour line.

[0027] In one embodiment, determining the target graphic according to the color of the contour line, the display area of ​​the initial graphic and the display area of ​​the contour line includes:

[0028] Determine a first mark corresponding to the initial graphic display area according to the position of the initial graphic display area; determine a second mark corresponding to the outline display area according to the position of the outline display area;

[0029] According to the colors of the first mark, the second mark and the outline, the display area of ​​the outline and the display area of ​​the initial graphic are rendered to obtain the target graphic.

[0030] In a third aspect, the present application provides a rendering method, the method comprising:

[0031] Obtain rendering parameters; wherein the rendering parameters include rounded corner parameters and outline parameters;

[0032] Determine a target rendering process from a first rendering process and a second rendering process according to the rendering parameters; wherein the first rendering process is used to add rounded corners to the initial graphic according to the rounded corner parameters, and the second rendering process is used to add contour lines to the initial graphic according to the contour parameters;

[0033] The initial graphics are rendered according to the target rendering process to obtain the target graphics.

[0034] In one embodiment, the first rendering process is the steps of the method provided in the first aspect, and the second rendering process is the steps of the method provided in the second aspect.

[0035] In a fourth aspect, the present application further provides a rendering device, the device comprising:

[0036] A determination module is used to obtain fillet parameters and determine a reference circle according to the rendering parameters and the center point of the initial graphic;

[0037] The rendering module is used to render the initial figure according to the reference circle to obtain the target figure.

[0038] In a fifth aspect, the present application further provides a rendering device, the device comprising:

[0039] A determination module is used to obtain contour parameters and determine the contour line corresponding to the initial figure according to the contour parameters;

[0040] The rendering module is used to render the initial graphic according to the contour line to obtain the target graphic.

[0041] In a sixth aspect, the present application further provides a rendering device, the device comprising:

[0042] An acquisition module is used to acquire rendering parameters, wherein the rendering parameters include rounded corner parameters and outline parameters;

[0043] A determination module, used to determine a target rendering process from a first rendering process and a second rendering process according to a rendering parameter; wherein the first rendering process is used to add rounded corners to an initial graphic according to the rounded corner parameter, and the second rendering process is used to add a contour line to the initial graphic according to the contour line parameter;

[0044] The rendering module is used to render the initial graphics according to the target rendering process to obtain the target graphics.

[0045] In a seventh aspect, the present application further provides a computer device, comprising a memory and a processor, wherein the memory stores a computer program, and when the processor executes the computer program, the steps of the method provided in the first, second and third aspects above are implemented.

[0046] In an eighth aspect, the present application further provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the method provided in the first, second and third aspects above.

[0047] The rendering method, device, computer equipment and storage medium described above, the method obtains fillet parameters, and determines a reference circle according to the fillet parameters and the center point of the initial figure; the initial figure is rendered according to the reference circle to obtain a target figure. In this embodiment, the method of determining the reference circle and rendering the initial figure according to the reference circle is easy to implement, by quickly and accurately determining the reference circle according to the obtained fillet parameters and the center point of the initial figure, and quickly rendering the initial figure according to the reference circle to obtain the target figure, thereby reducing the use of computing resources in the computer device, and further improving the efficiency and fluency of rendering the initial figure. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] Figure 1 A schematic diagram of a step flow chart of a rendering method in an embodiment;

[0049] Figure 2 A schematic flowchart of the steps of a rendering method in another embodiment;

[0050] Figure 3 A schematic flowchart of the steps of a rendering method in another embodiment;

[0051] Figure 4 A schematic diagram of an initial graphic after adding a rounded corner effect in one embodiment;

[0052] Figure 5 A schematic diagram of an initial graphic after adding a rounded corner effect in another embodiment;

[0053] Figure 6 A schematic flowchart of the steps of a rendering method in another embodiment;

[0054] Figure 7 A schematic flowchart of the steps of a rendering method in another embodiment;

[0055] Figure 8 A schematic flowchart of the steps of a rendering method in another embodiment;

[0056] Fig. 9 A schematic diagram of an initial graphic after adding a contour line effect in one embodiment;

[0057] Fig.10 A schematic flowchart of the steps of a rendering method in another embodiment;

[0058] Fig.11A schematic diagram of an initial graphic after adding both rounded corner effect and outline effect in one embodiment;

[0059] Fig.12 A schematic flowchart of the steps of a rendering method in another embodiment;

[0060] Fig.13 A schematic diagram of a process of developing a user interface using UGUI in one embodiment;

[0061] Fig.14 is a schematic diagram of the structure of a rendering device in one embodiment;

[0062] Fig.15 FIG. 4 is a diagram showing the internal structure of a computer device in one embodiment. DETAILED DESCRIPTION

[0063] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0064] The serial numbers assigned to the components in this application, such as "first", "second", etc., are only used to distinguish the objects described and do not have any order or technical meaning.

[0065] First of all, before specifically introducing the technical solutions of the disclosed embodiments of the present application, the background technology or technical evolution context on which the embodiments of the present application are based is introduced. With the development of computer technology, page view drawing technology is more and more widely used, among which UGUI (Unity Graphical User Interface, user interface system) technology is a commonly used page drawing calculation. UGUI is a real-time 3D interactive content creation and operation platform. At present, most of the software that displays three-dimensional model effects on the terminal needs to use UGUI technology to develop corresponding user interfaces. In the process of using UGUI technology for page view development, it is inevitable to use rectangular views with rounded corners and outlines to optimize pages. In traditional technology, in the process of using UGUI technology for front-end page development, Shader technology is used to add rounded corners and outline effects to rectangular components. However, the solution of adding rounded corners and outline effects to rectangular components using traditional technology is complex and inefficient. In this regard, the present application provides a rendering method.

[0066] The technical solution of the present application and how the technical solution of the present application solves the technical problem are described in detail below with specific embodiments.

[0067] The rendering method provided in the present application can be applied to computer devices, and the computer devices may be, but are not limited to, industrial computers, laptops, and tablet computers.

[0068] In one embodiment, Figure 1 As shown, a rendering method is provided. This embodiment is described by applying the method to a computer device. In this embodiment, the method may include the following steps:

[0069] Step 100: Obtain fillet parameters, and determine a reference circle according to the fillet parameters and the center point of the initial figure.

[0070] The rounded corner parameter is used to characterize the radius of the rounded corners required when the user adds rounded corners to the initial graphic. The rounded corner parameter can be input by the user in real time, or can be preset by the user and stored in the computer device. The initial graphic is the graphic to be rendered, and the initial graphic can be a rectangle, such as a rectangle or a square. This embodiment does not limit the specific structure of the initial graphic, and the user can set it according to actual needs.

[0071] When the computer device needs to render the initial graphic (add a rounded corner effect to the initial graphic), the computer device obtains the rounded corner parameters. For the initial graphic to be rendered, the computer device determines the center point of the initial graphic. When the initial graphic is a rectangle, the center point of the initial graphic is the intersection of the diagonals of the rectangle. After determining the center point of the initial graphic, the computer device determines a reference circle based on the rounded corner parameters and the center point of the initial graphic. Specifically, the computer device uses the center point of the initial circle as the center point of the reference circle, that is, the center point of the reference circle coincides with the center point of the initial circle; the radius of the reference circle is determined based on the rounded corner parameters, so that the reference circle can be determined. Different rounded corner parameters have different methods for determining the radius of the reference circle based on the rounded corner parameters. This embodiment does not limit the specific method for determining the radius of the reference circle based on the rounded corner parameters, as long as its function can be achieved.

[0072] In an optional embodiment, when the fillet parameter is the fillet radian, the computer device determines the radius corresponding to the fillet radian according to the fillet radian, and determines the radius corresponding to the fillet radian as the radius of the reference circle.

[0073] In another optional embodiment, when the fillet parameters are the fillet arc length and the fillet angle, the computer device calculates the radius corresponding to the fillet arc length according to the fillet arc and the fillet angle, and determines the radius corresponding to the fillet arc length as the radius of the reference circle.

[0074] Step 110: Render the initial graphic according to the reference circle to obtain the target graphic.

[0075] After obtaining the reference circle, the computer device uses the reference circle to render the initial graphic, that is, adds a rounded corner effect to the initial graphic according to the reference circle to obtain a target graphic. The target graphic is a graphic after the rounded corner effect is added to the initial graphic. This embodiment does not limit the specific method of rendering the initial graphic according to the reference circle to obtain the target graphic, as long as its function can be achieved.

[0076] In an optional embodiment, the computer device makes the reference circle coincide with the center point of the initial graphic, and crops the area outside the overlapping area between the reference circle and the initial graphic, thereby obtaining a target graphic with rounded corners added to the initial graphic.

[0077] The rendering method provided in the embodiment of the present application obtains fillet parameters, and determines a reference circle according to the fillet parameters and the center point of the initial figure; and renders the initial figure according to the reference circle to obtain a target figure. In this embodiment, the method of determining a reference circle and rendering the initial figure according to the reference circle is easy to implement. By quickly and accurately determining the reference circle according to the obtained fillet parameters and the center point of the initial figure, the initial figure can be quickly rendered according to the reference circle to obtain the target figure, thereby reducing the use of computing resources in the computer device, and further improving the efficiency and fluency of rendering the initial figure.

[0078] In one embodiment, Figure 2 As shown, it is related to an implementation method of rendering an initial graphic according to a reference circle to obtain a target graphic, and the steps of the implementation method include:

[0079] Step 200: Taking the center point of the initial figure as the coordinate origin, and performing a folding operation on the initial figure in an axisymmetric manner to obtain a folded initial figure.

[0080] The computer device uses the center point of the initial graphic to be rendered as the coordinate origin, and performs a folding operation on the initial graphic in an axisymmetric manner to obtain the folded initial graphic. Folding the initial graphic in an axisymmetric manner means folding the initial graphic along a straight line passing through the coordinate origin, and the graphics on both sides of the straight line can completely overlap. In the process of folding the initial graphic, the coordinate origin of the initial graphic will not change, that is, the coordinate origin of the initial graphic after folding is consistent with the position of the coordinate origin before folding. This embodiment does not limit the folding operation, as long as its function can be achieved.

[0081] In one embodiment, the folding operation includes any one of left folding, right folding, up folding, and down folding, or a combination of any one of the following foldings: a combination of left folding and up folding; a combination of left folding and down folding; a combination of right folding and up folding; a combination of right folding and down folding.

[0082] Left folding means folding the initial figure to the left along the straight line passing through the coordinate origin; right folding means folding the initial figure to the right along the straight line passing through the coordinate origin; the straight line passing through the coordinate origin used by left folding and right folding is the same. Up folding means folding the initial figure upward along the straight line passing through the coordinate origin; down folding means folding the initial figure downward along the straight line passing through the coordinate origin; the straight line passing through the coordinate origin used by up folding and down folding is the same. The straight lines passing through the coordinate origin used by left folding and up folding are perpendicular to each other.

[0083] Step 210: Cut the folded initial shape according to the reference circle to obtain a target shape.

[0084] After obtaining the folded initial graphic, the computer device performs a cropping process on the folded initial graphic according to the reference graphic to obtain a target graphic with rounded corners added to the initial graphic.

[0085] In this embodiment, the initial graphic after folding is obtained by cutting the initial graphic in an axisymmetric manner; the initial graphic after folding is cut according to the reference circle. Cutting the initial graphic after folding can reduce the computing resources used in cutting and improve the cutting efficiency, thereby improving the efficiency of rendering the initial graphic to obtain the target graphic.

[0086] In one embodiment, Figure 3 As shown, it involves cutting the folded initial figure according to the reference circle to obtain an implementation method of the target figure, and the steps of the implementation method include:

[0087] Step 300: determine the overlapping area between the reference circle and the folded initial figure.

[0088] The center point of the reference circle is the center point of the initial figure, and the coordinate origin of the folded initial figure is the center point of the initial figure, so the reference figure and the folded initial figure overlap. The computer device determines the overlapping area of ​​the reference figure and the folded initial figure, that is, the position information of the overlapping area of ​​the reference figure and the folded initial figure.

[0089] Step 310: cropping other areas outside the overlapping area in the folded initial figure to obtain a cropped figure.

[0090] After obtaining the overlapping area, the computer device crops the area outside the overlapping area in the folded initial figure, that is, determines the area in the folded initial figure that does not overlap with the reference figure, removes the non-overlapping area in the folded initial figure, and obtains the cropped figure.

[0091] In an optional embodiment, the computer device may match pixel points on the reference graphic with pixel points on the folded initial graphic, and use the area where the pixel points of the folded initial graphic can find matching pixel points on the reference graphic as the overlapping area.

[0092] Step 320: Expand the cropped graphics in an axisymmetric manner to obtain a target graphics.

[0093] After obtaining the cropped graphics, the computer device performs an expansion operation on the cropped graphics in an axisymmetric manner to obtain a target graphics. The expansion operation corresponds to the folding operation in the above embodiment. Assuming that the folding operation is left folding, that is, the initial graphics are folded to the left according to the straight line passing through the coordinate origin, the expansion operation is to fold the graphics folded to the left in the cropped graphics back (expand). If the folding operation is upward folding, that is, the initial graphics are folded upward according to the straight line passing through the coordinate origin, the expansion operation is to fold the cropped graphics to the graphics above and then fold them back (expand).

[0094] In this embodiment, by determining the overlapping area between the reference figure and the folded initial figure, the area of ​​the folded initial figure other than the overlapping area is cropped to obtain the cropped figure; the cropped figure is unfolded by an unfolding operation corresponding to the folding operation to obtain the target figure. This method of determining the target figure is quick and easy to implement, and can improve the efficiency of rendering the initial figure.

[0095] In an optional embodiment, the folding operation used is a combination of an upward folding and a right folding operation, that is, when the initial figure is a rectangle, the initial figure is first folded upward along a straight line passing through the coordinate origin and parallel to the long side of the rectangle; then the initial figure after this folding is folded to the right along a straight line passing through the coordinate origin and parallel to the short side of the rectangle to obtain the folded initial figure. The upper right corner of the folded initial figure, that is, the other areas of the folded initial figure except the overlapping area, is cut to obtain a cut figure; the cut figure is expanded according to the expansion operation corresponding to the folding operation to obtain a target figure with rounded corners added to all four corners. In this way, all four corners of the initial figure can be cut in one cut, which greatly reduces the computing resources used in the cutting process and improves the efficiency of adding rounded corners to the initial figure.

[0096] In an optional embodiment, after adding a rounded corner effect to the rectangle, Figure 4 As shown. Set the radius of the reference circle to be the same as the side length of the square, and add rounded corners to the square. Figure 5 The circle shown.

[0097] See also Figure 6 In one embodiment of the present application, a rendering method is provided. In this embodiment, the method is described by applying the method to a computer device. In this embodiment, the method may include the following steps:

[0098] Step 600: Obtain contour parameters, and determine the contour line corresponding to the initial figure according to the contour parameters.

[0099] The contour parameters are used to characterize the relevant parameters of the contour line added by the user to the initial graphic. The contour parameters may include parameters such as the width of the contour line, the length of the contour line, or the color of the contour line. The contour parameters may be input by the user in real time, or may be pre-set by the user and stored in the computer device. The description of the initial graphic can refer to the specific description in the above embodiment, which will not be repeated here.

[0100] When the computer device needs to render the initial graphic (add a contour effect to the initial graphic), the contour parameters are obtained. For the initial graphic to be rendered, after obtaining the contour parameters, the computer device determines the contour added to the initial graphic according to the contour parameters, that is, the size, shape and color of the contour added to the initial graphic determined according to the contour parameters. This embodiment does not limit the specific method of determining the contour corresponding to the initial graphic according to the contour parameters, as long as its function can be achieved.

[0101] Step 610: Render the initial graphic according to the contour line to obtain the target graphic.

[0102] After obtaining the contour line, the computer device uses the contour line to render the initial graphic, that is, adds a contour line effect to the initial graphic according to the contour line to obtain a target graphic. The target graphic is a graphic after the contour line effect is added to the initial graphic. This embodiment does not limit the specific method of rendering the initial graphic according to the contour line, as long as its function can be achieved.

[0103] The rendering method provided in the embodiment of the present application obtains contour parameters, and determines the contour line corresponding to the initial graphic according to the contour parameters; and renders the initial graphic according to the contour line to obtain the target graphic. In this embodiment, the contour line is determined according to the contour parameters, and the contour line can be used to add the contour line to the initial graphic to obtain the target graphic. In this way, the determination of the target graphic is quick and easy to implement, and the rendering of the initial graphic can be realized by using a rendering queue, which can improve the efficiency of rendering the initial graphic.

[0104] In one embodiment, Figure 7 As shown, it is related to an implementation method of rendering an initial graphic according to a contour line to obtain a target graphic, and the steps of the implementation method include:

[0105] Step 700: Determine the display area of ​​the initial graphic and the display area of ​​the contour line.

[0106] When the computer device renders the initial graphic according to the contour line, it determines the display area of ​​the initial graphic, that is, determines the location information of the initial graphic to be rendered. After determining the contour line, the computer device can determine the display area of ​​the contour line according to the parameters of the size and width of the contour line, that is, the location information of the contour line that needs to be added around the initial graphic.

[0107] Step 710: Determine the target graphic according to the color of the contour line, the display area of ​​the initial graphic and the display area of ​​the contour line.

[0108] After determining the display area of ​​the initial graphic and the display area of ​​the outline, the computer device renders the display area of ​​the initial graphic and the display area of ​​the outline according to the color of the determined outline to determine the target graphic.

[0109] In an optional embodiment, if the display area of ​​the initial graphic is not colored by default, the target graphic is directly determined based on the color of the outline, the display area of ​​the initial graphic, and the display area of ​​the outline. If the user needs to add color to the display area of ​​the initial graphic, the outline parameters acquired by the computer device include the color of the initial graphic set by the user, and the target graphic is determined based on the color of the initial graphic, the color of the outline, the display area of ​​the initial graphic, and the display area of ​​the outline.

[0110] In this embodiment, the target graphic can be quickly and accurately determined based on the color of the contour line and the determined display area of ​​the initial graphic and the display area of ​​the contour line, thereby improving the efficiency of rendering the initial graphic.

[0111] In one embodiment, Figure 8 As shown, it involves an implementation method of determining a target graphic according to the color of the contour line, the display area of ​​the initial graphic and the display area of ​​the contour line, and the steps of the implementation method include:

[0112] Step 800: Determine a first mark corresponding to the display area of ​​the initial graphic according to the position of the display area of ​​the initial graphic; and determine a second mark corresponding to the display area of ​​the contour line according to the position of the display area of ​​the contour line.

[0113] After obtaining the display area of ​​the initial graphic, the computer device adds a first mark to the display area of ​​the initial graphic according to the position of the display area of ​​the initial graphic; after obtaining the display area of ​​the contour line, the computer device adds a second mark to the display area of ​​the contour line according to the position of the display area of ​​the contour line. The forms of the first mark and the second mark can be the same or different. Exemplarily. The forms of the first mark and the second mark are both weights set by the user, that is, the user assigns a first weight to the display area of ​​the initial graphic and a second weight to the display area of ​​the contour line. For example, the user assigns a pixel value of 1 to each pixel in the display area of ​​the initial graphic and assigns a pixel value of 0 to each pixel in the display area of ​​the contour line. This embodiment does not limit the forms of the added first mark and the second mark, as long as their functions can be achieved.

[0114] Step 810: Render the display area of ​​the outline and the display area of ​​the initial graphic according to the colors of the first mark, the second mark and the outline to obtain a target graphic.

[0115] After determining the first mark of the display area of ​​the initial graphic and the second mark of the display area of ​​the contour line, the computer device renders the display area of ​​the contour line and the display area of ​​the initial graphic according to the colors of the first mark, the second mark and the contour line to obtain the target graphic. That is, when the computer device detects the second mark, it can determine that the position is the display area of ​​the contour line, and then the rendering effect required for the contour line is used for the position, that is, the color of the contour line is added to the position of the detected second mark; when the computer device detects the first mark, it can determine that the position is the display area of ​​the initial graphic, and then the rendering effect required for the initial graphic is used for the position; if the contour parameters obtained by the computer device include the color set for the display area of ​​the initial graphic, that is, the color of the initial graphic, then the color of the initial graphic is added to the position of the detected first mark.

[0116] In this embodiment, a first mark is set for the display area of ​​the initial graphic and a second mark is set for the display area of ​​the contour line. When the display area of ​​the initial graphic and the display area of ​​the contour line are subsequently rendered, it is directly detected whether it is the first mark or the second mark. This allows the display area of ​​the initial graphic and the display area of ​​the contour line to be rendered simultaneously using one rendering queue, thereby improving the efficiency of adding contour line effects to the initial graphic.

[0117] In an optional embodiment, the graphic after adding the outline effect to the rectangle is as follows: Fig. 9 shown. Fig. 9 The darker area around the middle rectangular frame is the contour area.

[0118] See also Fig.10In one embodiment, a rendering method is provided. This embodiment is described by applying the method to a computer device. In this embodiment, the method may include the following steps:

[0119] Step 101, obtaining rendering parameters; wherein the rendering parameters include fillet parameters and outline parameters;

[0120] The rendering parameters are used to characterize the parameters of various effects added by the user to the initial graphics. The rendering parameters may include rounded corner parameters and outline parameters. The description of the rounded corner parameters and outline parameters can refer to the specific description in the above embodiment, which will not be repeated here. The rendering parameters may be input by the user in real time, or may be pre-set by the user and stored in the computer device.

[0121] When the computer device needs to render the initial graphic (add rounded corner effect and outline effect to the initial graphic), it obtains the rendering parameters.

[0122] Step 102, determining a target rendering process from a first rendering process and a second rendering process according to rendering parameters; wherein the first rendering process is used to add rounded corners to an initial graphic according to rounded corner parameters, and the second rendering process is used to add contour lines to the initial graphic according to contour parameters.

[0123] The first rendering process refers to a specific method of adding a rounded corner effect to an initial graphic according to the rounded corner parameter; the second rendering process refers to a specific method of adding a contour line effect to an initial graphic according to the contour parameter. After determining the rendering parameter, the computer device selects a rendering process corresponding to the rendering parameter from the first rendering process and the second rendering process according to the rendering parameter as the target rendering process. In other words, if the rendering parameter includes both the rounded corner parameter and the contour parameter, the first rendering process and the second rendering process are both the target rendering process.

[0124] In an optional embodiment, if the acquired rendering parameters only include rounded corner parameters, the first rendering process is determined as the target rendering process; if the acquired rendering parameters only include outline parameters, the second rendering process is determined as the target rendering process.

[0125] Step 103: Render the initial graphics according to the target rendering process to obtain the target graphics.

[0126] After determining the target rendering process, the computer device renders the initial graphic according to the target rendering process to obtain the target graphic. In this embodiment, the target rendering process includes a first rendering process and a second rendering process, that is, the computer device needs to add both a rounded corner effect and a contour line effect to the initial graphic. Whether to add a rounded corner effect to the initial image first or to add a contour line effect to the initial graphic first, that is, whether to perform the first rendering process first or the second rendering process first can be selected according to the needs of the user, and this embodiment does not limit this. If the user hopes that the contour line in the target graphic finally obtained also has a rounded corner effect, the second rendering process is first performed to add a contour line to the initial graphic; the first rendering process is performed for the initial graphic with the contour line effect added, and the rounded corner effect is added to the initial graphic with the contour line effect added, to obtain the target graphic. If the user hopes to add a rounded corner effect only to the initial graphic, and the contour line has no rounded corner effect, the first rendering process is first performed to add a rounded corner effect to the initial graphic; the second rendering process is performed for the initial graphic with the rounded corner effect added, and the contour line effect is added to the initial graphic with the rounded corner effect added.

[0127] In this embodiment, by obtaining rendering parameters including rounded corner parameters and contour parameters, the target graphics are rendered using the first rendering process and the second rendering process. In this way, both rounded corner effects and contour line effects can be added to the initial graphics, making the rendering method more practical. In addition, the user can freely combine and select the order of the first rendering process and the second rendering process according to their own needs, which can render the initial graphics more conveniently and quickly, and improve the rendering efficiency.

[0128] In one embodiment, the first rendering process includes the following steps: Figure 1 , Figure 2 and Figure 3 The rendering method provided by the embodiment shown in the figure; the second rendering process includes the following steps: Figure 6 , Figure 7 and Figure 8 The illustrated embodiment provides a rendering method.

[0129] In an optional embodiment, the second rendering process is performed first, and then the target graphics obtained by the first rendering process are as follows: Fig.11 As shown, the outline added to the initial shape in the target shape also has a rounded effect.

[0130] In one embodiment, Fig.12 As shown, an embodiment of the present application provides a rendering method, the steps of the method comprising:

[0131] Step 121, obtaining rendering parameters; the rendering parameters include fillet parameters and / or outline parameters;

[0132] The rendering parameter may be at least one of a rounding parameter and a contour parameter.

[0133] Step 122, determining a target rendering process from a first rendering process and a second rendering process according to the rendering parameters; the first rendering process is used to add rounded corners to the initial graphic according to the rounded corner parameters; the second rendering process is used to add contour lines to the initial graphic according to the contour parameters;

[0134] Step 123, the first rendering process includes: determining a reference circle according to the fillet parameters and the center point of the initial figure; taking the center point of the initial figure as the coordinate origin, and flipping the initial figure in an axisymmetric manner; obtaining the flipped initial figure; determining the overlapping area between the reference figure and the flipped initial figure; cropping the other areas of the flipped initial figure except the overlapping area to obtain a cropped figure; unfolding the cropped figure in an axisymmetric manner to obtain a target figure.

[0135] Step 124, the second rendering process includes: determining the display area of ​​the initial graphic and the display area of ​​the contour line according to the relevant parameters of the contour line in the contour parameters; setting a first mark for the display area of ​​the initial graphic according to the position of the display area of ​​the initial graphic; setting a second mark for the display area of ​​the contour line according to the position of the display area of ​​the contour line; rendering the display area of ​​the initial graphic and the display area of ​​the contour line according to the contour line color, the color of the initial graphic, the first mark and the second mark in the contour parameters to obtain the target graphic.

[0136] In an optional embodiment, the process of using UGUI to develop a user interface is as follows: Fig.13 As shown, an operation script is created to manage the functional operations on the page. When it is necessary to add rounded corners and / or outline effects to the rectangle component, the management script is obtained in the operation script and mounted on the rectangle component; the rendering parameters (rounded corner parameters and / or outline parameters) are input in the operation script through the Shader technology, and the Shader is mounted on the management script; the first rendering process and / or the second rendering process are implemented through the operation script.

[0137] It should be understood that, although the various steps in the flowcharts involved in the above-mentioned embodiments are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear explanation in this article, the execution of these steps does not have a strict order restriction, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-mentioned embodiments can include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily to be carried out in sequence, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.

[0138] Based on the same inventive concept, the embodiment of the present application also provides a rendering device for implementing the above-mentioned rendering method. The implementation solution provided by the device to solve the problem is similar to the implementation solution recorded in the above-mentioned method, so the specific limitations in one or more rendering device embodiments provided below can refer to the limitations on the rendering method above, and will not be repeated here.

[0139] In one embodiment, Fig.14 As shown, a rendering device 10 is provided, comprising: a determination module 11 and a rendering module 12, wherein:

[0140] The determination module 11 is used to obtain fillet parameters and determine a reference circle according to the rendering parameters and the center point of the initial graphic.

[0141] The rendering module 12 is used to render the initial graphic according to the reference circle to obtain the target graphic.

[0142] In one embodiment, the rendering module 12 includes a folding unit and a cutting unit. The folding unit is used to use the center point of the initial figure as the coordinate origin and fold the initial figure in an axisymmetric manner to obtain the folded initial figure. The cutting unit is used to cut the folded initial figure according to the reference circle to obtain the target figure.

[0143] In one embodiment, the folding operation includes any one of left folding, right folding, up folding, and down folding, or a combination of any one of the following foldings: a combination of left folding and up folding; a combination of left folding and down folding; a combination of right folding and up folding; a combination of right folding and down folding.

[0144] In one embodiment, the cropping unit is specifically used to determine the overlapping area between the reference circle and the folded initial figure; crop other areas outside the overlapping area in the folded initial figure to obtain a cropped figure; and expand the cropped figure in an axially symmetrical manner to obtain a target figure.

[0145] In one embodiment, the determination module 11 is further used to obtain contour parameters and determine the contour line corresponding to the initial graphic according to the rendering parameters. The rendering module 12 is further used to render the initial graphic according to the contour line to obtain the target graphic.

[0146] In one embodiment, the rendering module 12 includes a determination unit, which is used to determine the display area of ​​the initial graphic and the display area of ​​the contour line; and determine the target graphic according to the color of the contour line, the display area of ​​the initial graphic and the display area of ​​the contour line.

[0147] In one embodiment, the determination unit is specifically used to determine a first mark corresponding to the display area of ​​the initial graphic according to the position of the display area of ​​the initial graphic; determine a second mark corresponding to the display area of ​​the contour line according to the position of the display area of ​​the contour line; render the display area of ​​the contour line and the display area of ​​the initial graphic according to the colors of the first mark, the second mark and the contour line to obtain a target graphic.

[0148] In one embodiment, the rendering device further includes an acquisition module; the acquisition module is used to acquire rendering parameters; wherein the rendering parameters include rounded corner parameters and contour parameters. The determination module 11 is also used to determine a target rendering process from a first rendering process and a second rendering process according to the rendering parameters; wherein the first rendering process is used to add rounded corners to the initial graphic according to the rounded corner parameters, and the second rendering process is used to add contour lines to the initial graphic according to the contour parameters. The rendering module 12 is also used to render the initial graphic according to the target rendering process to obtain a target graphic.

[0149] Each module in the above rendering device can be implemented in whole or in part by software, hardware or a combination thereof. Each module can be embedded in or independent of a processor in a computer device in the form of hardware, or can be stored in a memory in a computer device in the form of software, so that the processor can call and execute operations corresponding to each module.

[0150] In one embodiment, a computer device is provided. The computer device may be a terminal, and its internal structure diagram may be as follows: Fig.15As shown. The computer device includes a processor, a memory, a communication interface, a display screen and an input device connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner can be achieved through WIFI, a mobile cellular network, NFC (near field communication) or other technologies. When the computer program is executed by the processor, a rendering method is implemented. The display screen of the computer device can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device can be a touch layer covered on the display screen, or a button, a trackball or a touch pad set on the computer device housing, or an external keyboard, touch pad or mouse, etc.

[0151] Those skilled in the art will understand that Fig.15 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0152] In one embodiment, a computer device is provided, including a memory and a processor, wherein a computer program is stored in the memory, and when the processor executes the computer program, the following steps are implemented:

[0153] Obtain fillet parameters, and determine the reference circle based on the fillet parameters and the center point of the initial figure;

[0154] The target graphic is obtained by rendering the initial graphic according to the reference circle.

[0155] In one embodiment, when the processor executes the computer program, the following steps are also implemented: taking the center point of the initial figure as the coordinate origin, and folding the initial figure in an axially symmetrical manner to obtain the folded initial figure; and cropping the folded initial figure according to the reference circle to obtain the target figure.

[0156] In one embodiment, the folding operation includes any one of left folding, right folding, up folding, and down folding, or a combination of any one of the following foldings: a combination of left folding and up folding; a combination of left folding and down folding; a combination of right folding and up folding; a combination of right folding and down folding.

[0157] In one embodiment, when the processor executes the computer program, the following steps are also implemented: determining the overlapping area between the reference circle and the folded initial figure; cropping other areas outside the overlapping area in the folded initial figure to obtain a cropped figure; and expanding the cropped figure in an axially symmetrical manner to obtain a target figure.

[0158] In one embodiment, when the processor executes the computer program, the processor further implements the following steps:

[0159] Obtain contour parameters, and determine the contour line corresponding to the initial figure according to the contour parameters;

[0160] The target graphic is obtained by rendering the initial graphic according to the contour line.

[0161] In one embodiment, when the processor executes the computer program, the following steps are also implemented: determining the display area of ​​the initial graphic and the display area of ​​the contour line; determining the target graphic according to the color of the contour line, the display area of ​​the initial graphic and the display area of ​​the contour line.

[0162] In one embodiment, when the processor executes the computer program, the following steps are also implemented: according to the position of the display area of ​​the initial graphic, a first mark corresponding to the display area of ​​the initial graphic is determined; according to the position of the display area of ​​the contour line, a second mark corresponding to the display area of ​​the contour line is determined; according to the color of the first mark, the second mark and the contour line, the display area of ​​the contour line and the display area of ​​the initial graphic are rendered to obtain the target graphic.

[0163] In one embodiment, when the processor executes the computer program, the processor further implements the following steps:

[0164] Obtain rendering parameters; wherein the rendering parameters include rounded corner parameters and outline parameters;

[0165] Determine a target rendering process from a first rendering process and a second rendering process according to the rendering parameters; wherein the first rendering process is used to add rounded corners to the initial graphic according to the rounded corner parameters, and the second rendering process is used to add contour lines to the initial graphic according to the contour parameters;

[0166] The initial graphics are rendered according to the target rendering process to obtain the target graphics.

[0167] In one embodiment, a computer readable storage medium is provided, on which a computer program is stored, and when the computer program is executed by a processor, the following steps are implemented:

[0168] Obtain fillet parameters, and determine the reference circle based on the fillet parameters and the center point of the initial figure;

[0169] The target graphic is obtained by rendering the initial graphic according to the reference circle.

[0170] In one embodiment, when the computer program is executed by the processor, the following steps are also implemented: the center point of the initial figure is used as the coordinate origin, and the initial figure is folded in an axially symmetrical manner to obtain the folded initial figure; the folded initial figure is cropped according to the reference circle to obtain the target figure.

[0171] In one embodiment, the folding operation includes any one of left folding, right folding, up folding, and down folding, or a combination of any one of the following foldings: a combination of left folding and up folding; a combination of left folding and down folding; a combination of right folding and up folding; a combination of right folding and down folding.

[0172] In one embodiment, when the computer program is executed by the processor, the following steps are also implemented: determining the overlapping area between the reference circle and the folded initial figure; cropping other areas outside the overlapping area in the folded initial figure to obtain a cropped figure; and expanding the cropped figure in an axially symmetrical manner to obtain a target figure.

[0173] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:

[0174] Obtain contour parameters, and determine the contour line corresponding to the initial figure according to the contour parameters;

[0175] The target graphic is obtained by rendering the initial graphic according to the contour line.

[0176] In one embodiment, when the computer program is executed by the processor, the following steps are also implemented: determining the display area of ​​the initial graphic and the display area of ​​the contour line; determining the target graphic according to the color of the contour line, the display area of ​​the initial graphic and the display area of ​​the contour line.

[0177] In one embodiment, when the computer program is executed by the processor, the following steps are also implemented: according to the position of the display area of ​​the initial graphic, a first mark corresponding to the display area of ​​the initial graphic is determined; according to the position of the display area of ​​the contour line, a second mark corresponding to the display area of ​​the contour line is determined; according to the color of the first mark, the second mark and the contour line, the display area of ​​the contour line and the display area of ​​the initial graphic are rendered to obtain the target graphic.

[0178] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:

[0179] Obtain rendering parameters; wherein the rendering parameters include rounded corner parameters and outline parameters;

[0180] Determine a target rendering process from a first rendering process and a second rendering process according to the rendering parameters; wherein the first rendering process is used to add rounded corners to the initial graphic according to the rounded corner parameters, and the second rendering process is used to add contour lines to the initial graphic according to the contour parameters;

[0181] The initial graphics are rendered according to the target rendering process to obtain the target graphics.

[0182] In one embodiment, a computer program product is provided, comprising a computer program, which, when executed by a processor, implements the following steps:

[0183] Obtain fillet parameters, and determine the reference circle based on the fillet parameters and the center point of the initial figure;

[0184] The target graphic is obtained by rendering the initial graphic according to the reference circle.

[0185] In one embodiment, when the computer program is executed by the processor, the following steps are also implemented: the center point of the initial figure is used as the coordinate origin, and the initial figure is folded in an axially symmetrical manner to obtain the folded initial figure; the folded initial figure is cropped according to the reference circle to obtain the target figure.

[0186] In one embodiment, the folding operation includes any one of left folding, right folding, up folding, and down folding, or a combination of any one of the following foldings: a combination of left folding and up folding; a combination of left folding and down folding; a combination of right folding and up folding; a combination of right folding and down folding.

[0187] In one embodiment, when the computer program is executed by the processor, the following steps are also implemented: determining the overlapping area between the reference circle and the folded initial figure; cropping other areas outside the overlapping area in the folded initial figure to obtain a cropped figure; and expanding the cropped figure in an axially symmetrical manner to obtain a target figure.

[0188] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:

[0189] Obtain contour parameters, and determine the contour line corresponding to the initial figure according to the contour parameters;

[0190] The target graphic is obtained by rendering the initial graphic according to the contour line.

[0191] In one embodiment, when the computer program is executed by the processor, the following steps are also implemented: determining the display area of ​​the initial graphic and the display area of ​​the contour line; determining the target graphic according to the color of the contour line, the display area of ​​the initial graphic and the display area of ​​the contour line.

[0192] In one embodiment, when the computer program is executed by the processor, the following steps are also implemented: according to the position of the display area of ​​the initial graphic, a first mark corresponding to the display area of ​​the initial graphic is determined; according to the position of the display area of ​​the contour line, a second mark corresponding to the display area of ​​the contour line is determined; according to the color of the first mark, the second mark and the contour line, the display area of ​​the contour line and the display area of ​​the initial graphic are rendered to obtain the target graphic.

[0193] In one embodiment, when the computer program is executed by a processor, the following steps are also implemented:

[0194] Obtain rendering parameters; wherein the rendering parameters include rounded corner parameters and outline parameters;

[0195] Determine a target rendering process from a first rendering process and a second rendering process according to the rendering parameters; wherein the first rendering process is used to add rounded corners to the initial graphic according to the rounded corner parameters, and the second rendering process is used to add contour lines to the initial graphic according to the contour parameters;

[0196] The initial graphics are rendered according to the target rendering process to obtain the target graphics.

[0197] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to the memory, database or other medium used in the embodiments provided in the present application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetoresistive random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. As an illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM). The database involved in each embodiment provided in this application may include at least one of a relational database and a non-relational database. Non-relational databases may include distributed databases based on blockchains, etc., but are not limited to this. The processor involved in each embodiment provided in this application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic device, a data processing logic device based on quantum computing, etc., but are not limited to this.

[0198] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0199] The above-described embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the present application. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the attached claims.

Claims

1. A rendering method, characterized in that: The method comprises: Obtaining fillet parameters, and determining a reference circle according to the fillet parameters and the center point of the initial figure; The initial graphic is rendered according to the reference circle to obtain a target graphic.

2. The method according to claim 1, characterized in that The step of rendering the initial graphic according to the reference circle to obtain a target graphic includes: Taking the center point of the initial figure as the coordinate origin, and performing a folding operation on the initial figure in an axisymmetric manner to obtain a folded initial figure; The folded initial figure is cut according to the reference circle to obtain the target figure.

3. The method according to claim 2, characterized in that The folding operation includes any one of left folding, right folding, upward folding, and downward folding, or a combination of any one of the following: The combined flipping of the left folding and the upward folding; The combined flipping of the left fold and the bottom fold; The combined flipping of the right folding and the upward folding; The right fold and the lower fold are combined and turned over.

4. The method according to claim 2 or 3, characterized in that: The step of cutting the folded initial graphic according to the reference circle to obtain the target graphic includes: Determine an overlapping area between the reference circle and the folded initial figure; Cutting other areas outside the overlapping area in the folded initial figure to obtain a cut figure; The cropped graphic is expanded in the axisymmetric manner to obtain the target graphic.

5. A rendering method, characterized in that: The method comprises: Acquire contour parameters, and determine a contour line corresponding to the initial figure according to the contour parameters; The initial graphic is rendered according to the contour line to obtain a target graphic.

6. The method according to claim 5, characterized in that The step of rendering the initial graphic according to the contour line to obtain a target graphic includes: Determine a display area of ​​the initial graphic and a display area of ​​the contour line; The target graphic is determined according to the color of the contour line, the display area of ​​the initial graphic and the display area of ​​the contour line.

7. The method according to claim 6, characterized in that The step of determining the target graphic according to the color of the contour line, the display area of ​​the initial graphic, and the display area of ​​the contour line comprises: Determine a first mark corresponding to the display area of ​​the initial graphic according to the position of the display area of ​​the initial graphic; determine a second mark corresponding to the display area of ​​the contour line according to the position of the display area of ​​the contour line; According to the colors of the first mark, the second mark, and the outline, the display area of ​​the outline and the display area of ​​the initial graphic are rendered to obtain the target graphic.

8. A rendering method, characterized in that: The method comprises: Acquire rendering parameters; wherein the rendering parameters include rounded corner parameters and outline parameters; Determine a target rendering process from a first rendering process and a second rendering process according to the rendering parameters; wherein the first rendering process is used to add rounded corners to an initial graphic according to the rounded corner parameters, and the second rendering process is used to add contour lines to the initial graphic according to the contour parameters; The initial graphics are rendered according to the target rendering process to obtain the target graphics.

9. The method according to claim 8, characterized in that The first rendering process comprises the steps of the method according to any one of claims 1 to 4; the second rendering process comprises the steps of the method according to any one of claims 5 to 7.

10. A rendering device, characterized in that: The device comprises: A determination module, used to obtain rounded corner parameters and determine a reference circle according to the rendering parameters and the center point of the initial graphic; A rendering module is used to render the initial graphic according to the reference circle to obtain a target graphic.

11. A rendering device, characterized in that: The device comprises: A determination module, used to obtain contour parameters and determine the contour line corresponding to the initial figure according to the contour parameters; A rendering module is used to render the initial graphic according to the contour line to obtain a target graphic.

12. A rendering device, characterized in that: The device comprises: An acquisition module, used for acquiring rendering parameters; wherein the rendering parameters include rounded corner parameters and outline parameters; A determination module, configured to determine a target rendering process from a first rendering process and a second rendering process according to the rendering parameters; wherein the first rendering process is configured to add rounded corners to an initial graphic according to the rounded corner parameters, and the second rendering process is configured to add a contour line to the initial graphic according to the contour line parameters; A rendering module is used to render the initial graphics according to the target rendering process to obtain the target graphics.

13. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 9 are implemented.

14. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 9 are implemented.

Images