android矢量地图画法_Android 开发 VectorDrawable 矢量图 （二）了解矢量图属性与绘制...

了解属性：

：

根标签，表示一个矢量动画

支持的属性：

android:name：定义矢量图形的名称

android:width：定义Drawable的宽度，支持所有dimension单位，一般使用dp。drawable的宽度不一定是最终绘制宽度，比如给ImageView设置backgroud则Drawable绘制宽度等于ImageView的宽度，给ImageView设置src则在ImageView大于Drawable宽度时，Drawable绘制宽度等于自己定义的宽度。

android:height：定义Drawable的宽度，支持所有dimension单位，一般是dp。其它同上。

android:viewportWidth：定义矢量图形的视图(viewport)空间的宽度，viewport是一个虚拟的canvas，后面所有的path都在该坐标系上绘制。坐标系左上方为(0,0)，横轴从左向右，纵轴从上到下。横轴可视区域就是0~viewportWidth。

android:viewportHeight：定义矢量图形的可视区域的高度。其它见上。[0,0]~[viewportWidth,viewportHeight]定义了虚拟canvas的可视区域。

android:tint：作为染色(tint)的色彩应用到drawable上。默认不应用tint。

android:tintMode：tint颜色的Porter-Duff混合模式，默认是src_in。

android:autoMirrored：如果drawable布局方向是RTL(right-to-left)时，drawable绘制是否需要镜像化(镜像化就是绕自身x轴中线旋转180度)。

android:alpha：drawble的透明度，取值0～1

：

定义一组路径和子group，另外还定义了转换信息(transformation information)。转换信息定义在vector指定的视图区域内(与viewport坐标系相同)。定义的应用转换的顺序是缩放-->旋转-->平移，所以同时定义的这些属性最先应用scaleX/scaleY属性，最后应用translateX/translateY属性。

支持的属性：

android:name：定义group的名称

android:rotation：group对应矢量图形的旋转角度，取值是360度制。

android:pivotX：Group旋转和缩放时的中心点的X轴坐标。取值基于viewport视图的坐标系，不能使用百分比。

android:pivotY：Group旋转和缩放时的中心点的Y轴坐标。取值基于viewport视图的坐标系，不能使用百分比。

android:scaleX：Group在X轴上的缩放比例，最先应用到图形上。

android:scaleY：Group在Y轴上的缩放比例，最先应用到图形上。

android:translateX：Group在X轴的平移距离，取值基于viewport视图的坐标系。最后应用到图形上。

android:translateY：Group在Y轴的平移距离，取值基于viewport视图的坐标系。最后应用到图形上。

：

定义一个路径，一个路径即可以表示一块填充区域也可以表示一根线条。

支持的属性：

android:name：定义路径的名称

android:pathData：定义路径的数据，路径由多条命令组成，格式与SVG标准的path data的d属性完全相同，路径命令的参数定义在viewport视图的坐标系。

android:fillColor：指定填充路径的颜色，一般是一个颜色值，在SDK24及以上，可以指定一个颜色状态列表或者一个渐变的颜色。如果在此属性上做渐变动画，新的属性值会覆盖此值。如果不指定，则path不被填充。

android:strokeColor：指定路径线条的颜色，一般是一个颜色值，在SDK24及以上，可以指定一个颜色状态列表或者一个渐变的颜色。如果在此属性上做渐变动画，新的属性值会覆盖此值。如果不指定，则path的线条不会绘制出来。

android:strokeWidth：指定路径线条的宽度，基于viewport视图的坐标系(不要dp/px之类的结尾)。

android:strokeAlpha：指定路径线条的透明度。

android:fillAlpha：指定填充区域的透明度。

android:trimPathStart：取值从0到1，表示路径从哪里开始绘制。0~trimPathStart区间的路径不会被绘制出来。

android:trimPathEnd：取值从0到1，表示路径绘制到哪里。trimPathEnd~1区间的路径不会被绘制出来。

android:trimPathOffset：平移可绘制区域，取值从0到1，线条从(trimPathOffset+trimPathStart绘制到trimPathOffset+trimPathEnd)，注意：trimPathOffset+trimPathEnd如果超过1，其实也是绘制的的，绘制的是0～trimPathOffset+trimPathEnd-1的位置。

android:strokeLineCap：设置线条首尾的外观，三个值：butt(默认，向线条的每个末端添加平直的边缘), round(向线条的每个末端添加圆形线帽), square(向线条的每个末端添加正方形线帽。)。

