Graph drawing method and device and electronic equipment

Abstract

The invention provides a graph drawing method and device and electronic device.The method comprises the steps that a drawing instruction for a graph to be drawn is received, and the drawing instruction comprises an input track, brush information and a graph type; dividing the to-be-drawn graph into at least one to-be-drawn line segment according to the starting point and ending point positions of the input track and the graph type, and determining a grid vertex corresponding to each to-be-drawn line segment according to the paintbrush information; based on the grid vertex of each to-be-drawn line segment, constructing a plane grid corresponding to the to-be-drawn line segment; and in the graphical user interface, drawing a graph to be drawn by utilizing the plane grids corresponding to all the line segments to be drawn. By the adoption of the graph drawing method and device and the electronic equipment, the problem that an existing graph drawing product is poor in compatibility is solved.

Description

Technical Field

[0001] The present application relates to the technical field of information visualization. Specifically, it relates to a method, apparatus, and electronic device for drawing graphics. Background Art

[0002] With the rapid development of Internet technology, online teaching has been applied in more and more fields. During the process of online live teaching by teachers, there is an urgent need for a function similar to blackboard writing (a paintbrush) to perform operations such as derivation demonstration, key point marking, and chart drawing on the screen, which helps students more intuitively understand complex and abstract concepts and also increases the interactivity and interest of the classroom.

[0003] However, existing online teaching products on the market all develop the paintbrush function at the native level and do not have the ability to be cross-platform applied, resulting in the problem of poor compatibility of existing graphics drawing products based on the paintbrush. Summary of the Invention

[0004] In view of this, the purpose of the present application is to provide a method, apparatus, and electronic device for drawing graphics to solve the problem of poor compatibility of existing graphics drawing products.

[0005] In a first aspect, an embodiment of the present invention provides a method for drawing graphics. A graphical user interface is provided through a terminal device. The method includes:

[0006] Receiving a drawing instruction for a to-be-drawn graphic, where the drawing instruction includes an input trajectory, paintbrush information, and graphic type;

[0007] Dividing the to-be-drawn graphic into at least one to-be-drawn line segment according to the start and end point positions of the input trajectory and the graphic type, and determining the grid vertices corresponding to each to-be-drawn line segment according to the paintbrush information;

[0008] Constructing a plane grid corresponding to the to-be-drawn line segment based on the grid vertices of each to-be-drawn line segment;

[0009] Drawing the to-be-drawn graphic in the graphical user interface by using the plane grids corresponding to all the to-be-drawn line segments.

[0010] This method for drawing graphics realizes the paintbrush function based on the model construction method in the game engine to realize graphics drawing. This method for drawing graphics can be applied to a variety of different platforms and has cross-platform capabilities.

[0011] In an alternative embodiment, the graphic types include line graphic types and planar graphic types. According to the start and end point positions of the input trajectory and the graphic type, the graphic to be drawn is divided into at least one line segment to be drawn, including: if the graphic type is a line graphic type, multiple key points are selected on the input trajectory based on the start and end point positions, and the graphic to be drawn is divided into at least one line segment to be drawn according to the key points; if the graphic type is a planar graphic type, a graphic bounding box is constructed based on the start and end point positions, and multiple line segments to be drawn are determined according to the graphic bounding box. In this way, different graphic types correspond to different graphic drawing methods, that is, different methods for splitting the line segments to be drawn, improving the accuracy of splitting the line segments to be drawn.

[0012] In an alternative embodiment, the brush information includes the brush width. Determining the grid vertices corresponding to each line segment to be drawn based on the brush information includes: for each line segment to be drawn, determining the perpendicular direction of the line segment to be drawn; starting from the start point and the end point of the line segment, extending the distance of the brush width along the perpendicular direction to obtain the first vertex and the second vertex respectively; determining the grid vertices of the line segment to be drawn based on the first vertex and the second vertex. Each line segment to be drawn determines the grid vertices of the line segment according to the perpendicular direction and the brush width, and can adjust the presented graphic style according to the brush width, realizing the matching between the graphic style and the user's needs.

[0013] In an alternative embodiment, the planar graphic types include polygons and closed curves, and the graphic bounding box is a rectangular bounding box. Determining multiple line segments to be drawn according to the graphic bounding box includes: if the planar graphic type is a polygon, determining the first graphic parameter based on the positions of the four bounding box vertices, constructing a polygon based on the first graphic parameter, and taking each side of the polygon as a line segment to be drawn; if the planar graphic type is a closed curve, determining the second graphic parameter based on the side length and the center point position of the graphic bounding box, sampling the graphic corresponding to the closed curve equation constructed based on the second graphic parameter to obtain multiple sampling points, and connecting the multiple sampling points in sequence to obtain multiple line segments to be drawn. This application can adopt different methods for determining the line segments to be drawn for different planar graphic types, improving the accuracy of splitting the line segments to be drawn.

