An analysis of Android Bezier curve

Blog has been open for a long time, has not been to write a blog, the main reason is lazy ~ ~ ~ This blog is to give 2017 years a good start, but also to the 2016 draw a period, do not leave regrets.

Let us formally enter today's theme: Bezier curves.

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

Bezier curves (Bézier curve), also known as Bézier curves or Bézier curves, are mathematical curves applied to two-dimensional graphic applications. The Bezier Curve, 1962, was widely published by the French engineer Pierre Bessel Pierre Bézier, who used the Bezier curve to design the body of the car. The Bezier curve was originally developed by Paul de Casteljau in 1959 using de Casteljau algorithm to find the Bezier curve in a stable numerical way.

　　

Knowing what Bezier curves are, let's look at the classification of Bezier curves. The first two concepts to be mentioned before classification are: data points and control points.

Data points: The starting and ending points of the curve.

Control point: As the name implies, is the point that controls the curve's curvature.

The curves are mainly categorized as follows:

First-order curve:

Formula:

Dynamic graphs:

Principle: A straight line consisting of successive points from the P0 (starting point) to the P1 (destination). There is no control point for the first order curve.

Second Order curve:

　　Formula:

Static diagram:

Dynamic graphs:

Principle: The variation of Point Q0 (t) from P0 to P1 describes a linear Bézier curve.

The variation of Point Q1 (t) from P1 to P2 describes a linear Bézier curve.

The change of B point (t) from Q0 (t) to Q1 (T) describes a two-time Bézier curve.

P0 is the starting point, P2 is the endpoint, and P1 is the control point.

Sankai curve:　

Formula:

Static diagram:

Dynamic graphs:

Principle: The principle and the second-order curve principle is similar, mainly is a more control point.

In addition to the above three kinds of Bezier curve classification, of course, there are four-order curve, five-order curve ...

Having said so much, how exactly do we use Bezier curves, and is there any way to provide it to us?

Of course, when we customize the view, we use a class called path, in which there are two methods: Quadto (Draw second order curve), Cubicto (Draw Sankai curve). These two methods I will simply use two pieces of code to illustrate the next. Here I will post the main code:

Second-order curve main code block:

@Override    protected void OnDraw (canvas canvas) {        //Draw 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);       Draw a point        mpaint.setstrokewidth (a);        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: does not make a dynamic graph on the phone)

Sankai Curve main code block:

 @Override protected void OnDraw (canvas canvas) {Mpaint.setcolor (color.black        );        Draw Straight Line 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);        Draw Point 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 Sankai 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: Still won't make a dynamic graph on the phone)

Well, so far, the analysis of the Bezier curve has been finished, such as also want to learn more about the Bezier curve, you can look at this site:

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

Because the first time to write a blog, some places are not very good, but also please understand. If there are good suggestions and shortcomings also hope to point out, must be modest change.

An analysis of Android Bezier curve