之前经常看到一些酷酷的图标效果, 深入进去发现不是直接用的图片, 而是一些以Vector标签开头的xml文件, 于是就看到了如下代码:

  1. <vector xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:width="24dp"
  3. android:height="24dp"
  4. android:viewportHeight="40"
  5. android:viewportWidth="40">
  6. <path
  7. android:fillColor="#f24e4e"
  8. android:pathData="
  9. M8,4
  10. h24,0
  11. q4,0 4,4
  12. v24
  13. q0,4 -4,4
  14. h-24,0
  15. q-4,0 -4,-4
  16. v-24
  17. q0,-4 4,-4
  18. M20,15
  19. a5,6 -15 0,0 -9 2
  20. C11,22 15,23 20,29
  21. C25,23 29,22 29,17
  22. a5,6 15 0,0 -9,-2" />
  23. </vector>

心里十万只草泥马在奔腾, 这都是啥 啥 and啥......最近项目迭代完成间隙, 用了些时间研究了下这块, 发现也不是那么难, 只是懂了语法的话, 就容易看懂了.废话不多说, 先看下要实现的效果, 从效果开始深入:

效果还是挺赞的, 圆角矩形中部有个镂空的心形. 代码就是上面的那些代码.

首先看下属性(这里只挑一些个人认为比较重要的) :

  1. android:viewportHeight="40" //将width等分为40份
  2. android:viewportWidth="40" //将height等分为40份
  1.  
  2. 以下是pathData中用到的:
  3. M:move to 移动绘制点,作用相当于把画笔落在哪一点。
  4. L:line to 直线,就是一条直线,注意,只是直线,直线是没有宽度的,所以你什么也看不到。
  5. Z:close 闭合,嗯,就是把图封闭起来。
  6. C:cubic bezier 三阶贝塞尔曲线
  7. Q:quatratic bezier 二阶贝塞尔曲线
  8. A:ellipse 圆弧

基本规则
pathData
的指令基本都是由字母跟若干数字组成,数字之间可以用空格或者逗号隔开
(其实逗号会被忽略掉,加上逗号只是一些习惯的问题)。一般来说指令字母分为大小写两种,大写的字母是基于原点的坐标系(偏移量),即绝对位置;小写字母是基于当前点坐标系(偏移量),即相对位置。

移动:

M(X,Y) 移动到指定点(X,Y),  m(dx,dy)表示移动到相对当前点的相对dx,dy坐标位置

划线:

L(X,Y) 从当前点划线到(X,Y),  l(dx,dy)表示划线到相对当前点dx距离,dy距离坐标位置

H(X)水平方向划线: y坐标保持不变,划线到x坐标位置, h(dx)表示划线到距离当前坐标dx距离位置(y坐标保持不变)

V(Y)竖直方向划线: x坐标保持不变,划线到y坐标位置, v(dy)表示划线到距离当前坐标dy距离位置(x坐标保持不变)

弧线:

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时表示取大弧线

sweepflag为0时表示逆时针方向画弧,为1时表示顺时针方向画弧. x,y表示终点目标的坐标,dx,dy表示起到到终点相对坐标距离.

好了, 看到这里我们就可以绘制以下图形了:

分析: 此图可由4段线段加上4个圆弧构成,将画布分成40份, 则对应关键点的坐标如下图所示:

对应代码:

  1. <vector xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:width="24dp"
  3. android:height="24dp"
  4. android:viewportHeight="40"
  5. android:viewportWidth="40">
  6. <path
  7. android:fillColor="#f24e4e"
  8. android:pathData="
  9. M8,4
  10. h24,0
  11. q4,0 4,4
  12. v24
  13. q0,4 -4,4
  14. h-24,0
  15. q-4,0 -4,-4
  16. v-24
  17. q0,-4 4,-4" />
  18. </vector>

先移动到(8,4)点,然后画水平直线,然后根据起始点 控制点 终点可以画出右上角的圆弧,然后画竖直线段,以此类推,这个图形就轻而易举的画出来了,是不是挺简单,好,继续深入.为了画出心形图案,还需要学习贝塞尔曲线才能画出.

二阶贝塞尔曲线:

Q x1,y1 x,y ( q dx1,dy1 dx,dy)

对应的贝塞尔二阶公式为

三阶阶贝塞尔曲线:

Q x1,y1 x2,y2 x,y ( q dx1,dy1 dx2,dy2 dx,dy)