[0014] In an alternative embodiment, the start and end points include a starting point and an ending point. Constructing a graphic bounding box based on the start and end point positions includes: using the line segment corresponding to the starting point and the ending point as the diagonal of the graphic bounding box to construct a rectangular bounding box using the diagonal. This application can construct a rectangular bounding box only through the start and end points of the input trajectory, improving the operation convenience.

[0015] In an alternative embodiment, a to-be-drawn graphic is drawn using a planar grid corresponding to all to-be-drawn line segments, including: performing grid optimization processing on the connection of two adjacent to-be-drawn line segments so that the planar grids are smoothly connected together to generate the to-be-drawn graphic. The present application can perform grid optimization processing on the connection of line segments, avoiding the problem of unevenness in the drawn graphic.

[0016] In an alternative embodiment, performing grid optimization processing on the connection of two adjacent to-be-drawn line segments includes: determining the line segment intersection point of two adjacent to-be-drawn line segments; taking the line segment intersection point as the center of a circle and the width of the planar grid as the diameter to generate an arc on the target to-be-drawn line segment; performing segmentation processing on the arc to obtain grids for filling the connection gap. By using the rounding method for grid optimization processing, the drawn graphic can be made smoother.

[0017] In an alternative embodiment, performing grid optimization processing on the connection of two adjacent to-be-drawn line segments further includes: extending the grid border lines on the connection-gap side of two adjacent to-be-drawn line segments to obtain grid border intersection points; constructing a planar grid for filling the connection gap based on the grid border intersection points and the grid vertices on the connection-gap side corresponding to the two to-be-drawn line segments. By using the intersection point method for grid optimization processing, while improving the smoothness of the graphic, the graphic drawing efficiency can also be improved.

[0018] In a second aspect, an embodiment of the present invention provides a graphic drawing device that provides a graphic user interface through a terminal device, including:

[0019] An instruction receiving module, configured to receive a drawing instruction for a to-be-drawn graphic, where the drawing instruction includes an input trajectory, brush information, and graphic type;

[0020] A vertex position determination module, configured to divide the to-be-drawn graphic into at least one to-be-drawn line segment according to the start and end point positions of the input trajectory and the graphic type, and determine the grid vertices corresponding to each to-be-drawn line segment according to the brush information;

[0021] A planar grid construction module, configured to construct a planar grid corresponding to each to-be-drawn line segment based on the grid vertices of each to-be-drawn line segment;

[0022] A graphic drawing module, configured to draw the to-be-drawn graphic in the graphic user interface using the planar grids corresponding to all to-be-drawn line segments.

[0023] In a third aspect, an embodiment of the present application further provides an electronic device, including: a processor, a memory, and a bus, where the memory stores machine-readable instructions executable by the processor. When the electronic device runs, the processor communicates with the memory through the bus, and when the machine-readable instructions are executed by the processor, the steps of the graphic drawing method as described above are executed.

[0024] The embodiments of the present application bring the following beneficial effects:

[0025] A graphic drawing method, device and electronic device provided by the embodiments of the present application can determine the grid vertex positions corresponding to each to-be-drawn line segment that constitutes the to-be-drawn graphic, and construct a plane grid corresponding to each to-be-drawn line segment based on the grid vertex positions, so as to draw the to-be-drawn graphic by using the plane grid. This graphic drawing method realizes the brush function based on the model construction method in the game engine to realize graphic drawing. This graphic drawing method can be applied to a variety of different platforms and has cross-platform capabilities. Compared with the graphic drawing methods in the prior art, it solves the problem of poor compatibility of graphic drawing products.

[0026] To make the above objects, features and advantages of the present application more obvious and understandable, the following specific preferred embodiments are given below, and in conjunction with the accompanying drawings, the detailed description is as follows. Description of the Drawings

[0027] To more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required to be used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of the present application, and therefore should not be regarded as limiting the scope. For those of ordinary skill in the art, other related drawings can be obtained according to these drawings without creative efforts.

[0028] Figure 1 Shows the flowchart of the graphic drawing method provided by the embodiments of the present application;

[0029] Figure 2 Shows the schematic diagram of the graphic bounding box corresponding to the triangle provided by the embodiments of the present application;

[0030] Figure 3 Shows the schematic diagram of the graphic bounding box corresponding to the circle provided by the embodiments of the present application;

[0031] Figure 4 Shows the schematic diagram of the grid vertex positions provided by the embodiments of the present application;

[0032] Figure 5 Shows the schematic diagram of the rounding method provided by the embodiments of the present application;

[0033] Figure 6 Shows the schematic diagram of the intersection point method provided by the embodiments of the present application;

