Analysis of the curve of Android besell and Analysis of android besell

Analysis of the curve of Android besell and Analysis of android besell

The blog has been on for a long time and has never been written. The main reason is that you are too lazy ~~~ This blog is a good start for 2017 and a sentence for 2016.

Then let's officially enter today's topic: the besell curve.

First, let's take a look at what is the besell curve.

The bégiscurve is a mathematical curve applied to two-dimensional graphics applications. The beiser curve, which is widely published by French engineer Pierre béserz, is 1962. He uses the beiser curve to design the car's main body. The beiser curve was initially developed by Paul de Casteljau in 1959 using the de Casteljau algorithm, and obtained by using a stable numerical method.

　　

Now we know what the besell curve is. Let's take a look at the classification of the besell curve. Before classification, we should first mention two concepts: data points and control points.

Data point: the start point and end point of the curve.

Control Point: As the name implies, it is the point that controls the degree of curve bending.

Curves are classified as follows:

First-order Curve:

Formula:

Dynamic Graph:

Principle: A straight line composed of consecutive points from P0 (starting point) to P1 (ending point. The first curve has no control points.

Second-Order Curve:

　　Formula:

Static graph:

Dynamic Graph:

Principle: The variation of point Q0 (t) ranges from P0 to P1 to describe a linear B é-D curve.

The change of point Q1 (t) ranges from P1 to P2, which describes a linear B 'curve.

The change of point B (t) ranges from Q0 (t) to Q1 (t), describing a second béz curve.

P0 is the start point, P2 is the end point, and P1 is the control point.

Third-Order Curve:　

Formula:

Static graph:

Dynamic Graph:

Principle: The principle is similar to the principle of the Second-Order Curve. It mainly involves multiple control points.

In addition to the classification of the above three besell curves, of course there are also the Fourth and Fifth Order Curves ...........

After talking about this, how should we use the besell curve? Is there a way to provide it to us?

Of course we have provided it to us. When we customize the View, we will use a class named Path. In this class, there are two methods: quadTo (drawing Second-Order Curves ), cubicTo ). I will use two pieces of code to describe these two methods. Here I will post the main code:

Main code blocks of second-order curves:

@ Override protected void onDraw (Canvas canvas) {// draw a straight line
MPaint. setColor (Color. BLACK); mPaint. setStrokeWidth (4); canvas. drawLine (firstPoint. x, firstPoint. y, midPoint. x, midPoint. y, mPaint); canvas. drawLine (lastPoint. x, lastPoint. y, midPoint. x, midPoint. y, mPaint); // specifies the position mPaint. setStrokeWidth (20); canvas. drawPoint (firstPoint. x, firstPoint. y, mPaint); canvas. drawPoint (lastPoint. x, lastPoint. y, mPaint); canvas. drawPoint (midPoint. x, midPoint. y, mPaint); // draw the second-order Curve mPaint. setColor (Color. BLUE); mPaint. setStrokeWidth (8); Path path = new Path (); path. moveTo (firstPoint. x, firstPoint. y); path. quadTo (midPoint. x, midPoint. y, lastPoint. x, lastPoint. y); canvas. drawPath (path, mPaint );}

(Ps: No dynamic images on the phone)

Main code block of the Third-Order Curve:

@ Override protected void onDraw (Canvas canvas) {mPaint. setColor (Color. BLACK); // draw a straight mPaint. setStrokeWidth (4); canvas. drawLine (firstPoint. x, firstPoint. y, control1.x, control1.y, mPaint); canvas. drawLine (midPoint1.x, midPoint1.y, midPoint2.x, midPoint2.y, mPaint); canvas. drawLine (midPoint2.x, midPoint2.y, lastPoint. x, lastPoint. y, mPaint); // specifies the position mPaint. setStrokeWidth (20); canvas. drawPoint (firstPoint. x, firstPoint. y, mPaint); canvas. drawPoint (lastPoint. x, lastPoint. y, mPaint); canvas. drawPoint (midPoint1.x, midPoint1.y, mPaint); canvas. drawPoint (midPoint2.x, midPoint2.y, mPaint); // draw a third-level curve mPaint. setColor (Color. BLUE); mPaint. setStrokeWidth (8); Path path = new Path (); path. moveTo (firstPoint. x, firstPoint. y); path. cubicTo (midPoint1.x, midPoint1.y, midPoint2.x, midPoint2.y, lastPoint. x, lastPoint. y); canvas. drawPath (path, mPaint );}

(Ps: I still won't figure it on my cell phone)

Now, the analysis of the beiser curve has been completed. If you want to learn more about the beiser curve, you can refer to this website:

Https://en.wikipedia.org/wiki/ B %C3%A9zier_curve

Because I wrote my blog for the first time, I have not expressed very well in some places. Please forgive me. If you have any good suggestions or shortcomings, you may wish to point out that you must change it modestly.