Android Path and Pathmeasure advanced

1 Overview

In the previous path and text, explained the basic use of path, here to explain some of the things not mentioned in the previous article.

2 Path

The path-related methods are explained here, followed by pathmeasure, and examples

(1) Offset

public void offset(float dx, float dy)public void offset(float dx, float dy, Path dst)

Both of these methods specify offset, which causes the path to be offset. The DST in the second method represents the target of the moved path write. If NULL, it is written to the path that called the method.

The first method is used here, the code is as follows

Path path = new Path();path.moveTo(00);path.lineTo(200200);canvas.drawPath(path, paint);path.offset(5000);canvas.drawPath(path, paint);

Take a look at the use of the second method:

The code is as follows

Path PATH = new Path ();Path. MoveTo(0,0);Path. LineTo( $, $);Canvas. DrawPath(Path, paint);Path path1 = new Path ();Path1. MoveTo(0,0);Path1. LineTo( -, -);Path1. Offset( -,0, path);Canvas. DrawPath(Path, paint);

Look at these two lines of code.

path1.offset(500, 0, path);canvas.drawPath(path, paint);

As you can see, the offset path is written to path.

(2) Filltype

Filltype, somewhat similar to the previous explanation of the Xfermode, but here is relatively simple, there are only four values, as follows:

WINDING//默认值，取两个图形相交EVEN_ODD//取不相交的部分INVERSE_WINDING//反转相交INVERSE_EVEN_ODD//反转不相交部分

Take a look at the code of the Experiment:

Path PATH = new Path ();Path. Addrect( -, -, -, -, Path. Direction. CW);Path. Addcircle( -, -, -, Path. Direction. CW);Path. Setfilltype(Path. Filltype. Winding);Canvas. DrawPath(Path, paint);

Here are the default winding to look at the various filltype corresponding graphs:

Winding

Even_odd

Inverse_winding

Inverse_even_odd

Looking at the picture above, the four modes are basically clear.

(3) Reset

Reset is explained behind Filltype, because it is related to reset, and reset clears all data from the path, but does not empty the filltype. We use a piece of code to confirm:

Paint. SetColor(Color. BLUE);Path PATH = new Path ();Path. Addrect( -, -, -, -, Path. Direction. CW);Path. Addcircle( -, -, -, Path. Direction. CW);Path. Setfilltype(Path. Filltype. Inverse_winding);Path. Reset();Canvas. DrawPath(Path, paint);

Look at the above code, if the Filltype is cleared, then the drawing will be an empty content, the entire interface will be white, however the picture is as follows:

Here you can see, not white, but blue, because here the Filltype set is inverse_winding, that is, the reversal, because it is not cleared away, then the empty path of the complement is the complete set, so the entire screen is drawn as blue.

(4) Rewind

Rewind and reset are similar, but rewind clears filltype and all lines, curves, points, etc., but he retains the data structure so that it can be reused quickly to improve performance, such as repeating a class of segments, with equal numbers of points, Then using rewind can preserve the data structure of the mount point data, which is more efficient.

Let's verify if it clears the Filltype.

Paint. SetColor(Color. BLUE);Path PATH = new Path ();Path. Addrect( -, -, -, -, Path. Direction. CW);Path. Addcircle( -, -, -, Path. Direction. CW);Path. Setfilltype(Path. Filltype. Inverse_winding);Path. Rewind();Canvas. DrawPath(Path, paint);

The effect is as follows

As can be seen, all data including Filltype have been cleared.

3 Pathmeasure

Pathmeasure is mainly used to measure path, through which we can get the coordinates of specific points on the path and so on. Take a look at his basic methods first.

(1) Construction method

public PathMeasure()public PathMeasure(Path path, boolean forceClosed)

As above, there are two methods, the first one does not explain, the second method has two parameters;

Path: path to be measured
Forceclosed: whether to close path

(2) SetPath

public void setPath(Path path, boolean forceClosed)

This is where you specify the path that needs to be measured, similar to the second constructor above.

(3) GetLength

Returns the total length of the current path.

The code is as follows:

Path. Addrect( -, -, -, -, Path. Direction. CW);Canvas. DrawPath(Path, paint);Paint. SetStyle(Paint. Style. FILL);Pathmeasure pathmeasure = new Pathmeasure (path, FALSE);Float length = Pathmeasure. GetLength();Canvas. DrawText(String. ValueOf(length), -, -, paint);

