Android Bezier curve

• First order Bezier curve
• Second order Bezier curve
• Third-order Bezier curve:

Today we are going to talk about Bezier curves. What is a Bezier curve? It was a guy named Bezier who discovered this thing and named it bezier curve after him, just like Sima Guang hitting the cylinder. Why do they call it Sima Guang hitting the cylinder instead of Xiao Ming hitting the cylinder and pony hitting the cylinder? Clearly is sima light hit just credit can not be robbed by others ah, good good this more than 100 words are nonsense, because I see too much in other blogs, paste over is really boring. Directly look at the effect on the code to introduce you.

Rendering (1.1):

Let’s look at the first order Bezier curve:

First order Bezier curve

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // First order Bezier curve
        initOneStage(canvas);
    }
	/** * First order Bezier curve */
    private void initOneStage(Canvas canvas) {
        // First order Bezier curve
        paint.setColor(Color.RED);
        path.moveTo(50.50);
        path.lineTo(100.150);
        canvas.drawPath(path, paint);
        path.reset();/ / reset
    }
Copy the code

Rendering (1.2):



The first order Bezier curve is best understood, one starting point, one ending point,

• The starting point moveTo ()
• End point lineTo ()

And then you can just draw it, so I don’t have to do anything here

Second order Bezier curve

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
// // Second order Bessel curve
        initTwoStage(canvas);
    }
    
 private void initTwoStage(Canvas canvas) {
        TowControlPointX * (float) towbean.towControlPoiny, * end point 1000,500) */
/ / starting point
        paint.setColor(Color.RED);
        path.moveTo(100.500);
        //x1 control point x y1 control point y x2 end point x y2 end point y
        path.quadTo(
                (float) towBean.TowControlPointX,
                (float) towBean.TowControlPoinY,
                1000.500);
        canvas.drawPath(path, paint);
        path.reset();/ / reset


        // Second order Bezier curve auxiliary line
        paint.setColor(Color.BLACK);
        path.moveTo(100.500);
        path.lineTo((float) towBean.TowControlPointX, (float) towBean.TowControlPoinY);
        path.lineTo(1000.500);
        canvas.drawPath(path, paint);


        // Second order Bezier circles
        path.reset();/ / reset
        paint.setColor(Color.YELLOW);
        canvas.drawCircle((float) towBean.TowControlPointX, (float) towBean.TowControlPoinY, 10, paint);
        canvas.drawPath(path, paint);
        path.reset();/ / reset
    }
Copy the code

Third-order Bezier curve:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
// // Three stage Bezier curve
        initThree(canvas);
    }
    
  /** * Third order Bezier curve **@param canvas
     */
    private void initThree(Canvas canvas) {
        /** * third order Bezier curve * start point 100*1000 * end point 1000*1000 * control point 1 is: (float) threeBean.ThreeControlPointX1,(float) threeBean.ThreeControlPointY1, * control point 2 (float) threeBean. ThreeControlPointX2, (float) threeBean. ThreeControlPointY2, * /

        paint.setColor(Color.RED);
        path.moveTo(100.1000);/ / starting point
        path.cubicTo((float) threeBean.ThreeControlPointX1, (float) threeBean.ThreeControlPointY1,// Control point 1
                (float) threeBean.ThreeControlPointX2, (float) threeBean.ThreeControlPointY2,// Control point 2
                1000.1000);/ / end points
        canvas.drawPath(path, paint);
        path.reset();/ / reset


        // Draw three stage Bezier auxiliary lines
        paint.setColor(Color.BLACK);
        path.moveTo(100.1000);/ / starting point
        path.lineTo((float) threeBean.ThreeControlPointX1, (float) threeBean.ThreeControlPointY1);
        path.lineTo((float) threeBean.ThreeControlPointX2, (float) threeBean.ThreeControlPointY2);
        path.lineTo(1000.1000);/ / end points
        canvas.drawPath(path, paint);


        // Draw bezier third-order dots
        paint.setColor(Color.YELLOW);
        canvas.drawCircle((float) threeBean.ThreeControlPointX1, (float) threeBean.ThreeControlPointY1, 10, paint);
        canvas.drawCircle((float) threeBean.ThreeControlPointX2, (float) threeBean.ThreeControlPointY2, 10, paint);

    }
Copy the code

Rendering (1.4)

:

• The red one is Bessel’s third order curve
• The yellow ones are the auxiliary dots
• The black line is the auxiliary line
  
  
  
  The only difference between a third-order Bezier curve and a second-order Bezier curve is that the third-order bezier curve has one more control point than the second-order one

Network diagram (3.2)

When AE:AB= BF:BC= CG:CD= EH:EF= FI:FG= HJ:HI, point J is a point on the resulting Bezier curve. And then we plot the curve through the starting points A, ending points D and J. Maybe you are a little confused, so I found a picture on the Internet.

Network diagram (3.3)

P0 is our starting point

P1 is control point 1

P2 is control point 2

P3 is the end point

The black dot in the middle of the blue line, which is the point J above, goes from P0 to P3 and that’s Bessel’s third order curve

Let’s look at the code I wrote to control bezier’s third-order curve by moving control point 1 and control point 2:

Supplement:

In Android, Path() already provides the bezier curve method:

Second-order Bezier curve:

Path path = newPath(); Path.moveto (start point X, start point Y);//x1 control point x y1 control point y x2 end point x y2 end point y
        path.quadTo(x1, y1, x2, y2);
Copy the code

Third-order Bezier curve:

Path path = newPath(); Path.moveto (start point X, start point Y);/ / starting point
 //x1 y1 control point 1 x2,y2 control point 2 x3,y3 end point
path.cubicTo(x1,y1,x2,y2,x3,y3);
Copy the code

Finally, let’s look at other Bessel curves

Fourth order Bezier curve:

Fifth order Bezier curve:

Each step is just one more control point!

The complete code