Graph drawing method and device, electronic equipment and storage medium

Abstract

The invention discloses a graph drawing method and device, electronic equipment and a storage medium, relates to the technical field of image processing, and is used for drawing a graph with a contour line on an electronic map. The method comprises the steps of obtaining drawing information of a to-be-drawn target graph; the target graph comprises a main body area and a stroke area; the drawing information is used for indicating an outer side boundary line of the stroking area and a boundary line between the main body area and the stroking area; determining a first type of pixel points located in the main body area and a second type of pixel points located in the stroke area based on the position relation between each to-be-drawn pixel point and the boundary line in a to-be-drawn area defined by the outer side boundary line; and drawing the color of the first type of pixel points into a first preset color, and drawing the color of the second type of pixel points into a second preset color.

Description

Technical Field

[0001] The present application relates to the field of image processing technology, and in particular to a graphics drawing method, device, electronic device and storage medium. Background Art

[0002] In scenarios where it is necessary to draw contoured graphics, such as drawing contoured line segments and polyline segments in an electronic map to represent the user's movement route, the user can customize the polyline line width, contour width, polyline fill color, contour fill color and other information through the graphics drawing tool.

[0003] When drawing a graphic with an outline in an electronic map, the simplest method is to first draw a wider graphic of one color, and then draw a narrower graphic of another color on this graphic. In this way, you can finally present a graphic with an outline. For example, first draw a red line with a width of 20 pixels (px) ( Figure 1 The black part in the middle represents the red) filled polyline, and then draw a green ( Figure 1 The shaded part in the middle represents the green filled polyline, which eventually presents a green polyline with a red outline. The implementation logic of this method is simple, but depth interference may occur when performing depth testing, such as Figure 1 The situation shown is that the graphics drawn by this method will have a bad display effect in actual applications, affecting the user experience.

[0004] Therefore, how to draw graphics with contour lines to obtain better display effects on electronic maps is a problem that needs to be solved. Summary of the invention

[0005] The present application provides a graphics drawing method, device, electronic device and storage medium for drawing graphics with contour lines on an electronic map.

[0006] In order to achieve the above technical objectives, this application adopts the following technical solutions:

[0007] In a first aspect, an embodiment of the present application provides a graphics drawing method, the method comprising:

[0008] Obtaining drawing information of a target graphic to be drawn; the target graphic includes a main body area and a stroke area; the drawing information is used to indicate an outer boundary line of the stroke area and a boundary line between the main body area and the stroke area;

[0009] Based on the positional relationship between each pixel point to be drawn and the boundary line in the area to be drawn surrounded by the outer boundary line, determine the first type of pixel points located in the main area and the second type of pixel points located in the stroke area;

[0010] The color of the first type of pixel points is painted into a first preset color, and the color of the second type of pixel points is painted into a second preset color.

[0011] The technical solution provided by the present application brings at least the following beneficial effects: the stroke area and the main body area can be determined by drawing information, and the pixels in the area to be drawn are divided into a first type of pixels located in the main body area and a second type of pixels located in the stroke area, and then the first type of pixels are drawn into a first preset color of the pre-set main body area, and the second type of pixels are drawn into a second preset color of the pre-set stroke area, thereby realizing the drawing process of the graphics with contour lines. Among them, the stroke area is the contour area of ​​the displayed graphics, and the stroke area generally surrounds the main body area, and the stroke area and the main body area constitute the overall area of ​​the target graphics. During the drawing process, for the pixels in the area to be drawn, there is only one drawing process, and there is no need to draw two colors of graphics superposition, there will be no depth interference phenomenon, and the display effect is better. In addition, the present application has only one drawing process for each pixel point. Compared with drawing two colors of graphics superposition to realize the drawing process of graphics with contour lines, the workload that the device needs to handle is greatly reduced, and the processing speed is improved.

[0012] In one possible implementation, the drawing information includes position information assigned to multiple key points on the outer boundary line; based on the positional relationship between each pixel to be drawn and the boundary line in the area to be drawn surrounded by the outer boundary line, the first type of pixel points located in the main area and the second type of pixel points located in the stroke area are determined, including: based on the position information of multiple key points and the distribution of each pixel to be drawn in the area to be drawn, the position information of each pixel to be drawn is determined; according to the position information of the pixel to be drawn and the positional relationship between the pixel to be drawn and the boundary line, the first type of pixel points located in the main area and the second type of pixel points located in the stroke area are determined.

[0013] In a possible implementation, the target graphic is a linear graphic, the position information of the key point includes a mark value Y, and the mark value Y is used to represent the distance between the key point and the axis of symmetry in the length direction of the target graphic; the position information of the pixel to be drawn includes a mark value y, and the mark value y is used to represent the distance between the pixel to be drawn and the axis of symmetry; based on the position information of multiple key points and the distribution of each pixel to be drawn in the area to be drawn, the position information of each pixel to be drawn is determined, including: according to the mark value Y of the target key point and the mark value y0 of the end point of the symmetry axis, and the distribution of each pixel to be drawn in the area to be drawn, the pixel to be drawn in the area to be drawn is interpolated to obtain the mark value y of each pixel to be drawn; the target key point includes the corresponding maximum mark value Y1 and / or minimum mark value Y1 among the multiple key points -1 The key point.

[0014] In one possible implementation, based on the position information of the pixel to be drawn and the positional relationship between the pixel to be drawn and the boundary line, the first type of pixel located in the main area and the second type of pixel located in the stroke area are determined, including: for each pixel to be drawn, based on the position information of the pixel to be drawn and the positional relationship between the pixel to be drawn and the boundary line, determining whether the pixel to be drawn falls within the first value range or the second value range, the first value range and the second value range being obtained by dividing the overall value range of the mark value according to the boundary line; if the mark value y falls within the first value range, determining that the pixel to be drawn is a first type of pixel; if the mark value y falls within the second value range, determining that the pixel to be drawn is a second type of pixel.

[0015] In one possible implementation, the drawing information includes junction identification information for indicating a junction line; the junction identification information includes a target mark value, and the target mark value is a mark value of a pixel point to be drawn on the junction line; the method also includes: based on the junction identification information, determining the minimum value and the maximum value between two target mark values ​​corresponding to two junction lines of the main area and the stroke area as two endpoint values ​​of the first value range respectively; and using the mark value and the target mark value of the target key point as the two endpoint values ​​of the second value range respectively.

[0016] In one possible implementation, the target graphic includes a linear graphic, and the outer boundary line of the stroked area includes a first boundary line and a second boundary line located at both ends of the target graphic; the multiple key points include end key points located on the first boundary line and / or the second boundary line, and the end key points are determined according to a preset end style.

[0017] In one possible implementation, the target graphic includes a broken line graphic, and the outer boundary lines of the stroked area include a third boundary line and a fourth boundary line located in the broken line corner area; the multiple key points include corner key points located on the third boundary line and / or the fourth boundary line, and the corner key points are determined according to a preset corner style.

[0018] In a second aspect, an embodiment of the present application provides a graphics drawing device, including:

[0019] An acquisition module is used to acquire drawing information of a target graphic to be drawn; the target graphic includes a main body area and a stroke area; the drawing information is used to indicate an outer boundary line of the stroke area and a boundary line between the main body area and the stroke area;

[0020] A processing module, for determining first-category pixel points located in the main area and second-category pixel points located in the stroke area based on the positional relationship between each pixel point to be drawn and the boundary line in the area to be drawn surrounded by the outer boundary line;

[0021] The processing module is further used to paint the color of the first type of pixel points into a first preset color, and paint the color of the second type of pixel points into a second preset color.

[0022] In one possible implementation, the drawing information includes position information assigned to multiple key points on the outer boundary line; the processing module is specifically used to: determine the position information of each pixel to be drawn based on the position information of the multiple key points and the distribution of each pixel to be drawn in the area to be drawn; determine the first type of pixel located in the main area and the second type of pixel located in the stroke area according to the position information of the pixel to be drawn and the positional relationship between the pixel to be drawn and the boundary line.

[0023] In a possible implementation, the target graphic is a linear graphic, the position information of the key point includes a mark value Y, and the mark value Y is used to represent the distance between the key point and the axis of symmetry in the length direction of the target graphic; the position information of the pixel point to be drawn includes a mark value y, and the mark value y is used to represent the distance between the pixel point to be drawn and the axis of symmetry; the processing module is specifically used to: interpolate the pixel points to be drawn in the area to be drawn according to the mark value Y of the target key point and the mark value y0 of the endpoint of the axis of symmetry, and the distribution of each pixel point to be drawn in the area to be drawn, so as to obtain the mark value y of each pixel point to be drawn; the target key point includes the corresponding maximum mark value Y1 and / or minimum mark value Y1 among multiple key points -1 The key point.

[0024] In one possible implementation, for each pixel to be drawn, based on the position information of the pixel to be drawn and the positional relationship between the pixel to be drawn and the boundary line, it is determined whether the pixel to be drawn falls within the first value range or the second value range, and the first value range and the second value range are obtained by dividing the overall value range of the mark value according to the boundary line; if the mark value y falls within the first value range, the pixel to be drawn is determined to be a first-category pixel; if the mark value y falls within the second value range, the pixel to be drawn is determined to be a second-category pixel.

[0025] In one possible implementation, the drawing information includes junction identification information for indicating a junction line; the junction identification information includes a target mark value, and the target mark value is a mark value of a pixel point to be drawn on the junction line; the processing module is further used to: based on the junction identification information, determine the minimum value and the maximum value between two target mark values ​​corresponding to two junction lines of the main area and the stroke area as two endpoint values ​​of the first value range; and use the mark value of the target key point and the target mark value as two endpoint values ​​of the second value range. 。

[0026] In one possible implementation, the target graphic includes a linear graphic, and the outer boundary line of the stroked area includes a first boundary line and a second boundary line located at both ends of the target graphic; the multiple key points include end key points located on the first boundary line and / or the second boundary line, and the end key points are determined according to a preset end style.

[0027] In one possible implementation, the target graphic includes a broken line graphic, and the outer boundary lines of the stroked area include a third boundary line and a fourth boundary line located in the broken line corner area; the multiple key points include corner key points located on the third boundary line and / or the fourth boundary line, and the corner key points are determined according to a preset corner style.

[0028] In a third aspect, the present application provides an electronic device, including a memory, a processor, and a computer program stored in the memory, wherein the processor executes the computer program to implement any one of the graphics drawing methods provided in the first aspect.

[0029] In a fourth aspect, the present application provides a computer-readable storage medium, which stores computer-executable instructions. When the computer instructions are executed by a processor, any one of the graphics drawing methods provided in the first aspect above is implemented.

[0030] In a fifth aspect, the present application provides a computer program product, which includes computer instructions, and when the computer instructions are executed by a processor, any one of the graphics drawing methods provided in the first aspect is implemented.

[0031] For the specific description of the third to fifth aspects and their various implementations in this application, reference may be made to the detailed description in the first aspect and its various implementations; and for the beneficial effects of the third to fifth aspects and their various implementations, reference may be made to the beneficial effects analysis in the first aspect and its various implementations, which will not be repeated here.

[0032] These and other aspects of the present application will become more apparent from the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0033] Figure 1 A schematic diagram of a graphic drawing effect provided in an embodiment of the present application;