android:strokeLineJoin：设置当两条线条交汇时，创建什么样的边角(线段连接类型)：三个值：miter(默认，创建尖角),round(创建圆角),bevel(创建斜角) 。

android:strokeMiterLimit：设置设置最大斜接长度，斜接长度指的是在两条线交汇处内角和外角之间的距离。只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。

了解语法：

M = moveto(M X,Y) ：将画笔移动到指定的坐标位置，相当于 android Path 里的moveTo()

L = lineto(L X,Y) ：画直线到指定的坐标位置，相当于 android Path 里的lineTo()

H = horizontal lineto(H X)：画水平线到指定的X坐标位置

V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置

C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线

S = smooth curveto(S X2,Y2,ENDX,ENDY) 同样三次贝塞尔曲线，更平滑

Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线

T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射 同样二次贝塞尔曲线，更平滑

A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线 ，相当于arcTo()

Z = closepath()：关闭路径(会自动绘制链接起点和终点)

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

直线命令

例子1 画一个方向图标：

注意！下面的代码是Android的VectorDrawable格式

L26.7,26.9

M25,25

L10,40"/>

效果图：

例子2  画一个矩形：

我们的画布是100*100的,首先在X10,Y10的坐标上向右画直线,然后在下线画直线,在向左画直线,最后使用Z闭合图形。注意！需要闭合图形需要在一个图形里一直保持线段的连贯,如果在中间使用M移动画笔，那么Z闭合只与最后一次M移动的点闭合图形。这点与自定义View里的path画法类似。

另外，如果你需要一个填充全部颜色的矩形，只需要修改android:strokeColor="@color/colorPrimaryDark"  为android:fillColor="@color/colorPrimaryDark" 这样，图形中间就会被全部填充。但是建议初学者在画的时候设置strokeColor和strokeWidth 在来绘制图形，否则图形如果不设置线条颜色和线宽，图形在闭合之前是不会显示图形的。当然，熟悉svg的大佬可以略过。。

效果图:

曲线命令

绘制平滑曲线的命令有三个，其中两个用来绘制贝塞尔曲线，另外一个用来绘制弧形或者说是圆的一部分.

在path元素里，只存在两种贝塞尔曲线：三次贝塞尔曲线C，和二次贝塞尔曲线Q

三次贝塞尔曲线C

三次贝塞尔曲线C，三次贝塞尔曲线需要定义一个点和两个控制点，所以用C命令创建三次贝塞尔曲线，需要设置三组坐标参数：

C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

这里的最后一个坐标(x,y)表示的是曲线的终点，另外两个坐标是控制点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点

M 定义起点为(100,100)

C 定义终点为(400,100)

其中两个控制点 (200,0)(300,0)

连接贝塞尔曲线 S

以将若干个贝塞尔曲线连起来，从而创建出一条很长的平滑曲线。通常情况下，一个点某一侧的控制点是它另一侧的控制点的对称(以保持斜率不变)。这样，可以使用一个简写的贝塞尔曲线命令S

二次贝塞尔曲线Q

它比三次贝塞尔曲线简单，只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标

Q x1 y1, x y (or q dx1 dy1, dx dy)

连接贝塞尔曲线 T

就像三次贝塞尔曲线有一个S命令，二次贝塞尔曲线有一个差不多的T命令，可以通过更简短的参数，延长二次贝塞尔曲线。

T x y (or t dx dy)

弧形

弧形命令A是另一个创建SVG曲线的命令。基本上，弧形可以视为圆形或椭圆形的一部分。假设，已知椭圆形的长轴半径和短轴半径，另外已知两个点(它们的距离在圆的半径范围内)，这时我们会发现，有两个路径可以连接这两个点。每种情况都可以生成出四种弧形。所以，为了保证创建的弧形唯一，A命令需要用到比较多的参数

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

弧形命令A的前两个参数分别是x轴半径和y轴半径

参数 x-axis-rotation (第三个)表示弧形的旋转情况

参数 large-arc-flag (第四个)决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧。

参数 sweep-flag(第五个)表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧。

最后的参数x y 是弧线的终点

实例

M 100 400

A 100 120 0 0 1 400 400 Z"android:strokeColor="#f76f07"android:strokeWidth="5" />

这里 起点坐标是 (100,400) 弧线的半径 rx =100 ry=120 旋转角度为 0度，第四个参数 0 代表取的是小角方向的弧度，这里正好两而相等

终点坐标是 (400,400) 最后 Z 闭合曲线