Path-related methods explained (II.)

Tag: path android path LineTo quadto cubicto

Today let's take a look at the path in the Xxxto related to a class of methods;

explained by Path-related methods (a), we have a very basic understanding of path, we already know that path represents a path, and this path is exactly what it is, we can freely play, build at will, Today we'll look at how Android provides us with ways to build paths;

Yi, MoveTo (float,float)

To move the path from the start to point (X, y), we all know that for Android, the upper-left corner of the screen coordinates (0,0), we do some of the default Datum point is also (0,0), such as Call Canvas.rotate (float degrees) Rotates the canvas (canvas) to the corresponding angle, of course, canvas has another method rotate (float degrees,float px, float PY), where the thing to do is to change the datum point of Canvas.rotate () by translate (px, py), and the MoveTo method of path can be used to make an analogy, that is, to change the starting point of path;

Let's take a look at the small example:

    private void Init () {        mpaint = new Paint (paint.anti_alias_flag);        Mpaint.setstyle (Style.stroke);        Mpaint.setstrokewidth (path_width);        Mpaint.setcolor (color.red);        MPath = new Path ();        Mpath.lineto (n.);    }    @Override    protected void OnDraw (canvas canvas) {        super.ondraw (canvas);        Canvas.drawcolor (color.white);        Canvas.drawpath (MPath, mpaint);    }

the effect on the screen is to draw a line from the screen, from (0,0) to (150,150), as follows:

We are

Mpath.lineto (150, 150)

Add a Mpath.moveto (50,50) to the front to see the effect:

At this point the starting point of the line is moved to (50,50), that is, from (50,50) connected to (150,150);

Second, Rmoveto (float,float)

Preceded by the Xxxto method of R, only need to understand its meaning can understand, R is relative, will be measured relative to the previous point;

Let's make a slight change to the previous example:

<span style= "White-space:pre" ></span>mpath = new Path (); <span style= "White-space:pre" ></span >mpath.moveto (a);        Mpath.lineto (a);        Relative to the previous point x moves backwards by 100 pixels, and y moves down by 100 pixels        mpath.rmoveto (+);        Mpath.lineto (400, 400);

According to our expectations, this should be the time to draw two lines from (0,0)-(150,150) and (250,250)-(400,400), when the Rmoveto (float,float) of the previous point is (0,0), then the effect is equivalent to MoveTo ( Float,float);

Three, lineTo (float x,float y)

The above example also shows how the method works, from the previous point in a straight line connection to the parameter (x, y)

Four, Rlineto (float x,float y), that is, the current point as a datum point, as a straight line to connect to (CurrentX + x, CurrentY + y)

V. ArcTo (RECTF Oval, float startangle, float sweepAngle,boolean Forcemoveto)

The method is to add an arc to the path, let's take a look at the meaning of each parameter:

First parameter: RECTF Oval represents the rectangular region in which the ellipse occupies the arc;

This sentence seems to be a bit around, carefully thinking that an arc is necessarily attached to an ellipse or a positive circle, but only to show the ellipse or a part of the circle, and this ellipse or circle is bound to be exactly contained in a rectangular region, the parameter is the rectangular region:

Second parameter:float startangle represents the starting angle of the arc;

The third parameter:float SweepAngle represents the angle of the arc;

The fourth parameter:boolean Forcemoveto if True, the effect is equivalent to creating a new path and MoveTo to the start of the arc, and then adding an arc, someone might ask, what is the use of this method, and then look at the example together?

It is important to note that the 0-degree point is not just above, but the position of three o'clock on the clock;

Next we add an arc to the path just now:

        MPath = new Path ();        Mpath.moveto (a);        Mpath.lineto (a);        Relative to the previous point x moves backwards by 100 pixels, and y moves down by 100 pixels        mpath.rmoveto (+);        Mpath.lineto (+--);        MRECTF = new RECTF (0, N, +, +);        Mpath.arcto (MRECTF, 0, N);    }    @Override    protected void OnDraw (canvas canvas) {        super.ondraw (canvas);        Canvas.drawcolor (color.white);        Canvas.drawpath (MPath, mpaint);        Canvas.drawrect (MRECTF, mpaint);    }

