pathdataandroid

❶ Android SVG的pathData详解

上上篇讲到SVG的动画.但是没详细讲到pathData里面的详细路径.

比如下面这个图形

看到这里pathData里的数据，显而易见，我把图的每渣毁个画图步骤换行分解了。
pathData 的指令基本都是由字母跟若干数字组成，数字之间可以用空格或者逗号隔开 (其实逗号会被忽略掉，加上逗号只是一些习惯的问题，方便查看)。一般来说指令字母分为大小写两种,大写的字母是基于原点的坐标系(偏移量)，即绝对位置；小写字母是基于当前点坐标系(偏移量)，即相对位置。

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)

移动
M x,y ； (m dx, dy) 移动虚拟画笔到对应的点，如耐备但是并不绘制。一开始的时候默认是在(0,0)。

比如现在，M22,16，就是将开始点亩码定位到(22,16)这里。

直线
L x,y (l dx, dy) 从当前点划一条直线到对应的点。
H x (h dx) 从当前点绘制水平线，相当于l x,0
V y (v dy) 从当前点绘制垂直线，相当于l 0,y

现在，V4 就是基于刚才(22,16)的基础上，在Y轴的方向画垂直线，X轴不变。划线到(22,4)这个点上。

这里 c0,-1.1 -0.9,-2 -2,-2，c是三次贝塞尔曲线。小写说明是基于(22,4)点的相对坐标来进行绘制。
0,-1.1是控制点1，-0.9,-2是控制点2，-2,-2是终点位置。所以基于相对位置。可以计算出控制点1的绝对位置。
即是(22,2.9),控制点2是(21.1, 2),终点是(20,2)

终点和起点连接起来也就成为这个图。
同理剩下的也就可以形成正方形圆角

由于我们画正方形的时候是逆时针来画，如果这个山形也是逆时针来画的话，也就重叠看不见了。所以要顺时针来画山形。在此基础上加上m-11,-4 l2.03,2.71 L16,11 l4,5 H8 l3,-4z 也就可以看见了。

剩下的那个图形也就非常简单了。

这里面没讲到A命令的具体的使用。
A rx,ry x-axis-rotation large-arc-flag,sweepflag x,y
a rx,ry x-axis-rotation large-arc-flag,sweepflag dx,dy
rx ry 椭圆半径
x-axis-rotation x轴旋转角度
large-arc-flag 为0时表示取小弧度，1时取大弧度（要长的还是短的）
sweep-flag 0取逆时针方向，1取顺时针方向
x,y (dx,dy) 终点的位置

以50，50为起点，逆时针画
椭圆图形，x轴半径10，y轴半径5

转动x轴~~~

出现上面的情况可以想到是因为，起始点50,50在椭圆中的位置不同。那么，再修改一下。

现在取小弧度看看

再修改为逆时针，

椭圆的属性 差不多讲解完成了，如下
android:pathData=" M50,50 a10,5 0 0 0 0 7" />
10，5 为椭圆x，y轴半径
第一个0 为 x轴旋转角度
第二个0 为取大小弧度，0为小，1为大
第三个0 为顺逆时针，0为逆1为顺
第四个0 为修改起始点在椭圆中的位置，y轴.
第五个 7 为修改起始点在椭圆中的位置，x轴。
这是前辈留下的图：

❷ Android 制作逐渐显示动画(描边动画、矢量动画VectorDrawble)

Android 系统从5.0开始支持矢量图，可以通过 Android Studio自带的 Vector Assert 工具将SVG、PSD 转成VectorDrawble。

转化好的VectorDrawblew看起来好像挺复杂，是不是完全看不懂。没关系，只要转化的图形没有问题，你不用关心其内部数据。

我们直接进入矢量动画部分。

矢量动画的实现通过在xml定义<animated-vector>标签（其对应的Java对象是AnimatedVectorDrawable）实现，如下所示：

可以看到<animated-vector>标签是主要元素是target，它其实就起到一个桥梁作用，将动画和VectorDraw中的图形联系起来。

比如target1，它将属性动画splash_animator_draw和vectorDrawble对象中name等于line1的对象联系起来，即：动画将生效在line1对象上。

之前展示了由svg图片通过Android Studio Vector Assert工具转换过来的VectorDrawble，里面的实际上svg画图语法，<path>标签里的pathData包含了画图的路径(坐标)和语法

在实际使用过程中有几率遇到这样两个问题(笔者都遇到过)：

其实以上两个问题都要求你掌握进阶知识，svg画图语法。

官方svg语法解析： https://www.w3.org/TR/SVG/paths.html
不喜欢看英文，去这篇博客： http://www.jianshu.com/p/a3cb1e23c2c4

对于Android程序员，Lottie的动画使用很简单，步骤如下：

1.接入Lottie

从动画实现上来说，Lottie动画应该是最简单的方法了。

Lottie的优点很明显：

Lottie的缺点：

好了，如果觉得本文对你有帮助，请关注、留言、点赞我，谢谢！

❸ android图片系列 (2) - 静态 SVG 图片

SVG 图片是一种可支持任意缩放的图片格式，使用 xml 定义，使用 canvas 中 path 路径来完成绘制，和我们传统使用的 BitMap位图有很大的区别。

SVG 在前端早就普及了，在android 中是 google 是在5.0之后开始支穗埋持的，14年出来之后兼容是个大问题，随着2016.2 V7包 23.2.0版本的发布才算是有个相对完善的兼容使用方案。

SVG 的概念我就不写了，拿来主义啦，原文： Android Vector曲折的兼容之路

不瞎逼逼，我们先来看一看 android 中的 SVG 矢量图是个什么东东

