Android vector pathData命令介绍

在Android开发中，可以使用矢量图来代替一些小图标，下面一起了解常用命令，最后用这些命令画出微信图标。

这篇文章也可以在这里看到。

命令

表格中，大写命令代表绝对位置，小写命令代表相对位置(相对位置就是以前一个坐标为原点，绝对位置永远以(0, 0)为原点)

参数中的 + 代表至少要有一对参数

参数和参数之间可以用逗号分割，也可以用空格分隔

命令	名称	参数	描述
M/m	moveto	(xy)+	在(x,y)坐标处开始一个新的子路径
Z/z	closepath	无	从当前点绘制一条直线到当前子路径到初始点来关闭当前子路径
L/l	lineTo	(xy)+	从当前点绘制一条直线到坐标(x, y)
H/h	水平线	(x)+	从当前点(cx, cy)绘制一条水平线到(x, cy)
V/v	垂直线	(y)+	从当前点(cx, cy)绘制一条水平线到(cx, y)
A/a	椭圆弧	(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+	从当前点到(x, y)绘制一个椭圆弧
C/c	curveto	(x1 y1 x2 y2 x y)+	使用（x1，y1）作为曲线开始处的控制点，（x2，y2）作为曲线末端的控制点，绘制从当前点到（x，y）的三次贝塞尔曲线
S/s	shorthand/smooth curveto	(x2 y2 x y)+	绘制从当前点到（x，y）的三次贝塞尔曲线
Q/q	quadratic bezier curveto	(x1 y1 x y)+	使用x1 y1作为控制点，绘制从当前点到x y到二次贝塞尔曲线
T/t	shorthand/smooth quadratic bezier curveto	(x y)+	绘制从当前带你到x y到二次贝塞尔曲线

详细介绍请参考官方文档，地址

https://www.w3.org/TR/SVG11/paths.html#PathData

详解

代码模板

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="100dp"
android:height="100dp"
android:viewportHeight="100.0"
android:viewportWidth="100.0">
<path
android:pathData=""
android:strokeColor="#0077e6"
android:strokeWidth="0.3" />
</vector>

M/m

M/m命令表示建立一个新的当前点，可以理解为把笔刷移动到指定坐标，准备开始绘图。

需要注意的有:

1. M命令后边需要有其他命令(除 Z 以外)才可以看到效果，下边的代码会绘制一条从(5, 5)到(5, 10)的直线。

<path
android:pathData="M5,5 L5,10"
android:strokeColor="#0077e6"
android:strokeWidth="0.3" />

2.如果后边没有其他命令而且不止一个坐标，则会被视为隐式L命令。下边的代码去掉了L，但是效果跟加上L是一样的。

<path
android:pathData="M5,5 5,10"
android:strokeColor="#0077e6"
android:strokeWidth="0.3" />



Z/z

Z/z命令表示关闭当前子路径，并且从当前点绘制一条直线到初始点。

没有Z的效果：

<path
android:pathData="M5,5 L5,10 L10,10"
android:strokeColor="#0077e6"
android:strokeWidth="0.3" />




有Z的效果：

<path
android:pathData="M5,5 L5,10 L10,10 Z"
android:strokeColor="#0077e6"
android:strokeWidth="0.3" />




加上Z命令以后，会从结束点(10, 10)和初始点(5, 5)之间绘制一条直线。

需要注意的有：

1. 由于Z命令没有参数，所有不区分大小写。

大小写的作用在于使用绝对位置还是相对位置，Z命令没有参数，只是固定的从当前点绘制一条直线到初始点，所有不需要考虑大小写。

2. Z命令绘制的直线和L命令绘制的直线效果不一样。

L：




Z：




主要差别在于初始点那里(更详细的内容请点击链接进一步了解)。

L命令使用 ‘stroke-linecap’(链接)效果，默认butt




Z命令使用 ‘stroke-linejoin’(链接)效果，默认miter



L/l

L命令会从当前点绘制一条直线到指定坐标(下边的代码中，第二个L可以省略)。

<path
android:pathData="M5,5 L5,10 L10,10"
android:strokeColor="#0077e6"
android:strokeWidth="0.3" />




下面看下大小写的区别：

<path
android:pathData="M5,5 L5,10 l10,10"
android:strokeColor="#0077e6"
android:strokeWidth="0.3" />

上面的代码中，第二个L是小写的，所以使用相对位置，也就是以当前点(5, 10)为原点而不是(0, 0)为原点，所以结束点的坐标是(15, 20)。




可以通过下边的代码验证：

    <path
android:pathData="M5,5 L5,10 l10,10"
android:strokeColor="#0077e6"
android:strokeWidth="0.3" />
<path
android:pathData="M15,20 L30,20"
android:strokeColor="#e6007b"
android:strokeWidth="0.3" />

效果如下：



H/h

H命令表示绘制一条水平线，因为Y坐标跟当前点一样，所以只需要一个X坐标作为参数。

<path
android:pathData="M5,5 L10,10 H20"
android:strokeColor="#0077e6"
android:strokeWidth="0.3" />




上边的代码，M5, 5表示先把笔刷放在(5, 5)处，L10,10表示绘制一条到(10, 10)的直线，H20表示绘制一条水平线到(20, 10)。

V/v

V命令代表绘制一条垂直线，因为X坐标跟当前点一样，所以只需要一个Y坐标作为参数。

<path
android:pathData="M5,5 L10 10 V20"
android:strokeColor="#0077e6"
android:strokeWidth="0.3" />




上边的代码，M5,5表示把笔刷移动到坐标(5, 5)处，L(10, 10)表示从(5, 5)绘制一条直线到(10, 10)，V20表示从(10, 10)绘制一条垂直线到(10, 20)。

A/a

A/a命令有七个参数(rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y)，它会从当前点绘制一条椭圆弧到(x, y)，各个参数到解释如下：

rx：x轴半径

ry：y轴半径

x-axis-rotation：椭圆弧到旋转角度

x, y：椭圆弧终点坐标

large-arc-flag：大弧标记，值是0或1

0：取小弧度

1：取大弧度

sweep-flag：扫描标记，值是0或1

0：顺时针方向，从结束点截取到当前点

1：顺指针方向，从当前点截取到结束点

<!--椭圆弧 红色-->
<path android:pathData="M50,10 A25,15 0 1,1 50,30"
android:strokeColor="#FF4081"
android:strokeWidth="0.2" />
<!--辅助线 从当前点到结束点 蓝色-->
<path android:pathData="M50 10 50 30"
android:strokeColor="#6040ff"
android:strokeWidth="0.2" />




详细解释下椭圆弧点代码：

M50,10 A25,15 0 1,1 50,30

M50 10：笔刷移动到坐标(50, 10)处

25：x轴半径

15：y轴半径

0：旋转角度是0度

1：取大弧

1：顺时针方向，从当前点(50, 10)截取到结束点(50, 30)

50：结束点x坐标

30：结束点y坐标

在A的参数中，large-arc-flag和sweep-flag不是很好理解，但是每个参数只有两种可能，0或1，一共四种情况，下面我们分别看下。

<!--左边紫色的椭圆弧-->
<path android:pathData="M50,10 A25,15 0 1,0 50,30"
android:strokeColor="#cf14f1"
android:strokeWidth="0.2" />
<!--右边红色的椭圆弧-->
<path android:pathData="M50,10 A25,15 0 1,1 50,30"
android:strokeColor="#FF4081"
android:strokeWidth="0.2" />
<!--辅助线 从当前点到结束点 蓝色-->
<path android:pathData="M50 10 50 30"
android:strokeColor="#6040ff"
android:strokeWidth="0.2" />




large-arc-flag=1 截取大椭圆弧

sweep-flag=0 顺时针方向，从结束点截取到当前点，也就是左边紫色的椭圆弧

sweep-flag=1 顺时针方向，从当前点截取到结束点，也就是右边红色的椭圆弧

<!--左边紫色的椭圆弧-->
<path android:pathData="M50,10 A25,15 0 1,0 50,30"
android:strokeColor="#cf14f1"
android:strokeWidth="0.2" />
<!--右边红色的椭圆弧-->
<path android:pathData="M50,10 A25,15 0 1,1 50,30"
android:strokeColor="#FF4081"
android:strokeWidth="0.2" />
<!--左边青色的小椭圆弧-->
<path android:pathData="M50,10 A25,15 0 0,0 50,30"
android:strokeColor="#18f114"
android:strokeWidth="0.2" />
<!--右边黄色的小椭圆弧-->
<path android:pathData="M50,10 A25,15 0 0,1 50,30"
android:strokeColor="#f1d714"
android:strokeWidth="0.2" />
<!--辅助线 从当前点到结束点 蓝色-->
<path android:pathData="M50 10 50 30"
android:strokeColor="#6040ff"
android:strokeWidth="0.2" />




large-arc-flag=0 截取小椭圆弧

sweep-flag=0 顺时针方向，从结束点截取到当前点，也就是左边青色的小椭圆弧

sweep-flag=1 顺时针方向，从当前点截取到结束点，也就是右边黄色的小椭圆弧

C/c S/s Q/q T/t

贝塞尔曲线，这个比较复杂，超出了我的知识水平，大家自己看下文档(链接)

示例

微信图标

<path
android:fillColor="#11d611"
android:pathData="M10 15Q10 10 15 10h20Q40 10 40 15v20Q40 40 35 40h-20Q10 40 10 35" />
<path
android:fillColor="#FFFFFF"
android:pathData="M30 24A9 8 0 1 0 22.6 30Q23.5 24.5 30 24" />
<path
android:fillColor="#FFFFFF"
android:pathData="M18 29 17.5 31 20 29" />
<path
android:fillColor="#11d611"
android:pathData="M17 19A0.7 0.7 0 1 1 17 20A0.7 0.7 0 0 1 17 19" />
<path
android:fillColor="#11d611"
android:pathData="M25 19A0.7 0.7 0 1 1 25 20A0.7 0.7 0 0 1 25 19" />
<path
android:fillColor="#FFFFFF"
android:pathData="M36 33A7 6 0 1 0 34 35A7 6 0 0 0 36 33" />
<path
android:fillColor="#11d611"
android:pathData="M27 27A0.7 0.7 0 1 1 27 28A0.7 0.7 0 0 1 27 27" />
<path
android:fillColor="#11d611"
android:pathData="M32 27A0.7 0.7 0 1 1 32 28A0.7 0.7 0 0 1 32 27" />
<path
android:fillColor="#FFFFFF"
android:pathData="M33 35.5 34.5 36.5 34 34.8" />
<path
android:fillColor="#FFFFFF"
android:pathData="M18 29 17.5 31 20 29" />

效果如下：




官方文档：

1. https://www.w3.org/TR/SVG11/paths.html#PathData