Line drawing method and device, storage medium and program product

By splitting the polyline into multiple line segments and performing targeted coordinate offsets, and combining width and angle information to calculate the offset coordinates of the polyline point, the problem that WebGL cannot draw polylines of different widths is solved, achieving smooth transition and width continuity.

CN119810249APending Publication Date: 2025-04-11BEIJING 58 INFORMATION TTECH CO LTD
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202411875126.3
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2024-12-18
Publication Date
2025-04-11

AI Technical Summary

Technical Problem

WebGL cannot draw segments of different widths in polylines, and cannot achieve smooth transitions and width continuity at corners of polylines.

Method used

Split the target polyline into the first segment, the non-first segment, and the last segment, and perform targeted coordinate offsets for each segment. By combining the width information of the line segment and the angle information, the offset coordinates of the polyline points are calculated to ensure smooth transitions at the corners of the polyline and to draw polygonal areas to achieve line segments of different widths.

Benefits of technology

It realizes drawing line segments of different widths in WebGL, and achieves smooth transitions and width continuity at the corners of polylines, solving the problem that WebGL cannot draw polylines of different widths.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN119810249A_ABST
    Figure CN119810249A_ABST
Patent Text Reader

Abstract

The embodiment of the invention provides a line drawing method and device, a storage medium and a program product. In the embodiment of the invention, a target broken line is divided into a first line segment, a non-first line segment and a last line segment, and coordinate offset is performed on each line segment in a targeted manner; aiming at the starting point coordinate of the first line segment and the ending point coordinate of the last line segment, respectively combining the width information and the vertical direction of each line segment to carry out offset processing; aiming at the coordinate of the broken line point of the non-first line segment, comprehensively considering the included angle and width information of the non-first line segment and the line segment above the non-first line segment to carry out offset calculation on the broken line point, ensuring smooth transition at the corner of the broken line, and ensuring the continuity of the width; and according to the offset coordinates after offset, drawing a polygonal region to obtain a target broken line with a width. When the offset coordinate of each line segment is determined, the width information of the line segment is combined, so that the width of each line segment can be flexibly controlled, and line segments with different widths are drawn in the target broken line.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

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

[0002] WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics in web browsers without using plugins, and provides access to GPU (Graphic Processing Unit) accelerated graphics. This enables developers to build pages with complex structures directly on the web.

[0003] In practical applications, it is often necessary to draw some line segments with widths, and adjacent line segments with widths can form polylines with widths. For example, in real estate applications, the house structure can be displayed according to the floor plan, and the wall can be represented by line segments with widths. At the same time, the widths of the two walls at the corners of the wall may not be consistent, so it is necessary to use line segments of different widths to respectively reflect the widths of the two walls.

[0004] However, when WebGL draws a line segment, the width can only be set to 1. It is not possible to draw wider line segments, let alone line segments of different widths in a polyline. Summary of the invention

[0005] Multiple aspects of the present application provide a line drawing method, device, storage medium and program product for drawing line segments of different widths when drawing polylines in WebGL.

[0006] The embodiment of the present application provides a line drawing method, comprising: dividing a target broken line into a plurality of line segments according to a set direction, wherein there are broken line points between adjacent line segments in the plurality of line segments, and each line segment has starting point coordinates, ending point coordinates and width information; for a first line segment in the plurality of line segments, determining a starting point offset coordinate in a direction perpendicular to the first line segment according to the starting point coordinates, ending point coordinates and width information of the first line segment; for any non-first line segment in the plurality of line segments, determining a target angle between the non-first line segment and the preceding line segment according to the starting point coordinates and ending point coordinates of the non-first line segment and the preceding line segment; and determining a target angle between the non-first line segment and the preceding line segment according to the starting point coordinates and ending point coordinates of the non-first line segment and the preceding line segment; The starting point coordinates, ending point coordinates, width information and the target angle of the non-first line segment and its preceding line segment are used to calculate the broken line point offset coordinates corresponding to the broken line point between the non-first line segment and its preceding line segment; for the last line segment among the multiple line segments, the ending point offset coordinates are determined in a direction perpendicular to the last line segment according to the starting point coordinates, ending point coordinates and width information of the last line segment; a polygonal area enclosed by the starting point coordinates, ending point coordinates of the multiple line segments and the starting point offset coordinates, the ending point offset coordinates and the broken line point offset coordinates is drawn to obtain a target broken line with a width.

[0007] An embodiment of the present application also provides an electronic device, including a memory and a processor, wherein the memory is used to store a computer program, and the processor is coupled to the memory and is used to execute the computer program to implement the steps in each method provided in the embodiment of the present application.

[0008] An embodiment of the present application also provides a computer-readable storage medium storing a computer program. When the computer program is executed by a processor, the processor is enabled to implement the steps in the above method.

[0009] An embodiment of the present application also provides a computer program product, which includes a computer program / instructions. When the computer program / instructions are executed by a processor, the processor is enabled to implement the steps in the above method embodiment.

[0010] In the embodiment of the present application, the target polyline is split into the first line segment, the non-first line segment and the last line segment, and the coordinates of each line segment are offset in a targeted manner; the starting point coordinates of the first line segment and the ending point coordinates of the last line segment are offset in combination with the width information and vertical direction of each line segment; for the polyline point coordinates of the non-first line segment, the polyline point offset calculation is performed by comprehensively considering the angle and width information of the non-first line segment and the line segment above it, to ensure a smooth transition at the polyline corner and the continuity of the width; according to the offset coordinates after the offset, a polygonal area is drawn to obtain a target polyline with a width. Since the width information of the line segment is combined when determining the offset coordinates of each line segment, the width of each line segment can be flexibly controlled, and line segments of different widths can be drawn in the target polyline. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0012] Figure 1a A schematic flow chart of a line drawing method provided by an exemplary embodiment of the present application;

[0013] Figure 1b A schematic diagram of the structure of a target fold line provided by another exemplary embodiment of the present application;

[0014] Figure 1c A schematic diagram of a process of a line drawing method provided by an exemplary embodiment of the present application;

[0015] Figure 1d A schematic diagram of a state of drawing a target polyline provided by an exemplary embodiment of the present application;

[0016] Figure 2a A schematic diagram of the structure of a target fold line provided by another exemplary embodiment of the present application;

