Android custom view (advanced tutorial)-magic beiser Curve

Android custom view (advanced tutorial)-magic beiser Curve
Today, we will introduce you to a very amazing curve, the besell curve. I believe everyone has heard about it before.

I have heard of this line for a long time, but I have never been very familiar with it. After some Google operations, I had a preliminary concept: three points to determine a curve: Start Point, end point, and auxiliary point.

The basic relationship between the three points is as follows:

I also watched this image for a long time. I only knew it was very smooth and I did not know the specific relationship between the three points. So I wrote a program to test the relationship between the auxiliary points and the always-on points.

The Path class of Android provides a method to draw a second-order besell curve. The usage is as follows:

// Set the starting point path. moveTo (200,200); // set the secondary point coordinate 300,200 terminal point coordinate 400,200 path. quadTo (300,200,400,200 );

Here, I set the y-axis and the starting point of the auxiliary point of the beiser curve to the same. After draw, the effect is as follows:

It is a straight line because the Y axis is not stretched, but the X axis is stretched. Try the secondary node y + 100

You can see that it has been stretched .. In fact, this still does not reflect the laws of The besell curve. So we need to keep changing and study its laws. Here we will rewrite the onTouchEvent so that the position of the touch point can be used as an auxiliary point. Observe the changes.

@Override    protected void onDraw(Canvas canvas) {        Paint p = new Paint();        p.setStyle(Paint.Style.STROKE);        p.setStrokeWidth(10);        Path path = new Path();        path.moveTo(200, 200);        path.quadTo(mSupX, mSupY, 400, 200);        canvas.drawPath(path,p);        super.onDraw(canvas);    }    @Override    public boolean onTouchEvent(MotionEvent event) {        switch (event.getAction()){            case MotionEvent.ACTION_MOVE:                mSupX = event.getX();                mSupY = event.getY();                invalidate();        }        return true;    }

We can see that the curve is changed based on the mouse position. However, the relationship between the highlight point and the secondary point of the curve still cannot be well displayed. Next, we will draw the secondary point to facilitate observation.

        canvas.drawPoint(mSupX,mSupY,p);

Now, the relationship between the auxiliary point and the curve is obvious.

Many cool effects are inseparable from the besell curve. The application of the besell curve is like the 360 memory cleanup effect.