Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

Antecedents to review

The last two we through the SVG path M/H/V/L/C/Q/Z several instructions parsing. Converted the NUGGETS LOGO SVG to the native path rendering of Flutter and added some rendering effects.

In addition to these, there are several other instructions. The purpose of this article is to take a thorough look at the path commands under the PATH tag in SVG. The list is as follows:

M/ M (x,y)+ Move current position L/ L (x,y)+ straight line H/ H (x)+ horizontal line V/ V (x)+ vertical line Z/ Z Closed path Q/ Q (x1,y1,x,y)+ quadratic Bezier curve T/ T (x,y)+ smooth draw quadratic Bezier curve C/ C (x1,y1,x2,y2,x,y)+ Cubic Bezier curve S/ S (x2,y2,x,y)+ smooth draw cubic Bezier curve A/ A (rx, RY, Xr, LAf,sf,x,y) arcCopy the code

Absolute and relative instructions

As you may see, each instruction has uppercase and lowercase letters. Capital letters indicate that the following coordinates are absolute, that is, the coordinates starting from the upper left corner of the region. Absolute and relative coordinates are the most basic concepts in drawing and are easy to understand. The source code for the SVG sample file in this article is idRAW/EXTRA_02_SVG /base.

1. Absolute coordinate movement example

Absolute move, use capital letters. For example, in the second paragraph M30,30 means to move the starting point to (30,30), V60 means that the abscissa remains unchanged and the ordinate reaches the absolute point 60.

---->[01_M.svg]----	
<path d="M30,20 H80 V40Z M30,30 V60" stroke="# 000082" />
Copy the code
2. Example of relative coordinate movement

For relative movement, use lowercase letters. Below is m30, where 30 indicates how much the coordinates have moved with reference to the end of the current path. Before m30, 30, the end of the path is (30,20); So m30, 30 will move the next segment to (30+30,20+30), which is (60,50). V30 means: taking the end point of the current path as reference, how much the coordinate has moved vertically will be straight line to (60,50+30), i.e. (60,80).

---->[02_m_v.svg]----	
<path d="M30,20 H80 V40Z M30, 30 v30" stroke="# 000082" />
Copy the code
3. Use scenarios of absolute and relative coordinates

If the coordinates of a point can be known precisely, it is most convenient to use absolute coordinates. But A lot of times, the absolute coordinates are not directly available, so let’s say we move A 50 to the right, 20 to the down, to B. Although you can calculate the absolute coordinates of B from the data, it’s a bit of a hassle, especially for some curvilinear paths, relative offset is very convenient.

---->[03_l.svg]----	
<path d="M30,20 H80 V40Z m0,20 l50,20 V40 l-50,20Z" stroke="# 000082" />
Copy the code

2. Curve path

The curve path includes:

  • Quadratic Bessel curve, the instruction isQ/q, and smooth formT/t ；
  • Cubic Bezier curves, the instruction isC/c, and smooth formS/s ；
  • Arc curve, the instruction isA/a ；
1. Quadratic Bessel curveQ/q

Each quadratic Bezier curve consists of two coordinates representing the control point and the end point respectively. The following two Bessel curves are formed by absolute Q and relative Q respectively. For example, the control points above are 70 and 10, which are tangent to the lines and curves of the starting and ending points, as shown in dotted lines:

---->[04_Qq.svg]----	
<path d="10, 80, 40 (, 20 Q70," stroke="# 000082" />
<path d="M80, 40 q - 40 30-40 10" stroke="#FF743D" />
Copy the code
2. Cubic Bezier curvesC/c

Each cubic Bezier curve consists of three coordinates representing control point 1, control point 2 and end point respectively. The following two Bessel curves are formed by absolute C and relative C respectively. For example, the control point above is control point 1: (50,10) and control point 2: (80,20). The line between control point 1 and the starting point and the line between control point 2 and the end point is tangent to the curve, as shown in the dotted line:

---->[05_Cc.svg]----	
<path d="(20 C50, 10, 80, 20, 80, 40." " stroke="# 000082" />
<path d="M80, 40 c -, 10 -, 30-50 10 40." " stroke="#FF743D" />
Copy the code
3. Arc curveA/a