对应的贝塞尔三阶公式为

也就是说为了完成一个二阶贝塞尔曲线,需要确定一个起始点,一个控制点和一个终点,依次传入参数,所以这里的重点是控制点的确定,三阶的也是这样,需要起始点,两个控制点和一个终点.

先画个心形图案练练手吧.

图形解析:

根据图片可以看出需要4段弧线组成这个心形, 上边的两段圆弧和下边的两段曲线,各个弧线的起始点和控制点,终点都确定了,接下来就简单了,上代码:

  1. <vector xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:width="24dp"
  3. android:height="24dp"
  4. android:viewportHeight="40"
  5. android:viewportWidth="40">
  6. <path
  7. android:fillColor="#f24e4e"
  8. android:pathData="
  9. M20,15
  10. a5,6 -15 0,0 -9 2
  11. C11,22 15,23 20,29
  12. C25,23 29,22 29,17
  13. a5,6 15 0,0 -9,-2" />
  14. </vector>

接下来就可以考虑画出文章开始给出的那个镂空心形图,由于中间是镂空的,所以采取两个pathData标签叠加不可取,可以先顺时针画出矩形,然后逆时针画出心形就可以了.

  1. <vector xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:width="24dp"
  3. android:height="24dp"
  4. android:viewportHeight="40"
  5. android:viewportWidth="40">
  6. <path
  7. android:fillColor="#f24e4e"
  8. android:pathData="
  9. M8,4
  10. h24,0
  11. q4,0 4,4
  12. v24
  13. q0,4 -4,4
  14. h-24,0
  15. q-4,0 -4,-4
  16. v-24
  17. q0,-4 4,-4
  18. M20,15
  19. a5,6 -15 0,0 -9 2
  20. C11,22 15,23 20,29
  21. C25,23 29,22 29,17
  22. a5,6 15 0,0 -9,-2" />
  23. </vector>

代码就是这样了,是不是挺简单,最起码又一个知识点get了

多个pathData标签叠加需要使用<group></group>, 另外还有一些属性,

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 设置路径截取的范围,取值范围从 0 到1
android:strokeLineCap 设置路径线帽的形状,取值为 butt, round, square.
android:strokeLineJoin 设置路径交界处的连接方式,取值为 miter,round,bevel.
android:strokeMiterLimit 设置斜角的上限

group :主要是用来设置路径做动画的关键属性的
android:name 定义 group 的名字
android:rotation 定义该 group 的路径旋转多少度
android:pivotX 定义缩放和旋转该 group 时候的 X 参考点。该值相对于 vector 的 viewport 值来指定的。
android:pivotY 定义缩放和旋转该 group 时候的 Y 参考点。该值相对于 vector 的 viewport 值来指定的。
android:scaleX 定义 X 轴的缩放倍数
android:scaleY 定义 Y 轴的缩放倍数
android:translateX 定义移动 X 轴的位移。相对于 vector 的 viewport 值来指定的。
android:translateY 定义移动 Y 轴的位移。相对于 vector 的 viewport 值来指定的。

clip-path:定义当前绘制的剪切路径。注意,clip-path 只对当前的 group 和子 group 有效
android:name 定义 clip path 的名字
android:pathData 和 android:pathData 的取值一样。

vector:定义这个矢量图
android:name 定义该drawable的名字
android:width 定义该 drawable 的内部(intrinsic)宽度,支持所有 Android 系统支持的尺寸,通常使用 dp
android:height 定义该 drawable 的内部(intrinsic)高度,支持所有 Android 系统支持的尺寸,通常使用 dp
android:viewportWidth 定义矢量图视图的宽度,视图就是矢量图 path 路径数据所绘制的虚拟画布
android:viewportHeight 定义矢量图视图的高度,视图就是矢量图 path 路径数据所绘制的虚拟画布
android:tint 定义该 drawable 的 tint 颜色。默认是没有 tint 颜色的
android:tintMode 定义 tint 颜色的 Porter-Duff blending 模式,默认值为 src_in
android:autoMirrored 设置当系统为 RTL (right-to-left) 布局的时候,是否自动镜像该图片。比如 阿拉伯语。
android:alpha 该图片的透明度属性

感谢: http://www.jianshu.com/p/a3cb1e23c2c4#rd

