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>複製代碼