[0017] Figure 2b A schematic diagram of a state of drawing a target polyline provided by an exemplary embodiment of the present application;

[0018] Figure 3 A schematic structural diagram of an electronic device provided as yet another exemplary embodiment of the present application. DETAILED DESCRIPTION

[0019] In order to make the purpose, technical solution and advantages of the present application clearer, the technical solution of the present application will be clearly and completely described below in combination with the specific embodiments of the present application and the corresponding drawings. 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 making creative work are within the scope of protection of the present application.

[0020] It should be noted that, in the case where the embodiments of the present application involve user information, the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in the embodiments of the present application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data need to comply with the relevant laws, regulations and standards of the relevant countries and regions, and provide corresponding operation entrances for users to choose to authorize or refuse. In addition, the various models involved in this application (including but not limited to language models or large models) are in compliance with relevant laws and standards.

[0021] In view of the technical problem that WebGL cannot draw line segments of different widths in a polyline, in an embodiment of the present application, the target polyline is split into the first line segment, the non-first line segment and the last line segment, and the coordinates of each line segment are offset in a targeted manner; the starting point coordinates of the first line segment and the ending point coordinates of the last line segment are offset in combination with the width information and vertical direction of each line segment; for the polyline point coordinates of the non-first line segment, the angle and width information of the non-first line segment and the line segment above it are comprehensively considered to perform the offset calculation of the polyline point, to ensure a smooth transition at the polyline corner and to ensure the continuity of the width; according to the offset coordinates after the offset, a polygonal area is drawn to obtain a target polyline with a width. Since the width information of the line segment is combined when determining the offset coordinates of each line segment, the width of each line segment can be flexibly controlled, and line segments of different widths can be drawn in the target polyline.

[0022] The technical solutions provided by various embodiments of the present application are described in detail below in conjunction with the accompanying drawings.

[0023] Figure 1a A schematic diagram of a line drawing method provided by an exemplary embodiment of the present application. As shown in FIG1 , the method includes:

[0024] S101: Divide the target polyline into multiple line segments according to a set direction, where there are polyline points between adjacent line segments in the multiple line segments, and each line segment has starting point coordinates, end point coordinates and width information;

[0025] S102: for a first line segment among the multiple line segments, determining a starting point offset coordinate in a direction perpendicular to the first line segment according to the starting point coordinate, the ending point coordinate and the width information of the first line segment;

[0026] S103: for any non-first line segment among the multiple line segments, determine a target angle between the non-first line segment and the preceding line segment according to the coordinates of the starting points and the ending points of the non-first line segment and the preceding line segment;

[0027] S104: Calculating the offset coordinates of the broken line point corresponding to the broken line point between the non-first line segment and its previous line segment according to the starting point coordinates, ending point coordinates, width information and target angle of the non-first line segment and its previous line segment;

[0028] S105: for the last line segment among the multiple line segments, determine the end point offset coordinates in a direction perpendicular to the last line segment according to the start point coordinates, end point coordinates and width information of the last line segment;

[0029] S106: Draw a polygonal area enclosed by the starting point coordinates, the ending point coordinates, the starting point offset coordinates, the ending point offset coordinates, and the fold line point offset coordinates of the plurality of line segments to obtain a target fold line with a width.

[0030] In this embodiment, the target broken line may be drawn by relevant personnel based on the visualization page; or, it may be directly uploaded by relevant personnel, which is not limited.

[0031] In this embodiment, when the target fold line is obtained, the target fold line is divided into a plurality of line segments according to a set direction, and the set direction may be clockwise or counterclockwise. In the subsequent embodiments, the clockwise division of the target fold line is taken as an example, but it is not limited thereto.

[0032] In this embodiment, a plurality of line segments are connected in sequence, and there is a broken line point between adjacent line segments, that is, an intersection point between adjacent line segments. Each line segment has a starting point coordinate, an end point coordinate, and width information. The width information indicates the width of the line segment to be drawn. In some embodiments of this application, the width information may be referred to as width. The widths of different line segments may be different. At least two of the plurality of line segments have different widths.

[0033] In this embodiment, the multiple line segments of the target polyline are further divided into the first line segment and the non-first line segment. The first line segment refers to the line segment including the starting point of the target polyline, the non-first line segment refers to the line segment of the target polyline other than the first line segment, and the last line segment refers to the line segment including the ending point of the target polyline. The non-first line segment includes the last line segment, which can be understood as the last non-first line segment.

[0034] like Figure 1b , which is an example of a target polyline. The target polyline 10 includes a first line segment 11, a last line segment 12, and a polyline point 13. Among them, the last line segment 12 is also a non-first line segment, so in Figure 1b It is also marked as a non-first line segment 12. It should be understood that the target fold line 10 is only an example, and the number of line segments included therein and the size of the angles formed between the line segments are only examples and do not constitute a limitation to the present embodiment.

[0035] In this embodiment, for the first line segment among the multiple line segments, the starting point offset coordinates are determined in a direction perpendicular to the first line segment according to the starting point coordinates, the ending point coordinates and the width information of the first line segment. The first line segment vector can be calculated according to the ending point coordinates and the starting point coordinates of the first line segment. Then, according to the first line segment vector, the direction perpendicular to the first line segment is determined. For example, the vertical vector of the first line segment vector can be calculated by using a method in which the dot product of the vertical vector is 0, and the direction of the vertical vector is the direction perpendicular to the first line segment.

[0036] The width information indicates the width of the line segment to be drawn. The width of the line segment to be drawn can be determined based on the width information. The width is the offset length of the starting point coordinates of the first line segment in the direction perpendicular to the direction vector of the line segment. Then, the starting point coordinates of the first line segment are offset in the direction perpendicular to the direction vector of the line segment according to the offset size to obtain the starting point offset coordinates. Figure 1c As shown, the starting point coordinates of the first line segment are offset by the length of "width 1" in a direction perpendicular to the first line segment to obtain the starting point offset coordinates, where "width 1" represents that the width information of the first line segment represents a width of 1 pixel.