[0034] Figure 7 Shows the structural schematic diagram of the graphic drawing device provided by the embodiments of the present application;

[0035] Figure 8The structural schematic diagram of the electronic device provided by the embodiments of the present application is shown. Detailed implementation manners

[0036] To make the objectives, technical solutions, and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present application. Apparently, the described embodiments are only a part rather than all of the embodiments of the present application. Components of the embodiments of the present application described and illustrated herein generally may be arranged and designed in a variety of different configurations. Therefore, the detailed description of the embodiments of the present application provided herein is not intended to limit the scope of the present application claimed, but merely represents selected embodiments of the present application. Based on the embodiments of the present application, every other embodiment obtained by a person skilled in the art without creative efforts shall fall within the protection scope of the present application.

[0037] It is worth noting that before the present application was proposed, with the rapid development of Internet technology, online teaching has been applied in more and more fields. During the process of online live teaching by teachers, there is an urgent need for a function similar to blackboard writing (a paintbrush) to perform operations such as deduction demonstration, key point marking, and chart drawing on the screen, which helps students more intuitively understand complex and abstract concepts and also increases the interactivity and interest of the classroom. However, existing online teaching products on the market all develop the paintbrush function at the native level and do not have the ability to be cross-platform applied, resulting in poor compatibility of existing graphics drawing products based on the paintbrush.

[0038] Based on this, the embodiments of the present application provide a graphics drawing method to enable the graphics drawing product to have cross-platform capabilities and improve product compatibility.

[0039] Please refer to Figure 1 , Figure 1 , which is a flowchart of a graphics drawing method provided by the embodiments of the present application. As Figure 1 shown, the graphics drawing method provided by the embodiments of the present application includes:

[0040] Step S101, receiving a drawing instruction for a to-be-drawn graphic;

[0041] Step S102, dividing the to-be-drawn graphic into at least one to-be-drawn line segment according to the start and end point positions and the graphic type of the input trajectory, and determining the grid vertices corresponding to each to-be-drawn line segment according to the paintbrush information;

[0042] Step S103, constructing a plane grid corresponding to the to-be-drawn line segment based on the grid vertices of each to-be-drawn line segment;

[0043] Step S104: In the graphical user interface, draw the to-be-drawn graph using the planar grids corresponding to all the to-be-drawn line segments.

[0044] The graph drawing method provided by the embodiments of the present application can determine the grid vertex positions corresponding to each to-be-drawn line segment that constitutes the to-be-drawn graph, and construct the planar grid corresponding to each to-be-drawn line segment based on the grid vertex positions, so as to draw the to-be-drawn graph using the planar grid. This graph drawing method realizes the brush function based on the model construction method in the game engine to achieve graph drawing. This graph drawing method can be applied to a variety of different platforms and has cross-platform capabilities. Compared with the graph drawing methods in the prior art, it solves the problem of poor compatibility of graph drawing products.

[0045] To facilitate the understanding of this embodiment, the following takes the application of the graph drawing method of the present application to a terminal device as an example to separately describe the above exemplary steps provided by the embodiments of the present application. The terminal device provides a graphical user interface.

[0046] In step S101, receive a drawing instruction for the to-be-drawn graph.

[0047] In this step, the drawing instruction may refer to an instruction for drawing the to-be-drawn graph, and the drawing instruction may be triggered by the user using the terminal device. The drawing instruction includes an input trajectory, brush information, and graph type.

[0048] The to-be-drawn graph is a graph corresponding to the graph type to be drawn.

[0049] The brush function of the graph drawing product is realized through a game engine. As an example, the game engine can be Unity3D, Ureal, or Godot, Cocos2d-x. Taking the game engine as Unity3D as an example, Unity3D has cross-platform capabilities and can realize the brush function through Unity3D. The architecture design for realizing this function includes a data instruction layer, a drawing layer, an operation layer, and a resource layer.

[0050] Among them, the data instruction layer is responsible for recording the user's operation data, processing and filtering the operation data, and finally generating model construction data, such as: bounding box, curve. The drawing layer is used to construct a grid model according to the model data and update the canvas display. The operation layer is used to implement instruction selection and shortcut selection instructions. The resource layer is used for shaders related to drawing to control the drawing style, including brush color, brush thickness, and graph type, etc.

[0051] In the embodiments of the present application, as a user using the terminal device, the teacher selects the graph to be drawn in the graphical user interface provided by the terminal device, and inputs a trajectory on the terminal device using the brush. This trajectory is the input trajectory, and a drawing instruction for the to-be-drawn graph is generated.

[0052] In step S102, according to the start and end point positions of the input trajectory and the graphic type, the graphic to be drawn is divided into at least one line segment to be drawn, and the grid vertices corresponding to each line segment to be drawn are determined according to the pen information.