the effect is as follows:

We can see that there is one more line (processed into blue), because the starting point of the arc and the last point of the path is not the same point, the path will be directly lineto to the start point of the arc, and then ArcTo, and for us, we do not want this extra line, what should we do? ArcTo (RECTF Oval, float startangle, float sweepAngle,boolean Forcemoveto) method comes in handy:

Change to use

Mpath.arcto (MRECTF, 0, N, true);

at this point the effect is:

Vi. Close ()

As the name implies, close the current path, or use the previous example:

<span style= "White-space:pre" ></span>mpath.rmoveto (+);        Mpath.lineto (+--);        MRECTF = new RECTF (0, N, +, +);        Mpath.arcto (MRECTF, 0, N);        Mpath.close ();

You can imagine what the result should be now:

Let's see instead

Mpath.arcto (MRECTF, 0, N, true);

after the effect:

Is there a conclusion about the result of close? Close is equivalent to the end of LineTo to the last MoveTo, and for the sake of understanding, the path after each call to MoveTo can be taken as a separate route;

Vii. methods related to Bezier curves in path:

Let's start with a simple understanding of the Bezier curve:

Bezier curves (Bézier curve), also known as Bates Curve , or Bézier curve, is the mathematical curve applied to a two-dimensional graphic application. The general vector graphics software through it to accurately draw the curve, the Bézier curve is composed of line segments and nodes , the node is a drag fulcrum, the line segment like a retractable elastic band, The pen tool we see on the drawing tools is to do this vector curve. Bezier curve is a very important parameter curve in computer graphics, and in some more mature bitmap software, there are Bezier tools , such as Photoshop.

There is no complete curve tool in the FLASH4, and the Bezier tool is already available in the FLASH5.

The general parametric equation for Bezier curves is:

The quadratic Bezier curve (with one control point) equation is:

The three-time Bezier curve (with two control points) has the following equations:

Android only encapsulates low-order Bezier curves, with two Bezier curves corresponding to Quadto (float x1,float y1,float x2,float y2), Three times Bezier curve corresponds to Cubicto (float x1,float y1,float x2, float y2, float X3, float y3)

(1), quadto (float x1, float y1, float x2, float y2)

X1, Y1 represents the control point of X, Y, that is, a control point dynamic diagram of the p1,x2, Y2 represents the target point x, y;

(2), Cubicto (float x1, float y1, float x2, float y2, float x3, float y3)

X1, Y1 represents the control point 1 x, y;

X2, y2 represents the control point 2 x, y;

X3, Y3 represents the X, y of the target point;

Next we use the above two methods to draw an exciting love out:

public class Heartview extends View {private static final int path_width = 2;    Starting point private static final int[] Start_point = new int[] {300, 270};    Love bottom Point private static final int[] Bottom_point = new int[] {300, 400};    Left control point private static final int[] Left_control_point = new int[] {450, 200};    Right control point private static final int[] Right_control_point = new int[] {150, 200};    Private Paint Mpaint;    Private Path MPath;        Public Heartview (Context context) {super (context);    Init ();        } private void Init () {mpaint = new Paint (Paint.anti_alias_flag);        Mpaint.setstyle (Style.stroke);        Mpaint.setstrokewidth (Path_width);        Mpaint.setcolor (color.red);        MPath = new Path ();        Mpath.moveto (Start_point[0], start_point[1]);        Mpath.quadto (Right_control_point[0], right_control_point[1], bottom_point[0], bottom_point[1]); MPaTh.quadto (Left_control_point[0], left_control_point[1], start_point[0], start_point[1]);        } @Override protected void OnDraw (canvas canvas) {super.ondraw (canvas);        Canvas.drawcolor (Color.White);        Canvas.drawpath (MPath, mpaint);        Canvas.drawcircle (Right_control_point[0], right_control_point[1], 5, mpaint);    Canvas.drawcircle (Left_control_point[0], left_control_point[1], 5, mpaint); }}

The effect is as follows:

Here, the basic use of path should be no problem, the next we give this love to add a dynamic effect, make it more feel;

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Path-related methods explained (II.)