上一篇(【译】理解Android VectorDrawable中的pathData命令)中我翻译了一篇介绍VectorDrawable中Pathdata命令的文章, 但这篇文章中只涉及了基本的画线操作.对于如何画圆弧及曲线并没有涉及, 但如果你想实现一些相对复杂的绘图效果这些还是必须的. 所以在这一篇中我会接着上篇中的内容介绍一个相对复杂一些的命令 A/a.
A/a参数
A/a命令用来画圆弧, 当然也可以用来画圆, 画圆要分两步来而无法一次画完整.
命令格式:
A/a(rx,ry x-axis-rotation large-arc-flag,sweep-flag x,y)+
参数解释:
| 参数 | 解释 |
|---|---|
| rx,ry | 椭圆的两个半径 |
| x-axis-rotation | x轴方向旋转的角度 |
| large-arc-flag | 最否取大弧, 1取大弧, 0取小弧(在rx,ry确定的情况下两点之间能画出两段圆弧) |
| sweep-flag | 绘制的方向, 1顺时针, 0逆时针 |
| x,y | 弧线的结束点 |
应用1-画弧线
直接看例子:
效果如下图所示:
若将上面的pathData的值修改为M1,50 A49,49 0 0,1 49,0 那么对应的图形就会是下面这样:
这里修改的就是large-arc-flag与sweep-flag参数, 第一幅图是1,0即:取大弧逆时针;第二幅图是0,1即:取小弧顺时针, 结果显而易见. 画圆弧只要控制好圆弧的起点与终点及这两个参数即可.
应用2-画圆
那么如何画圆呢? 基于A/a参数的定义我们无法直接画一个完整的圆出来(可以想想为什么), 通常的方法是画两个半圆, 常用的步骤如下:
我解释一下:
M cx,cy : 将当前点移动到圆心的位置.
m -r,0 : 将当前点向左水平移动一个半径的距离.
a r,r 0 1,1 (r * 2),0 : 画上半圆
a r,r 0 1,1 -(r * 2),0 : 画下半圆
经过上面这几步就可以画一个完整的圆出来. 在理解的基础大家完全可以把它当成是一个公式一样直接拿来画圆用.
看个例子:
效果如下:
更多示例
熟练使用A/a命令可以做出很多很Cool的图形/动画, 下面的这些动画是我在掌握了上面的知识后做出来的(而且没有写一行代码):
这些动画的源码在这里, 欢迎Star!
版权声明
文章版权归本人所有，如需转载需在明显位置处保留作者信息及原文链接 !