[0053] In this step, the input trajectory can change continuously over time. As long as it is determined that the input trajectory exists, a drawing instruction is generated.

[0054] The graphic types include line graphic types and planar graphic types. The line graphic types can refer to graphic types where the graphic is a line, and the line graphic types include but are not limited to: line segments, curves, hyperbolas, and dotted lines; the planar graphic types can refer to graphic types where the graphic can correspond to a plane, and the planar graphic types include but are not limited to: triangles, circles, ellipses, and rectangles.

[0055] In an example, the pen information includes the pen color and the pen width. Before using the pen, the user needs to select the specific information of the pen. For example, the pen information is stored in the resource layer, and the graphic user interface displays the pen information stored in the resource layer in the form of a drop-down list. The user can select the current pen color and pen width in the drop-down list.

[0056] In the embodiments of the present application, the graphic drawing methods for different graphic types are different. Before drawing a graphic, it is necessary to first determine the graphic type of the graphic to be drawn according to the drawing instruction. In this way, different graphic types correspond to different graphic drawing methods, that is, different line segment splitting methods, so as to obtain the Mesh of each line segment under this graphic type, improving the generation accuracy of the planar grid under this graphic type.

[0057] In one case, if the graphic type is a line graphic type, then multiple key points are selected on the input trajectory based on the start and end point positions, and the graphic to be drawn is divided into at least one line segment to be drawn according to the key points.

[0058] Specifically, when dividing the input trajectory into at least one line segment to be drawn, if the graphic type of the graphic to be drawn is a line segment, the start point and the end point of the input trajectory are used as key points, and the entire line segment between the key points is used as the line segment to be drawn.

[0059] If the graphic to be drawn is a curve, then during the process of the user continuously inputting the trajectory, multiple key points are selected according to a fixed time duration or the terminal refresh frequency. The straight line segment between two key points is the line segment to be drawn. In this way, multiple continuous line segments can be constructed, and these continuous line segments are the multiple line segments to be drawn.

[0060] If the figure to be drawn is an arrow, the arrow is divided into a shaft and a triangular arrowhead. At this time, the line segments to be drawn for the shaft part can be determined according to the method for determining the line segments to be drawn when the figure type is a line segment, and the line segments to be drawn for the triangular arrowhead part can be determined according to the method for determining the line segments to be drawn when the figure type is a triangle. Among them, the method for determining the line segments corresponding to the triangle is described in detail in the following content.

[0061] If the figure to be drawn is a dotted line, then according to the method for a figure to be drawn as a curve, determine the line segments to be drawn corresponding to the dotted line.

[0062] In another case, if the figure type is a planar figure type, then construct a figure bounding box based on the start and end point positions of the input trajectory, and determine multiple line segments to be drawn according to the figure bounding box.

[0063] Specifically, the figure bounding box is a rectangular bounding box. The planar figure types include polygons and closed curves. Polygons include, but are not limited to: triangles, quadrilaterals; closed curves include, but are not limited to: circles, ellipses. When the figure type is a planar figure type, the user's input trajectory is a straight line or a curve. According to the start and end points of the input trajectory, a figure bounding box corresponding to the planar figure type can be constructed.

[0064] For different planar figure types, the methods for constructing the figure bounding box are different. This application can adopt different methods for constructing the bounding box for different planar figure types, improving the efficiency and accuracy of constructing the figure bounding box.

[0065] If the figure type is a polygon, then determine the first figure parameter based on the positions of the four vertices of the bounding box, construct a polygon based on the first figure parameter, and use each side of the polygon as a line segment to be drawn.

[0066] The following takes Figure 2 as an example to illustrate the process of constructing the figure bounding box when the polygon is a triangle.

[0067] Figure 2 shows a schematic diagram of the figure bounding box corresponding to the triangle provided by the embodiment of the present application. As Figure 2 shown, the start and end points of the input trajectory include the starting point P1 and the ending point P2. Take the line segment P1P2 corresponding to the starting point P1 and the ending point P2 as the diagonal of the figure bounding box, and construct a rectangular figure bounding box based on this diagonal. The four vertices of the rectangular figure bounding box are P1, Q1, P2, and Q2 respectively. Take the bounding box vertex Q1 and the bounding box vertex P2 as two vertices of the triangle, and take the midpoint Q3 of the line segment P1Q2 as the third vertex of the triangle. The positions of these three vertices of the triangle are the first figure parameter. Connect the three vertices of the triangle in sequence to form a triangle, and each side of the triangle is a line segment to be drawn.

[0068] Similarly, if the polygon is a rectangle, the four bounding box vertices are directly used as the four rectangle vertices, and each side of the rectangle is a line segment to be drawn.