This command has 7 parameters, looks like a little crash. In Flutter, it corresponds to the Path#arcToPoint method with the following seven parameters:

The next two arcs are formed by absolute A and relative A respectively. An arc is essentially an arc cut from an ellipse. The first two values are the lengths of two half axes of the ellipse. The fourth value indicates whether a large arc is taken, the following solid line is taken as a large arc, dotted line is taken as a small arc; The fifth value represents whether the line is clockwise. The solid line is clockwise and the dotted line is counterclockwise. The sixth and seventh values represent the end point coordinates.

---->[06_Aa.svg]----	
<path d="M30,20 A20 20 0 1 1 50 50 a15 20 0 1 1 20 30" stroke="# 000082" />
Copy the code

And the third value, in particular, is the Angle of rotation, and notice that this is the Angle value not the radian value. The orange color below is the effect of rotation 45. The rotation is not the rotation of the center of the ellipse, but the tilt Angle of the Y-axis, and it needs to meet the starting and ending point of the ellipse.

-- -- -- - > [07_Aa_rotate.svg]----	
<path d="M40,50 A20 30 0 1 1 60 70" stroke="# 000082" />
<path d="M40,50 A20 30 45 1 1 60 70" stroke="#FF743D" />
Copy the code
4. Smooth cubic Bessel curvesS/s

Each S instruction is followed by two coordinates, but it is a cubic Bezier curve. The following examples show the difference between it and Q and its relationship with C. In this case, S represents the coincidence between control point 1 and the starting point, and control point 2 is 40,70. The following S and C are the same curve:

---->[08_SQC.svg]----	
<path d="M20, 10 C20, 10; seven 80 40, 50" stroke="#F619FF"/>
<path d="70, 80, 50 M20, 10 S40," stroke="# 000082"/>
<path d="70, 80, 50, 10 Q40 M20," stroke="#FF743D"/>
Copy the code

In addition, the most difficult point of S is:

If the upper segment of S is a cubic Bezier curve: the first control point of S is the symmetric point of the previous cubic Bezier curve [second control point] with respect to [S starting point]. Otherwise: the first control point of S is the starting point of S.Copy the code

As shown below, to understand S is to understand what the Sp1 point below is.

---->[09_CS.svg]----	
<path d="M10,40 C20,10 40,10 50,40 S90,70 90,20" stroke="# 000082"/>
Copy the code

Mathematically, if P0 and P1 are symmetric with respect to p, their coordinates should satisfy the following relation:

Note: p0(x0,y0) p1(x1,y1) p(x,y) if p0 and P1 are symmetric with respect to p, then the coordinate relation satisfies: (x0 + x1)/2 = x (y0 + y1)/2 = y and given the coordinates of p0 and p, it is easy to find p1: x1 = 2 x - x0 and y1 = 2 y - y0Copy the code

In addition, s is the relative coordinate, same effect.

5. Smooth quadratic Bessel curvesT/t

The T/ T instruction is similar:

If the upper segment of T is a quadratic Bessel curve: the control point of T is the symmetric point of the previous quadratic Bessel curve [control point] with respect to [S starting point]. Otherwise: the control point of T is the starting point of T.Copy the code

The following is the test effect of Q on T. Think about what Tp point is.

<path d="M10, Q30 40, 50, 60, 40 T90, 40." " stroke="# 000082" stroke-width="1"/>
Copy the code

Three, this series harvest

You can download SVG ICONS in iconFont,

SVG can be drawn directly from the Flutter drawing API by parsing SVG as follows:

Through these three articles, you have implemented an extremely rudimentary SVG parser. Although it has no practical application value, we have learned the meaning of the path directives in SVG. This is a more basic accumulation of knowledge. By associating SVG paths with Flutter drawing, you can also practice your Flutter drawing skills. In addition, I tried to parse SVG, in which the process of finding and solving problems is the accumulation of personal experience. I also got some training in the use of regular expressions.

In addition, for SVG path resolution, pub has a complete package path_Drawing, and based on this package, SVG files to display package Flutter_SVG. Every time I see open source libraries written by other big names, I feel like I’m playing house. Studying, thinking and learning, I hope that one day, I can also like them, see the elegant demeanor in their eyes.

The extra_02_SVG /08