Make writing a habit together! This is the third day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

Introduction to the

In the last video, in order to get you to understand exactly how Bezier curves work, we introduced how bezier curves work. This article we first use the second order Bezier curve to do an application – drawing love. First, let’s review the second order Bezier curve.

As shown in the figure above, the calculation formula of point P on the curve derived is as follows:

Love drawing control points

First let’s look at how the heart is realized using a second-order Bezier curve. As shown in the figure below, the heart can be divided into four curves, namely p0-P1, P1-P2, P2-P3 and P3-P0, where P2-P1 and P1-P2 are symmetric, p2-P3 and P3-P0 are also symmetric.

With this foundation, we can add a control point in the middle of each segment to form the three control points needed for a second-order Bezier curve, as shown in the figure below.Of course, in order to make the heart look good, these points need to be carefully adjusted, especially the diagonal joints of the p1-P2 and P2-P3 curves need to be smooth.

Code implementation

The key to the code implementation is to adjust the point point parameters and encapsulate a function to obtain the second-order Bezier curve to facilitate repeated calls, and then set a T variable, through the cycle and equal intervals to generate a series of points of the curve can be drawn. The following is a method to obtain the position of the second-order Bessel curve at time point T according to the three control points.

Offset get2OrderBezierPoint(Offset p1, Offset p2, Offset p3, double t) {
  var x = (1 - t) * (1 - t) * p1.dx + 2 * t * (1 - t) * p2.dx + t * t * p3.dx;
  var y = (1 - t) * (1 - t) * p1.dy + 2 * t * (1 - t) * p2.dy + t * t * p3.dy;

  return Offset(x, y);
}
Copy the code

The code for drawing p0-P1 curves is shown below, using 100 points for each curve. Note that since using decimal loops can result in a low number of points due to floating-point bias, the t is multiplied by 100 and then divided by 100 to avoid this.

var p0 = Offset(offset1x, center1y);
var p1 = Offset(size.width / 4 - offset1x, side1y);
var p2 = Offset(size.width / 2, center1y);
var path1 = Path();
path1.moveTo(p0.dx, p0.dy);
for (var t = 1; t <= 100; t += 1) {
  var curvePoint = get2OrderBezierPoint(p0, p1, p2, t / 100.0);
  path1.lineTo(curvePoint.dx, curvePoint.dy);
}
canvas.drawPath(path1, paint);
Copy the code

The code of other curve sections is the same, but the control points are different. In order to check the relationship between the position of the control points and the curve, we draw the control points. The complete code has been uploaded to:CustomPaint Draws the relevant code.

conclusion

This paper introduces the practical application of quadratic bezier curve, we found that in the process of actual drawing (on the way of green point) curve joining together of control points is hard to adjust to a smooth transition, lead to adjust the effect of drawing need to spend a lot of time to adjust the control point position, this situation is the actual need to use the third order Bessel curve to solve. Next we will redraw the heart with third-order Bezier curves.

I am dao Code Farmer with the same name as my wechat official account. This is a column about the introduction and practice of Flutter, providing systematic learning articles about Flutter. See the corresponding source code here: The source code of Flutter Introduction and Practical column. If you have any questions, please add me to the wechat account: island-coder.

👍🏻 : feel the harvest please point a praise to encourage!

🌟 : Collect articles, easy to look back!

💬 : Comment exchange, mutual progress!