[0037] In this embodiment, there is a fold point between any non-first line segment and the previous line segment of the non-first line segment, and a target angle is formed at the fold point. In the process of calculating the offset coordinates of the fold point corresponding to the fold point, the target offset of the fold point in the direction of the non-first line segment and the previous line segment can be combined. The target offset in each direction is related to the target angle and width information of the non-first line segment and the previous line segment. Among them, the target offset is obtained by adjusting the initial offset by the target angle, and the initial offset is obtained by multiplying the direction vector in each direction and the corresponding width information.

[0038] In this embodiment, for any non-first line segment among the multiple line segments, the target angle between the non-first line segment and the previous line segment is determined based on the starting point coordinates and the ending point coordinates of the non-first line segment and the previous line segment. For example, the vectors corresponding to the non-first line segment and the previous line segment can be calculated based on the starting point coordinates and the ending point coordinates of the non-first line segment and the previous line segment. Furthermore, the target angle between the non-first line segment and the previous line segment is calculated based on the vectors corresponding to the non-first line segment and the previous line segment.

[0039] Furthermore, according to the vector, width information and target angle of the non-first line segment and its previous line segment, the offset coordinates of the fold point corresponding to the fold point between the non-first line segment and its previous line segment are calculated. In this process, the offset coordinates of the fold point are determined by calculating the target offset of the fold point in the direction of the non-first line segment and its previous line segment. For example, the vector of each line segment and the corresponding width information can be multiplied to obtain the initial offset, wherein the non-first line segment corresponds to the width information of its previous line segment, and the previous line segment corresponds to the width information of the non-first line segment. Then, the initial offset in each direction is adjusted in combination with the target angle to obtain the target offset of the fold point in each direction, and the target offset of the fold point in the non-first line segment and its previous line segment is weightedly summed to obtain the offset coordinates of the fold point. As shown Figure 1c As shown, the offset coordinates of the broken line points other than the first line segment are obtained after the broken line point coordinates are offset.

[0040] In this embodiment, the last line segment among the multiple line segments includes the target polyline end point. For the last line segment among the multiple line segments, the end point offset coordinates are determined in a direction perpendicular to the last line segment according to the start point coordinates, end point coordinates and width information of the last line segment. Among them, the last line segment vector can be calculated according to the end point coordinates and the start point coordinates of the last line segment. Furthermore, according to the last line segment vector, the direction perpendicular to the last line segment is determined. For example, the dot product method of the vector can be used to calculate the perpendicular vector of the last line segment vector, and the direction of the perpendicular vector is the direction perpendicular to the last line segment.

[0041] Furthermore, the width of the line segment to be drawn is determined based on the width information of the last line segment, which is the offset length of the end point coordinates of the last line segment in the direction perpendicular to the direction vector of the line segment. Then, the end point coordinates of the last line segment are offset in the direction perpendicular to the direction vector of the line segment according to the offset length to obtain the end point offset coordinates. Figure 1c As shown, the end point coordinates of the last line segment are offset by the length of "width 2" in the direction perpendicular to the last line segment to obtain the end point offset coordinates, where "width 2" represents that the width information of the last line segment represents a width of 2 pixels.

[0042] It should be understood that the last line segment is also a non-first line segment, and the starting point of the last line segment is also the fold point of the target fold line, so the fold point offset is also required. For the offset method, please refer to the above embodiment, which will not be repeated here.

[0043] In this embodiment, when the starting point offset coordinates, the ending point offset coordinates and the folding point coordinates corresponding to the multiple line segments are obtained, the polygonal area surrounded by the starting point coordinates, the ending point coordinates and the starting point offset coordinates, the ending point offset coordinates and the folding point offset coordinates of the multiple line segments is drawn to obtain a target folding line with a width. Figure 1d An example of a target polyline having a width is shown.

[0044] In the embodiment of the present application, the target polyline is split into the first line segment, the non-first line segment and the last line segment, and the coordinates of each line segment are offset in a targeted manner; the starting point coordinates of the first line segment and the ending point coordinates of the last line segment are offset in combination with the width information and vertical direction of each line segment; for the polyline point coordinates of the non-first line segment, the polyline point offset calculation is performed by comprehensively considering the angle and width information of the non-first line segment and the line segment above it, to ensure a smooth transition at the polyline corner and the continuity of the width; according to the offset coordinates after the offset, a polygonal area is drawn to obtain a target polyline with a width. Since the width information of the line segment is combined when determining the offset coordinates of each line segment, the width of each line segment can be flexibly controlled, and line segments of different widths can be drawn in the target polyline.

[0045] In an optional embodiment, after the target polyline is divided into multiple line segments according to a set direction, it also includes: storing the starting point coordinates, ending point coordinates and width information of each line segment in a first array in turn; storing the starting point coordinates, ending point coordinates and width information of the previous line segment of each line segment in a second array, wherein, for the first line segment, the starting point coordinates, ending point coordinates and width information of the first line segment are used as the starting point coordinates, ending point coordinates and width information of the previous line segment and stored in the second array.

[0046] like Figure 2aAs shown, the starting point coordinates of the first line segment of the target polyline 20 are (x1, y1), the ending point coordinates are (x2, y2) and the width information W1, the starting point coordinates of the non-first line segment are (x3, y3), the ending point coordinates are (x4, y4) and the width information W2, and the starting point coordinates of the last line segment are (x5, y5), the ending point coordinates are (x6, y6) and the width information W3. Further, the starting point coordinates, the ending point coordinates and the width information of each line segment are stored in the first array in sequence; the starting point coordinates, the ending point coordinates and the width information of the previous line segment of each line segment are stored in the second array. Among them, for the first line segment, the starting point coordinates, the ending point coordinates and the width information of the first line segment are stored in the second array as the starting point coordinates, the ending point coordinates and the width information of the previous line segment.

[0047] Furthermore, each line segment in the first array is traversed, and for the first line segment, any non-first line segment and the last line segment traversed, the starting point coordinates, ending point coordinates and width information are obtained from the first array respectively, and the starting point coordinates, ending point coordinates and width information of the previous line segment are obtained from the second array respectively.

[0048] It should be understood that storing the starting point coordinates, end point coordinates and width information of each line segment in an array is only an optional implementation method, and the present application embodiment does not limit the storage form. For example, it can also be stored in a linked list or the like. In addition, traversal is also an optional implementation method, for example, multiple line segments can also be processed in parallel, so any method that can process all line segments belongs to the protection scope of this embodiment.

