矢量图学习（一）

声明：此文非本人原创，为整理网络资料加自己的一些注解所得。

矢量图优点：

保存最少的信息，文件大小比位图要小，并且文件大小与物体的大小无关。任意放大矢量图形，不会丢失细节或影响清晰度，因为矢量图形是与分辨率无关的。

在项目中使用矢量图至少可以缩小我们apk包的尺寸，而且可以在屏幕适配时提供很大的方便，因为矢量图是分辨率无关的。

SVG

主要有以下一些命令

• M： move to 移动绘制点
• L：line to 直线
• Z：close 闭合
• C：cubic bezier 三次贝塞尔曲线
• Q：quatratic bezier 二次贝塞尔曲线
• A：ellipse 圆弧

每个命令都有大小写形式，大写代表后面的参数是绝对坐标，小写表示相对坐标。参数之间用空格或逗号隔开

命令详解：

• M (x y) 移动到x,y
• L (x y) 直线连到x,y，还有简化命令H(x) 水平连接、V(y)垂直连接
• Z，没有参数，连接起点和终点
• C(x1 y1 x2 y2 x y)，控制点x1,y1 x2,y2，终点x,y
• Q(x1 y1 x y)，控制点x1,y1，终点x,y
• A(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
  rx ry 椭圆半径
  x-axis-rotation x轴旋转角度
  large-arc-flag 为0时表示取小弧度，1时取大弧度
  sweep-flag 0取逆时针方向，1取顺时针方向
  有个图解：
  

在xml文件中的标签是<vector>

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" 
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="100"
    android:viewportWidth="100">
    
    <path
         android:fillColor="#000000"
         android:pathData="M25,0 l 50,50 -50,50Z"/>

</vector>

首先vector 标签是一个drawable对象，所以是放在res/drawable目录的。

vector 标签下有android:width和android:height属性，这两个属性是必填的，定义矢量图形的绝对大小，虽然说是矢量图形随意缩放，但是不能说这里不定义宽高直接到要设置到的目标控件上定义控件的宽高，这样是不允许的，一定要设置这个绝对宽高，要不然会报错。tint定义该drawable的颜色；alpha 设置透明度

然后还有个android:viewportHeight和android:viewportWidth属性，这个是画布宽高，也是必填的，定义Path路径的时候就必须在这个画布大小里去绘制，超出画布就显示不出来了。

path标签android:fillColor属性定义绘制颜色，android:pathData定义绘制路径。

<path>里面的其他属性：

• android:name 定义该 path 的名字，这样在其他地方可以通过名字来引用这个路径
• android:pathData 和 SVG 中 d 元素一样的路径信息。
• android:fillColor 定义填充路径的颜色，如果没有定义则不填充路径
• android:strokeColor 定义如何绘制路径边框，如果没有定义则不显示边框
• android:strokeWidth 定义路径边框的粗细尺寸
• android:strokeAlpha 定义路径边框的透明度
• android:fillAlpha 定义填充路径颜色的透明度
• android:trimPathStart 从路径起始位置截断路径的比率，取值范围从 0 到1
• android:trimPathEnd 从路径结束位置截断路径的比率，取值范围从 0 到1
• android:trimPathOffset 设置路径截取的范围 Shift trim region (allows showed region to include the start and end), in the range from 0 to 1.
• android:strokeLineCap 设置路径线帽的形状，取值为 butt, round, square.
• android:strokeLineJoin 设置路径交界处的连接方式，取值为 miter,round,bevel.
• android:strokeMiterLimit 设置斜角的上限，Sets the Miter limit for a stroked path.

android中的坐标：原点（0，0）位于左上脚，x左边向右为正，y坐标向下为正。

M25,0 l 50,50 -50,50Z这个路径表示：在100*100的画布内，先把绘制点移动到绝对坐标(25,0)这个点，然后画直线到(50,50)这个点，l指令是相对坐标，大写的L表示绝对坐标，
那么l 50,50就是在原点(25,0)的x轴往前移50，往下移50，绝对坐标就是(75,50)，也就是三角形的右边那个点。
然后从(50,50)这个点绘制到三角形最下面那个点(-50,50)，这也是相对右边那个点相对坐标，也就是把(75,50)这个绝对坐标当作是原点(0,0),参作这个原点往后移动50再往下移动50，
在整个画布中的绝对坐标就是(25，100)

获得小图标的.xml绘制文件

1.阿里巴巴UX矢量库     http://www.iconfont.cn/     找到需要的图标并选择SVG下载

2.将svg图转换为xml文件。方法1：android  studio打开的项目中点击new选择vector asset  点击Local SVG选择路径，并命名drawable文件名字。会在drawable目录下生成对应的xml文件(android studio 本身也提供了大量的图标)；方法2：用浏览器打开svg图片，右击查看源代码。

3.在要使用的layout中添加：xmlns:app="http://schemas.android.com/apk/res-auto"

在Imageview中添加:    app:srcCompat="@drawable/****"

4.添加兼容库（可能需要）

//在gradle2.0及以上：
android {
  defaultConfig {
  vectorDrawables.useSupportLibrary = true
}}
//在gradle 1.5以前
android {
  defaultConfig {
    // Stops the Gradle plugin’s automatic rasterization of vectors
    generatedDensities = []
  }
  // Flag to tell aapt to keep the attribute ids around
  aaptOptions {
    additionalParameters "--no-version-vectors"
  }
}

参考：http://www.cnblogs.com/yuhanghzsd/p/5466846.html