Canvas. Draw (Path,paint); Bezier curves In real life, any curve or surface can be solved by bezier’s formula. Such as:
1. Design bezier curve or bezier curve renderings 2. How to obtain several elements of bezier curve (such as second-order Bezier: p0 initial position, P1 inflection point, P2 end point) how to determine p1 inflection point, can be determined by tools, such as Photoshop point pen tool
Principle and simple derivation (take the third order as an example) :
Let P0, P02, and P2 be three points in different order on a parabola. The two tangents at P0 and P2 intersect at P1, and the tangents at P02 intersect P0P1 and P2P1 at P01 and P11, then the following proportion holds:
This is called the tri-tangent theorem of a parabola.
When P0 and P2 are fixed, the parameter t is introduced to make the above ratio t:(1-t), namely:
When t changes from 0 to 1, formula 1 and Formula 2 represent the first and second edges of the control biedage. they are two primary Bezier curves. Substitute formula 1 and 2 into Formula 3 to obtain:
When t changes from 0 to 1, it represents a quadratic Bezier curve defined by three vertices, P0, P1, and P2.
And show that:
This quadratic Bezier curve P02 can be defined as a linear combination of a Bezier curve determined by the first two vertices (P0,P1) and the last two vertices (P1,P2) respectively.
And so on,
The cubic Bezier curve P03 defined by four control points can be defined as a linear combination of two quadratic Bezier curves determined by (P0,P1,P2) and (P1,P2,P3) respectively, by (n+ 1) control points P** I (I =0,1… ,n) definition of n Bezier curves P0n can be defined by the front and rear n control points defined by the two (n-1) times Bezier curves P0N-1 and P1*n-*1 linear combination:
The recursive calculation formula of Bezier curve is obtained
So this is the de Casteljau algorithm, which is a simple explanation of the third-order Bessel curve principle.
Bezier curves are mathematical curves used in two-dimensional graphics applications. Curve definition: starting point, ending point (also known as anchor point), control point. By adjusting the control points, the shape of the Bezier curve changes. In 1962, French mathematician Pierre Bezier was the first to study this vector curve drawing method, and gave a detailed calculation formula, so the curve drawn according to such a formula is named after his family name, called Bezier curve.
In the following formula: B(t) is the coordinate of the point at t time;
P0 is the starting point,Pn is the end point, and Pi is the control point
First order Bezier curve (line segment) :
Meaning: A line segment described as a continuous point P0 to P1
Bessel curve of second order (parabola) :
Principle: describe a line segment from P0 to P1 continuous point Q0. The continuous point Q1 from P1 to P2 describes a line segment. Describe a quadratic Bessel curve from the continuous point B(t) Q0 to Q1.
Rule of thumb: P1-P0 is the tangent line of the curve at P0.
Third-order Bezier curve:
General formula:
Higher order Bezier curve:
Fourth-order curve:
Curve of order 5:
Second order Bezier curve
public class WaveView extends View {
private Paint paint;
private Path path;
public WaveView(Context context) {
super(context);
}
public WaveView(Context context,
@Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
private void init(a) {
path = new Path();
paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(10);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// The first point -- the starting point
path.moveTo(100.400);
// Second order Bezier curve 1
path.quadTo(250.200.400.400);
// Second order Bezier curve 2(the starting point of the following curve is by default the end point of the previous curve)
path.quadTo(550.600.700.400);
// Close the path (close the start and end)path.close(); canvas.drawPath(path, paint); }}Copy the code
**
path.moveTo(100.700);
path.cubicTo(50.500.550.500.700.700);
canvas.drawPath(path, paint);
Copy the code
The waves instance
public class WaveView extends View {
private Paint paint;
private Path path;
/ / wavelength
private int waveLength = 800;
private int dx;
private int dy;
public WaveView(Context context) {
super(context);
}
public WaveView(Context context,
@Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
private void init(a) {
path = new Path();
paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.FILL_AND_STROKE);
paint.setStrokeWidth(10);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
path.reset();
int originY = 500;
// if(dy
// dy += 30;
/ /}
int halfWaveLength = waveLength / 2;
path.moveTo(-waveLength + dx, originY - dy);
// How many wavelengths are drawn inside the screen width
for (int i = -waveLength; i < getWidth() + waveLength; i += waveLength) {
// Second order Bezier curve 1
/** * the increment relative to the starting point */
path.rQuadTo(halfWaveLength / 2, -150, halfWaveLength, 0);
path.rQuadTo(halfWaveLength / 2.150, halfWaveLength, 0);
}
// Color fill
// Draw a closed space
path.lineTo(getWidth(), getHeight());
path.lineTo(0, getHeight());
path.close();
canvas.drawPath(path, paint);
}
public void startAnimation(a) {
ValueAnimator animator = ValueAnimator.ofInt(0, waveLength);
animator.setDuration(1000);
animator.setInterpolator(new LinearInterpolator());
// Infinite loop
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.addUpdateListener(new AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
dx = (int) animation.getAnimatedValue(); postInvalidate(); }}); animator.start(); }}Copy the codecall
WaveView waveView = findViewById(R.id.waveView);
waveView.startAnimation();
Copy the code