Path-related methods (2) and path-related methods

Path-related methods (2) and path-related methods

Let's take a look at a class of methods related to XXXTo in Path today;

Through the Path method (1), we have a basic understanding of the Path. We already know what the Path represents, we can make full use of it and build it at will. Today, let's take a look at the methods android provides for us to build the path;

I. moveTo (float, float)

The start Point for moving the path to Point (x, y). We all know that for android systems, the coordinates in the upper left corner of the screen are (0, 0 ), when we do some operations, the Default Benchmark is also (0, 0), such as calling canvas. rotate (float degrees) rotates the corresponding angle of the Canvas. Of course, Canvas also has another method: rotate (float degrees, float px, float py ), in this example, the canvas is changed through translate (px, py. the reference point of rotate (). The moveTo method of Path can be used in an analogy to change the starting point of Path;

Let's take a look at the following 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(150, 150);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        canvas.drawColor(Color.WHITE);        canvas.drawPath(mPath, mPaint);    }

In this case, the screen shows a straight line from (0, 0) to (150,150). The effect is as follows:

In

mPath.lineTo(150, 150)

Add the following mPath. moveTo (50, 50) to check the effect:

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

Ii. rMoveTo (float, float)

The preceding XXXTo method of r can be understood simply by understanding its meaning. r, that is, relative, will be measured later than the previous point;

We have slightly changed the previous example:

<Span style = "white-space: pre"> </span> mPath = new Path (); <span style = "white-space: pre "> </span> mPath. moveTo (50, 50); mPath. lineTo (150,150); // move 100 pixels from the front point x to the back, and y move 100 pixels down mPath. rMoveTo (100,100); mPath. lineTo (400,400 );

According to our expectation, we should draw two lines from (150,150)-(250,250) and (400,400)-(). When calling rMoveTo (float, float) when the first vertex is (0, 0), the effect is equivalent to moveTo (float, float );

3. lineTo (float x, float y)

The above example also shows the function of this method, that is, from the previous point connected in a straight line (x, y)

4. rLineTo (float x, float y) is connected in a straight line (currentX + x, currentY + y) using the current vertex as the benchmark)

V. arcTo (RectF oval, float startAngle, float sweepAngle, boolean forceMoveTo)

This method adds an arc to the path. Let's take a look at the meaning of each parameter:

The first parameter: RectF oval represents the rectangular area occupied by the elliptic of the arc;

This sentence looks like there are still some vertices. After careful consideration, an arc is bound to an elliptical or positive circle, but only shows a part of this elliptical or positive circle, the elliptic or positive circle must be included in a rectangle. this parameter is the rectangle area:

The second parameter: float startAngle indicates the starting angle of the arc;

Third parameter: float sweepAngle indicates the angle of the arc line;

Fourth parameter: boolean forceMoveTo if it is true, the effect is equivalent to creating a new path, moving it to the starting point of the arc, and then adding an arc. Someone may ask, what is the use of this method, let's take a look at the example later;

It should be noted that the point where 0 degrees are located is not the top side, but the position where three o'clock on the clock is located;

Next we will add an arc to the path just now:

MPath = new Path (); mPath. moveTo (50, 50); mPath. lineTo (150,150); // move 100 pixels from the front point x to the back, and y move 100 pixels down mPath. rMoveTo (100,100); mPath. lineTo (400,400); mRectF = new RectF (0,400,800,800); mPath. arcTo (mRectF, 0, 90) ;}@ 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 an extra line (processed in blue). Because the starting point of the arc is not the same as the last point of the path, the path will directly lineTo to the starting point of the arc, then, what should we do if we don't want this redundant line? The arcTo (RectF oval, float startAngle, float sweepAngle, boolean forceMoveTo) method comes in handy:

Change to use

mPath.arcTo(mRectF, 0, 90, true);

The effect is as follows:

6. close ()

As the name implies, the current path is disabled or the previous example is used:

<span style="white-space:pre"></span>mPath.rMoveTo(100, 100);        mPath.lineTo(400, 400);        mRectF = new RectF(0, 400, 800, 800);        mPath.arcTo(mRectF, 0, 90);        mPath.close();

You can first imagine what the current result is:

Let's change it

mPath.arcTo(mRectF, 0, 90, true);

Effect:

Is there any conclusion on the close result? Close is equivalent to lineTo to the last moveTo end point. To facilitate understanding, you can regard the Path after each call to moveTo as an independent Path;

7. methods related to the besell curve in path:

First, let's take a brief look at the beiser curve:

The bégiscurve is a mathematical curve applied to two-dimensional graphics applications. Generally, vector graphics software uses it to accurately draw curves. The Beitz curve consists of line segments and nodes. nodes are the pivot points that can be dragged, and the line segments are scalable, the pen tool we see on the drawing tool is used for this vector curve. The besell curve is a very important parameter curve in computer graphics. Some mature bitmap software also has the besell curve tool, such as PhotoShop.

There is no complete curve tool in Flash 4, and the besell curve tool has been provided in Flash 5.

The general parameter equation of the besell curve is:

The quadratic besell curve (with a Control Point) equation is:

The cubic besell curve (with two control points) has the following equation:

Android only encapsulates the low-level besell curve. The secondary besell curve corresponds to quadTo (float x1, float y1, float x2, float y2), and the cubic besell 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 and y1 represent the x and y of the control point, that is, P1 in a control point dynamic graph. x2 and y2 represent the x and y of the target point;

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

X1 and y1 represent the x and y of control point 1;

X2 and y2 represent x and y of Control Point 2;

X3 and y3 represent the x and y of the target point;

Next, let's draw an exciting love using the two methods above:

Public class HeartView extends View {private static final int PATH_WIDTH = 2; // start point private static final int [] START_POINT = new int [] {300,270 }; // private static final int [] BOTTOM_POINT = new int [] {300,400 }; // The left-side control point private static final int [] LEFT_CONTROL_POINT = new int [] {450,200}; // The right-side 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:

At this point, there should be no problem with the basic use of path. In the next article, we will add dynamic effects to this love to make it more feel;

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.