[0049] Among them, in the embodiment of the present application, the first line segment, the non-first line segment and the last line segment in the multiple line segments are respectively offset to obtain the corresponding offset coordinates. In addition, the order of offsetting the first line segment, the non-first line segment and the last line segment is not limited. In the subsequent embodiments, the coordinate offset is performed in the order of the first line segment→the non-first line segment→the last line segment, but it does not constitute a limitation to the present embodiment.

[0050] In an optional embodiment, in the process of calculating the starting point offset coordinates perpendicular to the starting point coordinates of the first line segment among multiple line segments based on the starting point coordinates, ending point coordinates and width information of the first line segment, the first unit vector of the first line segment and the first offset direction perpendicular to the first unit vector can be determined based on the starting point coordinates and ending point coordinates of the first line segment.

[0051] For example, continuing with the above example, Figure 2aAs shown in the figure, the coordinates of the starting point of the first line segment are (x1, y1), the coordinates of the ending point are (x2, y2) and the width information is W1. The process of determining the first unit vector includes: subtracting the coordinates of the starting point (x1, y1) from the coordinates of the ending point (x2, y2) of the first line segment to obtain the first line segment vector (x2-x1, y2-y1). Get len1; divide the first line segment vector (x2-x1, y2-y1) by len1 to get the first unit vector, which can be expressed as startNor.

[0052] Further, the first intermediate coordinate is calculated according to the first unit vector and the width information. For example, the first unit vector startNor is multiplied by the width information W1 to obtain the first intermediate coordinate (xnor1, ynor1).

[0053] When the first intermediate coordinate is obtained, the first intermediate coordinate is converted to the first offset direction, that is, the first intermediate coordinate is converted to the direction perpendicular to the first line segment to obtain the offset coordinate of the starting point. For example, the vertical coordinate (-ynor1, xnor1) or (ynor1, -xnor1) of the first intermediate coordinate in the direction perpendicular to the first line segment can be determined by taking the vertical vector dot product as 0, and the vertical coordinate is used as the offset coordinate of the starting point of the target polyline.

[0054] It should be understood that the first line segment includes two sides in the vertical direction. Figure 2a As shown, one is biased towards the inside of the target fold line, and the other is biased towards the outside of the target fold line, wherein the definition of the inside and outside of the target fold line is not limited. Optionally, the inside of the target fold line refers to the area where the angle formed by the two adjacent line segments of the fold line points is less than 180°, and the outside of the target fold line refers to the area where the angle formed by the two adjacent line segments of the fold line points is greater than 180°. When determining the offset coordinates of the starting point, you can choose one, and there is no limitation on this. However, when determining the offset coordinates of the fold line point and the offset coordinates of the end point, the fold line point offset coordinates, the end point offset coordinates and the starting point offset coordinates should be located on the same side of the target fold line.

[0055] In the above embodiment, an optional implementation method for determining the offset coordinates of the starting point is introduced. In another optional embodiment, in the process of calculating the offset coordinates of the starting point that correspond perpendicularly to the starting point coordinates of the first line segment according to the starting point coordinates, the ending point coordinates and the width information of the first line segment, the first direction vector of the first line segment can be determined according to the starting point coordinates and the ending point coordinates of the first line segment. Further, the first perpendicular vector to the first direction vector can be determined by taking the dot product of the perpendicular vector as 0. The first perpendicular vector is normalized, and the normalized first perpendicular vector is multiplied by the width information of the first line segment to obtain the first offset vector in the direction perpendicular to the first line segment. Further, the starting point coordinates of the first line segment are taken as the reference point and summed with the first offset vector to obtain the offset coordinates of the starting point.

[0056] In an optional embodiment, in the process of determining the target angle between any non-first line segment and its previous line segment according to the starting point coordinates and the ending point coordinates of the non-first line segment and its previous line segment for any non-first line segment among multiple line segments, the vector of any non-first line segment and its previous line segment is determined respectively according to the starting point coordinates and the ending point coordinates of any non-first line segment and its previous line segment.

[0057] It should be understood that the direction in which the broken line point is offset includes both sides. Figure 2a As shown, one is biased toward the inside of the target fold line, and the other is biased toward the outside of the target straight line. When determining the offset coordinates of the fold line point, you can choose one, and there is no limitation on this. However, when determining the offset coordinates of the starting point and the offset coordinates of the ending point, the offset coordinates of the fold line point, the offset coordinates of the ending point and the offset coordinates of the starting point should be located on the same side of the target fold line.

[0058] Continuing with the above example, Figure 2a As shown, the starting point coordinates of the non-first line segment are (x3, y3), and the ending point coordinates are (x4, y4). It is assumed that the previous line segment of the non-first line segment is the first line segment, and the starting point coordinates of the first line segment are (x1, y1), and the ending point coordinates are (x2, y2). Based on this, the ending point coordinates of the non-first line segment are subtracted from the starting point coordinates to obtain a vector (x4-x3, y4-y3) and abbreviated as SNow, and the starting point coordinates of the first line segment are subtracted from the ending point coordinates to obtain a vector (x1-x2, y1-y2) and abbreviated as Spre. Taking the offset of the fold line point to the outside of the target fold line as an example, the inverse vector of Spre is obtained as the vector of the previous line segment of the non-first line segment, and the inverse vector of SNow is obtained as the vector of the non-first line segment. It should be understood that when the fold point is offset to the inside of the target fold, there is no need to negate the vector, and Spre is directly used as the vector of the previous line segment of the non-first line segment, and SNow is used as the vector of the non-first line segment.

[0059] Further, based on the vector of any non-first line segment and its previous line segment, the target angle between any non-first line segment and its previous line segment is determined. For example, when the vector of any non-first line segment is SNow and the vector of its previous line segment is Spre, the angle between SNow and Spre is determined as the target angle. For another example, when the vector of any non-first line segment is the inverse vector of SNow and the vector of its previous line segment is the inverse vector of Spre, the angle between the inverse vector of SNow and the inverse vector of Spre is determined as the target angle

