Learning focus: Understand the use of path to understand the drawing principle of Bezier curve dynamic sines and cosines

A brief introduction to Path

On Android drawing Basics: Canvas Canvas – In the custom View (drawing dial, rectangle, circle, arc, gradient), we can see the powerful function of Canvas. In fact, Canvas also has a drawing method called drawpath(). I didn’t write this method in the last blog because I wanted to introduce it separately. We can only draw certain graphics through other methods of Canvas, but once we learn Path, we can draw any graphics! Path is a very useful class provided by Android. It can connect N points into a “Path” in advance, and then call the canvas. drawPath method to draw a graph along the Path.

Draw a triangle

Since we’re going to use Path we have to define a Path first

private Path mpath; 1 Draw in onDraw method

// The starting position of mpathd mpath.moveto (100, 100); // Line from the starting position to the (200, 200) coordinate mpath. LineTo (200, 200); Mpath. LineTo (100, 100); Instead of mpath. Close (); // drawPath canvas. DrawPath (mpath, Paintpath);Copy the code

Bessel curve

Let’s call it a Bezier curve. In simple terms, it is approximating a smooth curve by taking the midpoints of three points continuously.

// Mpath. MoveTo (300, 300); // Mpath. MoveTo (300, 300); QuadTo (50, 450, 300, 500); quadTo(50, 450, 300, 500) // Canvas. DrawPath (mpath, Paintpath); // Canvas. DrawPath (mpath, Paintpath); // If you want to see the relationship between the Bezier curve and the point, you can draw the point by drawpoint

Sine and cosine curves

And then on the basis of bezier curves we can understand sines and cosines, and sines and cosines are drawn by understanding coordinate points. To draw sines and cosines we need to use rQuadTo(), which is all relative.

Mpath. MoveTo (100, 100); // the position of rQuardto is relative to mpath. RQuadTo (20, 20, 40, 0); mpath.rQuadTo(20, -20, 40, 0);

Note: it is important to understand that rQuardto’s position is relative, as shown in the above picture, I believe that you will understand the above picture very well.

Movable sines and cosines

Idea: Change by changing the initial position of the drawing, equivalent to dragging it to the side

public class MyPathView extends View{ private int width; private int height;

private Paint Paintpath; private Path mpath; private Paint PaintText; private Paint Paintpoint; private int count; private int size; private Handler mhanHandler=new Handler(){ public void handleMessage(android.os.Message msg) { switch (msg.what) { case 0x23: count++; If (count>=80){count=0; if(count>=80){count=0; } size++; if(size>10){ size=5; } mhanHandler.sendEmptyMessageDelayed(0x23, 200); // redraw invalidate(); break; default: break; }}; }; public MyPathView(Context context) { super(context); // TODO Auto-generated constructor stub } public MyPathView(Context context, AttributeSet attrs) { super(context, attrs); Paintpath=new Paint(); Paintpath.setColor(Color.BLACK); Paintpath.setAntiAlias(true); // Paintpath.setStrokeWidth(5); Paintpath.setStyle(Style.STROKE); PaintText=new Paint(); PaintText.setColor(Color.BLACK); PaintText.setAntiAlias(true); PaintText.setTextSize(40); mpath=new Path(); Paintpoint=new Paint(); Paintpoint.setColor(Color.RED); // Paintpoint.setStrokeWidth(20); Paintpoint.setStyle(Style.STROKE); mhanHandler.sendEmptyMessage(0x23); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); mpath.reset(); Mpath. MoveTo (count, 100); for(int i=0; i<20; i++){ //rQuadTo mpath.rQuadTo(20, size, 40, 0); mpath.rQuadTo(20, -size, 40, 0); } canvas.drawPath(mpath, Paintpath); canvas.drawCircle(200, 100, 50, Paintpoint); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec); height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec); }Copy the code

}