The advance of Flutter plotting — Bezier curve

preface

Said to bezier dear friend must not unfamiliar 😆 of front-end, bezier curve is a graceful curve, he can significantly improve the beautiful sex of our program, imagine if our application is only simple rectangle, circle, triangle yapping based graphics, it is hard to meet our expectations of good interaction effect. How do we cut, cover, and draw the interface we want? Today’s protagonist — Bezier curve, essential 👀.

Bezier curve 🔮

So, to learn bezier curves, you certainly have to know what a Bezier curve is. I do not know if there is a small partner and I, at the beginning of the name was scared 🙀, the first feeling is: high-end, complex, difficult to deal with. So don’t panic. Instead of Bethel, I’m going to call him Simple Curve! 📈 OK, do not engage in the mentality of 😉, in fact, there is no difficult to learn technology, but willing to study the development. To reveal its mystery:

• Bessel curve (Bezier curve) is a very important parametric curve in computer graphics. It describes a curve through an equation. According to the highest order of the equation, it can be divided into linear Bessel curve, quadratic Bessel curve, cubic Bessel curve and higher order Bessel curve.
  
  

As mentioned above, bezier curves have many degrees, quadratic, cubic, quartic… , today mainly to introduce to you is the quadratic Bessel curve 💡.

Quadratic Bessel curve

A quadratic Bessel curve consists of three pointsP0.P1.P2These points are also called control points. The equation of the curve is:Ah? My person split open, this person all saw silly ah, write of what 🙃? Don’t worry, peel off the formula bit by bit. The first thing that we can make clear from the first sentence is that in the formulaP0.P1.P2These are the three points. thist? thistYou can think of it for a moment as a slave0to1A number between. In this way, the meaning of each character in the whole formula is clear 🐳.

See the picture in detail (must see 🌟) :

• The selected a0 ~ 1thetvalue
• throughP0andP1Calculate the pointQ0.Q0inP0 P1On a straight line, andlength( P0, Q0 ) = length( P0, P1 ) * t
• Again, throughP1andP2To calculate theQ1,length( P1, Q1 ) = length( P1, P2 ) * t
• Repeat this step again. PassQ1andQ2To calculate theB,length( Q0, Q1 ) = length( Q0, B ) * t.BThat’s the point on the current curve

Note: abovelengthRepresents the length between two points.

Ah, carefully read the above paragraph, and understand the students, should have found that we through the above means, got a point —Point B. So, how do we go from point to line? To get back to where we started, if you look at our original formula, we started with the assumptiontIs a constant, but it is not 🤪. thistThat’s how we drew this curve. If you havetThe value of the0The transition to1And keep counting pointsB, a quadratic Bessel curve can be obtained:

Bethell in Flutter

There is already a quadratic Bezier curve drawn on canvas, and this method is used in Flutter:

  /// Adds a quadratic bezier segment that curves from the current
  /// point to the given point (x2,y2), using the control point
  /// (x1,y1).
  void quadraticBezierTo(double x1, double y1, double x2, double y2) native 'Path_quadraticBezierTo';
Copy the code

So in this method we pass in what looks like four coordinates, right? Like it’s complicated? Not complicated at all 🔦, we solved the puzzle above. Where x1, y1, x2 and y2 are the horizontal and vertical coordinates of the last two control points (P1 and P2). The P0 le? P0 is your current location 🏄🏻. Say still very abstract, come actual combat ~

Take off 🛫 ️

Open theDartPad, create a new oneFlutter PadOur first step is to build a new oneContainer, put our theme text, give a background color, no technical content, I took a step ~, I hope you follow 🏃.And then we’re going to do it in ourContainerThe outer layer is nested with a cutting component for cutting our component. The component that we use isClipPathAs the name implies, since our component is used for cutting, think about it, what is the basis of a clothes cutter when cutting clothes? 🤔 is the route of cutting clothes, so the necessary parameters in this component:clipperIt’s just a custom route.After we have nested, we define our crop path. First we see two superclass methods that must be implemented, one of which returnsPathNeedless to say, the way is definitely our route, another wayshouldReclipIs for us to decide whether we need to re-cut ✂️, which is not our focus, directly give atrueAfter the thing.We’re all set to go! Let’s create a new onepathOur starting point is the origin, which is the upper left corner, which we think is(0, 0)And then what point do we get to first?

path.lineTo(0, size.height - 80);
Copy the code

Which point is this? We go straight down from the origin to 👇, and we have 80 points left from the height of our Container, and we are going to draw the Bezier curve! As we said, we’re going to draw a Bezier curve, and we’re going to pass in the coordinates of the two points! It’s the last two! P1 and P2, let’s define them. Once defined, let’s call path’s own draw Bezier method and try 🖼.

/// P1 var controllPoint = Offset(50, size.height); /// P2 var endPoint = Offset(size.width/2, size.height); Path. quadraticBezierTo(Controllpoint. dx, controllpoint. dy, endpoint.dx, endpoint.dy);Copy the code

Some people say,P0Where is it? It’s not hard to see,P0That’s the distance that we started withContainerAnd the lower boundary80The point, which is the starting point in Bessel ~, have a look at the effect picture ~ I have helped you to mark out the points 🎉.See this beautiful arc 🎆? Although very common, but is indeed the origin of our Bessel ah, there is a radian there are ten thousand radians 🔮! But it seems… We cut a little too much, why pinch, because our end 🏁 is comingP2The starting point is in the top left corner, and it’s true. We just need to finish the road we didn’t finish

The end of the

• Program source code
• Refer to the article
• Many seemingly complex features and source code are not complex themselves, or are pieced together from simple basics. As long as willing to study, willing to insist can win 💪.
• Follow my blog for more on the Bezier curve.