Android vector Path Data drawing detailed

SVG is a vector graphic format that is the acronym for the three words of the scalable vector graphics. The tag in the XML file is <vector> that the drawing can be used as a general picture resource, as in the following example:

<Vectorxmlns:android= "Http://schemas.android.com/apk/res/android"Android:width= "24DP"Android:height= "24DP"Android:viewportheight= "24.0"Android:viewportwidth= "24.0">    <PathAndroid:fillcolor= "#FF000000"Android:pathdata= "m22,16v4c0,-1.1-0.9,-2-2,-2h8c-1.1,0-2,0.9-2,2v12c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2zm-11,-4l2.03,2.71L16 , 11l4,5h8l3,-4zm2,6v14c0,1.1 0.9,2 2,2h14v-2h4v6h2z " /></Vector>

The graphic that it draws is

At the same time, Android Studio provides a wealth of picture resources, you can right-click Module,new->vector Asset Select, as follows:

is not very envious of these cool graphics, of course, you can also go to do. It is obvious that the above example is focused on the large number of numbers inside the Pathdata:

Android:pathdata= "m22,16v4c0,-1.1-0.9,-2-2,-2h8c-1.1,0-2,0.9-2,2v12c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2zm-11, -4l2.03,2.71l16,11l4,5h8l3,-4zm2,6v14c0,1.1 0.9,2 2,2h14v-2h4v6h2z " />

In the XML file:

Android:viewportheight= "24.0" android:viewportwidth= "24.0"> is the declared canvas size.

Start by learning some basic grammar:

• M:move to move the drawing point, which is equivalent to where the brush falls.
• L:line to Straight line, is a straight line, note , just straight line, the line is no width, so you can see nothing.
• Z:close closed, well, is to close the diagram.
• C:cubic Bezier three times Bezier curve
• Q:quatratic Bezier two times Bezier curve
• A:ellipse Arc

Each command has a case, and uppercase indicates that the following argument is an absolute coordinate, and lowercase represents the relative coordinate, relative to the position of the previous point. The arguments are separated by a space or a comma.

Detailed command:

• M (x y) Move the brush to X, Y, ready to draw in this place.
• The L (x y) line is connected to X, Y, as well as simplifying the command h (x) Horizontal connection, V (y) Vertical connection. Just to connect, it doesn't show the graphic like a stroke line.
• Z, no parameters, connection start and end
• C (x1 y1 x2 y2 x y), Control Point (x1,y1) (x2,y2), end point x, Y.
• Q (x1 y1 x y), Control Point (x1,y1), end point x, y
• C and Q will make a simple comparison below.
• A (Rx ry x-axis-rotation large-arc-flag sweep-flag x y)

• Android:p athdata=/> 
  Rx Ry Oval RADIUS 
  x-axis-rotation x Axis Rotation angle 
  Large-arc-flag is 0 to take a small radian, 1 o'clock take a large radian (when the time, is to long or short)
  Sweep-flag 0 Take counterclockwise direction, 1 take clockwise direction 

Use of L:

Android:p Athdata=
Put the brush in the (10,0) position, connect 10, 40 points in the line 40, 40 points ... So, a right triangle out ~ here does not write Z, nothing to do.
    

Q vs. C: Learn more about Bezier curves:

Http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html

Q
android:p athdata="m0,0 q30,90 80,20"/>

　
Control Point 1,30,90:
Control Point 2,80,20:

C

Android:p athdata=/>
First control point (0,0) second control point (30,90) end point (80,20) or  first control Point second control point end point

Now modify the first control point:

Android:p athdata=/> 

A:

So many numbers, how to see Ah, you can directly pull down to see the role.

Android:p athdata=/>
Take 50,50 as the starting point and draw counter-clockwise

Rotate X Axis ~ ~ ~

 android:p Athdata=  "m50,50 a10,5 90,1 0 1,0" /> 
 
 
 
 I want the upper half of the ellipse. , modified here to twice times the x-axis radius 
 android:p Athdata= "m50,50 a10,5 90,1 0 20,0" /> 
 Ellipse left half 
         android:p Athdata= "m50,50 a10,5 1 0 0" />     

Ellipse Right Half segment
Android:p athdata=/> 

<PathAndroid:fillcolor= "#fff70000"Next Android:pathdata= "m50,50 a10,5 0 1 0 1 0" />    <PathAndroid:fillcolor= "#FFF22420"on Android:pathdata= "m50,50 a10,5 0 1 1 1 0" />    <PathAndroid:fillcolor= "#fff57000"Right Android:pathdata= "m50,50 a10,5 0 1 1 1 1" />    <PathAndroid:fillcolor= "#FF323243"left Android:pathdata= "m50,50 a10,5 0 1 0 0 1" />

The above situation can be thought of because the starting point 50,50 in the ellipse. Well, revise it again.

Android:p athdata=/> Modified the code for the right ellipse
Now take the large radian, so see this effect, if 7 is changed to 10 (that is, the y-axis radius of twice times) This is just half the position.

Now take a small radian to see,

Android:p athdata=/>, you can see the small radian clockwise drawing. 

Then change to counterclockwise,

Android:p athdata=  

The properties of the ellipse are almost complete, as follows

Android:p athdata="m50,50 a10,5 0 0 0 0 7" />

10,5 is elliptical x, Y axis radius

The first 0 is an x-axis rotation angle

The second 0 is a size radian, 0 is small, and 1 is large.

The third 0 is clockwise, 0 is inverse 1 is shun

Fourth 7 to modify the position of the starting point in the ellipse where the starting point is.

This is the diagram left by the predecessor:

Android vector Path Data drawing detailed