Why bezier curves? In fact, there are many effects in Android that use bezier curves.

QQ message drag drag small red dot cheongsam disappear effect

Qzone live page at the lower right corner of the gift bubble special effects

Undulation effect

Picture or book turning effect

An elastic effect drawer menu

You can start with a general idea of the Bezier curve.

Bessel curve Wikipedia

history

The mathematical basis of Bessel curves is known as the Bernstein polynomials as early as 1912. But it was not until 1959 that Paul de Casteljau, then a French mathematician working for Citroen, began to attempt to apply it graphically and proposed a numerically stable de Casteljau algorithm. The Bezier curve, however, got its name from the publicity of another French engineer, Pierre Bezier, who worked for Renault in 1962. He used this method to generate complex smooth curves with very few control points to aid in the industrial design of car bodies.

Bessel curve has been widely used in the field of industrial design because of its simple control but strong descriptive ability. Bessel curves also play an important role in the field of computer graphics, especially vector graphics. Some of our most common vector drawing software today, such as Flash, Illustrator, CorelDraw, etc., all provide Bessel curve drawing capability without exception. Even bitmap editing software like Photoshop includes bezier curves as the only vector drawing tool (the pen tool).

Bessel curves also have a place in Web development. CSS3 added the transition-timing-function property, which can be set to a cubic Bezier equation. Before this, there were many JavaScript animation libraries that used Bezier curves to achieve beautiful and realistic easing effects.

The formula

Linear Bezier curve

Given points P0, P1, the linear Bezier curve is just a straight line between two points. The line is given by the following formula:

Quadratic Bezier curve

The path of the quadratic Bezier curve is traced by B (t) of the given points P0, P1, and P2:

Bessel curve to the third power

The points P0, P1, P2, and P3 define a cubic Bezier curve in the plane or in three dimensions. It starts at P0 going to P1, and it goes from P2 to P3. It usually doesn’t go through P1 or P2; These two points are just there to provide directional information. The distance between P0 and P1 determines the “length” of the curve toward P1 before it turns toward P2.

The parameter form of the curve is:

Order N Bezier curve

The Bezier curve of order N can be judged as follows: given points P0, P1… , Pn, its Bessel curve is

The formula is still a little abstract, so let’s take a look at the diagram and visualize what a Bessel curve is: a Bessel curve of second order and a Bessel curve of third order.

There is an excellent article

Bessel curve literacy

Bezier curves not only draw straight lines, but also curves. Even with more complex curves, the increase in control points is only linear. This feature makes it not only in the field of industrial design, even people with poor mathematical foundation can be relatively easy to master, such as most graphic artists.

In simple terms, bezier curves are the transformation of any curve into an accurate mathematical formula. Bezier curves are controlled by a series of points.

Some key nouns

  • Data point: Usually refers to the start and end points of a path
  • Control points: control points determine the bending trajectory of a path. According to the number of control points, Bezier curves can be divided into first-order Bezier curves (0 control points), second-order Bezier curves (1 control point), third-order Bezier curves (2 control points), and so on.

Applications in Android

In Android development, we only consider second-order bezier curves and third-order Bezier curves, and the SDK only provides second-order and third-order API calls.

Of course, Bessel curves of higher order can be divided into several lower order Bessel curves.

Recommend a good dynamic demonstration of bezier curve, can be very intuitive to feel:

Myst729. Making. IO/the bezier – curv…

Here is a recommended doctor’s blog post, which has been very comprehensive introduction to the Bessel curve in Android some usage and examples, well written.

The art of Bezier curve development

The following is based on this article.

The API of second-order Bezier curve in Android is:

QuadTo is based on absolute coordinates, while rQuadTo is based on relative coordinates.

mPath.moveTo(mStartPointX, mStartPointY);
// Second order Bezier curve
mPath.quadTo(mAuxiliaryX, mAuxiliaryY, mEndPointX, mEndPointY);
canvas.drawPath(mPath, mPaintBezier);Copy the code

The API of the third-order Bezier curve in Android is:

The two apis are also interchangeable in principle.

Two dots involves multi-touch, so if you’re interested, check out the following article.

Android MotionEvent,

CubicTo is based on absolute coordinates, while rCubicTo is based on relative coordinates.

mPath.moveTo(mStartPointX, mStartPointY);
// Third order Bezier curve
mPath.cubicTo(mAuxiliaryOneX, mAuxiliaryOneY, mAuxiliaryTwoX, mAuxiliaryTwoY, mEndPointX, mEndPointY);
canvas.drawPath(mPath, mPaintBezier);Copy the code

The third order Bezier curve is nothing, except that there is an extra control point, and you just record its position.

Drawing smooth

When drawing a Path on the screen, we usually connect the dots via path.lineto, but this can be quite blunt. Because it’s connected by a straight line. If you go through a second order Bezier curve, it’s a lot smoother. There won’t be too many hard joins.

if (dx >= offset || dy >= offset) {
                    // The control point of the Bezier curve is the midpoint between the starting point and the ending point
                    float cX = (x1 + preX) / 2;
                    float cY = (y1 + preY) / 2;
                    mPath.quadTo(preX, preY, cX, cY);
// mPath.lineTo(x1, y1);
                    mX = x1;
                    mY = y1;
                }Copy the code

By recording the change in point position during a Move and passing in parameters in quadTo, you can achieve smooth drawing.

According to the formula we can imitate to write a utility class:

public class BezierUtil {

    / * * * B (t) = (1 - t) P0 + 2 t ^ 2 * * (1 - t) * (P1 + t ^ 2 * (P2), t ∈ * * [0, 1]@paramT curve length ratio *@paramP0 starting point *@paramP1 control point *@paramP2 termination point *@returnT corresponds to the point */
    public static PointF CalculateBezierPointForQuadratic(float t, PointF p0, PointF p1, PointF p2) {
        PointF point = new PointF();
        float temp = 1 - t;
        point.x = temp * temp * p0.x + 2 * t * temp * p1.x + t * t * p2.x;
        point.y = temp * temp * p0.y + 2 * t * temp * p1.y + t * t * p2.y;
        return point;
    }

    / * * * B (t) = P0 * (1 - t) ^ 3 + 3 * * t * (1 - t) P1 P2 * t ^ ^ 2 + 3 * 2 * (1 - t) + P3 * t ^ 3, t ∈ * * [0, 1]@paramT curve length ratio *@paramP0 starting point *@paramP1 Control point 1 *@paramP2 control point 2 *@paramP3 Termination point *@returnT corresponds to the point */
    public static PointF CalculateBezierPointForCubic(float t, PointF p0, PointF p1, PointF p2, PointF p3) {
        PointF pointF = new PointF();
        float temp = 1- t;
        pointF.x = p0.x * temp * temp * temp + 3 * p1.x * t * temp * temp + 3 * p2.x * t * t * temp + p3.x * t * t * t;
        pointF.y = p0.y * temp * temp * temp + 3 * p1.y * t * temp * temp + 3 * p2.y * t * t * temp + p3.y * t * t * t;
        returnpointF; }}Copy the code

Recommend an open source project on Bezier curves:

Github.com/venshine/Be… (Draw Bezier curve through de Casteljau algorithm, and calculate its tangent line, to achieve the formation of order 1-7 Bezier curve animation)

Reference blog:

Android draws the Bezier curve of order N