Android vector 标签

        Vect简介

        Vector 就是 Android 的 SVG 实现。Vector是Android 5.0 之后才出来的，不过从 AppCompat23.2 开始，Google开始支持在5.0版本以下使用Vector.

        vector功能可以自己通过AS导入，可参考这边文章：

         https://blog.csdn.net/klxh2009/article/details/51121034

       也可以手动编码。这里主要介绍手动编码制作自己的矢量图。

        看下面这段vector代码：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="30dp"
    android:viewportHeight="30"
    android:viewportWidth="40">

    <path android:fillColor="@color/selected_comment_background"
        android:pathData="M10,0 h20, q4,0 4,4, v20, q0,4 -4, 4, h-20,
                          q-4,0 -4,-4, v-20, q0,-4 4,-4"
        />

</vector>

      效果如下图：

      

白底圆角矩形图，完全和shape标签实现的效果一样，但是vector的图形，不怕被拉伸，拉伸后，依然高清，不会变模糊。

vector语法：

常用的标签属性：

1. width         图形宽度
2. height        图形高度
3. viewportHeight       画布高度
4. viewportWidth        画布宽度

图形宽度和高度一般用dp作单位，画布高度和宽度大小和其保持一直就可以，无序标注单位。

path指令：

• M指令为开始点，即将画笔移动到指定坐标位置      格式：M20,0
• V画竖直线，H画水平线  画到指定坐标位置             格式：H30,30
• Q二阶贝塞尔曲线                                                  格式：qx1,y1 x2,y2   参数x1,y1为控制点  x2,y2为结束点
• C三阶贝赛尔曲线             格式：Cx1,y1 x2,y2 x3,y3 参数x1,y1为第一个控制点 x2,y2 为第二个控制点 x3,y3为结束点
• A为弧线                   格式：A RX,RY,XROTATION,FLAG1,FLAG2,X,Y        参数rx代表x轴半径，ry代表y轴半径， XROTATION代表绕x轴旋转角度 ， flag1 代表0取小弧线，1取大弧线 ，flag2 0逆时针，1顺时针， 最后 x,y代表结束点
• T指令指定终点，就能画出一条平滑的贝塞尔曲线。控制点被默认为上一次的控制点关于上次终点的中心对称点。
• Z闭合路径      视情况应用，可有可无

字母换成小写，就是相对位置，大写是绝对位置，相对于上一个起始点位置，比如M10,0 h20后，起始点位置就是30,0。另外，关于弧线的用法，要特别注意，顺时针逆时针参数，旋转角度的正负，具体情况要根据自己的画的图像来决定。

下面是【心形】的xml，注意比较和注释代码的不同，虽然形状相同，但是实现的思路不一样。想一想如果将开篇的圆角矩形作为背景图，哪种写法的pathData能够在背景色上面显示出图案？

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="30dp"
    android:viewportHeight="30"
    android:viewportWidth="40">

    <path android:fillColor="@color/selected_comment_background"
        android:pathData="M20,6
                          a5,6 15, 0,1 9,2
                          C29,11 28,13 20,19
                          C12,13 11,11 11,8
                          a5,6 -15, 0,1 9, -2"
        />

    <!--M20,6
                          a5,6 -15 0,0 -9 2
                          C11,11 12,13 20,19
                          C28,13 29,11 29,8
                          a5,6 15 0,0 -9 -2-->
</vector>