Android SVG 和 VectorDrawable 的基本知識

趙子龍發表於2017-11-12
AndroidSVG

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>複製程式碼

相關文章