[0034] Figure 2 A schematic diagram of the structure of a graphics drawing system applicable to a graphics drawing method provided in an embodiment of the present application;

[0035] Figure 3 A schematic diagram of the structure of a computing device provided in an embodiment of the present application;

[0036] Figure 4 A flowchart of a graphics drawing method provided in an embodiment of the present application;

[0037] Figure 5 A schematic diagram of an application scenario of a graphics drawing method provided in an embodiment of the present application Figure 1 ;

[0038] Figure 6 A schematic diagram of an application scenario of a graphics drawing method provided in an embodiment of the present application Figure 2 ;

[0039] Figure 7 A schematic diagram of an application scenario of a graphics drawing method provided in an embodiment of the present application Figure 3 ;

[0040] Figure 8 A schematic diagram of an application scenario of a graphics drawing method provided in an embodiment of the present application Figure 4 ;

[0041] Fig. 9 A schematic diagram of an application scenario of a graphics drawing method provided in an embodiment of the present application Figure 5 ;

[0042] Fig.10 A schematic diagram of an application scenario of a graphics drawing method provided in an embodiment of the present application Figure 6 ;

[0043] Fig.11 A schematic diagram of an application scenario of a graphics drawing method provided in an embodiment of the present application Figure 7 ;

[0044] Fig.12 A schematic diagram of another graphic drawing effect provided in an embodiment of the present application;

[0045] Fig.13 A logical schematic diagram of a graphics drawing method provided in an embodiment of the present application;

[0046] Fig.14 A schematic diagram of the structure of a graphics drawing device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0047] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0048] It should be noted that, in the embodiments of the present application, words such as "exemplary" or "for example" are used to indicate examples, illustrations or explanations. Any embodiment or design described as "exemplary" or "for example" in the embodiments of the present application should not be interpreted as being more preferred or more advantageous than other embodiments or designs. Specifically, the use of words such as "exemplary" or "for example" is intended to present related concepts in a concrete way. The terms "first" and "second" are used for descriptive purposes only and cannot be understood as indicating or implying relative importance or implicitly indicating the number of indicated technical features. Thus, the features defined as "first" and "second" may explicitly or implicitly include one or more of the features.

[0049] In the description of this application, unless otherwise specified, " / " means "or", for example, A / B can mean A or B. "And / or" in this article is only a description of the association relationship of associated objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, "at least one" means one or more, and "multiple" means two or more.

[0050] As described in the background art, the graphics with contour lines drawn by the method used in the related art may have the following problems: Figure 1 The poor display effect shown, so a drawing method with better display effect and capable of drawing graphics with contour lines is needed.

[0051] Based on this, the present application provides a method for drawing graphics. The stroke area and the main body area can be determined through drawing information, and the pixels in the area to be drawn are divided into a first type of pixel located in the main body area and a second type of pixel located in the stroke area, and then the first type of pixel is drawn into a first preset color of the main body area, and the second type of pixel is drawn into a second preset color of the stroke area, thereby realizing the drawing process of the graphics with contour lines. Among them, the stroke area is the contour area of ​​the displayed graphics, and the stroke area generally surrounds the main body area. The stroke area and the main body area constitute the overall area of ​​the target graphics, that is, the area to be drawn. During the drawing process, for the pixels in the area to be drawn, there is only one drawing process, and there is no need to draw two colors of graphics superposition, and there will be no depth interference phenomenon, and the display effect is better. In addition, the present application has only one drawing process for each pixel. Compared with drawing two colors of graphics superposition to realize the drawing process of graphics with contour lines, the workload that the device needs to handle is greatly reduced, and the processing speed is improved.

