CN115457166A - Irregular round-corner polygon drawing method - Google Patents

Abstract

The invention provides a method for drawing an irregular round-corner polygon, which comprises the following steps: s1: acquiring coordinates of each vertex of a closed polygon graph in a current graph rendering coordinate system; s2: setting a fillet coefficient for each vertex; s3: positioning one vertex, and calculating tangent point coordinates on two sides of the vertex according to the coordinates of the adjacent vertex of the vertex; s4: drawing a Bezier curve by taking the current vertex as a control point and taking the left tangent point and the right tangent point as a starting point and an end point respectively; s5: and (5) repeating the steps S3-S4 until all the vertexes are positioned to complete the operations of the steps S3 and S4, closing the whole curve to obtain a rounded polygon, and solving the limitation problem of calling an interface to draw in the conventional mode.

Description

Irregular round-corner polygon drawing method

Technical Field

The invention relates to the technical field of drawing and displaying of electronic screens, in particular to a method for drawing irregular round-corner polygons.

Background

In system development, the front end is also important, and in mobile end development, the layout system is often in a rectangular form, wherein the common rounded polygon is only a rounded rectangle. The rounded rectangle is directly supported by API in the system, the API provides a rounded radius setting interface for developers, and interface design can be realized by directly calling the interface; the principle of implementation of this method is to draw a circle with radius r at four corners to perform tangent cutting processing (as shown in fig. 3), however, this scheme can only satisfy rendering of a rectangular interface based on this principle;

however, in actual development work, smooth curve polygons are often used to express business requirements, for example: icon data trend and distribution, expression of a map-form track, round-cornered processing of a plane polygon and the like, and the conventional drawing method cannot meet the requirement of rendering a non-rectangular interface.

Disclosure of Invention

In order to solve the problems, the invention provides an irregular rounded polygon drawing method, which comprises the steps of taking each angular vertex of a polygon as a core, calculating adjacent tangent points, further drawing a Bezier curve, traversing all the vertices of the polygon, executing the same operation, obtaining the Bezier curve corresponding to each vertex, closing the whole curve, and finally obtaining a rounded polygon.

The invention provides a method for drawing an irregular round-corner polygon, which has the following specific technical scheme:

s1: acquiring coordinates of each vertex of a closed polygon graph in a current graph rendering coordinate system, wherein the closed polygon graph has at least three vertexes;

s2: setting a fillet coefficient for each vertex;

s3: positioning one vertex, and calculating tangent point coordinates on two sides of the vertex according to the coordinates of the adjacent vertex of the vertex;

s4: drawing a Bezier curve by taking the current vertex as a control point and taking the left tangent point and the right tangent point as a starting point and an end point respectively;

s5: and (5) repeatedly executing the steps S3-S4 until all the vertexes are positioned to finish the operations of the steps S3 and S4, closing the whole curve and obtaining a rounded polygon.

Further, the graph rendering coordinate system is a two-dimensional rectangular coordinate system.

Further, the round factor satisfies [0,0.5].

Further, the tangent point coordinate calculation process is as follows:

s301: calculating a coordinate point difference value of the vertex and the left tangent point based on the fillet coefficient of the current vertex, the self coordinate and the left adjacent point coordinate of the vertex;

calculating a coordinate point difference value of the vertex and the right tangent point based on the fillet coefficient of the current vertex, the coordinate of the vertex and the coordinate of the right adjacent point of the vertex;

s302: and obtaining the coordinate points of the left tangent point and the right tangent point based on the coordinate of the current vertex and the coordinate point difference value between the vertex and the left tangent point and the right tangent point respectively.

Furthermore, when the steps S2 to S4 are repeatedly executed, the vertices are sequentially positioned to perform corresponding operations based on the current closed polygon figure.

The invention has the following beneficial effects:

1. the method calculates and combines the coordinates of a left tangent point and a right tangent point of a current vertex by the coordinates of a vertex and adjacent vertices in a graph to be drawn, draws a Bezier curve according to the coordinates of the left tangent point and the right tangent point of the current vertex and the coordinates of the current vertex, draws corresponding Bezier curves based on each vertex through the operation, closes the curves, completes the drawing of the whole curve, draws the curve by taking each vertex of an irregular graph as a core, realizes the rounding treatment of the irregular closed polygon, and avoids the limitation of rounding drawing caused by the larger difference of each corner of the irregular graph.

2. The method of the invention realizes the drawing of the graph by carrying out corresponding operation based on the vertex coordinates, does not depend on drawing a circle with set radius parameters at the vertex for smooth processing, is compatible with the effect style of a rounded rectangle of a system, supports the rounded drawing of an irregular closed graph with a plurality of different angle vertexes, and is suitable for any closed irregular polygon.

Drawings

FIG. 1 is a schematic flow diagram of the process of the present invention;

FIG. 2 is a drawing process effect demonstration diagram of the present invention;

FIG. 3 is a schematic diagram of the effect of the prior art treatment process.

Detailed Description

In the following description, technical solutions in the embodiments of the present invention are clearly and completely described, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.

Example 1

The embodiment 1 of the invention discloses a method for drawing an irregular round-corner polygon, which comprises the following specific steps as shown in figure 1:

s1: acquiring coordinates of each vertex of a closed polygonal graph in a current graph rendering coordinate system, wherein the closed polygonal graph has at least three vertexes;

in this embodiment, the graphics rendering coordinate system is a two-dimensional rectangular coordinate system.

