vector 的用法--------------自繪資源

創建

命名 選擇根元素

當然你也可以選擇其他元素

---

屬性介紹

vector 元素

• name：定義該矢量圖形的名字。通過名字找到這個矢量圖
• width，height：定義該矢量圖形的固有寬高(必須的，矢量圖內部的寬高intrinsic) ,與外部的寬高無關
• viewportHeight，viewportWidth：定義畫布(viewport)的大小，不需要指定單位。但大小可以理解爲一個虛擬單位，將drawable的寬高分成多少等份，在定義path的時候所有數值都是說取drawable寬高的多少份。如viewportWidth和viewportHeight分別爲32，32，在path中(16,16)便表示在drawable寬高的中間。所有控制點都必須在viewportWidth和viewportHeight內，超出的部分交不予顯示。該屬性爲必需值
• alpha：圖片的不透明度
• tint 定義該 drawable 的 tint 顏色。默認是沒有 tint 顏色的。一般不需設置
• tintMode 定義 tint 顏色的 Porter-Duff blending 模式，默認值爲 src_in
• autoMirrored 設置當系統爲 RTL (right-to-left) 佈局的時候，是否自動鏡像該圖片

group 元素
幾個元素需要一起處理時使用，將需要處理的path放到group中。
group 主要是用來設置路徑做動畫的關鍵屬性的

• name 定義 group 的名字
• rotation 定義該 group 的路徑旋轉多少度
• pivotX 定義縮放和旋轉該 group 時候的 X 參考點。該值相對於 vector 的 viewport 值來指定的
• pivotY 定義縮放和旋轉該 group 時候的 Y 參考點。該值相對於 vector 的 viewport 值來指定的
• scaleX 定義 X 軸的縮放倍數
• scaleY 定義 Y 軸的縮放倍數
• translateX 定義移動 X 軸的位移。相對於 vector 的 viewport 值來指定的
• translateY 定義移動 Y 軸的位移。相對於 vector 的 viewport 值來指定的

clip-path 元素
定義當前繪製的剪切路徑。注意，clip-path 只對當前的 group 和子 group 有效

• name 定義 clip path 的名字
• pathData 和 android:pathData 的取值一樣

path 元素

• name：路徑的名稱。可以在其他地方來引用
• fillColor：圖形的填充顏色。設置該屬性值後，得到的svg圖形就會填充滿.(畫滿)
• strokeColor：邊界的顏色。(畫邊框)
• strokeWidth：邊框的寬度
• strokeAlpha：邊界透明度
• trimPathEnd：從開始到結束，顯示百分比，0，不顯示，1 顯示
• trimPathStart：從開始到結束，隱藏百分比，0 不隱藏，1 隱藏
• trimPathOffset：設置截取範圍
• strokeLineCap 設置路徑線帽的形狀，取值爲 butt, round, square. (設置線頭爲圓滑)
• strokeLineJoin 設置路徑交界處的連接方式，取值爲 miter,round,bevel.
• strokeMiterLimit 設置路徑交叉時候，斜角的上限。當 strokeLineJoin 爲 “round” 或 “bevel” 的時候，這個屬性無效。爲miter時，銳角相交，可能斜面會很長，不協調。所以就爲交界的斜面設置上限。默認是10.意味着一個斜面的長度不應該超過線條寬度的 10 倍
• pathData：定義控制點的位置。

---

pathData參數

所有的參數，都可以大寫小寫，大寫表示是絕對位置。小寫是相對位置

所有的值，都可以用空格來間隔開，或者用逗號間隔開

• M：move to 移動繪製點, 一個座標 （移動但不繪製）
  M45,14 將繪製點移動到座標（45，14）
  m1,1 將繪製點相對於上一個繪製點移動（1，1）
• L：line to 直線，一個座標
  L55,14從上一個繪製點繪製直線到座標（55，14）
  l10,0相對於上一個繪製點繪製直線（10，0）
  以上兩種方式現對於M45,14 而言，效果是一致的
• Z：close 閉合，不要參數
• C：三次貝塞爾曲線，三個座標，前兩個爲貝塞爾曲線的控制點的座標，最後一個終點的座標。
• S：同C，但比C要更平滑。
• Q：二次貝塞爾曲線，兩個座標，第一個表示貝塞爾曲線的控制點座標，第二個終點的座標。
  繪製90度圓角 M8,4 l24,0 q4,0 4,4 l0,24
• T：同Q，但比q平滑。
• A：ellipse 圓弧，七個參數，
  (rx ry rotation big_flag sweep_flag x y)
  rx ry，弧線所屬橢圓的半軸的xy的長度，如果xy相等，那麼就是一個圓。
  rotation 旋轉角度
  big_flag 是否大圓 1 爲 是， 0 不是
  sweep_flag 是否順時針 1 爲 是， 0 不是
  x y 終點座標
• H:水平畫一條直線到指定位置，一個座標
• v:垂直畫一條直線到指定位置 ，一個座標
  //指令的大小寫分別代表着絕對定位與相對定位。絕對定位指的是這個點在drawable中的座標，而相對定位指的是這個點相較於前一個點移動的座標

這裏抄襲個小玩意

drawable/vector_smile

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:name="smile"
    android:width="30dp"
    android:height="30dp"
    android:viewportHeight="100"
    android:viewportWidth="100">
    <!--臉-->
    <path
        android:name="smile_circle"
        android:fillColor="#f7ec22"
        android:pathData="M0 50, A50 50 0 0 1 100 50, A50 50 0 0 1 0 50" />
    <!--嘴巴-->
    <path
        android:name="mouth"
        android:strokeColor="#00ff00"
        android:strokeWidth="5" />
</vector>

animator/oa_smile

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000"//控制動畫時間
    android:propertyName="pathData"
    android:valueTo="M30 70, Q50 50 70 70"
    android:valueFrom="M30 70, Q50 90 70 70"
    android:valueType="pathType">

</objectAnimator>

drawable/av_smile

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_smile">

    <target
        android:name="mouth"
        android:animation="@animator/oa_smile" />

</animated-vector>

使用

    <ImageView
        android:src="@drawable/av_smile"
        android:id="@+id/image"
        android:layout_width="100dp"
        android:layout_height="100dp" />

        ImageView imageView = (ImageView) findViewById(R.id.image);
        Animatable animatable = (Animatable) imageView.getDrawable();
        animatable.start();

就是一個表情的變化圖片