[0052] The graphics drawing method provided in the present application can be executed by the electronic device 10. Specifically, a graphics drawing application is installed in the electronic device 10, and the electronic device 10 can display a graphics drawing window and receive drawing information such as a preset total width of the graphics, a preset outline width, a graphics fill color, and an outline fill color input by the user, and then the electronic device 10 draws a graphic with an outline according to the drawing information input by the user and the original endpoints on the linear graphics to be drawn. Specifically, the electronic device 10 may include a central processing unit (CPU) and / or a graphics processing unit (GPU), and the graphics drawing process may be executed by the CPU or the GPU alone, or the graphics drawing process may also be completed by the CPU and the GPU in collaboration.

[0053] In other embodiments, the graphics drawing method provided by the present application can also be applied to Figure 2 In the graphics drawing system 1 shown. The graphics drawing system 1 includes an electronic device 10 and a server 20. The electronic device receives an instruction to draw a graphic, and sends the set drawing information to the server 20. After the server 20 draws the original graphic based on the drawing information, it sends the relevant information of the finished graphic with contour lines to the electronic device 10, so that the electronic device 10 displays the finished graphic with contour lines.

[0054] In a specific implementation, the graphic with contour lines that the electronic device 10 needs to draw is a route between two points in an electronic map. The electronic device 10 is installed with an electronic map application, and can display an electronic map display window. The electronic device 10 only needs to obtain two position coordinates, and according to preset drawing information, it can draw a route graphic with contour lines between the two position coordinates in the electronic map. The user can configure the drawing information in the electronic map application, and the electronic device 10 displays the drawn route graphic with contour lines in the electronic map display window.

[0055] Based on this, the electronic device 10 may be equipped with a positioning device for determining the position coordinates of the route through which the person moves. The position coordinates determined by the positioning device may include actual space coordinates such as longitude, latitude, and altitude. The electronic device 10 determines the three-dimensional coordinates corresponding to the position coordinates in the electronic map based on the acquired position coordinates and the map data of the electronic map, and then the electronic device 10 can draw the route of the person based on the three-dimensional coordinates corresponding to the person in the electronic map to obtain a route graph with contour lines. The positioning device may exist independently of the electronic device 10, and the embodiments of the present application are not limited to this. In an embodiment where the positioning device is independent of the electronic device 10, the positioning device may be connected to the electronic device 10 and / or the server 20 in a wired or wireless manner, and then send the actual space coordinates determined by it to the electronic device 10 and / or the server 20.

[0056] In some embodiments, the electronic device 10 may include a display device, or the electronic device 10 is connected to a display device, so that the electronic device 10 can display the drawn graphics with contour lines through the display device.

[0057] In some embodiments, the electronic device 10 may be any device capable of drawing graphics. For example, the electronic device 10 may be a personal computer (PC), a notebook computer, a mobile device, a tablet computer, a laptop computer, etc. The embodiments of the present application do not limit the specific form of the electronic device 10.

[0058] In some embodiments, server 20 may be a single server or a server cluster.

[0059] The basic hardware structures of the electronic device 10 and the server 20 are similar, both of which include Figure 3 The computing device shown in FIG. Figure 3 Taking the computing device shown as an example, the hardware structure of the electronic device 10 and the server 20 is introduced.

[0060] like Figure 3 As shown, the computing device may include a processor 301, a memory 302, a communication interface 303, and a bus 304. The processor 301, the memory 302, and the communication interface 303 may be connected via a bus 304.

[0061] The processor 301 is the control center of the computing device, which can be a processor or a general term for multiple processing elements. For example, the processor 301 can be a general-purpose central processing unit (CPU) or other general-purpose processors. Among them, the general-purpose processor can be a microprocessor or any conventional processor.

[0062] As an embodiment, the processor 301 may include one or more CPUs, such as Figure 3 CPU 0 and CPU 1 are shown in .

[0063] The memory 302 may be a read-only memory (ROM) or other type of static storage device that can store static information and instructions, a random access memory (RAM) or other type of dynamic storage device that can store information and instructions, an electrically erasable programmable read-only memory (EEPROM), a disk storage medium or other magnetic storage device, or any other medium that can be used to carry or store desired program code in the form of instructions or data structures and can be accessed by a computer, but is not limited thereto.

[0064] In a possible implementation, the memory 302 may exist independently of the processor 301, and the memory 302 may be connected to the processor 301 via a bus 304 to store instructions or program codes. When the processor 301 calls and executes the instructions or program codes stored in the memory 302, the map matching method provided in the embodiment of the present application can be implemented.

[0065] In another possible implementation, the memory 302 may also be integrated with the processor 301 .

[0066] The communication interface 303 is used for connecting the computing device to other devices through a communication network, and the communication network may be Ethernet, a radio access network (RAN), a wireless local area network (WLAN), etc. The communication interface 303 may include a receiving unit for receiving data and a sending unit for sending data.

[0067] The bus 304 may be an industry standard architecture (ISA) bus, a peripheral component interconnect (PCI) bus, or an extended industry standard architecture (EISA) bus. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 3Only one thick line is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0068] It should be pointed out that Figure 3 The structure shown in the figure does not constitute a limitation on the computing device, except Figure 3 In addition to the components shown, the computing device may include more or fewer components than shown, or combine certain components, or arrange the components differently.

[0069] The implementation of the embodiments of the present application will be described in detail below with reference to the accompanying drawings.

[0070] like Figure 4 As shown, the embodiment of the present application provides a graphics drawing method, which includes the following steps:

[0071] S101, obtaining drawing information of a target graphic to be drawn.

[0072] The target graphic includes a main body area and a stroke area, and the drawing information is used to indicate the outer boundary line of the stroke area and the boundary line between the main body area and the stroke area.

[0073] In some embodiments, the target figure to be drawn corresponds to an original line segment or an original folded line segment. The original line segment is widened along the normal direction to both sides of the original line segment, or the original line segment is widened to both ends to form a preset end style to obtain the target figure. Each line segment of the original folded line segment is widened along the normal direction to both sides of the line segment, or the original folded line segment is widened to both ends to form a preset end style, or each corner of the original folded line segment is determined as a preset corner style to obtain the target figure.

[0074] For example, the target graphic to be drawn is a graphic obtained by widening the line segment along the normal direction of the line segment, and the target graphic to be drawn may also be a broken line segment formed by connecting multiple line segments, and a graphic obtained by widening the broken line segment along the normal direction of each line segment. For another example, the drawing information may include a total line width and an outline width, or the drawing information may include any one of the total line width and the outline width and the ratio between the outline width and the total line width, so that the electronic device can determine the position of the outer boundary line of the stroked area based on the total line width in the drawing information, determine the outline width based on the ratio between the outline width and the total line width and the total line width, and thus determine the position of the boundary line between the main area and the stroked area.

[0075] In some embodiments, the endpoints and inflection points of the original line segment or original broken line segment corresponding to the target graphic to be drawn may be manually drawn by the user, or may be determined based on the spatial coordinates obtained by the electronic device based on the spatial coordinates of the movement of a person.

[0076] In some embodiments, before drawing a target graphic each time, the user manually configures the drawing information, or the user pre-configures the drawing information, so that the electronic device acquires the drawing information of the target graphic to be drawn.

[0077] S102 : Determine first-category pixel points located in the main body area and second-category pixel points located in the stroke area based on the positional relationship between each pixel point to be drawn and the boundary line in the area to be drawn surrounded by the outer boundary line.