As you can see, the 1600 plotted here is the length of the path contour.

(4) Getpostan

public boolean getPosTan(float distance, float pos[], float tan[])

The return value is Boolean, which returns False if the path is empty
There are three incoming parameters:
Distance: The distance from the beginning of the incoming distance.
Pos[]: Meaning position, corresponding to the x, Y coordinates of the point
Tan[]: This value is more difficult to understand. Let's explain the meaning of this value below.

Let's take a look at a motion diagram:

The code is as follows:

Privatefloat[] Pos;privatefloat[]Tan;//Draw an animation pathCanvas.drawpath (Animpath, paint);if(Distance< Pathlength) {//Get location andPathmeasure.getpostan (DistancePosTan);Matrix. Reset ();//Calculate bearing anglefloat degrees= (float) (Math.atan2 (Tan[1],Tan[0])*180.0/MATH.PI);//Calculate the transformation matrix, which is used to rotate the moving image according to the azimuth angle (the matrix is followed by a space explanation, this is the first one)Matrix. Postrotate (degrees, Bm_offsetx, bm_offsety);Matrix. Posttranslate (pos[0]-bm_offsetx, pos[1]-bm_offsety);//Draw the image according to the matrix (including rotation and displacement)Canvas.drawbitmap (BM,Matrix, null);Distance+=Step;}Else{Distance=0;} Invalidate ();

As you can see from the above figure, the moving graph, not just the movement, but also the rotation, then the angle of rotation, and this is the code

pathMeasure.getPosTan(distance, pos, tan);

The tan inside is the key to calculating the rotational azimuth. So what does this tan mean, we know that the x-coordinate system at the beginning of the moving graph is parallel to the Cavans, and in the subsequent movement, the Black Flame enters a slash, and then he spins, and his X coordinate system is no longer parallel to the canvas coordinate system. Here's a look at the picture:

The red line in the figure represents the x-axis of the Black flame, and as you can see, he was originally parallel to the canvas's x-axis, and then when he entered the second hypotenuse, he rotated along the blue arrow, where the red line was no longer parallel to the canvas's x-axis, and x, y coordinates of the intersection of the red and the Unit The meaning of this picture here is very clear.

(5) Getmatrix

public boolean getMatrix(float distance, Matrix matrix, int flags)

This method is similar to the one above, except that he is returning a well-handled matrix, but this matrix takes the upper-left corner as the rotation point, so the point needs to be moved to the center point.
One more parameter, flags, refers to what information this martrix needs. The value of flags has the following two
Pathmeasure.position_matrix_flag: Location information
Pathmeasure.tangent_matrix_flag: Cutting edge information, azimuth information, so that the picture is rotated by path.

The code is as follows:

matrix.reset();pathMeasure.getMatrix(distance, matrix, PathMeasure.POSITION_MATRIX_FLAG | pathMeasure.TANGENT_MATRIX_FLAG);matrix.preTranslate(-bm_offsetX, -bm_offsetY);canvas.drawBitmap(bm, matrix, null);

The rest of the same is not affixed, here is mainly the need to do a rotation point transformation:

matrix.preTranslate(-bm_offsetX, -bm_offsetY);

(6) GetSegment

public boolean getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo)

This method returns a Boolean that returns False if the length of the intercept is 0, otherwise true. The parameters have the following meanings

STARTD: Starting Distance
STOPD: End Distance
DST: Receive intercepted path
Startwithmoveto: Whether to take the intercepted Path,moveto to the starting point.

Take a look at an example:

The code is as follows

Path. Addrect( -, -, the, the, Path. Direction. CW);Canvas. DrawPath(Path, paint);Pathmeasure pathmeasure = new Pathmeasure (path, FALSE);Path Dstpath = new Path ();Pathmeasure. GetSegment(0, -, Dstpath, False);Paint. SetColor(Color. RED);Canvas. DrawPath(Dstpath, paint);

As you can see, because the Startwithmoveto parameter here is set to false, then the intercepted path is not moveto to the starting position, then the default MoveTo to (0,0) causes the drawn red line to start at the origin. After setting the ture, the picture is as follows:

You can see the overlap.

Well, path and pathmeasure here, the above example can be a lot of reference.

Android Path and Pathmeasure advanced