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 命令说明

• 其中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"><pathandroid:name="pathEyeLeft"android:fillColor="#ff0000"android:pathData="M6,6 H8 V8 H6 V6Z"/><pathandroid:name="pathEyerRight"android:fillColor="#ff0000"android:pathData="M16,6 H18 V8 H16 V6Z"/><pathandroid:name="pathEyerMouth"android:pathData="M6,14 Q12,20 18,14"android:strokeColor="#ff0000"android:strokeWidth="1"/><pathandroid:name="pathOutLine"android:pathData="M0,12 Q0,0 12,0 T 24,12 12,24 0,12"android:strokeColor="#ff0000"android:strokeWidth="1"/></vector>

外轮廓的圆

<pathandroid: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

<vectorxmlns:android="http://schemas.android.com/apk/res/android"android:width="200dp"android:height="200dp"android:viewportHeight="100"android:viewportWidth="100"><pathandroid: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介绍