[0078] In some embodiments, the drawing information includes position information assigned to multiple key points on the outer boundary line, and the key points are specifically pixels. Step S102 can be specifically implemented as follows: the electronic device determines the position information of each pixel to be drawn based on the position information of the multiple key points and the distribution of each pixel to be drawn in the area to be drawn; the electronic device determines the first type of pixel located in the main area and the second type of pixel located in the stroke area according to the position information of the pixel to be drawn and the positional relationship between the pixel to be drawn and the boundary line.

[0079] Among them, the position information is used to characterize the position of the key point in the area to be drawn. For example, when the GPU performs graphics rendering based on a two-dimensional coordinate system, each pixel to be drawn can be mapped to the two-dimensional coordinate system. Based on this, the position information of the key point can be the two-dimensional pixel coordinates of the key point mapped to the two-dimensional coordinate system. For another example, the position information of the key point can be the two-dimensional pixel coordinates of the key point in the electronic map display window. For another example, the position information of the key point is the two-dimensional pixel coordinates manually set by the user. For another example, the position information of the key point is a mark value set by the user, and the mark value represents that the key point is a pixel point located on the outer boundary line of the target graphic in the electronic map.

[0080] For example, assuming that there are key points A and B on the outer boundary line, according to the distribution of the pixels to be drawn in the area to be drawn, it is determined that there are 9 pixels between key point A and key point B. If the position information assigned to key point A is (1, 0) and the position information assigned to key point B is (0, 0), it can be determined that the position information of the 9 pixels from key point A to key point B are (0.9, 0), (0.8, 0), (0.7, 0), (0.6, 0), (0.5, 0), (0.4, 0), (0.3, 0), (0.2, 0), and (0.1, 0) respectively.

[0081] By assigning position information to key points on the outer boundary line, the electronic device can automatically determine the position information of each pixel to be drawn according to the distribution of the pixel points to be drawn. The user only needs to assign position information to the key points. The operation is simple and the calculation logic of the electronic device is not complicated. The process is easy to implement.

[0082] In some embodiments, the target graphic is a linear graphic (here, the linear graphic refers to a graphic obtained by widening a line segment along the normal direction of the line segment to both sides of the line segment), the position information of the key point includes a mark value Y, and the mark value Y is used to characterize the distance between the key point and the axis of symmetry in the length direction of the target graphic; the position information of the pixel to be drawn includes a mark value y, and the mark value y is used to characterize the distance between the pixel to be drawn and the axis of symmetry; the electronic device determines the position information of each pixel to be drawn based on the position information of multiple key points and the distribution of each pixel to be drawn in the area to be drawn, which can be specifically implemented as follows: the electronic device interpolates the pixel to be drawn in the area to be drawn according to the mark value Y of the target key point and the mark value y0 of the endpoint of the axis of symmetry, as well as the distribution of each pixel to be drawn in the area to be drawn, to obtain the mark value y of each pixel to be drawn; the target key point includes the corresponding maximum mark value Y1 and / or minimum mark value Y1 among the multiple key points. -1 The key point.

[0083] Among them, the key points on the same side of the axis of symmetry have the same label value. For the convenience of calculation, the same width is usually widened on both sides of the line segment. It can be understood that the original line segment is the axis of symmetry in the length direction of the target figure, and the label values ​​of the two key points on both sides of the axis of symmetry can be the same or opposite to each other. Alternatively, if the width widened on both sides of the line segment is different, the label values ​​assigned to the key points on both sides of the line segment are different, and the label values ​​should correspond to the width widened to that side. In addition, the distance between the pixel to be drawn and the axis of symmetry does not represent the pixel distance or actual space distance from the pixel to be drawn to the axis of symmetry. It represents a value corresponding to the distance from the pixel to the axis of symmetry assigned by the user to the pixel. Interpolation of the pixel points means that according to the distribution of the pixel points to be drawn between the two key points, the variables between the label values ​​of the two key points are evenly divided, and then assigned to each pixel to be drawn in turn.

[0084] Since the target figure is obtained by widening a line segment along the normal direction of the line segment to both sides of the line segment, the key points on the same side of the original line segment have the same marking value. Therefore, for the pixel points to be drawn in the area to be drawn, there is no need to pay attention to the position of the pixel point in the length direction of the line segment, but only the distance from the pixel point to the axis of symmetry.

[0085] For example, Figure 5 As shown, line segment AB is the original line segment. After widening the line segment along the normal direction of line segment AB to the same width on both sides, rectangle A1B1B2A2 is obtained. The length of line segment A1A2 is the total width of the target figure. According to the position of the boundary line indicated in the drawing information, it can be determined that the boundary line is Figure 5The middle line segment A3B3 and the line segment A4B4. If the rectangle A1B1B2A2 is finally determined to be the target shape, then the rectangles A1B1B3A3 and A4B4B2A2 are the stroke areas, and the rectangle A3B3B4A4 is the main area. The key points on the outer boundary line are points A1, B1, A2, and B2.

[0086] Example 1: Assume that the mark value Y in the position information assigned to point A1 and point B1 is 1, the mark value Y in the position information assigned to point A2 and point B2 is -1, and the mark value y0 in the position information assigned to point A and point B is 0 (or no mark value can be assigned to point A and point B. Since the same width is widened along both sides of the line segment, point A is the midpoint of line segment A1A2, and point B is the midpoint of line segment B1B2. Point A and point B will naturally be interpolated to 0, and the points on line segment AB will also be interpolated to 0). If the pixel point to be drawn is According to the distribution of , it is determined that there are 9 pixels between point A1 and point A, and there are also 9 pixels between point A2 and point A. Then, from point A to point A1, the mark values ​​y of each pixel to be drawn between point A and point A1 are 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, and 0.9 respectively. From point A to point A2, the mark values ​​y of each pixel to be drawn between point A and point A2 are -0.1, -0.2, -0.3, -0.4, -0.5, -0.6, -0.7, -0.8, and -0.9 respectively.

[0087] Example 2: If the mark value Y in the position information assigned to point A1, point B1, point A2, and point B2 is all 1, and the mark value y0 in the position information assigned to point A and point B is both 2, then from point A to point A1, and from point A to point A2, the mark values ​​y of the 9 pixels to be drawn are 1.9, 1.8, 1.7, 1.6, 1.5, 1.4, 1.3, 1.2, and 1.1 respectively.

[0088] Example 3: If the mark value Y in the position information assigned to point A1 and point B1 is 1, and the mark value Y in the position information assigned to point A2 and point B2 is 0, then from point A1 to point A2, the mark values ​​y of the 19 pixel points between point A1 and point A2 including point A are 0.95, 0.9, 0.85, 0.8, 0.75, 0.7, 0.65, 0.6, 0.55, 0.5, 0.45, 0.4, 0.35, 0.3, 0.25, 0.2, 0.15, 0.1, and 0.05, respectively, among which the mark value y of point A is 0.5.

[0089] By assigning a marking value Y to the key points on the outer boundary line, based on the marking value of the key points and the distribution of the pixels to be drawn, the distance between the pixels to be drawn and the axis of symmetry can be obtained after interpolation of the pixels to be drawn, and then it can be determined whether the pixel is in the main area or the stroke area, which makes it convenient for electronic devices to draw different colors for pixels in different areas.

[0090] In some embodiments, if the widths of the expanded parts on both sides of the original line segment are the same, when assigning position information to key points, if the mark values ​​of the key points on both sides of the axis of symmetry are opposite to each other, then the endpoints of the axis of symmetry (original line segment) may not be assigned mark values.

