Android SVG 和 VectorDrawable 的基本知识

Android 5.0系统中引入了 VectorDrawable 来支持矢量图(SVG)，同时还引入了 AnimatedVectorDrawable 来支持矢量图动画

SVG 和 VectorDrawable 的基本知识

VectorDrawable 并无支持全部的 SVG 规范，目前只支持 PathData 和有限的 Group 功能。另外还有一个 clip-path 属性来支持后面绘图的区域。 因此对于使用 VectorDrawable 而言，咱们只须要了解 SVG 的 PathData 规范便可（对应自定义控件中的绘图中的Path路径功能）。经过查看 PathData 文档，能够看到 path 数据包含了一些绘图命令，好比 ：

• moveto 命令 M or m ，移动到新的位置 (大写的命令为绝对坐标命令；小写的命令为相对坐标命令， 下同) ，
• closepath 命令 Z or z，封闭路径，从当前的位置画一条直线到该路径或者子路径起始位置
• lineto 命令 L or l，从当前的位置画一条线到指定的位置
• horizontal lineto 命令 H or h，水平画一条直线到指定位置
• vertical lineto 命令 V or v，垂直画一条直线到指定位置
• quadratic Bézier curve 命令 Q or q ，贝塞尔曲线
• smooth quadratic Bézier curveto 命令 T  光滑二次贝塞尔曲线
• elliptical arc  命令 A 椭圆弧

矢量图xml文件

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="400dp"
    android:height="400dp"
    android:viewportHeight="400"
    android:viewportWidth="400">
    <path
        android:pathData="M 100 100 L 300 100 L 200 300 z"
        android:strokeColor="#000000"
        android:strokeWidth="5"
        android:fillColor="#FF0000"
        />
</vector>复制代码

该示例的画布大小为 400 X 400像素（左上角坐标为0,0； 右下角坐标为400,400）， path 路径为： 移动到 100、100 位置，而后画一条线到绝对坐标 300、100位置，而后画一条线到绝对坐标 200、300位置，而后画一条线到该路径的起始位置。这样一个倒三角形就绘制出来了。

须要注意的是， 在根元素 vector 上有两个宽高设置，其中 viewport 是指矢量图里面的画布大小，而android:width 和 android:height 是指该矢量图所对应的 VectorDrawable 的大小。
path 元素里面的 pathData 就是矢量图的路径数据，除此以外还能够设置其余属性。

path 元素属性设置说明

svg 路径基本设置

属性设置	功能描述
android:name	定义该 path 的名字，这样在其余地方能够经过名字来引用这个路径
android:pathData	和 SVG 中 d 元素同样的路径信息。

svg 路径边框相关设置

属性设置	功能描述
android:strokeColor	定义如何绘制路径边框，若是没有定义则不显示边框
android:strokeWidth	定义路径边框的粗细尺寸
android:strokeAlpha	定义路径边框的透明度
android:strokeLineCap	设置路径线帽的形状，取值为 butt, round, square.
android:strokeLineJoin	设置路径交界处的链接方式，取值为 miter,round,bevel.
android:strokeMiterLimit	设置斜角的上限

当strokeLineJoin设置为 “miter” 的时候， 绘制两条线段以锐角相交的时候，所得的斜面可能至关长。当斜面太长，就会变得不协调。strokeMiterLimit 属性为斜面的长度设置一个上限。这个属性表示斜面长度和线条长度的比值。默认是 10，意味着一个斜面的长度不该该超过线条宽度的 10 倍。若是斜面达到这个长度，它就变成斜角了。当 strokeLineJoin 为 “round” 或 “bevel” 的时候，这个属性无效。

svg 路径颜色相关设置

属性设置	功能描述
android:fillColor	定义填充路径的颜色，若是没有定义则不填充路径
android:fillAlpha	定义填充路径颜色的透明度

根元素 vector

根元素 vector 是用来定义这个矢量图的

基本设置

属性设置	功能描述
android:name	定义该drawable的名字
android:width	定义该 drawable 的内部(intrinsic)宽度,支持全部 Android 系统支持的尺寸，一般使用 dp
android:height	定义该 drawable 的内部(intrinsic)高度,支持全部 Android 系统支持的尺寸，一般使用 dp
android:viewportWidth	定义矢量图视图的宽度，视图就是矢量图 path 路径数据所绘制的虚拟画布
android:viewportHeight	定义矢量图视图的高度，视图就是矢量图 path 路径数据所绘制的虚拟画布

附加设置

属性设置	功能描述
android:tint	定义该 drawable 的 tint 颜色。默认是没有 tint 颜色的
android:tintMode	定义 tint 颜色的 Porter-Duff blending 模式，默认值为 src_in
android:autoMirrored	设置当系统为 RTL (right-to-left) 布局的时候，是否自动镜像该图片。好比 阿拉伯语。
android:alpha	该图片的透明度属性

group 节点

有时候咱们须要对几个路径一块儿处理，这样就可使用 group 元素来把多个 path 放到一块儿。 group 支持的属性以下：

属性设置	功能描述
android:name	定义 group 的名字
android:rotation	定义该 group 的路径旋转多少度
android:pivotX	定义缩放和旋转该 group 时候的 X 参考点。该值相对于 vector 的 viewport 值来指定的。
android:pivotY	定义缩放和旋转该 group 时候的 Y 参考点。该值相对于 vector 的 viewport 值来指定的。
android:scaleX	定义 X 轴的缩放倍数
android:scaleY	定义 Y 轴的缩放倍数
android:translateX	定义移动 X 轴的位移。相对于 vector 的 viewport 值来指定的。
android:translateY	定义移动 Y 轴的位移。相对于 vector 的 viewport 值来指定的。

例如 前面提到的三角形，经过 group 能够把其旋转 90度。

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="400dp"
    android:height="400dp"
    android:viewportHeight="400"
    android:viewportWidth="400">
    <group
        android:name="name"
        android:pivotX="200"
        android:pivotY="200"
        android:rotation="90">
        <path
            android:fillColor="#FF0000"
            android:pathData="M 100 100 L 300 100 L 200 300 z"
            android:strokeColor="#000000"
            android:strokeWidth="5" />
    </group>
</vector>复制代码

使用建立好的 静态svg 图形

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        app:srcCompat="@drawable/triangle"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:ignore="VectorDrawableCompat" />
</LinearLayout>复制代码