android vector pathData探究,几分钟绘制自己的vectordrawable的更多相关文章

  1. Android UI测量、布局、绘制过程探究

    在上一篇博客<Android中Activity启动过程探究>中,已经从ActivityThread.main()开始,一路摸索到ViewRootImpl.performTraversals ...

  2. Android Vector曲折的兼容之路

    Android Vector曲折的兼容之路 两年前写书的时候,就在研究Android L提出的Vector,可研究下来发现,完全不具备兼容性,相信这也是它没有被广泛使用的一个原因,经过Google的不 ...

  3. Android手势源码浅析-----手势绘制(GestureOverlayView)

    Android手势源码浅析-----手势绘制(GestureOverlayView)

  4. Android自定义视图二:如何绘制内容

    这个系列是老外写的,干货!翻译出来一起学习.如有不妥,不吝赐教! Android自定义视图一:扩展现有的视图,添加新的XML属性 Android自定义视图二:如何绘制内容 Android自定义视图三: ...

  5. OpenCV3.4.1快速集成到Android studio中,10分钟搞定

    OpenCV3.4.1快速集成到Android studio中,10分钟搞定     转载 https://blog.csdn.net/yu540135101/article/details/8259 ...

  6. Android vector标签 PathData 画图超详解

    SVG是一种矢量图格式,是Scalable Vector Graphics三个单词的首字母缩写.在xml文件中的标签是<vector>,画出的图形可以像一般的图片资源使用,例子如下: &l ...

  7. Android vector 标签 pathData 详解

    转载地址:http://www.jianshu.com/p/a3cb1e23c2c4#rd Android Support Library 23.2 出来以后,在Android 5.0(API级别21 ...

  8. Android vector Path Data画图详解

    SVG是一种矢量图格式,是Scalable Vector Graphics三个单词的首字母缩写.在xml文件中的标签是,画出的图形可以像一般的图片资源使用,例子如下: <vector xmlns ...

  9. Android -- 自定义View小Demo,绘制钟表时间(一)

    1,昨天刚看了hongyang大神推荐的自定义时钟效果(传动门:http://www.jianshu.com/users/a45d19d680af/),效果还是不错的,自己又在github上找了找,发 ...

随机推荐

  1. window 驱动开发

    http://blog.csdn.net/chenyujing1234/article/category/1147469/5

  2. 作为一个新人,怎样学习嵌入式Linux?

        作为一个新人,怎样学习嵌入式Linux?   在学习嵌入式Linux之前,肯定要有C语言基础.汇编基础有没有无所谓(就那么几条汇编指令,用到了一看就会).尝试着写一些C语言竞赛的题目.它们是纯 ...

  3. MongoDb 出现配置服务不同步的处理

    主要片方法就是用正常的配置文件的数据覆盖有问题的就行. 引用: http://dba.stackexchange.com/questions/48232/mongodb-config-servers- ...

  4. 第五讲_图像识别之图像检测Image Detection

    第五讲_图像识别之图像检测Image Detection 目录 物体检测 ILSVRC竞赛200类(每个图片多个标签):输出类别+Bounding Box(x,y,w,h) PASCAL VOC 20 ...

  5. Qnap 中VM下的win7

    因工作需要alone了Qnap 中VM下的win7,更改冲突项:1. 电脑名2. 必需卸载虚拟网卡,因为克隆系统的MAC地址相同.    添加网卡,指定IP Address.Subnet mask.G ...

  6. sql语言复习2

    一.查询 select 字段列表 from 表名列表 [where 条件表达式][group by 字段列表[having 条件表达式]] [order by 字段列表[asc|desc]] 含义:在 ...

  7. Effective C++ 条款一 视C++为一个语音联邦

    1.C语言         区块.语句.预处理器.内置数据类型.数组.指针等内容 2.OC++       类.封装.继承.多态.virtual函数 等 3.Template C++       泛型 ...

  8. VM不能ping通www.baidu.com的问题【NAT】 更新了【桥接模式】

    NAT模式 1.为NAT设置子网及掩码等信息 点击VMWare菜单栏“编辑” —> 虚拟网络编辑器 [下图第一张图]—> 选中VMnet8(当然这个看自己的设备后缀是多少了,只要外部连接方 ...

  9. HDU 2102 A计划 (BFS)

    A计划 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  10. 手把手教你nginx/linux下如何增加网站

    先进入到nginx的配置文件目录请输入以下命令 cd /alidata/server/nginx/conf/vhosts 再输入   ll 看看是不是像下面截图的一样 用神器xftp将default. ...