[0091] In practical applications, for the convenience of calculation, the label value assigned to the key point can be 1 or -1.

[0092] In some embodiments, the electronic device determines the first type of pixel points located in the main area and the second type of pixel points located in the stroke area based on the position information of the pixel points to be drawn and the positional relationship between the pixel points to be drawn and the boundary line. This can be specifically implemented as follows: for each pixel point to be drawn, the electronic device determines whether the pixel point to be drawn falls within the first value range or the second value range based on the position information of the pixel point to be drawn and the positional relationship between the pixel point to be drawn and the boundary line. The first value range and the second value range are obtained by dividing the overall value range of the mark value according to the boundary line; if the mark value y falls within the first value range, the electronic device determines that the pixel point to be drawn is a first type of pixel point; if the mark value y falls within the second value range, the electronic device determines that the pixel point to be drawn is a second type of pixel point.

[0093] Based on the above example one, assuming that the mark values ​​corresponding to the pixels on the boundary line are 0.7 and -0.7, the overall value range of the mark value can be divided into a first value range [-0.7, 0.7], a second value range (0.7, 1] and [-1, -0.7] according to the boundary line. The pixel points to be drawn whose mark values ​​y fall within [-0.7, 0.7] are first-category pixel points, and the pixel points to be drawn whose mark values ​​y fall within (0.7, 1] or [-1, -0.7) are second-category pixel points.

[0094] Based on the above example 2, assuming that the mark value corresponding to the pixel point on the boundary line is 1.3, the overall value range of the mark value can be divided into a first value range [1.3, 2] and a second value range [1, 1.3) according to the boundary line. The pixel points to be drawn whose mark value y falls within [1.3, 2] are first-category pixel points, and the pixel points to be drawn whose mark value y falls within [1, 1.3) are second-category pixel points.

[0095] Based on the above example three, assuming that the mark values ​​corresponding to the pixels on the boundary line are 0.85 and 0.15, the overall value range of the mark value can be divided into a first value range [0.15, 0.85], a second value range (0.85, 1] ​​and [0, 0.15) according to the boundary line. The pixel points to be drawn whose mark values ​​y fall within [0.15, 0.85] are first-category pixel points, and the pixel points to be drawn whose mark values ​​y fall within (0.85, 1] ​​and [0, 0.15) are second-category pixel points.

[0096] It should be understood that the endpoints of the open intervals in the first value range and the second value range in the above examples are only for illustration and can be set to closed intervals according to user needs. For example, the first value range corresponding to Example 1 is (-0.7, 0.7), and the corresponding second value range is [0.7, 1] and [-1, -0.7].

[0097] By dividing the first value range and the second value range and determining the value range into which the pixel to be drawn falls, the region to which the pixel to be drawn belongs can be determined, which facilitates subsequent drawing of different colors for pixels in different regions.

[0098] In some embodiments, the drawing information includes junction identification information for indicating a junction line; the junction identification information includes a target mark value, and the target mark value is a mark value of a pixel point to be drawn on the junction line. The electronic device also determines the minimum value and the maximum value between two target mark values ​​corresponding to two junction lines of the main area and the stroke area as two endpoint values ​​of the first value range based on the junction identification information; the electronic device uses the mark value and the target mark value of the target key point as two endpoint values ​​of the second value range.

[0099] Among them, the drawing information can directly include the boundary identification information, that is, the drawing information directly includes the target mark value, or the drawing information includes the target ratio, the target ratio is used to indicate the ratio between the stroke width and the total line width, and the target ratio can also be used to indicate the ratio between the stroke width and the width of the main area. The electronic device can determine the target mark value based on the target ratio and the mark value of the key point on the outer boundary line.

[0100] For example, Figure 5 As shown in FIG. 1 , assuming that the mark value of the key point A1 is 1, the mark value of the endpoint A of the symmetry axis is 0, the preset total line width is x, and the preset stroke width is y, then the target mark value corresponding to the boundary line between the key point A1 and the endpoint A can be If the mark value of key point A2 is the same as the mark value of key point A1, then the target mark value corresponding to the boundary line between key point A2 and endpoint A is also When the interpolation value of a pixel point is less than the target mark value, it indicates that the pixel point is located in the main area. When the absolute value of the interpolation value of a pixel point is greater than the target mark value, it indicates that the pixel point is located in the stroke area. Figure 5 The target key points in are points A1, B1, A2, and B2. The minimum value between the two target mark values ​​is 0, and the maximum value is the target mark value. The two endpoint values ​​of the first value range are 0 and The two endpoints of the second range are 1 and Alternatively, if the tag values ​​of the key points and key points are opposite to each other, the target tag value can be Absolute value, the two endpoints of the first range are 0 and The two endpoints of the second range are 1 and The absolute value of the mark value of the pixel to be drawn obtained by interpolation can be compared with the two value ranges to determine the area to which the pixel to be drawn belongs.

[0101] When the drawing information includes a target ratio, based on the total line width and stroke width preset in the drawing information, a target mark value that can characterize the boundary between the color of the main area and the color of the stroke area can be determined according to the target ratio. The ratio is fixed, so after the target graphic changes, such as enlarging or shrinking, the target mark value can still be quickly determined based on the target ratio. When the drawing information directly includes a target mark value, the electronic device can determine the first value range and the second value range according to the target mark value, and can also determine which pixels belong to the stroke area and which pixels belong to the main area, and then draw different colors for the pixels in different areas to obtain a graphic with contour lines.

[0102] S103: drawing the color of the first type of pixel points into a first preset color, and drawing the color of the second type of pixel points into a second preset color.

[0103] The first preset color and the second preset color may be included in the drawing information. The purpose of the present application is to draw a target graphic with an outline, so the first preset color and the second preset color are different. For example, the first preset color is red and the second preset color is green, then the final drawing is a red graphic with a green outline.

[0104] In some embodiments, the target graphic includes a linear graphic, and the outer boundary line of the stroked area includes a first boundary line and a second boundary line located at both ends of the target graphic; the multiple key points include end key points located on the first boundary line and / or the second boundary line, and the end key points are determined according to a preset end style.

[0105] The preset cap styles include flat cap style, square cap style and round cap style. The cap styles at both ends of a line segment or a polyline can be the same or different.

[0106] Flat head style Figure 5 The style shown only widens the line segment along the normal direction of the line segment, and does not widen the line segment at the end position along the length direction of the line segment. Figure 5 For example, the first boundary line and the second boundary line are line segment A1A2 and line segment B1B2, and the key points of the ends are points A1, A2, B1, and B2. When the target figure is a figure obtained by widening a line segment to both sides, and the preset end styles corresponding to both ends of the original line segment are flat head styles, that is, Figure 5 In the situation shown, the electronic device will at least determine four key points, namely point A1, point A2, point B1 and point B2.

[0107] Square head style is Figure 6 The style shown is widened along the normal direction of the line segment to both sides of the line segment, and widened at the end position along the length direction of the line segment. The actual widening logic can be: get the two endpoints of the original line segment AB, make a perpendicular line segment of line segment AB at point A and point B respectively, the length of the perpendicular line segment is equal to the total line width, the perpendicular line segment is perpendicularly divided by line segment AB, the endpoints of the two perpendicular line segments are point A1, point A2, point B1, point B2, and then extend line segment A1B1 and line segment A2B2 to the same end by a preset length. It is assumed that line segment A1B1 and line segment A2B2 are extended to both ends by a preset length to obtain point C, point D, point E and point F. The first boundary line and the second boundary line are line segment CD and line segment EF, and the end key points are point C, point D, point E and point F. Figure 6 The key points on the outer boundary line of the target figure shown may include the four end key points, or the key points on the outer boundary line of the target figure may include the four end key points and point A1, point A2, point B1 and point B2.

