What is a Bezier curve

Bezier curve, also known as Bezier curveBatesA curve, or Bezier curve, is a mathematical curve used in two-dimensional graphics applications. General vector graphics software using it to accurately draw the curve, Bates curve byLine segmentwithnodeThe nodes are draggable fulcrums, and the line segments are stretchable rubber bands, and the pen tool that we see on the drawing tool is designed to do this kind of vector curve. Main structure: starting point, ending point (also known as anchor point), control point. By adjusting the control points, the shape of the Bezier curve changes.

Display: First Order Bezier curve (Line segment)

Display: Second-order Bezier curve (parabola)

Presentation: Third-order Bezier curves

Two websites are available to help us understand the Bezier curve:

www.html-js.com/article/162… bezier.method.ac/#

Android provides bezier curve code implementation:


/**
 * Add a quadratic bezier from the last point, approaching control point
 * (x1,y1), and ending at (x2,y2). If no moveTo() call has been made for
 * this contour, the first point is automatically setTo (0,0). * * @param x1 The x-coordinate of The control point on a quadratic curve * @param y1 The y-coordinate of The control point on a quadratic curve * @param x2 The x-coordinate of the end point on a quadratic curve * @param y2 The y-coordinate of the end point on a quadratic curve */ public void quadTo(float x1, float y1, float x2, float y2) {
    isSimplePath = false;
    native_quadTo(mNativePath, x1, y1, x2, y2);
}
Copy the code
/**
 * Add a cubic bezier from the last point, approaching control points
 * (x1,y1) and (x2,y2), and ending at (x3,y3). If no moveTo() call has been
 * made for this contour, the first point is automatically setTo (0,0). * * @param x1 The x-coordinate of The 1st control point on a cubic curve * @param y1 The y-coordinate of The 1st control point on a cubic curve * @param x2 The x-coordinate of the 2nd control point on a cubic curve * @param y2 The y-coordinate of the 2nd control point on a cubic curve * @param x3 The x-coordinate of the end point on a cubic curve * @param y3 The y-coordinate of the end point on a cubic curve */ public void cubicTo(float x1, float y1, float x2, float y2,
                    float x3, float y3) {
    isSimplePath = false;
    native_cubicTo(mNativePath, x1, y1, x2, y2, x3, y3);
}
Copy the code

QuadTo () method draws Bezier curve from the previous point as the starting point, where (x1, y1) is the auxiliary control point and (x2, y2) is the end point.

CubicTo () method starts from the last point and plots third-order Bessel curves with (x1, y1),(x2, y2) as auxiliary control points and (x3, y3) as terminal points.

Here’s an example:

Path mPath = new Path();
mPath.moveTo(x0,y0);
mPath.quadTo(x1,y1,x2,y2);
Copy the code

For example, the above code is called to draw the Bezier curve of the starting point (x0, y0), the ending point (X2, y2) and the auxiliary control point (x1, y1). So, by constantly changing the position of these three points, we can plot all kinds of curves.

Post a second order Bezier curve test code to help understand (reference the following custom View in the layout to see the effect) :

Basic idea:
  • 1. Get a paintbrush.
  • 2. Specify the starting point, ending point, and control point values respectively.
  • 3. To help you understand, draw the above 3 points and the positions of the auxiliary lines.
  • 4. Draw bezier curves.
  • 5. Simply rewrite the sliding event, so that the finger can change the position of the control point, so that the Bezier curve can be redrawn, so that we can see the changed Bezier curve.
package chao.base.view.view; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.graphics.PointF; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; /** * public extends View {private Paint Paint; private int centerX, centerY; private PointF start, end, control; public Bezier(Context context, AttributeSet attrs) { super(context, attrs); mPaint = new Paint(); mPaint.setColor(Color.BLACK); mPaint.setStrokeWidth(8); mPaint.setStyle(Paint.Style.STROKE); mPaint.setTextSize(60); start = new PointF(0, 0); end = new PointF(0, 0); control = new PointF(0, 0); } public Bezier(Context context) { this(context, null); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); centerX = w / 2; centerY = h / 2; Start. x = centerx-200; start.y = centerY; end.x = centerX + 200; end.y = centerY; control.x = centerX; control.y = centerY - 100; } @override public Boolean onTouchEvent(MotionEvent event) {// Update the control point based on the touch position and prompt to redraw control.x = event.getx (); control.y = event.getY(); invalidate();return true; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // Draw data points and control points mPaint. SetColor (color.gray); mPaint.setStrokeWidth(20); canvas.drawPoint(start.x, start.y, mPaint); canvas.drawPoint(end.x, end.y, mPaint); mPaint.setColor(Color.BLUE); canvas.drawPoint(control.x, control.y, mPaint); // Draw the auxiliary line mPaint. SetStrokeWidth (4); canvas.drawLine(start.x, start.y, control.x, control.y, mPaint); canvas.drawLine(end.x, end.y, control.x, control.y, mPaint); // draw the Bessel curve mPaint. SetColor (color.red); mPaint.setStrokeWidth(8); Path path = new Path(); path.moveTo(start.x, start.y); path.quadTo(control.x, control.y, end.x, end.y); canvas.drawPath(path, mPaint); }}Copy the code