[0069] If the graphic type is a closed curve, the second graphic parameter is determined based on the side length and center point position of the graphic bounding box, a closed curve equation is constructed based on the second graphic parameter, and multiple sampling points are obtained using the closed curve equation, so as to sequentially connect the multiple sampling points to obtain multiple line segments to be drawn.

[0070] The following takes Figure 3 as an example to illustrate the process of constructing the graphic bounding box when the closed curve is a circle. Figure 3 shows a schematic diagram of the graphic bounding box corresponding to the circle provided by the embodiment of the present application. As Figure 3 shown, the input trajectory includes the starting point P1 and the ending point P2. The line segment P1P2 corresponding to the starting point P1 and the ending point P2 is used as the diagonal of the graphic bounding box, and a rectangular graphic bounding box is constructed based on this diagonal. In this way, the graphic bounding box can be constructed only based on the starting and ending points of the input trajectory, improving the construction efficiency and convenience of the graphic bounding box. The four bounding box vertices of the rectangular graphic bounding box are P1, Q1, P2, and Q2 respectively. The rectangular graphic bounding box is square-shaped. Taking P1 and another short-side vertex Q1 as the two vertices of the square graphic bounding box, and taking the side length of the short side of the rectangular graphic bounding box as the side length of the square, a square graphic bounding box is constructed. The four vertices of the square graphic bounding box are P1, Q1, Q4, and Q3 respectively. The side length of the square graphic bounding box is used as the diameter of the circle, and the intersection point of the two diagonals of the square graphic bounding box is used as the center of the circle. The diameter and center position of the circle are the second graphic parameters corresponding to the circle. According to the center position and diameter, the circle equation is determined, and the graphic corresponding to the circle equation is evenly sampled to obtain multiple sampling points, and adjacent two sampling points are connected by line segments to generate multiple line segments, and each line segment is a line segment to be drawn.

[0071] Similarly, if the closed curve is an ellipse, the above method is used to construct a rectangular graphic bounding box, and the inscribed ellipse of the rectangular graphic bounding box is determined. At this time, the side length of the short side of the rectangular graphic bounding box is used as the length of the short axis of the ellipse, the side length of the long side of the rectangular graphic bounding box is used as the length of the long axis of the ellipse, and the intersection point P0 of the line segment P1P2 and the line segment Q1Q2 is used as the center of the ellipse (i.e., the intersection point of the two diagonals of the rectangular bounding box). The short axis length, long axis length, and center position are the second graphic parameters corresponding to the ellipse. According to the short axis length, long axis length, and center position, the ellipse equation is determined, and the graphic corresponding to the ellipse equation is evenly sampled to obtain multiple sampling points, and adjacent two sampling points are connected by line segments to generate multiple line segments, and each line segment is a line segment to be drawn.

[0072] Since in the rendering process of the game engine, the line segments to be drawn must have a width, that is, they must be expanded into a plane. Therefore, after determining multiple line segments to be drawn, the grid vertex positions corresponding to each line segment to be drawn can be determined based on the brush information, so as to determine the plane grid based on the grid vertices. When determining the grid vertices, for each line segment to be drawn, the perpendicular direction of the line segment to be drawn can be determined. Starting from the starting point and the ending point of the line segment, extend the distance of the brush width along the perpendicular direction to obtain the first vertex and the second vertex respectively.

[0073] The following will refer to Figure 4 to introduce the process of determining the grid vertex positions.

[0074] Figure 4 FIG. shows a schematic diagram of the grid vertex positions provided by an embodiment of the present application. As Figure 4 shown, the two endpoints of the line segment AB to be drawn are the starting point A and the starting point B of the line segment respectively. Starting from the starting point A of the line segment, extend the distance of half of the brush width along a perpendicular direction to obtain the first vertex A1, and extend the distance of half of the brush width along another perpendicular direction from the starting point A of the line segment to obtain the first vertex A2. Similarly, starting from the starting point B of the line segment, extend the distance of half of the brush width along a perpendicular direction to obtain the second vertex B1, and extend the distance of half of the brush width along another perpendicular direction from the starting point B of the line segment to obtain the second vertex B2.

[0075] Then, based on the first vertex and the second vertex, determine the grid vertices of the line segment to be drawn, that is, determine the four grid vertices A1, A2, B1, and B2 of the line segment AB to be drawn as the grid vertices of the line segment AB to be drawn. Among them, each line segment to be drawn determines the grid vertices of the line segment according to the perpendicular direction and the brush width, and can adjust the presented graphic style according to the brush width to achieve the matching between the graphic style and the user's needs.

[0076] In step S103, based on the grid vertices of each line segment to be drawn, construct the plane grid corresponding to the line segment to be drawn.

[0077] In this step, in the Unity3D game engine, the model is constructed based on triangular patches. Therefore, a plane grid corresponding to a line segment to be drawn can be constructed according to the four grid vertices.

