Androidの矢量图形之VectorDrawable研究

浏览数：22 / 时间：2015年06月11日

5.0以上支持VectorDrawable了，可以创建vector的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属性，这两个属性是必填的，定义矢量图形的绝对大小，虽然说是矢量图形随意缩放，但是不能说这里不定义宽高直接到要设置到的目标控件上定义控件的宽高，这样是不允许的，一定要设置这个绝对宽高，要不然会报错。

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

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

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)

技术分享