[0108] Round head style Figure 7 The style shown is to widen the line segment on both sides along the normal direction of the line segment, and take the end of the original line segment as the center of the circle and the width widened to one side of the line segment as the radius length, and draw a semicircle in the length direction of the original line segment. Based on the smoothness requirement of the round head style, a preset number of key points are evenly taken on the semicircle. The higher the smoothness requirement, the more key points are taken on the semicircle. Figure 7For example, both ends of the original line segment are rounded, the key points on the semicircle at one end are point C, point D, point E, point F, and point G, and the key points on the semicircle at the other end are point H, point I, point J, point K, and point L. The first boundary line and the second boundary line are respectively a polyline segment formed by sequentially connecting point A1-point C-point D-point E-point F-point G-point A2 and a polyline segment formed by sequentially connecting point B1-point H-point I-point J-point K-point L-point B2. The key points of the end are point A1, point C, point D, point E, point F, point G, point A2, point B1, point H, point I, point J, point K, point L, and point B2.

[0109] In some embodiments, for the area surrounded by the key points of the end, the user can set the color of this area to be the same as the color of the stroke area, that is, a vertical line segment is drawn at the end point of the original line segment or the original polyline segment, and all the intersection points of the two vertical line segments and the boundary line and the area surrounded by the boundary line will be drawn in the first preset color, and the other areas of the target graphic will be drawn in the second preset color. Figure 6 Taking the target figure shown as an example, the area enclosed by points A3, A4, B4 and B3 will be drawn as the first preset color, and other areas in the target figure will be drawn as the second preset color. Points A3, A4, B4 and B3 are the points on the boundary line.

[0110] In some embodiments, the target graphic includes a broken line graphic (here the broken line graphic represents a broken line segment obtained by connecting multiple line segments in sequence, and each line segment in the broken line segment is widened to both sides of the line segment along the normal direction of the line segment), and the outer boundary line of the stroked area includes a third boundary line and a fourth boundary line located in the broken line corner area; the multiple key points include corner key points located on the third boundary line and / or the fourth boundary line, and the corner key points are determined according to a preset corner style.

[0111] The preset corner styles include flat corner style, rounded corner style and sharp corner style, and the corner styles of different corners of the polyline can be the same or different.

[0112] The flat angle style is Figure 8 In the style shown, at a corner of a broken line segment, the outer boundary lines of the two line segments corresponding to the corner intersect on one side, but do not intersect on the other side. The two endpoints of the two non-intersecting outer boundary lines are connected, and the area between the connecting line and the original broken line segment is drawn, and the intersection of the two outer boundary lines of the camera is determined as the corner key point.

[0113] The rounded corner style is Fig. 9In the style shown, at a corner of a polyline segment, the outer boundary lines of the two line segments corresponding to the corner intersect on one side, but do not intersect on the other side. Then, according to the preset corner smoothness requirement, a circle is drawn with the inflection point as the center and the width widened to one side of the line segment as the radius length to obtain an arc connecting the endpoints of the two non-intersecting outer boundary lines. Based on the smoothness requirement of the rounded corner style, a preset number of key points are evenly taken on the arc. The higher the smoothness requirement, the more key points are taken on the arc. The corner key points include the key points taken on the arc and the intersection of the two intersecting outer boundary lines.

[0114] The sharp corner style is Fig.10 In the style shown, at a corner of a broken line segment, the outer boundary lines of the two line segments corresponding to the corner will intersect on one side, and the outer boundary lines on the other side will not intersect. The two non-intersecting outer boundary lines are extended to intersect, and the intersection point obtained after extension and the intersection point between the two outer boundary lines that will intersect are the corner key points.

[0115] Due to the influence of the width of the line segment expansion and the angle of the line segment intersection, the distance between the intersection point obtained after extension and the inflection point of the polyline segment will have a negative impact on the appearance of the intersection of the lines, drawing details, etc., so the distance between the intersection point obtained after extension and the inflection point of the polyline segment should be controlled. Usually a miter distance threshold is set to Fig.11 For example, when the distance between the intersection point U obtained after extension and the inflection point B of the polyline segment does not exceed the miter distance threshold, the intersection point M between point U and the two outer boundary lines that will intersect is the corner key point; when the distance between the intersection point U obtained after extension and the inflection point B of the polyline segment exceeds the miter distance threshold, a circle is drawn with the inflection point as the center and the miter distance threshold as the radius to obtain two intersection points of the circle and the outer boundary line where point U is located: point W and point X. When drawing a graphic, the color of the pixel points within △WUX will not be drawn.

[0116] The miter distance threshold is set based on the width of the line segment and the angle at which the line segments meet. If the miter distance threshold is set too large, the complexity of graphics drawing will increase. If the miter distance threshold is set too small, details at the intersection of lines will be lost. Users can determine the appropriate miter distance threshold through multiple experiments in advance.

[0117] When color drawing is performed on pixel points in actual application, the area to be drawn is first divided into multiple triangular areas based on multiple key points, or based on multiple key points and the endpoints of the original line segment, or based on multiple key points and the endpoints and inflection points of the original broken line segment, and the triangular areas do not overlap with each other; for each triangular area, the first preset color is drawn for the pixel points belonging to the main area, and the second preset color is drawn for the pixel points belonging to the stroke area, so as to obtain the completed target graphic.

[0118] The specific division examples of the triangular area are as follows:

[0119] When the preset end style is a flat head style with no corners, Figure 5 For example, the two triangular areas divided based on multiple key points can be △A1A2B2 and △A1B2B1. Figure 5 For example, four triangular areas can also be divided based on multiple key points and the endpoints of the original line segment: △A1AB, △A1BB1, △AA2B2 and △AB2B.

[0120] When the preset end style is square and has no corners, Figure 6 For example, two triangular regions divided based on multiple key points may be △CDF and △CFE, or six triangular regions divided based on multiple key points: △CDA1, △CA1A2, △A1B1B2, △A1A2B2, △B1EF, and △B1B2F. Figure 6 For example, six triangular areas can be divided based on multiple key points and the endpoints of the original line segment: △CAD, △CAE, △EAB, △EBF, △FBD and △DBA.

[0121] When the preset end style is round and has no corners, Figure 7 For example, 12 triangular areas can be divided based on multiple key points: △A1CB1, △CDB1, △DEB1, △EFB1, △FGB1, △GA2B1, △B1HA2, △HIA2, △IJA2, △JKA2, △KLA2 and △LB2A2.

[0122] When the preset end style is flat, the polyline segment has only one corner, and the preset corner style is flat, Figure 8 For example, the key points may be: point D, point F, point H, point J, point K, point M, point E, or the key points may also include point A, point B and point C, or the key points may also include point I and point G, and the triangular area is divided based on these key points.

[0123] When the preset end style is flat, the polyline segment has only one corner, and the preset corner style is rounded, Fig. 9 For example, the key points may be: point D, point F, point S, point T, point U, point V, point H, point J, point K, point M, point E, or the key points may also include point A, point B and point C, or the key points may also include point I and point G, and the triangular area is divided based on these key points.