[0060] Further optionally, in the process of calculating the offset coordinates of the fold point corresponding to the fold point between the non-first line segment and its preceding line segment according to the starting point coordinates, ending point coordinates, width information and target angle of the non-first line segment and its preceding line segment, the target trigonometric function value corresponding to the target angle is determined, and the target trigonometric function value is not 0. The target function value is not 0 to exclude the interference of dirty data. For example, in some cases, the preceding line segment of the non-first line segment may be the non-first line segment itself, and the target angle is 0° or 180°, then it can be considered that there is no fold point between the non-first line segment and its preceding line segment.

[0061] Optionally, in the process of determining the target trigonometric function value corresponding to the target angle, the process includes: calculating the sine value of the target angle, which can be expressed as sinValue; if the sine value is not 0, using the sine value (such as sinValue) as the target trigonometric function value; if the sine value is 0, using the target value that is not 0 as the target trigonometric function value. The target value can be any value, and there is no limitation on this. Preferably, the target value can be 0.1.

[0062] Further, in this optional embodiment, the first offset and the second offset of the broken line point are determined respectively according to the vector and width information of any non-first line segment and its previous line segment, combined with the target trigonometric function value. Optionally, in the process of determining the first offset and the second offset, the first offset is determined according to the ratio of the product result between the vector of any non-first line segment and the width information of its previous line segment and the target trigonometric function value; the second offset is determined according to the ratio of the product result between the vector of the previous line segment and the width information of the non-first line segment and the target trigonometric function value. For example, the first offset can be expressed as SNow*W2 / sinValue; the second offset can be expressed as Spre*W1 / sinValue. Among them, "*" represents multiplication operation, and " / " represents division operation.

[0063] Further, the offset coordinates of the fold line point corresponding to the fold line point are determined according to the first offset and the second offset. For example, the offset coordinates of the fold line point can be taken as the weighted sum of the first offset and the second offset. In one example, the offset coordinates of the fold line point can be called Newpoints, Newpoints = SNow*W2 / sinValue+Spre*W1 / sinValue. Figure 2a As shown, Newpoints1 and Newpoints2 are both the foldline offset coordinates corresponding to the foldline points of the target foldline 20 .

[0064] In an optional embodiment, in the process of calculating the end point offset coordinates perpendicular to the end point coordinates of the last line segment among multiple line segments based on the starting point coordinates, end point coordinates and width information of the last line segment, the second unit vector of the last line segment and the second offset direction perpendicular to the second unit vector are determined based on the starting point coordinates and end point coordinates of the last line segment.

[0065] In the above example, Figure 2a As shown in FIG. 1 , the starting point coordinates of the last line segment are (x5, y5), the ending point coordinates are (x6, y6) and the width information is W3. The process of determining the first unit vector includes: subtracting the starting point coordinates (x5, y5) from the ending point coordinates (x6, y6) of the last line segment to obtain the last line segment vector (x6-x5, y6-y5). Further, the modulus length of the last line segment vector is calculated, that is, Get the modulus of the last vector (such as len2); divide the last line segment vector (x6-x5, y6-y5) by len2 to get the second unit vector, which can be expressed as endNor.

[0066] Further, in this optional embodiment, the second intermediate coordinate is calculated according to the second unit vector and the width information. For example, the second unit vector endNor is multiplied by the width information W3 to obtain the second intermediate coordinate (xnor2, ynor2).

[0067] When the second intermediate coordinate is obtained, the second intermediate coordinate is converted to the second offset direction, that is, the second intermediate coordinate is converted to the direction perpendicular to the last line segment to obtain the end point offset coordinate. For example, the vertical coordinate (-ynor2, xnor2) or (ynor2, -xnor2) of the second intermediate coordinate in the direction perpendicular to the last line segment can be determined by taking the vertical vector dot product as 0, and the vertical coordinate is used as the end point offset coordinate of the target polyline.

[0068] It should be understood that the last line segment includes two sides in the vertical direction. Figure 2a As shown, one is biased toward the inside of the target polyline, and the other is biased toward the outside of the target polyline. When determining the end point offset coordinates, you can choose one, and there is no limitation on this. However, when determining the polyline point offset coordinates and the starting point offset coordinates, the polyline point offset coordinates, the end point offset coordinates, and the starting point offset coordinates should be located on the same side of the target polyline.

[0069] In the above embodiment, an optional implementation method for determining the end point offset coordinates is introduced. In another optional embodiment, in the process of calculating the end point offset coordinates perpendicular to the end point coordinates of the last line segment according to the start point coordinates, the end point coordinates and the width information of the last line segment, the second direction vector of the last line segment can be determined according to the start point coordinates and the end point coordinates of the last line segment. Further, the second perpendicular vector to the second direction vector can be determined by taking the dot product of the perpendicular vector as 0. The second perpendicular vector is normalized, and the normalized second perpendicular vector is multiplied by the width information of the last line segment to obtain the second offset vector in the direction perpendicular to the last line segment. Further, the end point coordinates of the last line segment are used as the reference point and summed with the second offset vector to obtain the end point offset coordinates.

[0070] Optionally, when the starting point offset coordinates, fold line point offset coordinates and end point offset coordinates corresponding to multiple line segments are obtained, the starting point offset coordinates, fold line point offset coordinates and end point offset coordinates corresponding to the multiple line segments can be stored in a third array.

[0071] like Figure 2b As shown, when the starting point offset coordinates, fold point offset coordinates and end point offset coordinates corresponding to multiple line segments are obtained, the polygonal area enclosed by the starting point coordinates, end point coordinates and the starting point offset coordinates, end point offset coordinates and fold point offset coordinates of the multiple line segments can be drawn to obtain a target fold line with a width.

[0072] In an optional embodiment, a polygonal area is determined based on the starting point coordinates, the ending point coordinates and the starting point offset coordinates, the ending point offset coordinates, and the polyline point offset coordinates of multiple line segments; the polygonal area is triangulated to obtain corresponding multiple triangles; and the multiple triangles are filled and drawn based on a WebGL graphics drawing interface to form a target polyline with a width.

[0073] In this embodiment, the application scenario of the above line drawing method is not limited. For example, it can be applied in a VR (Virtual Reality) house viewing scenario to provide a graphics rendering basis for VR house viewing.

