Android SVG矢量圖

矢量圖

也稱爲面向對象的圖像或繪圖圖像，在數學上定義爲一系列由線連接的點。矢量文件中的圖形元素稱爲對象。每個對象都是一個自成一體的實體，它具有顏色、形狀、輪廓、大小和屏幕位置等屬性。

Android資源文件中我們可以看見矢量圖定義
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="17dp"
    android:height="17dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">

    <path
        android:fillColor="#fff"
        android:pathData="M2,10L2,14L22,14L22,10z" />
</vector>

圖像寬度： android:width
圖像高度： android:height
視區寬度：android:viewportWidth
視區高度：android:viewportHeight
具體矢量數據：android:pathData

pathData值

pathData值有下面幾種類型
M = moveto 相當於 android Path 裏的moveTo(),用於移動起始點
L = lineto 相當於 android Path 裏的lineTo()，用於畫線
H = horizontal lineto 用於畫水平線
V = vertical lineto 用於畫豎直線
C = curveto 相當於cubicTo(),三次貝塞爾曲線
S = smooth curveto 同樣三次貝塞爾曲線，更平滑
Q = quadratic Belzier curve quadTo()，二次貝塞爾曲線
T = smooth quadratic Belzier curveto 同樣二次貝塞爾曲線，更平滑
A = elliptical Arc 相當於arcTo()，用於畫弧
Z = closepath 相當於closeTo(),關閉path

大寫表示絕對位置,小寫表示相對位置
空格表示連續上一個命令

簡單測試

方法1：大寫絕對位置

描述： 移動到 （4,10），連接到（4,14）->（10,14）->(10,20)->(14,20)->(14,14)->(20,14)->(20,10)->(14,10)->(14,4)->(10,4)->(10,10)
輸入： M4,10L4,14 10,14 10,20 14,20 14,14 20,14 20,14 20,10 14,10 14,4 10,4 10,10z
後面補個z表示閉合

方法2：小寫相對位置

描述： 移動到 （4,10）下4，右6，下6，右4，上6，右6，上4，左6，上6，左4，下6,
M4,10l0,4 6,0 0,6 4,0 0,-6 6,0 0,-4 -6,0 0,-6 -4,0 0,6z

由於畫的橫豎線，可以用V和H代替L
如：
M4,10v4h6v6h4v-6h6v-4h-6v-6h-4v6z

結果如下：