Dy

Dy

关注
发信
关注(28)粉丝(399)

android vector pathData探究,几分钟绘制自己的vectordrawable

之前经常看到一些酷酷的图标效果, 深入进去发现不是直接用的图片, 而是一些以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啥......最近项目迭代完成间隙, 用了些时间研究了下这块, 发现也不是那么难, 只是懂了语法的话, 就容易看懂了.废话不多说, 先看下要实现的效果, 从效果开始深入:

android vector pathData探究,几分钟绘制自己的vectordrawable-LMLPHP

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

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

  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表示起到到终点相对坐标距离.

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

android vector pathData探究,几分钟绘制自己的vectordrawable-LMLPHP

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

android vector pathData探究,几分钟绘制自己的vectordrawable-LMLPHP

对应代码:

  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)

对应的贝塞尔二阶公式为

android vector pathData探究,几分钟绘制自己的vectordrawable-LMLPHP

android vector pathData探究,几分钟绘制自己的vectordrawable-LMLPHP

三阶阶贝塞尔曲线:

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

对应的贝塞尔三阶公式为

android vector pathData探究,几分钟绘制自己的vectordrawable-LMLPHP

android vector pathData探究,几分钟绘制自己的vectordrawable-LMLPHP

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

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

图形解析:

android vector pathData探究,几分钟绘制自己的vectordrawable-LMLPHP

根据图片可以看出需要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

05-13 01:09
Powered by LMLPHP ©2024 Dy 0.054038