[0074] For example, a VR house viewing function can be integrated into a real estate application. Users can browse different housing information through the real estate application. When the user browses the housing information of the target house, the VR house viewing function can be clicked. After entering the VR house viewing function, in response to the user's triggering operation on the display of the two-dimensional floor plan control, the two-dimensional floor plan data of the target house can be obtained from the back-end server, and the two-dimensional floor plan data includes multiple broken lines. In the case of obtaining the two-dimensional floor plan data, the two-dimensional floor plan corresponding to the target house is drawn based on the line drawing method provided in the above embodiment. For example, for the main wall of the house, a wider line can be used to highlight its main structure; for the partition wall, a narrower line can be used to indicate that it is a secondary structure. After the drawing is completed, the two-dimensional floor plan of the target house is displayed to the user, so that the user can quickly understand the structure of the house according to lines of different widths.

[0075] For another example, in a VR house viewing scene, a function of browsing a three-dimensional house model is also provided. For example, after entering the VR house viewing function, it can respond to the user's triggering operation of displaying a three-dimensional house model control. Further, the three-dimensional house model data of the target house is obtained from the back-end server. When the three-dimensional house model data is obtained, the three-dimensional house model corresponding to the target house is drawn based on the line drawing method provided in the above embodiment. In response to drawing the three-dimensional solid, by adopting the line control method provided in this embodiment, the width of the line can be flexibly controlled, so that it can be applied to more complex house structures to meet the width requirements of different lines.

[0076] The detailed implementation and beneficial effects of each step in the method of this embodiment have been described in detail in the aforementioned embodiments and will not be elaborated here.

[0077] It should be noted that the execution subject of each step of the method provided in the above embodiment can be the same device, or the method can be executed by different devices. For example, the execution subject of steps 101 to 103 can be device A; for another example, the execution subject of steps 101 and 102 can be device A, and the execution subject of step 103 can be device B; and so on.

[0078] In addition, in some of the processes described in the above embodiments and the accompanying drawings, multiple operations that appear in a specific order are included, but it should be clearly understood that these operations may not be executed in the order in which they appear in this article or executed in parallel, and the sequence numbers of the operations, such as 101, 102, etc., are only used to distinguish between different operations, and the sequence numbers themselves do not represent any execution order. In addition, these processes may include more or fewer operations, and these operations may be executed in sequence or in parallel. It should be noted that the descriptions of "first", "second", etc. in this article are used to distinguish different messages, devices, modules, etc., do not represent the order of precedence, and do not limit the "first" and "second" to be different types.

[0079] Figure 3 FIG. 1 is a schematic diagram of a structure of an electronic device provided by another exemplary embodiment of the present application. Figure 3 As shown, the electronic device includes: a memory 34 and a processor 35.

[0080] The memory 34 is used to store computer programs and can be configured to store various other data to support operations on the electronic device. Examples of such data include instructions for any application or method operating on the electronic device, contact data, phone book data, messages, pictures, videos, etc.

[0081] The memory 34 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk or optical disk.

[0082] The processor 35 is coupled to the memory 34 and is used to execute the computer program in the memory 34, so as to: divide the target broken line into a plurality of line segments according to a set direction, wherein there is a broken line point between adjacent line segments in the plurality of line segments, and each line segment has a starting point coordinate, an ending point coordinate and width information; for a first line segment in the plurality of line segments, determine the starting point offset coordinates in a direction perpendicular to the first line segment according to the starting point coordinates, the ending point coordinates and the width information of the first line segment; for any non-first line segment in the plurality of line segments, determine the offset coordinates of the non-first line segment and the preceding line segment according to the starting point coordinates and the ending point coordinates of the non-first line segment and the preceding line segment target angle; calculating the fold line point offset coordinates corresponding to the fold line point between the non-first line segment and its preceding line segment according to the starting point coordinates, ending point coordinates, width information and the target angle of the non-first line segment and its preceding line segment; for the last line segment among the multiple line segments, determining the ending point offset coordinates in a direction perpendicular to the last line segment according to the starting point coordinates, ending point coordinates and width information of the last line segment; drawing a polygonal area enclosed by the starting point coordinates, ending point coordinates of the multiple line segments and the starting point offset coordinates, the ending point offset coordinates and the fold line point offset coordinates to obtain a target fold line with a width.

[0083] In an optional embodiment, after the processor 35 divides the target polyline into multiple line segments according to the set direction, it is also used to: store the starting point coordinates, ending point coordinates and width information of each line segment in a first array in turn; store the starting point coordinates, ending point coordinates and width information of the previous line segment of each line segment in a second array, wherein, for the first line segment, the starting point coordinates, ending point coordinates and width information of the first line segment are used as the starting point coordinates, ending point coordinates and width information of the previous line segment and stored in the second array; traverse each line segment in the first array, and for the first line segment, any non-first line segment and the last line segment traversed, obtain their starting point coordinates, ending point coordinates and width information from the first array respectively, and obtain the starting point coordinates, ending point coordinates and width information of the previous line segment from the second array respectively.

[0084] In an optional embodiment, when the processor 35 calculates the starting point offset coordinates corresponding to the starting point coordinates of the first line segment among the multiple line segments based on the starting point coordinates, the ending point coordinates and the width information of the first line segment, it is specifically used to: determine the first unit vector of the first line segment and the first offset direction perpendicular to the first unit vector based on the starting point coordinates and the ending point coordinates of the first line segment; calculate the first intermediate coordinates based on the first unit vector and the width information; convert the first intermediate coordinates to the first offset direction to obtain the starting point offset coordinates.

[0085] In an optional embodiment, when the processor 35 determines the target angle between the non-first line segment and its previous line segment according to the starting point coordinates and the ending point coordinates of the non-first line segment and its previous line segment for any non-first line segment among the multiple line segments, the processor 35 is specifically used to: determine the vector of any non-first line segment and its previous line segment according to the starting point coordinates and the ending point coordinates of the non-first line segment and its previous line segment respectively; determine the target angle between any non-first line segment and its previous line segment according to the vector of the non-first line segment and its previous line segment.

[0086] In an optional embodiment, when the processor 35 calculates the breakpoint offset coordinates corresponding to the breakpoint between the non-first line segment and its previous line segment based on the starting point coordinates, ending point coordinates, width information and target angle of the non-first line segment and its previous line segment, it is specifically used to: determine the target trigonometric function value corresponding to the target angle, and the target trigonometric function value is not 0; determine the first offset and the second offset of the breakpoint according to the vector and width information of any non-first line segment and its previous line segment, combined with the target trigonometric function value; determine the breakpoint offset coordinates corresponding to the breakpoint according to the first offset and the second offset.

