Android vector Path Data画图详解

时间:2023-12-24 15:28:25

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

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:viewportHeight="200.0"
android:viewportWidth="200.0"
android:width="24dp">
<path
android:fillColor="#fff"
android:pathData="M99.93,180.25 L99.93,180.25c-6.14,0 -10.85,-4 -13.85,-7 -7.11,-7.11 -56.05,-66.03 -59.82,-70.57 -8.87,-8.97 -13.75,-20.8 -13.75,-33.36 0,-12.65 4.95,-24.56 13.94,-33.55l1.26,-1.26c8.99,-8.99 20.94,-13.94 33.65,-13.94 12.71,0 24.66,4.95 33.65,13.94 0.21,0.21 0.4,0.43 0.57,0.66 0.01,0 1.61,2 4.18,2 2.69,0 3.9,-1.59 4.02,-1.77 0.23,-0.38 0.41,-0.58 0.72,-0.89 8.99,-8.99 20.94,-13.94 33.65,-13.94 12.71,0 24.66,4.95 33.65,13.94l1.26,1.26c8.99,8.99 13.94,20.9 13.94,33.55 0,12.55 -4.88,24.38 -13.74,33.35 -3.77,4.58 -51.29,62.4 -59.47,70.58C110.78,176.25 106.08,180.25 99.93,180.25zM61.36,31.7c-9.74,0 -18.89,3.79 -25.78,10.68l-1.26,1.26c-6.88,6.89 -10.68,16 -10.68,25.67 0,9.67 3.79,18.79 10.68,25.67 0.12,0.12 0.24,0.25 0.35,0.38 18.1,21.81 53.79,64.5 59.29,70 2.48,2.48 4.49,3.74 5.98,3.74 1.85,0 4.28,-2.03 5.98,-3.74 6.36,-6.37 41.32,-48.56 58.91,-69.98 0.12,-0.14 0.24,-0.28 0.37,-0.4 6.88,-6.89 10.68,-16 10.68,-25.67 0,-9.67 -3.79,-18.79 -10.68,-25.67l-1.26,-1.26c-6.88,-6.88 -16.04,-10.68 -25.78,-10.68 -9.58,0 -18.6,3.67 -25.45,10.36 -1.37,1.83 -5.44,6.24 -12.95,6.24 -7.19,0 -11.57,-4.59 -12.84,-6.14C80.05,35.41 70.99,31.7 61.36,31.7zM36.75,66.09c-0.24,0 -0.49,-0.03 -0.74,-0.1 -1.48,-0.41 -2.35,-1.94 -1.94,-3.42 1.31,-4.78 3.88,-9.18 7.42,-12.72l0.78,-0.78c7.1,-7.1 17.18,-9.97 26.96,-7.69 1.5,0.35 2.43,1.85 2.08,3.34 -0.35,1.5 -1.85,2.43 -3.34,2.08 -7.91,-1.84 -16.04,0.48 -21.76,6.2l-0.78,0.78c-2.86,2.86 -4.93,6.41 -5.99,10.26C39.09,65.28 37.97,66.09 36.75,66.09zM81.08,53.82c-0.71,0 -1.42,-0.27 -1.97,-0.82 -0.93,-0.93 -1.95,-1.79 -3.02,-2.55 -1.26,-0.89 -1.55,-2.63 -0.66,-3.88 0.89,-1.26 2.62,-1.55 3.88,-0.66 1.33,0.94 2.59,2 3.74,3.16 1.09,1.09 1.09,2.85 0,3.94C82.5,53.54 81.79,53.82 81.08,53.82z"/>
/>
</vector>

画出的图形为:
Android vector Path Data画图详解

显而易见重点是pathData里面的大串数字。
一些基本语法:
M:move to 移动绘制点,作用相当于把画笔落在哪一点。
L:line to 直线,就是一条直线,注意,只是直线,直线是没有宽度的,所以你什么也看不到。
Z:close 闭合,嗯,就是把图封闭起来。
C:cubic bezier 三次贝塞尔曲线
Q:quatratic bezier 二次贝塞尔曲线
A:ellipse 圆弧

每个命令都有大小写形式,大写代表后面的参数是绝对坐标,小写表示相对坐标,相对于上一个点的位置。参数之间用空格或逗号隔开。
命令详解:

M (x y) 移动到x,y
L (x y) 直线连到x,y,还有简化命令H(x) 水平连接、V(y)垂直连接
Z,没有参数,连接起点和终点
C(x1 y1 x2 y2 x y),控制点x1,y1 x2,y2,终点x,y
Q(x1 y1 x y),控制点x1,y1,终点x,y
A(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
rx ry 椭圆半径
x-axis-rotation x轴旋转角度
large-arc-flag 为0时表示取小弧度,1时取大弧度
sweep-flag 0取逆时针方向,1取顺时针方向