[0078] Specifically, the four grid vertices correspond to a rectangle. Divide the rectangle into two right triangles of equal size according to the rectangle diagonal. These two right triangle patches of equal size are the plane grid corresponding to the line segment to be drawn, also called the Mesh of the line segment.

[0079] In step S104, in the graphical user interface, use the plane grids corresponding to all the line segments to be drawn to draw the graphic to be drawn.

[0080] In the embodiments of the present application, when drawing a to-be-drawn graphic, grid optimization processing can be performed on the connection between two adjacent to-be-drawn line segments, so that the plane grids are smoothly connected together to generate the to-be-drawn graphic, improving the smoothness of the graphic.

[0081] It should be noted that different graphic types can adopt different grid optimization processing methods.

[0082] In one case, when the graphic type is a polygon, the line segment intersection points of two adjacent to-be-drawn line segments can be determined. Then, with the line segment intersection point as the center and the width of the plane grid as the diameter, an arc is generated on the target to-be-drawn line segment. Finally, the arc is segmented to obtain grids for filling the connection gap. The above grid optimization processing method can be called the rounding method. The following refers to Figure 5 for a detailed description of the specific process of the rounding method.

[0083] Figure 5 shows a schematic diagram of the rounding method provided by the embodiments of the present application. As Figure 5 shown, the line segment intersection point of the to-be-drawn line segment CD and the to-be-drawn line segment DE is D. The four grid vertices of the plane grid corresponding to the to-be-drawn line segment CD are M1, N1, N2, and M2. The four grid vertices of the plane grid corresponding to the to-be-drawn line segment DE are G1, H1, H2, and G2. There is a connection gap between the plane grid corresponding to the to-be-drawn line segment CD and the plane grid corresponding to the to-be-drawn line segment DE. This connection gap is the black area enclosed by the three points H1, D, and N2. To make the connection gap smoothly connected, the line segment intersection point D can be selected as the center and the width of the plane grid as the diameter, that is, the length of the line segment G1H1 as the diameter. On the line segment G1H1, a semi-circle is generated in the direction of the connection gap, and the arc corresponding to the connection gap area is selected as the target arc. The target arc is segmented into multiple triangles with the line segment intersection point as one vertex and the arc radius as the side length, so that multiple triangular patches can be obtained. These triangular patches are used as the plane grids for filling the connection gap.

[0084] In another case, when the graphic type is a closed curve, the grid border lines on the connection gap side of two adjacent to-be-drawn line segments are extended to obtain grid border intersection points; based on the grid border intersection points and the grid vertices on the connection gap side corresponding to the two to-be-drawn line segments, a plane grid for filling the connection gap is constructed. The above grid optimization processing method can be called the intersection method. The intersection method is relatively simple and can improve the grid optimization processing efficiency while ensuring smooth connection at the joint. The following refers to Figure 5 for a detailed description of the specific process of the intersection method.

[0085] Figure 6 shows a schematic diagram of the intersection method provided by the embodiments of the present application. AsFigure 6 As shown in the figure, the intersection point of the line segment CD to be drawn and the line segment DE to be drawn is D. The four grid vertices of the plane grid corresponding to the line segment CD to be drawn are M1, N1, N2, and M2. The four grid vertices of the plane grid corresponding to the line segment DE to be drawn are G1, H1, H2, and G2. There is a connection gap between the plane grid corresponding to the line segment CD to be drawn and the plane grid corresponding to the line segment DE to be drawn. This connection gap is the black area enclosed by the three points H1, D, and N2. In order to achieve a smooth connection at the connection gap, the grid side lines on the connection gap side in the plane grid corresponding to the line segment DE to be drawn and the grid side lines on the connection gap side in the plane grid corresponding to the line segment CD to be drawn can be extended, that is, the line segment H2H1 and the line segment N1N2 are extended respectively. The two extended lines intersect at point HN. Take point HN, the line segment intersection point D, and N2 as the three vertices of a triangle to form a triangular patch; take point HN, the line segment intersection point D, and H1 as the three vertices of another triangle to form another triangular patch. These two triangular patches are used as the plane grids for filling the connection gap.

[0086] In the third case, when the graphic type is a line graphic type (such as a curve type), any one of the intersection method or the rounding method can be selected for grid optimization processing.

[0087] In the embodiments of the present application, when rendering the graphic to be drawn, all plane grids can be rendered according to the color indicated in the drawing instruction to display the graphic to be drawn in the graphical user interface. It should be noted that if the graphic to be drawn is a curve, then during rendering, UV coordinates need to be assigned to the plane grid vertices, and the first preset percentage part of each line segment to be drawn is selected for rendering, and the remaining percentage part is not rendered to achieve a dotted line effect.

