SVG 之pathData使用
前几天无意看到有关矢量图的相关知识。在练习尝试之后，写篇博客作为笔记。有不足之处还请各位大神提议。
这个是一个简单的小例子 一条直线
-这是效果图
-
| 参数 | 表示 |
|---|---|
| M0 | 代表移动点在x轴的位置为0 |
| 0 | 表示移动点初始时 y轴的位置 |
| L30 | 表示一条在x轴上长度是30的直线 |
| 0 | 表示该直线在y轴的位置 |
- 画布的大小取决于 android:viewportHeight && android:viewportWidth 的值
*
上述代码也可以写成 这样解释便是： 起始点M0 0，到目标点30 0 画一条直线
接下来我们来介绍pathData中的 v & h* V 代表垂直 H 代表水平 举个栗子
在Android 中x轴的正方向是从左往右
- y轴的正方向是从上网下
| 参数 | 表示 |
|---|---|
| M2 0 | 代表起始点 |
| h100 | 表示x轴正方向位置移动100 |
| v100 | 表示y轴正方向位置移动100 |
| h-100 | 表示x轴负方向位置移动100 |
| v-100 | 表示y轴负方向位置移动100 |
效果图如下
- 下面我们介绍a 操作符 通过a 我们可以制作圆形，椭圆形
| 参数 | 表示 |
|---|---|
| a50 | 表示该圆在x轴方向的半径 |
| 50 | 表示该圆在y轴方向的半径 |
| 第一个0 | 表示 x轴旋转角度 |
| 第二个0 | 表示 y轴旋转角度 |
| 1 | 这个1表示顺时针扫掠 0相反 |
| 100 0 | 表示结束点 |
绿色方形为画布 中白色圆型极为pathData 绘制路径
- 写到此有必要将各个命令列出来了
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
一个简单贝塞尔曲线图
注意：所有的命令都区分大小写，大写表示绝对位置，小写表示相对位置 ；三次贝塞尔曲线与二次贝塞尔曲线用法相同，只是多了一个操作点
写到此处就结束了，小弟不才 ，请多多指教
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！