VectorDrawable(矢量图)

VectorDrawable

在 Android 5.0（API 级别 21）及更高版本中，您可定义矢量图片，而且图片可在不损失清晰度的情况下缩放。 您只需一个资产文件即可创建一个矢量图像，而位图图像则需要为每个屏幕密度提供一个资产文件。 如果要创建一个矢量图像，请您在 XML 元素中定义形状的详情。下列示例以心形定义一个矢量图像：

<!-- res/drawable/heart.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    <!-- intrinsic size of the drawable -->
    android:height="256dp"
    android:width="256dp"
    <!-- size of the virtual canvas -->
    android:viewportWidth="32"
    android:viewportHeight="32">

  <!-- draw a path -->
  <path android:fillColor="#8fff"
      android:pathData="M20.5,9.5
                        c-1.955,0,-3.83,1.268,-4.5,3
                        c-0.67,-1.732,-2.547,-3,-4.5,-3
                        C8.957,9.5,7,11.432,7,14
                        c0,3.53,3.793,6.257,9,11.5
                        c5.207,-5.242,9,-7.97,9,-11.5
                        C25,11.432,23.043,9.5,20.5,9.5z" />
</vector>

这样就定义好了一个静态的矢量图，可以像一般的图片资源使用，设置到imageView中会显示出一个心形。控制显示心形的就是上面path这个标签，一个path代表一个元素，绘制的内容是pathData下的一长串字符，里面是SVG绘制的一系列命令，提供moveTo、lineTo、close等操作，可以和Graphics 中的Path操作对应起来，具体可以查看SVG path Ref，后面会简要说明一下。
VectorDrawable定义的是一张静态图，还有一个类AnimatedVectorDrawable，可以让矢量图有动画效果。一般需要三个步骤：

1. 在 res/drawable/ 中拥有 元素的矢量图片
2. 在 res/drawable/ 中拥有 元素且已添加动画的矢量图片
3. 在 res/anim/ 中拥有 元素的一个或多个对象动画

例如：
1. vectordrawable.xml

<!-- res/drawable/vectordrawable.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

2.animvectordrawable.xml
已添加动画的矢量图片定义按名称引用矢量图片内的群组和路径：

<!-- res/drawable/animvectordrawable.xml -->
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@anim/rotation" />
    <target
        android:name="v"
        android:animation="@anim/path_morph" />
</animated-vector>

3.定义动画文件

<!-- res/anim/rotation.xml（将目标群组旋转 360 度） -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="6000"
        android:propertyName="rotation"
        android:valueFrom="0"
        android:valueTo="360" />
</set>

<!-- res/anim/path_morph.xml（对矢量图片的路径进行变形） -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType" />
</set>

由于矢量图的特点，AnimatedVectorDawable可以实现一些很特别的效果，对VectorDrawable里的pathData做动画，可以从一个图形渐变到另一个图形，比如Material Design里的toolbar icon；对trimPathStart、trimPathEnd做动画，可以得到图形的绘制轨迹。

对于 pathData 主要有以下一些命令

• M：move to 移动绘制点，作用相当于把画笔落在哪一点。
• L：line to 直线，就是一条直线，注意，只是直线，直线是没有宽度的，所以你什么也看不到。
• Z：close 闭合，嗯，就是把图封闭起来。
• C：cubic bezier 三次贝塞尔曲线
• Q：quatratic bezier 二次贝塞尔曲线
• A：ellipse 圆弧

每个命令都有大小写形式，大写代表后面的参数是绝对坐标，小写表示相对坐标，相对于上一个点的位置。参数之间用空格或逗号隔开。

命令详解：

• M (x y) 移动到x,y
• L (x y) 直线连到x,y，还有简化命令H(x) 水平连接、V(y)垂直连接
• Z，没有参数，连接起点和终点
• C(x1 y1 x2 y2 x y)，控制点x1,y1 x2,y2，终点x,y
• Q(x1 y1 x y)，控制点x1,y1，终点x,y
• A(rx,ry x-axis-rotation large-arc-flag,sweepflag x,y)
• a rx,ry x-axis-rotation large-arc-flag,sweepflag dx,dy
  rx ry 椭圆半径
  x-axis-rotation x轴旋转角度
  large-arc-flag 为0时表示取小弧度，1时取大弧度（要长的还是短的）
  sweep-flag 0取逆时针方向，1取顺时针方向
  x,y (dx,dy) 终点的位置
  有个图解：
  

相关用法：

• L的用法：
  android:pathData=” M10,0 L10,40 40,40” />
  把画笔放在（10,0）位置，连线10，40点 在连线40，40点。。。于是，一个直角三角形出来了~这里没有写z，没什么关系。
  

• Q和C的对比：

  详细了解贝塞尔曲线：
  http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html

• Q

  android:pathData=”M0,0 q30,90 80,20”/>　　
  　
  　
  控制点1，30,90 ：
  控制点2，80,20 :

• C
  android:pathData=” M0,0 c0,0 30,90 80,20” />
  C 第一控制点(0,0) 第二控制点(30,90) 结束点(80,20) 或 c 第一控制点 第二控制点 结束点.
  
  现在修改第一个控制点：
  android:pathData=” M0,0 c50,0 30,90 80,20” />
  

• a:
  可以直接拉到下面看作用。
  android:pathData=”M50,50 a10,5 0,1 0 1,0” />
  以50，50为起点，逆时针画
  椭圆图形，x轴半径10，y轴半径5
  

参考文献：

https://developer.android.com/training/material/drawables.html
https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html
https://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable.html
https://developer.android.com/training/material/animations.html#AnimVector（定制动画——为矢量图片添加动画）
http://www.w3.org/TR/SVG11/paths.html#PathData

SVG文档：http://www.phpstudy.net/e/svg/index.html