[0087] In an optional embodiment, when determining the target trigonometric function value corresponding to the target angle, the processor 35 is specifically used to: calculate the sine value of the target angle; if the sine value is not 0, use the sine value as the target trigonometric function value; if the sine value is 0, use the target value that is not 0 as the target trigonometric function value.

[0088] In an optional embodiment, when the processor 35 determines the first offset and the second offset of the broken line point respectively based on the vector and width information of any non-first line segment and its previous line segment in combination with the target trigonometric function value, it is specifically used to: determine the first offset based on the ratio of the product result of the vector of any non-first line segment and the width information of its previous line segment to the target trigonometric function value; determine the second offset based on the ratio of the product result of the vector and width information of the previous line segment to the target trigonometric function value.

[0089] In an optional embodiment, when the processor 35 calculates the end point offset coordinates perpendicular to the end point coordinates of the last line segment among the multiple line segments based on the starting point coordinates, the end point coordinates and the width information of the last line segment, it is specifically used to: determine the second unit vector of the last line segment and the second offset direction perpendicular to the second unit vector based on the starting point coordinates and the end point coordinates of the last line segment; calculate the second intermediate coordinates based on the second unit vector and the width information; and convert the second intermediate coordinates to the second offset direction to obtain the end point offset coordinates.

[0090] In an optional embodiment, when the processor 35 draws a polygonal area enclosed by the starting point coordinates, the ending point coordinates and the starting point offset coordinates, the ending point offset coordinates and the foldline point offset coordinates of the multiple line segments to obtain a target polyline with a width, the processor 35 is specifically used to: determine the polygonal area according to the starting point coordinates, the ending point coordinates and the starting point offset coordinates, the ending point offset coordinates and the foldline point offset coordinates of the multiple line segments; triangulate the polygonal area to obtain corresponding multiple triangles; and fill and draw the multiple triangles based on a WebGL graphics drawing interface to form a target polyline with a width.

[0091] Further, if Figure 3 As shown, the electronic device also includes: a communication component 36, a display 37, a power component 38, an audio component 39 and other components. Figure 3 Only some components are shown schematically, which does not mean that the electronic device only includes Figure 3 In addition, Figure 3 The components in the dashed box are optional components, not mandatory components, and the specific components depend on the product form of the electronic device. The electronic device of this embodiment can be implemented as a terminal device such as a desktop computer, a laptop computer, a smart phone, or an IOT device, or a server device such as a conventional server, a cloud server, or a server array. If the electronic device of this embodiment is implemented as a terminal device such as a desktop computer, a laptop computer, a smart phone, etc., it can include Figure 3 If the electronic device of this embodiment is implemented as a server device such as a conventional server, a cloud server or a server array, it may not include Figure 3 Components within the dashed box.

[0092] Accordingly, an embodiment of the present application further provides a computer-readable storage medium storing a computer program, and when the computer program is executed by a processor, the processor is enabled to implement the steps in the above method.

[0093] An embodiment of the present application also provides a computer program product, which includes a computer program / instructions. When the computer program / instructions are executed by a processor, the processor is enabled to implement the steps in the above method embodiment.

[0094] The above-mentioned memory can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read only memory (EEPROM), erasable programmable read only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk or optical disk.

[0095] The above-mentioned communication component is configured to facilitate wired or wireless communication between the device where the communication component is located and other devices. The device where the communication component is located can access a wireless network based on a communication standard, such as WiFi, 2G, 3G, 4G / LTE, 5G and other mobile communication networks, or a combination thereof. In an exemplary embodiment, the communication component receives a broadcast signal or broadcast-related information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communication component also includes a near field communication (NFC) module to facilitate short-range communication. For example, the NFC module can be based on Radio Frequency Identification (RFID) technology, Infrared Data Association (IrDA) technology, Ultra Wide Band (UWB) technology, Bluetooth (BT) technology and other technologies.

[0096] The above-mentioned display includes a screen, and the screen may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive input signals from a user. The touch panel includes one or more touch sensors to sense touch, slide, and gestures on the touch panel. The touch sensor may not only sense the boundary of a touch or slide action, but also detect the duration and pressure associated with the touch or slide operation.

[0097] The power supply assembly provides power to various components of the device where the power supply assembly is located. The power supply assembly may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power to the device where the power supply assembly is located.

[0098] The above-mentioned audio component can be configured to output and / or input audio signals. For example, the audio component includes a microphone (Microphone, MIC), and when the device where the audio component is located is in an operating mode, such as a call mode, a recording mode, and a speech recognition mode, the microphone is configured to receive an external audio signal. The received audio signal can be further stored in a memory or sent via a communication component. In some embodiments, the audio component also includes a speaker for outputting an audio signal.

[0099] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented in one or more computer-readable storage media (including but not limited to disk storage, compact disc read-only memory (Compact Disc Read-Only Memory, CD-ROM), optical storage, etc.) containing computer-usable program code.

[0100] The present application is described with reference to the flowchart and / or block diagram of the method, device (system) and computer program product according to the embodiment of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, and the combination of the process and / or box in the flowchart and / or block diagram can be realized by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device produce a device for realizing the function specified in one process or multiple processes in the flowchart and / or one box or multiple boxes in the block diagram.

[0101] These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer-readable memory produce a manufactured product including an instruction device that implements the functions specified in one or more processes in the flowchart and / or one or more boxes in the block diagram.

[0102] These computer program instructions may also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, whereby the instructions executed on the computer or other programmable device provide steps for implementing the functions specified in one or more processes in the flowchart and / or one or more boxes in the block diagram.

[0103] In a typical configuration, a computing device includes one or more processors (Central Processing Unit, CPU), input / output interface, network interface and memory.

[0104] Memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. Memory is an example of a computer-readable medium.

[0105] Computer readable media include permanent and non-permanent, removable and non-removable media that can be used to store information by any method or technology. Information can be computer-readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase-change random access memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, read-only compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassettes, magnetic tape disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0106] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0107] The above are only embodiments of the present application and are not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included within the scope of the claims of the present application.