看到没有，这就是一个 SVG 矢量图片，就是一个 xml 文件，右边是预览，先说下，这东西的好处：缩放不失真，体积小。这一个 SVG 图片只有970个字节...强大吧，比 png 格式的图片强的没边了吧，png 我们还得适配，做多套，然后一个一个改名字复制到工程里，有了 SVG 妈妈再也不担心我们写作业啦...

这里需要解释下这里的几个标签：

这里有一分详细的属性说明：

好了下面开始介绍 SVG 啦

首先，需要讲解两个概念——SVG和Vector。

SVG，即Scalable Vector Graphics 矢量图，这种图像格式在前端中已经使用的非常广泛了

Vector，在Android中指的是Vector Drawable，也就是Android中的矢量图

因此，可以说Vector就是Android中的SVG实现猜颤蚂，因为Android中的Vector并不是支持全部的SVG语法，也没有必要，因为完整的SVG语法是非常复杂的，但已经支持的SVG语法已经够用了，特别是Path语法，几乎是Android中Vector的标配

Android以一种简化的方式对SVG进行了兼容，这种方式就是通过使用它的Path标签，通过Path标签，几洞消乎可以实现SVG中的其它所有标签，虽然可能会复杂一点，但这些东西都是可以通过工具来完成的，所以，不用担心写起来会很复杂。

Path指令解析如下所示：

支持的指令：

M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
L = lineto(L X,Y) ：画直线到指定的坐标位置
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径

坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下
所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系
指令和数据间的空格可以省略
同一指令出现多次可以只用一个
注意，’M’处理时，只是移动了画笔， 没有画任何东西。 它也可以在后面给出上同时绘制不连续线。
关于这些语法，开发者需要的并不是全部精通，而是能够看懂即可，其它的都可以交给工具来实现。

这里有一篇 Android vector标签 PathData 画图超详解 详细描述了 SVG 中 path 的绘制

好了概念性的东西说完了，我们来看看

SVG 的使用分2种，一种是静态 SVG 矢量图，就是本文的主角，本章节主要谈论的东西，另一种是 SVG 矢量动画，是SVG 的高级应用，是给静态 SVG 加上objectAnimator 动画，应用的很广泛，是实现 android icon 动态交互的核心做法。

上面的SVG 图大家都看到了，我们就是写一个 xml 的文件，里面承载的标签都是描述如何绘制我们想要的图案的，画布大小，颜色，路径等，然后交给系统去绘制。

现在让我们来看看 SVG 在 andorid 中如何应用，如何兼容5.0以下版本。

SVG 虽然早早就在前端使用了，但是 android 上开始支持 SVG 的使用还是从5.0开始的，在5.0以上系统的使用很简单，和之前一样使用 PNG 图片一样

首先 android 中的 SVG 图片的承载方式是一个 xml 文件，所以UI 给我们的 SVG 图片是不能直接使用的，这里 google 给我们提供加载方式

Android studio 在 2.3.3 的版本中可以直接使用 svg，新建一个 SVGDemo项目，新建 Vector Asset 文件：app-> main -> New -> Vector Asset 如图所示：

我们选择 Local File 就是选择本地svg文件进行导入，对文件命名后点击 Next ->Finish 在 drawable目录 下就添加了一个.xml的文件

好了这样一个 svg 图片我们算是加入到我们的工程里里了，可以直接使用了。当然在此之前我们把 SVG 图片放在那个 drawable 文件夹呢。对于这个问题就要说一下了：

有一点需要解释一下，svg 矢量图文件我们放在drawable 根目录即可。android 系统不会根据你把 svg 矢量图存放在不同的 drawable 文件夹，对图片进行分辨率上的缩放，因此我们不用像使用 PNG 图片时准备多套图片了。我们导入 SVG 图片默认存放的地址就是 drawable根目录，所以我们就放这里就好了，当然也可以自己写SVG 图片，都是 xml 的，自己写完 path 路径后都是可以查看预览的，一般也不会自己写，都是UI 的活。

这样就 ok啦，5.0以上的系统SVG你就像一般 png 图片一样使用就好啦，你可以试一下。

SVG 在 4.x 版本上的兼容根据 SVG 使用范围的变化，配置也是逐步增加的

这时 imageview 就不行了，我们需要使用 AppCompatActivity 或是 AppCompatImageView，这时我们需要导入 V7 包

gradle 需要如下配置：

系统会在 4.x 版本时对 SVG 自动生成相应的 drawable 图，此时 SVG 是没有无限拉伸特性的，gradle 的配置目的是去这个

举个例子：

资源设置不能用 src 了，必须使用 srcCompat ，这时我们能看到图而不是去 SVG 的特性了

这时上面的设置就不够了，我们在 view 所在的 activity 或是全局添加下面的设置

然后这还不够，我们必须给 SVG 图片添加一个容器，比如 selector，这样我们才能正常使用，比如给 textview 设置图片，自定义属性设置图片

这个 vc_halfstart_24dp 就是 SVG 图片

这个我们必须要添加官方的 vectorDrawable 支持库了，最低支持到 23.2.0

这样基本就没啥问题了

SVG 配合自定义 view 的话，就得我们读取 SVG 然后转换成 path 路径来画了，SVG 实质上也是 xml 文件，所以解析 xml 文件的思路也使用，当然还有其他一些 SVG 转 path 的思路

SVG前戏—让你的View多姿多彩 一文中提供了一些思路，大家不妨去看看

❹ pathdata android怎么生成

1.Eclipse下App放置在项目根目录的bin目录中 2.而Android studio大改后，放在了mole中，所以你一定要记得你的存放路径。也就是工程对应的文件夹。 android studio工程的族态存储路径下app/build/outputs/apk 其中app是你的mole，袜稿在对应的兆好源mole下即可找到