Android的Vector矢量图绘制

Android的Vector矢量图绘制

http://blog.csdn.net/xu_fu/article/details/44004841

• 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取顺时针方向

以上来自前辈的总结，我的正文在下面：

M的使用格式：M x,y x,y x,y ….可以有无数对坐标(注：x和y表示坐标）
但是如果你单纯这样的写，是看不出来有什么图形的，因为M命令只是在标注一个一个的点，并没有把点绘制出来，因为我们这是在绘制矢量图而不是像canvas一样在绘制位图，所以我们标注的点并不会出现在屏幕上，那么怎么做呢？可以先这样写 （M x,y x,y x,y…Z），然后看看效果，再继续往下看

Z的使用格式：直接加在绘制命令的最后
刚刚试过的小伙伴应该是知道了，只要加上Z命令，之前被M标注的点位就会被依次连接起来(到最后一个点时会将其与第一个点连接)，最终成为一个封闭图形。

A的使用格式：它的参数比较多，一个个说比较难讲清楚，我们直接上代码

<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:fillColor="@color/white"

android:pathData="M12,12 a3.2,3.2 0,1 0,1 0 "/>
vector>

首先M指令将画笔的起始位置置于12，12这个坐标 ，随后a3.2，3.2表示从圆心开始算，在X轴上的半径和Y轴上的半径（自己改动一下这两个参数比较好理解），再往后的0，1 0这三个参数我们一会再说，先直接看到最后的1 0，这两个参数表示偏移量（或者说另一个坐标，但不是圆心），意思就是从上一个M指令的12，12坐标开始，1，0表示在X轴方向上向右偏移1一个单位，Y轴不变，这个时候我们就有了两个固定坐标（12，12）和（13，12），然后a指令开始绘图，它将绘制一个圆，圆的边缘将连接这两个坐标。

这时候细心一点来看的话，就应该可以发现了(12,12)到(13,12)之间其实是一条直线，也就是说，a指令绘制出来的其实并不是一个圆，而是一道弧，并且将这条弧的两端以直线连接了。
说到这里就可以来看看a指令中的 “M12,12 a3.2,3.2 0,1 0,1 0 ” 几个红颜色的参数了
第一个：官方介绍是 X轴的旋转角度，其实非常好理解，就是以圆心为原点，旋转多少度。。。你想转多少度，就设置多大参数。
第二个：它有两个参数可选0或者1。就我们刚刚楼上的例子而言，设置为1时，我们看到的是白色的大圆弧，而设置为0时，我们看到是黑色的小圆弧。（这样看的话，就非常清楚了。。。两个点连接的直线分割了整个圆）

第三个参数：是解决顺逆时针的，0表示逆时针，1表示顺时针。为什么有这个参数呢？因为有时候，我们需要一个半圆，也就是（12，12）和（13，12）连成的线刚好处于圆的中间，这个时候问题就出现了，你到底是要左边的圆呢，还是右边的呢？如果你选0就是左边的半圆，反之就是右边的半圆。

C和Q两个指令是贝塞尔曲线。。。分别有三个和两个参数，其实这个贝塞尔曲线我不知道怎么描述。但如果有使用过CDR绘制矢量图的人应该知道，或者。。。小伙伴们自己试一试摸索一下呗？（原谅我书读的少，真的是只会用，不知道怎么描述，就不在这误人子弟了）