[0088] At the same time, the user can perform editing operations such as moving, rotating, and scaling on the drawn graphic. At this time, for one or more selected editing objects, the selected editing objects can be placed under the same root node so that when performing editing operations, unified transformation processing can be performed on the root node. At the end of the editing, the selected editing objects are removed from the root node, and the attributes of each editing object are updated.

[0089] In addition, the user can also use a brush to input text in the graphical user interface and modify the input text content.

[0090] Based on the same inventive concept, a graphic drawing device corresponding to the graphic drawing method is also provided in the embodiments of the present application. Since the principle of solving problems by the device in the embodiments of the present application is similar to the above-mentioned graphic drawing method in the embodiments of the present application, the implementation of the device can refer to the implementation of the method, and the repeated parts will not be described again.

[0091] Please refer to Figure 7, Figure 7 The following is a schematic structural diagram of a graphic drawing device provided by an embodiment of the present application. As Figure 7 shown in the figure, a graphical user interface is provided through a terminal device. The graphic drawing device 200 includes:

[0092] An instruction receiving module 201, configured to receive a drawing instruction for a to-be-drawn graphic, where the drawing instruction includes an input trajectory, brush information, and a graphic type;

[0093] A vertex position determination module 202, configured to divide the to-be-drawn graphic into at least one to-be-drawn line segment according to the start and end point positions of the input trajectory and the graphic type, and determine the grid vertices corresponding to each to-be-drawn line segment according to the brush information;

[0094] A plane grid construction module 203, configured to construct a plane grid corresponding to the to-be-drawn line segment based on the grid vertices of each to-be-drawn line segment;

[0095] A graphic drawing module 204, configured to draw the to-be-drawn graphic in the graphical user interface by using the plane grids corresponding to all the to-be-drawn line segments.

[0096] Please refer to Figure 8 , Figure 8 The following is a schematic structural diagram of an electronic device provided by an embodiment of the present application. As Figure 8 shown in the figure, the electronic device 300 includes a processor 310, a memory 320, and a bus 330.

[0097] The memory 320 stores machine-readable instructions executable by the processor 310. When the electronic device 300 runs, the processor 310 communicates with the memory 320 through the bus 330. When the machine-readable instructions are executed by the processor 310, the steps of the graphic drawing method in the method embodiment as shown above can be executed. For the specific implementation manner, reference can be made to the method embodiment, which will not be elaborated herein. Figure 1 shown above. For the specific implementation manner, reference can be made to the method embodiment, which will not be elaborated herein.

[0098] An embodiment of the present application further provides a computer-readable storage medium. A computer program is stored on the computer-readable storage medium. When the computer program is run by a processor, the steps of the graphic drawing method in the method embodiment as shown above can be executed. For the specific implementation manner, reference can be made to the method embodiment, which will not be elaborated herein. Figure 1 shown above. For the specific implementation manner, reference can be made to the method embodiment, which will not be elaborated herein.

[0099] Those skilled in the art can clearly understand that for the convenience and brevity of description, the specific working processes of the systems, devices, and units described above can refer to the corresponding processes in the foregoing method embodiments, which will not be elaborated herein.

[0100] In several embodiments provided in the present application, it should be understood that the disclosed systems, devices, and methods can be implemented in other ways. The device embodiments described above are merely illustrative. For example, the division of the units is only a logical function division. In actual implementation, there may be other division methods. For another example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the displayed or discussed coupling or direct coupling or communication connection between each other can be through some communication interfaces. The indirect coupling or communication connection of the devices or units can be in an electrical, mechanical, or other form.

[0101] The units described as separate components may or may not be physically separated. The components displayed as units may or may not be physical units, that is, they can be located in one place or distributed to multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0102] In addition, in each embodiment of the present application, each functional unit can be integrated in a processing unit, or each unit can exist physically alone, or two or more units can be integrated in one unit.

[0103] If the function is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a non-volatile computer-readable storage medium executable by a processor. Based on such an understanding, the technical solution of the present application, in essence, or the part that contributes to the prior art, or a part of this technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in each embodiment of the present application. The aforementioned storage medium includes: various media such as USB flash drives, mobile hard disks, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical discs that can store program codes.

[0104] Finally, it should be noted that the above-described embodiments are only specific implementation manners of the present application, used to illustrate the technical solutions of the present application, rather than limiting it. The protection scope of the present application is not limited thereto. Although the present application has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that any person skilled in the art within the technical scope disclosed by the present application can still modify the technical solutions recorded in the foregoing embodiments or can easily think of changes, or perform equivalent replacements on some of the technical features; and these modifications, changes or replacements do not make the essence of the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present application, and should all be covered within the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.

Claims