S2: and setting a fillet coefficient for each vertex, wherein the fillet coefficient a satisfies a condition that a is greater than or equal to 0 and less than or equal to 0.5, and the larger a is, the larger a is the fillet is.

S3: positioning one vertex, and calculating tangent point coordinates on two sides of the vertex according to the coordinates of the adjacent vertex of the vertex;

the tangent point coordinate calculation process is as follows:

s301: calculating a coordinate point difference value of the vertex and the left tangent point based on the fillet coefficient of the current vertex, the coordinate of the current vertex and the coordinate of a left adjacent point of the vertex;

calculating a coordinate point difference value of the vertex and the right tangent point based on the fillet coefficient of the current vertex, the coordinate of the vertex and the coordinate of the right adjacent point of the vertex;

s302: and obtaining the coordinate points of the left tangent point and the right tangent point based on the coordinate of the current vertex and the coordinate point difference value between the vertex and the left tangent point and the right tangent point respectively.

S4: drawing a Bezier curve by taking the current vertex as a control point and taking the left tangent point and the right tangent point as a starting point and an end point respectively;

s5: and (4) sequentially positioning vertexes based on the current closed polygon graph, repeatedly executing the steps S3-S4 until all vertexes are positioned to finish the operations of the steps S3 and S4, closing the whole curve, and finally obtaining the rounded polygon.

Specifically, in this embodiment, a closed polygon a is described, where the number of vertices is N (N > = 3), and the vertex coordinates are:

P0＝(x0，y0)，P1＝(x1，y1)，P2＝(x2，y2)，P3＝(x3，y3)，...，Pn＝(xn，yn)；

the closed polygonal figure A can be obtained by drawing software by connecting P0 to Pn through straight lines in turn, the vertex angle of the closed polygonal figure is a non-fillet angle intersected by the straight lines, and the degree of the angle is T, and 0 degrees < T <360 degrees are satisfied.

Referring to fig. 2, based on the closed polygon graph a, the drawing process is as follows:

starting from a first point P0 (x 0, y 0), a rounding coefficient a is set;

tangent points P0_ left and P0_ right on two sides of the vertex P0 are calculated according to the coordinate points of Pn (xn, yn), P0 (x 0, y 0) and P1 (x 1, y 1), wherein P0_ left represents a left tangent point, and P0_ right represents a right tangent point, which are as follows:

calculating the difference dxl = a (x 0-xn) between P0_ left and P0 on the x-axis, and the difference on the y-axis is dyl = a (y 0-yn);

calculating the difference dxr = a (x 1-x 0) of the x axis between the P0_ right and the P0, and the difference of the y axis is dyr = a (y 1-y 0);

thereby, it is possible to obtain:

P0_left＝(x0-dxl，y0-dyl)，P0_right＝(x0+dxr，y0+dyr)；

according to the coordinates of the tangent points P0_ left and P0_ right, a Bezier curve is drawn by taking the vertex P0 as a control point, the left tangent point P0_ left as a starting point and the right tangent point P0_ right as an end point;

and sequentially calculating left and right tangent points of tangent starting points and end points at two ends of each vertex according to the vertexes P0-Pn of the closed polygon graph A, moving the position of the painting brush to the P0_ left starting point coordinate of the next vertex after the curve of the previous vertex is drawn based on the operation, continuing drawing the corresponding Bezier curve according to the process, closing the whole curve after the Bezier curves corresponding to all the vertexes are drawn, and finishing the drawing of the whole curve to obtain a rounded polygon.

The invention is not limited to the foregoing embodiments. The invention extends to any novel feature or any novel combination of features disclosed in this specification and any novel method or process steps or any novel combination of features disclosed.

Claims (5)

1. A method for drawing irregular round-corner polygons is characterized by comprising the following steps:

s1: acquiring coordinates of each vertex of a closed polygon graph in a current graph rendering coordinate system, wherein the closed polygon graph has at least three vertexes;

s2: setting a fillet coefficient for each vertex;

s3: positioning one vertex, and calculating tangent point coordinates on two sides of the vertex according to the coordinates of the adjacent vertex of the vertex;

s4: drawing a Bezier curve by taking the current vertex as a control point and taking the left tangent point and the right tangent point as a starting point and an end point respectively;

s5: and (5) repeatedly executing the steps S3-S4 until all the vertexes are positioned to finish the operations of the steps S3 and S4, closing the whole curve and obtaining a rounded polygon.

2. The method as claimed in claim 1, wherein the graphics rendering coordinate system is a two-dimensional rectangular coordinate system.

3. The irregular rounded polygon rendering method of claim 2, wherein the rounding factor satisfies [0,0.5].

4. The irregular rounded polygon rendering method of claim 3, wherein the tangent point coordinates are calculated as follows:

s301: calculating a coordinate point difference value of the vertex and the left tangent point based on the fillet coefficient of the current vertex, the coordinate of the current vertex and the coordinate of a left adjacent point of the vertex;

calculating a coordinate point difference value of the vertex and the right tangent point based on the fillet coefficient of the current vertex, the coordinate of the vertex and the coordinate of the right adjacent point of the vertex;

s302: and obtaining the coordinate points of the left tangent point and the right tangent point based on the coordinate of the current vertex and the coordinate point difference value between the vertex and the left tangent point and the right tangent point respectively.

5. The method for drawing the irregular rounded polygon as claimed in claim 1, wherein steps S2-S4 are repeated, and vertices are sequentially positioned to perform corresponding operations based on the current closed polygon figure.

Images