Claims

1. A line drawing method, characterized in that: include: Divide the target broken line into a plurality of line segments according to a set direction, wherein there are broken line points between adjacent line segments in the plurality of line segments, and each line segment has a starting point coordinate, an end point coordinate and width information; For a first line segment among the plurality of line segments, determining a starting point offset coordinate in a direction perpendicular to the first line segment according to the starting point coordinate, the ending point coordinate and the width information of the first line segment; For any non-first line segment among the multiple line segments, determine a target angle between the non-first line segment and its preceding line segment according to the starting point coordinates and the ending point coordinates of the non-first line segment and its preceding line segment; calculate a fold point offset coordinate corresponding to a fold point between the non-first line segment and its preceding line segment according to the starting point coordinates, the ending point coordinates, the width information and the target angle of the non-first line segment and its preceding line segment; For the last line segment among the multiple line segments, determine the end point offset coordinates in a direction perpendicular to the last line segment according to the start point coordinates, the end point coordinates and the width information of the last line segment; A polygonal area enclosed by the starting point coordinates, the ending point coordinates of the multiple line segments and the starting point offset coordinates, the ending point offset coordinates, and the foldline point offset coordinates is drawn to obtain a target foldline with a width.

2. The method according to claim 1, characterized in that After the target polyline is divided into multiple line segments according to the set direction, it also includes: The starting point coordinates, the ending point coordinates and the width information of each line segment are stored in the first array in sequence; The starting point coordinates, the ending point coordinates and the width information of the preceding line segment of each line segment are stored in the second array, wherein for the first line segment, the starting point coordinates, the ending point coordinates and the width information of the first line segment are used as the starting point coordinates, the ending point coordinates and the width information of the preceding line segment and stored in the second array; Each line segment in the first array is traversed, and for the first line segment, any non-first line segment and the last line segment traversed, the starting point coordinates, ending point coordinates and width information are obtained from the first array respectively, and the starting point coordinates, ending point coordinates and width information of the previous line segment are obtained from the second array respectively.

3. The method according to claim 1 or 2, characterized in that: For a first line segment among the multiple line segments, according to the starting point coordinates, the ending point coordinates and the width information of the first line segment, calculating the starting point offset coordinates perpendicular to the starting point coordinates of the first line segment, including: Determine a first unit vector of the first line segment and a first offset direction perpendicular to the first unit vector according to the coordinates of the starting point and the ending point of the first line segment; Calculate a first intermediate coordinate according to the first unit vector and the width information; The first intermediate coordinate is converted into the first offset direction to obtain the starting point offset coordinate.

4. The method according to claim 1 or 2, characterized in that: For any non-first line segment among the multiple line segments, determining a target angle between the non-first line segment and the preceding line segment according to the coordinates of the starting points and the ending points of the non-first line segment and the preceding line segment, including: According to the coordinates of the starting point and the ending point of any non-first line segment and its preceding line segment, respectively determine the vector of any non-first line segment and its preceding line segment; According to the vector of any non-first line segment and its previous line segment, a target angle between any non-first line segment and its previous line segment is determined.

5. The method according to claim 4, characterized in that According to the starting point coordinates, ending point coordinates, width information and target angle of the non-first line segment and its previous line segment, the offset coordinates of the broken line point corresponding to the broken line point between the non-first line segment and its previous line segment are calculated, including: Determine a target trigonometric function value corresponding to the target angle, wherein the target trigonometric function value is not 0; According to the vector and width information of any non-first line segment and its preceding line segment, combined with the target trigonometric function value, respectively determine the first offset and the second offset of the broken line point; The fold line point offset coordinates corresponding to the fold line point are determined according to the first offset and the second offset.

6. The method according to claim 5, characterized in that Determining a target trigonometric function value corresponding to the target angle includes: Calculating the sine value of the target angle; If the sine value is not 0, the sine value is used as the target trigonometric function value; If the sine value is 0, a target value that is not 0 is used as the target trigonometric function value.

7. The method according to claim 5, characterized in that According to the vector and width information of any non-first line segment and its previous line segment, combined with the target trigonometric function value, the first offset and the second offset of the broken line point are determined respectively, including: Determine the first offset according to the ratio of the product of the vector of any non-first line segment and the width information of the previous line segment and the target trigonometric function value; The second offset is determined according to the ratio of the product of the vector of the previous line segment and the width information of any non-first line segment to the target trigonometric function value.

8. The method according to claim 1 or 2, characterized in that: For the last line segment of the multiple line segments, according to the starting point coordinates, the ending point coordinates and the width information of the last line segment, calculating the ending point offset coordinates perpendicular to the ending point coordinates of the last line segment, including: Determine, according to the coordinates of the starting point and the ending point of the last line segment, a second unit vector of the last line segment and a second offset direction perpendicular to the second unit vector; Calculate a second intermediate coordinate according to the second unit vector and the width information; The second intermediate coordinates are converted into the second offset direction to obtain the end point offset coordinates.

9. The method according to claim 1, characterized in that: Drawing a polygonal area enclosed by the starting point coordinates, the ending point coordinates of the plurality of line segments and the starting point offset coordinates, the ending point offset coordinates, and the foldline point offset coordinates to obtain a target foldline with a width, including: Determine a polygonal area according to the starting point coordinates, the ending point coordinates, the starting point offset coordinates, the ending point offset coordinates, and the broken line point offset coordinates of the plurality of line segments; Triangulate the polygonal area to obtain a corresponding plurality of triangles; The multiple triangles are filled and drawn based on a WebGL graphics drawing interface to form a target polyline with a width.

10. An electronic device, characterized in that: include: Memory and processor; The memory is used to store a computer program, and the processor is coupled to the memory and is used to execute the computer program in the memory to implement the steps in the method according to any one of claims 1 to 9.

11. A computer-readable storage medium storing a computer program / instruction, characterized in that: When the computer program / instructions are executed by a processor, the processor is enabled to implement the steps in the method according to any one of claims 1 to 9.

12. A computer program product, characterized in that include: A computer program / instruction, when the computer program / instruction is executed by a processor, enables the processor to implement the steps in any one of the methods of claims 1-9.