[0124] When the preset end style is flat, the polyline segment has only one corner, and the preset corner style is sharp, Fig.10 For example, when the distance between the intersection point U obtained after extension and the inflection point B of the polyline segment does not exceed the miter distance threshold, the key points may be: point D, point U, point J, point L, point M, point E, or the key points may also include point A, point B, point C, point K, point G, point F and point I, where point F and point I are the endpoints of the outer boundary line before extension. When the distance between the intersection point U obtained after extension and the inflection point B of the polyline segment exceeds the miter distance threshold, the key points may be: point D, point U, point J, point L, point M, point E, or the key points may also include point A, point B, point C, point K, point G, point F and point I, where point F and point I are the endpoints of the outer boundary line before extension. Fig.11 For example, the key points may be: point D, point W, point X, point J, point L, point M, point E, or the key points may also include point A, point B, point C, point K, point G, point F and point I.

[0125] The preset corner styles and the preset end styles can be freely combined. The specific division of the triangular area is the same as the division logic of the triangular area in the above example, and will not be repeated here.

[0126] In summary, Fig.12 is a schematic diagram of the graphics drawing effect of drawing a target graphic using the graphics drawing method of the present application, Fig.12 The black part is the stroke area, and the shadow part is the main area, and there will be no depth interference.

[0127] Figure 4 The technical solution shown brings at least the following beneficial effects: the stroke area and the main body area can be determined by drawing information, and the pixels in the area to be drawn are divided into a first type of pixels located in the main body area and a second type of pixels located in the stroke area, and then the first type of pixels are drawn into a first preset color of the pre-set main body area, and the second type of pixels are drawn into a second preset color of the pre-set stroke area, thereby realizing the drawing process of the graphics with contour lines. Among them, the stroke area is the contour area of ​​the displayed graphics, and the stroke area generally surrounds the main body area, and the stroke area and the main body area constitute the overall area of ​​the target graphics. During the drawing process, for the pixels in the area to be drawn, there is only one drawing process, and it is not necessary to draw two colors of graphics superposition, and there will be no depth interference phenomenon, and the display effect is better. In addition, the present application has only one drawing process for each pixel. Compared with drawing two colors of graphics superposition to realize the drawing process of graphics with contour lines, the workload that the device needs to process is greatly reduced, and the processing speed is improved.

[0128] like Fig.13 As shown, the overall logic of the graphics drawing method provided by the present application is described by taking the above graphics drawing process as being executed collaboratively by the CPU and the GPU:

[0129] First, the CPU calculates the position of the intersection line from the outer boundary line to the symmetry axis, that is, the position where the stroke ends, and uses the target ratio to record the intersection line position. The target ratio corresponding to the intersection lines on the same side is the same, and the target ratio represents the mark value corresponding to the intersection line.

[0130] Secondly, organize the key point data in the CPU. The key point data includes the tag value used to interpolate the pixels to be drawn. Along the normal vector direction of the line segment, extend to the two key points at the farthest places on both sides. All the tag values ​​on one side are assigned 1, and all the tag values ​​on the other side are assigned -1. In some cases, the tag value assigned to the points on the symmetry axis is 0, and the tag values ​​assigned to the key points on the other two sides can all be 1 or -1. The tag value is passed to the GPU vertex shader. In addition to calculating the extended line segment along the normal direction in the CPU, it can also be calculated in the GPU vertex shader. The normal of the original line segment, the offset position of the pixel point, the key point tag value, etc. can also be calculated in the GPU vertex shader.

[0131] Then, during the key point shading stage of the drawing process, the tag value of each key point is passed to the GPU fragment shader;

[0132] Finally, in the fragment shading stage of the drawing process, the GPU fragment shader interpolates the mark value of each fragment (pixel) based on the mark value of each key point, compares the mark value of the fragment with the mark value corresponding to the boundary line, and determines the area to which the fragment belongs. If the fragment belongs to the main area, the GPU fragment shader draws the fragment as the color corresponding to the main area. If the fragment belongs to the stroke area, the GPU fragment shader draws the fragment as the color corresponding to the stroke area.

[0133] The main idea of ​​this solution is to assign mark values ​​to key points, pass the mark values ​​to the GPU fragment shader, and use the interpolation operation of the GPU rasterization stage to interpolate the mark value of each fragment, and then compare it with the mark value corresponding to the boundary line to decide which color to use for drawing.

[0134] The above mainly introduces the solution provided by the embodiment of the present application from the perspective of the method. In order to achieve the above functions, it includes hardware structures and / or software modules corresponding to the execution of each function. It should be easy to realize that the technical goals in this field are combined with the units and algorithm steps of each example described in the embodiments disclosed in this article, and the present application can be implemented in the form of hardware or a combination of hardware and computer software. Whether a function is executed in the form of hardware or computer software driving hardware depends on the specific application and design constraints of the technical solution. Professional and technical goals can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0135] like Fig.14As shown, the embodiment of the present application further provides a graphics drawing device 400 , which includes an acquisition module 401 and a processing module 402 .

[0136] The acquisition module 401 is used to acquire the drawing information of the target graphic to be drawn; the target graphic includes a main area and a stroke area; the drawing information is used to indicate the outer boundary line of the stroke area and the boundary line between the main area and the stroke area; the processing module 402 is used to determine the first type of pixel points located in the main area and the second type of pixel points located in the stroke area based on the positional relationship between each pixel point to be drawn and the boundary line in the area to be drawn surrounded by the outer boundary line; the processing module 402 is also used to draw the color of the first type of pixel points into a first preset color, and draw the color of the second type of pixel points into a second preset color.

[0137] In one possible implementation, the drawing information includes position information assigned to multiple key points on the outer boundary line; the processing module 402 is specifically used to: determine the position information of each pixel to be drawn based on the position information of the multiple key points and the distribution of each pixel to be drawn in the area to be drawn; determine the first type of pixel located in the main area and the second type of pixel located in the stroke area according to the position information of the pixel to be drawn and the positional relationship between the pixel to be drawn and the boundary line.

[0138] In a possible implementation, the target graphic is a linear graphic, the position information of the key point includes a mark value Y, and the mark value Y is used to represent the distance between the key point and the axis of symmetry in the length direction of the target graphic; the position information of the pixel point to be drawn includes a mark value y, and the mark value y is used to represent the distance between the pixel point to be drawn and the axis of symmetry; the processing module 402 is specifically used to: interpolate the pixel points to be drawn in the area to be drawn according to the mark value Y of the target key point and the mark value y0 of the end point of the axis of symmetry, and the distribution of each pixel point to be drawn in the area to be drawn, so as to obtain the mark value y of each pixel point to be drawn; the target key point includes the corresponding maximum mark value Y1 and / or minimum mark value Y1 among multiple key points -1 The key point.

[0139] In one possible implementation, for each pixel to be drawn, based on the position information of the pixel to be drawn and the positional relationship between the pixel to be drawn and the boundary line, it is determined whether the pixel to be drawn falls within the first value range or the second value range, and the first value range and the second value range are obtained by dividing the overall value range of the mark value according to the boundary line; if the mark value y falls within the first value range, the pixel to be drawn is determined to be a first-category pixel; if the mark value y falls within the second value range, the pixel to be drawn is determined to be a second-category pixel.

[0140] In one possible implementation, the drawing information includes junction identification information for indicating a junction line; the junction identification information includes a target mark value, and the target mark value is a mark value of a pixel point to be drawn on the junction line; the processing module 402 is further used to: based on the junction identification information, determine the minimum value and the maximum value between two target mark values ​​corresponding to two junction lines of the main area and the stroke area as two endpoint values ​​of the first value range; and use the mark value of the target key point and the target mark value as two endpoint values ​​of the second value range. 。