1. A method for drawing a graph, characterized in that, Providing a graphical user interface through a terminal device, the method includes: Receiving a drawing instruction for a to-be-drawn graphic, the drawing instruction including an input trajectory, brush information, and a graphic type; Dividing the to-be-drawn graphic into at least one to-be-drawn line segment according to the start and end point positions of the input trajectory and the graphic type, and determining the grid vertices corresponding to each to-be-drawn line segment according to the brush information; Based on the grid vertices of each to-be-drawn line segment, constructing a plane grid corresponding to the to-be-drawn line segment; In the graphical user interface, drawing the to-be-drawn graphic by using the plane grids corresponding to all the to-be-drawn line segments.

2. The method according to claim 1, wherein The graphic type includes a line-type graphic type and a plane-type graphic type. The dividing the to-be-drawn graphic into at least one to-be-drawn line segment according to the start and end point positions of the input trajectory and the graphic type includes: If the graphic type is a line-type graphic type, then selecting multiple key points on the input trajectory based on the start and end point positions, and dividing the to-be-drawn graphic into at least one to-be-drawn line segment according to the key points; If the graphic type is a plane-type graphic type, then constructing a graphic bounding box based on the start and end point positions, and determining multiple to-be-drawn line segments according to the graphic bounding box.

3. The method according to claim 1, wherein The brush information includes a brush width. The determining the grid vertices corresponding to each to-be-drawn line segment according to the brush information includes: For each to-be-drawn line segment, determining the perpendicular direction of the to-be-drawn line segment; Starting from the start point and the end point of the line segment, extending the distance of the brush width along the perpendicular direction to respectively obtain a first vertex and a second vertex; Based on the first vertex and the second vertex, determining the grid vertices of the to-be-drawn line segment.

4. The method according to claim 2, characterized in that, The plane-type graphic type includes a polygon and a closed curve. The graphic bounding box is a rectangular bounding box. The determining multiple to-be-drawn line segments according to the graphic bounding box includes: If the plane-type graphic type is a polygon, then determining a first graphic parameter based on the positions of the four bounding box vertices, constructing a polygon based on the first graphic parameter, and taking each side of the polygon as a to-be-drawn line segment; If the plane-type graphic type is a closed curve, then determining a second graphic parameter based on the side length and the center point position of the graphic bounding box, sampling the graphic corresponding to the closed curve equation constructed based on the second graphic parameter to obtain multiple sampling points, and sequentially connecting the multiple sampling points to obtain multiple to-be-drawn line segments.

5. The method according to claim 2, characterized in that The start and end points include a start point and an end point. The constructing a graphic bounding box based on the start and end point positions includes: Taking the line segment corresponding to the start point and the end point as the diagonal of the graphic bounding box to construct a rectangular bounding box by using the diagonal.

6. The method according to claim 1, wherein The drawing the to-be-drawn graphic by using the plane grids corresponding to all the to-be-drawn line segments includes: Performing grid optimization processing on the connection between adjacent two to-be-drawn line segments so that the plane grids are smoothly connected together to generate the to-be-drawn graphic.

7. The method according to claim 6, wherein The performing grid optimization processing on the connection between adjacent two to-be-drawn line segments includes: Determining the line segment intersection point of the adjacent two to-be-drawn line segments; Generate an arc on the target line segment to be drawn, with the intersection point of the line segments as the center and the width of the plane grid as the diameter. Perform segmentation processing on the arc to obtain grids for filling the connection gap.

8. The method according to claim 6, wherein The grid optimization processing for the connection of two adjacent line segments to be drawn further includes: Extend the grid border lines on the connection gap side of the two adjacent line segments to be drawn to obtain grid border intersection points. Based on the grid border intersection points and the grid vertices on the connection gap sides corresponding to the two line segments to be drawn, construct a plane grid for filling the connection gap.

9. A graphic drawing device, characterized in that, Provide a graphical user interface through a terminal device, including: An instruction receiving module for receiving drawing instructions for the figure to be drawn, where the drawing instructions include an input trajectory, brush information, and figure type. A vertex position determination module for dividing the figure to be drawn into at least one line segment to be drawn according to the start and end point positions of the input trajectory and the figure type, and determining the grid vertices corresponding to each line segment to be drawn according to the brush information. A plane grid construction module for constructing a plane grid corresponding to each line segment to be drawn based on the grid vertices of each line segment to be drawn. A figure drawing module for drawing the figure to be drawn in the graphical user interface using the plane grids corresponding to all the line segments to be drawn.

10. An electronic device, characterized in that, Includes: A processor, a memory, and a bus. The memory stores machine-readable instructions executable by the processor. When the electronic device runs, the processor communicates with the memory through the bus, and the processor executes the machine-readable instructions to perform the steps of the figure drawing method according to any one of claims 1 to 8.

Images