前言
在Android之SVG图像详解(一)中已经简单介绍了SVG图像的概念和基本使用技巧,下面就实际使用更进一步的探索和学习。
场景分析
效果图:
这个效果我们需要考虑以下几个问题:
- 这是图片还是文字;
- 如果是图片该如何拿到图形的边沿线坐标,如果是文字呢?
- 如果拿到了边沿线坐标,如何让光线沿着路径跑动;
- 怎么处理过程的衔接;
首先背景是图片,普通的jpg或png图,但文字则是SVG格式的矢量图,接下来从SVG图中我们可以拿到我们想要的所有数据,让一条线沿着路径跑起来。毋庸置疑,我们需要用到path;根据效果的需要,设置几个绘制过程,进行绘制。
具体实现
既然SVG是公认的xml文件格式定义的,那么我们则可以通过解析xml文件拿到对应SVG图的所有数据,我们先看下 path 类型的SVG 数据:
|
|
上面有一个path 标签,里面用到了 M 和 Z 指令,M 就相当于 android Path 里的moveTo(),Z 则相当于 Path 里的close();
我们先看下SVG 里关于path 有哪些指令:
- M = moveto 相当于 android Path 里的moveTo(),用于移动起始点
- L = lineto 相当于 android Path 里的lineTo(),用于画线
- H = horizontal lineto 用于画水平线
- V = vertical lineto 用于画竖直线
- C = curveto 相当于cubicTo(),三次贝塞尔曲线
- S = smooth curveto 同样三次贝塞尔曲线,更平滑
- Q = quadratic Belzier curve quadTo(),二次贝塞尔曲线
- T = smooth quadratic Belzier curveto 同样二次贝塞尔曲线,更平滑
- A = elliptical Arc 相当于arcTo(),用于画弧
- Z = closepath 相当于closeTo(),关闭path
了解了以上path相关的指令,就可以看懂path构成的SVG图的数据了,除此之外,SVG里还定义了一些基本的图形和效果。
更多介绍和使用大家可以看 W3School
好,以上内容,我们已经知道 SVG 图是通过 Xml 格式定义的,并且里面用到了一些基本的指令对数据进行组装,构成基本图形或复杂的路径;
获取SVG的xml数据
1.我们根据最后要做的效果,利用PS等作图软件设计制作出想要的图形。
2.使用 GIMP 之类的矢量图软件导出图片的SVG数据,方法如下:
3.先使用魔棒工具快速建立选区:
4.然后将选区导出为path:
5.这个时候在软件的右边栏就可以看见生成的路径了,然后将路径导出:
经过以上几步,我们就拿到了我们自己设计的文字或图形SVG图的Path数据,上面图片的SVG信息如下:
中间段省略
根据图形路径的复杂度,生成的path数据复杂度也不一样,但格式也算是非常的清楚,即采用一定的指令把数据点进行拼接;
现在有了这些数据点,我们需要做的则是对数据进行解析,封装成我们要的Path;
数据解析
解析的过程也无非是 遇到指令则采用android Path 里的对应方法进行置换,解析方式如下:
有了图形对应的path,我们只需要按照我们想要的效果进行绘制即可,具体过程不再细讲,大家看代码:
本文整理自Ajian_studio的博客,原文链接见Android使用SVG矢量图打造酷炫动效。