[0141] In one possible implementation, the target graphic includes a linear graphic, and the outer boundary line of the stroked area includes a first boundary line and a second boundary line located at both ends of the target graphic; the multiple key points include end key points located on the first boundary line and / or the second boundary line, and the end key points are determined according to a preset end style.

[0142] In one possible implementation, the target graphic includes a broken line graphic, and the outer boundary lines of the stroked area include a third boundary line and a fourth boundary line located in the broken line corner area; the multiple key points include corner key points located on the third boundary line and / or the fourth boundary line, and the corner key points are determined according to a preset corner style.

[0143] It should be noted that Fig.14 The division of modules in the example is schematic and is only a logical function division. There may be other division methods in actual implementation. For example, two or more functions may be integrated into one processing module. The above integrated modules may be implemented in the form of hardware or software function modules.

[0144] Another embodiment of the present application also provides an electronic device, the electronic device includes a memory and a processor; the memory and the processor are coupled; the memory is used to store computer program code, and the computer program code includes computer instructions. When the processor executes the computer instructions, the electronic device executes each step performed by the electronic device in the method flow shown in the above method embodiment.

[0145] by Fig.14 Taking the graphics drawing device 400 as an example, in actual implementation, the acquisition module 401 and the processing module 402 can be implemented by the processor calling the computer program code in the memory. The specific execution process can refer to the description of the above method embodiment part, which will not be repeated here.

[0146] Another embodiment of the present application further provides a computer-readable storage medium, which stores computer instructions. When the computer instructions are executed on an electronic device, the electronic device executes each step executed by the electronic device in the method flow shown in the above method embodiment.

[0147] In another embodiment of the present application, a computer program product is provided. The computer program product includes computer instructions. When the computer instructions are executed on an electronic device, the electronic device executes each step executed by the electronic device in the method flow shown in the above method embodiment.

[0148] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using a software program, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer execution instruction is loaded and executed on the computer, the process or function according to the embodiment of the present application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instruction can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instruction can be transmitted from a website site, computer, server or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (digital subscriber line, DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) mode to another website site, computer, server or data center. The computer-readable storage medium can be any available medium that can be accessed by the computer or a data storage device such as a server, data center, etc. that contains one or more servers that can be integrated with the medium. The available medium can be a magnetic medium (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), etc.

[0149] The above is only a specific implementation of the present application. Those skilled in the art may conceive of changes or substitutions based on the specific implementation provided by the present application, which should all be included in the protection scope of the present application.

Claims

1. A graphics drawing method, characterized in that: include: Acquire drawing information of a target graphic to be drawn; the target graphic includes a main body area and a stroke area; The drawing information is used to indicate the outer boundary line of the stroke area and the boundary line between the main area and the stroke area; Based on the positional relationship between each pixel point to be drawn and the boundary line in the area to be drawn surrounded by the outer boundary line, determine the first type of pixel points located in the main area and the second type of pixel points located in the stroke area; The color of the first type of pixel points is painted into a first preset color, and the color of the second type of pixel points is painted into a second preset color.

2. The graphics drawing method according to claim 1, characterized in that: The drawing information includes position information assigned to a plurality of key points on the outer boundary line; The determining of the first type of pixel points located in the main area and the second type of pixel points located in the stroke area based on the positional relationship between each pixel point to be drawn and the boundary line in the area to be drawn surrounded by the outer boundary line comprises: Based on the position information of the plurality of key points and the distribution of the pixels to be drawn in the area to be drawn, determining the position information of each pixel to be drawn; According to the position information of the pixel points to be drawn and the positional relationship between the pixel points to be drawn and the boundary line, the first type of pixel points located in the main body area and the second type of pixel points located in the stroke area are determined.

3. The graphics drawing method according to claim 2, characterized in that: The target graphic is a linear graphic, the position information of the key point includes a mark value Y, and the mark value Y is used to represent the distance between the key point and the symmetry axis in the length direction of the target graphic; the position information of the pixel point to be drawn includes a mark value y, and the mark value y is used to represent the distance between the pixel point to be drawn and the symmetry axis; the determining the position information of each pixel point to be drawn based on the position information of the multiple key points and the distribution of each pixel point to be drawn in the area to be drawn includes: According to the mark value Y of the target key point and the mark value y0 of the endpoint of the symmetry axis, and the distribution of each pixel point to be drawn in the area to be drawn, the pixel points to be drawn in the area to be drawn are interpolated to obtain the mark value y of each pixel point to be drawn; the target key point includes the corresponding maximum mark value Y1 and / or minimum mark value Y -1 The key point.

4. The graphics drawing method according to claim 3, characterized in that: The determining, according to the position information of the pixel to be drawn and the positional relationship between the pixel to be drawn and the boundary line, the first type of pixel located in the main body area and the second type of pixel located in the stroke area comprises: For each pixel to be drawn, determining, according to position information of the pixel to be drawn and a positional relationship between the pixel to be drawn and the boundary line, whether the pixel to be drawn falls within a first value range or a second value range, wherein the first value range and the second value range are obtained by dividing the overall value range of the mark value according to the boundary line; If the mark value y falls within the first value range, determining that the pixel to be drawn is a pixel of the first type; If the mark value y falls within the second value range, it is determined that the pixel point to be drawn is a pixel point of the second type.

5. The graphics drawing method according to claim 4, characterized in that: The drawing information includes junction identification information for indicating the junction line; the junction identification information includes a target mark value, and the target mark value is a mark value of a pixel point to be drawn on the junction line; The method further comprises: Based on the boundary identification information, the minimum value and the maximum value between the two target mark values ​​corresponding to the two boundary lines of the main area and the stroke area are respectively determined as the two endpoint values ​​of the first value range; the mark value of the target key point and the target mark value are respectively used as the two endpoint values ​​of the second value range.

6. The graphics drawing method according to claim 2, characterized in that: The target graphic includes a linear graphic, and the outer boundary line of the stroke area includes a first boundary line and a second boundary line located at both ends of the target graphic; the multiple key points include end key points located on the first boundary line and / or the second boundary line, and the end key points are determined according to a preset end style.

7. The graphics drawing method according to claim 2 or 6, characterized in that: The target graphic includes a broken line graphic, and the outer boundary lines of the stroke area include a third boundary line and a fourth boundary line located in the broken line corner area; the multiple key points include corner key points located on the third boundary line and / or the fourth boundary line, and the corner key points are determined according to a preset corner style.

8. A graphics drawing device, characterized in that: include: An acquisition module, used to acquire drawing information of a target graphic to be drawn; the target graphic includes a main body area and a stroke area; The drawing information is used to indicate the outer boundary line of the stroke area and the boundary line between the main area and the stroke area; A processing module, configured to determine the first type of pixel points located in the main body area and the second type of pixel points located in the stroke area based on the positional relationship between each pixel point to be drawn and the boundary line in the area to be drawn surrounded by the outer boundary line; The processing module is further used for painting the color of the first type of pixel points into a first preset color, and painting the color of the second type of pixel points into a second preset color.

9. An electronic device comprising a memory, a processor and a computer program stored in the memory, characterized in that: The processor executes the computer program to implement the steps of the method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-executable instructions, and when the computer-executable instructions are executed on a computer, the computer is enabled to execute the method according to any one of claims 1 to 7.

11. A computer program product, characterized in that The computer program product comprises computer instructions, and when the computer instructions are executed on a computer, the computer is caused to execute the method according to any one of claims 1 to 7.

Images