AndroidVector初探

Android--Vector

---

What is it ?

說到androidvector, 就要首先明白什麼是Vector & SVG,

Vector: 矢量圖形是計算機圖形學中用點、直線或者多邊形等基於數學方程的幾何圖元表示圖像。矢量圖形與使用像素表示圖像的位圖不一樣。 SVG: 是一種基於可擴展標記語言（XML），用於描述二維矢量圖形的圖形格式。SVG由W3C制定，是一個開放標準。

Why we use it ?

優勢:

• 佔用空間小, 對比bitmap而言,天生具備優點
• 放大不會出現失真現象, 完美適配

缺點:

• 對設計師來說, 學習導圖工做成本增長了
• 不適合複雜的圖片(產出/時間投入比較高)

How we use it ?

0x01 定義一個vector

<vector xmlns:android="http://schemas.android.com/apk/res/android" 		
    android:width="24dp"
    android:height="24dp" 
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path android:name="path1"
          android:pathData="M24,0L0,24 M0,0L24,24z"
          android:strokeColor="#ff0000"
          android:strokeWidth="1"/>
</vector>

與之對應的SVG:

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
	<path d="M 24, 0 L 0,24" style="fill: none; stroke: red;"/>
    <path d="M 0, 0 L 24,24" style="fill: none; stroke: red;"/>
</svg>

• width & height 定義了drawable大小
• viewportWidth & viewportHeight 定義了了Vector畫布大小
• pathData定義了Vector的路徑. 對應SVG文件的d屬性

0x02 vector 命令說明

命令	參數	說明
<font color='#CCFF99'>M</font>	(x y)+	moveto 移動到
<font color='#CCFF99'>Z</font>	none	closepath 關閉路徑
<font color='#88DD66'>L</font>	(x y)+	lineto 鏈接到
<font color='#88DD66'>H</font>	x+	horizontal lineto 水平線到 x+
<font color='#88DD66'>V</font>	y+	vertical lineto 垂直線到 y+
<font color='#229922'>C</font>	(x1 y1 x2 y2 x y)+	curveto  三次貝塞爾曲線到
<font color='#229922'>S</font>	(x2 y2 x y)+	smooth curveto  光滑三次貝塞爾曲線到
<font color='#229922'>Q</font>	(x1 y1 x y)+	uadratic Bézier curveto 二次貝塞爾曲線到
<font color='#229922'>T</font>	(x y)+	smooth quadratic Bézier curveto 光滑二次貝塞爾曲線到
<font color='#005500'>A</font>	(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+	elliptical arc  橢圓弧
<font color='#005500'>R</font>	x1 y1 (x y)+	Catmull-Rom曲線

• 其中M,Z比較好理解
• L, H, V是除了M,Z最好用的指令.
• C,S,Q,T是比較難理解,難用的指令, 本次一介紹Q,T爲例
• A,R 本次不作介紹

參考這篇文章介紹的更爲生動詳細點我

0x03 小試牛刀

掌握了0x02的一些基本命令後, 咱們能夠小試牛刀了....

1. 繪製<i class="icon-ok" ></i>

---

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportHeight="24.0"
        android:viewportWidth="24.0">
    <path android:name="path1"
          android:pathData="M6,18 L12,24 24,0"
          android:strokeColor="#ff0000"
          android:strokeWidth="1"/>
</vector>

2. 繪製<i class="icon-bookmark"></i>

---

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportHeight="24.0"
        android:viewportWidth="24.0">
    <path android:name="path1"
          android:pathData="M12,12 L0,24 V0 H24 V24z"
          android:strokeColor="#ff0000"
          android:strokeLineJoin="round"
          android:strokeWidth="4"/>
</vector>

注意這裏採用了fillColor填充整個path, 也能夠同時設置strokeColor & strokeWidth來顯示路徑輪廓.

3. 繪製<i class="icon-check-empty"></i> 帶圓角的矩形 Q命令

---

Q命令式意圖 對應的指令和參數是：

Q x1 y1, x y

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportHeight="24.0"
        android:viewportWidth="24.0">
    <path android:name="path1"
          android:pathData="M0,4 Q0,0 4,0 H20 Q24,0 24,4 V20 Q24,24 20,24 H4 Q0,24 0,20Z"
          android:strokeColor="#ff0000"
          android:strokeLineJoin="round"
          android:strokeWidth="1"/>
</vector>

繪製思路 假設圓角爲4

1. 繪製左上角圓角 M0,4 Q,0 4,0
2. 連線到右上角而且話圓角 H20 Q24,0 24,0 ....

4. 繪製<i class="icon-smile"></i> icon-smileQ, T命令

T命令式意圖 對應的指令和參數是：

T x y

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportHeight="24.0"
        android:viewportWidth="24.0">

    <path
        android:name="pathEyeLeft"
        android:fillColor="#ff0000"
        android:pathData="M6,6 H8 V8 H6 V6Z"
    />
    <path
        android:name="pathEyerRight"
        android:fillColor="#ff0000"
        android:pathData="M16,6 H18 V8 H16 V6Z"
    />
    <path
        android:name="pathEyerMouth"
        android:pathData="M6,14 Q12,20 18,14"
        android:strokeColor="#ff0000"
        android:strokeWidth="1"
    />
    <path
        android:name="pathOutLine"
        android:pathData="M0,12 Q0,0 12,0 T 24,12 12,24 0,12"
        android:strokeColor="#ff0000"
        android:strokeWidth="1"/>

</vector>

外輪廓的圓

<path
        android:name="pathOutLine"
        android:pathData="M0,12 Q0,0 12,0 T 24,12 12,24 0,12"
        android:strokeColor="#ff0000"
        android:strokeWidth="1"/>

5. 繪製<i class="icon-circle"></i> icon-smile A命令

對應的指令和參數是：

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

參數	取值範圍	說明
rx, ry	double	圓弧的中心點
x-axis-rotation	度數	x軸旋轉角度
large-arc-flag	0, 1	0表示小角度弧，1表示大角度
sweep-flag	0, 1	弧線方向,0逆時針，1沿順時針
x, y	double	圓弧的終點

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100">
    <path
        android:fillColor="#ff0000"
        android:pathData="M2,50 A 48,48 0 1 0 98,50 A 48,48 0 1 0 2,50z"/>
</vector>

####參考: Markdown命令 <br/> SVG介紹