SVG <path>中定义了若干指令【详见MDN】
M x,y 移动指令，映射Path中的 moveTo
L x,y 画直线指令，映射Path中的lineTo
H x 画水平线指令，映射Path中的lineTo,不过要使用上一个坐标的y
V y 画垂直线指令，映射Path中的lineTo,不过要使用上一个坐标的x
C x1,y1,x2,y2,x,y 三次贝塞尔曲线指令， 映射Path中的cubicTo
S x2,y2,x,y 跟在C指令后面使用，用C指令的结束点做控制点，映射cubicTo
Q x1,y1,x,y 二次贝塞尔曲线指令，映射quadTo
T x,y 跟在Q指令后面使用，使用Q的x,y做控制点，映射quadTo
Z path关闭指令，映射close
- A 指令，用来画弧，还没有搞明白怎么处理
- 在SVG中指令大写为绝对坐标，小写为相对坐标，但在android Path中似乎是没有分别的
分享一个工具类SvgPathToAndroidPath
/**
* Created by Shuxin on 2016/8/3.
*/
public class SvgPathToAndroidPath {
private int svgPathLenght = 0;
private String svgPath = null;
private int mIndex;
private List<Integer> cmdPositions = new ArrayList<>();
/**
* M x,y
* L x,y
* H x
* V y
* C x1,y1,x2,y2,x,y
* Q x1,y1,x,y
* S x2,y2,x,y
* T x,y
* */
public Path parser(String svgPath) {
this.svgPath = svgPath;
svgPathLenght = svgPath.length();
mIndex = 0;
Path lPath = new Path();
lPath.setFillType(Path.FillType.WINDING);
//记录最后一个操作点
PointF lastPoint = new PointF();
findCommand();
for (int i = 0; i < cmdPositions.size(); i++) {
Integer index = cmdPositions.get(i);
switch (svgPath.charAt(index)) {
case 'm':
case 'M': {
String ps[] = findPoints(i);
lastPoint.set(Float.parseFloat(ps[0]), Float.parseFloat(ps[1]));
lPath.moveTo(lastPoint.x, lastPoint.y);
}
break;
case 'l':
case 'L': {
String ps[] = findPoints(i);
lastPoint.set(Float.parseFloat(ps[0]), Float.parseFloat(ps[1]));
lPath.lineTo(lastPoint.x, lastPoint.y);
}
break;
case 'h':
case 'H': {//基于上个坐标在水平方向上划线，因此y轴不变
String ps[] = findPoints(i);
lastPoint.set(Float.parseFloat(ps[0]), lastPoint.y);
lPath.lineTo(lastPoint.x, lastPoint.y);
}
break;
case 'v':
case 'V': {//基于上个坐标在水平方向上划线，因此x轴不变
String ps[] = findPoints(i);
lastPoint.set(lastPoint.x, Float.parseFloat(ps[0]));
lPath.lineTo(lastPoint.x, lastPoint.y);
}
break;
case 'c':
case 'C': {//3次贝塞尔曲线
String ps[] = findPoints(i);
lastPoint.set(Float.parseFloat(ps[4]), Float.parseFloat(ps[5]));
lPath.cubicTo(Float.parseFloat(ps[0]), Float.parseFloat(ps[1]), Float.parseFloat(ps[2]), Float.parseFloat(ps[3]), Float.parseFloat(ps[4]), Float.parseFloat(ps[5]));
}
break;
case 's':
case 'S': {//一般S会跟在C或是S命令后面使用，用前一个点做起始控制点
String ps[] = findPoints(i);
lPath.cubicTo(lastPoint.x,lastPoint.y,Float.parseFloat(ps[0]), Float.parseFloat(ps[1]), Float.parseFloat(ps[2]), Float.parseFloat(ps[3]));
lastPoint.set(Float.parseFloat(ps[2]), Float.parseFloat(ps[3]));
}
break;
case 'q':
case 'Q': {//二次贝塞尔曲线
String ps[] = findPoints(i);
lastPoint.set(Float.parseFloat(ps[2]), Float.parseFloat(ps[3]));
lPath.quadTo(Float.parseFloat(ps[0]), Float.parseFloat(ps[1]), Float.parseFloat(ps[2]), Float.parseFloat(ps[3]));
}
break;
case 't':
case 'T': {//T命令会跟在Q后面使用，用Q的结束点做起始点
String ps[] = findPoints(i);
lPath.quadTo(lastPoint.x,lastPoint.y,Float.parseFloat(ps[0]), Float.parseFloat(ps[1]));
lastPoint.set(Float.parseFloat(ps[0]), Float.parseFloat(ps[1]));
}
break;
case 'a':
case 'A':{//画弧
}
break;
case 'z':
case 'Z': {//结束
lPath.close();
}
break;
}
}
return lPath;
}
private String[] findPoints(int cmdIndexInPosition) {
int cmdIndex = cmdPositions.get(cmdIndexInPosition);
String pointString = svgPath.substring(cmdIndex + 1, cmdPositions.get(cmdIndexInPosition + 1));
return pointString.split(",");
}
private void findCommand() {
cmdPositions.clear();
while (mIndex < svgPathLenght) {
char c = svgPath.charAt(mIndex);
if ('A' <= c && c <= 'Z') {
cmdPositions.add(mIndex);
}else if ('a' <= c && c <= 'z') {
cmdPositions.add(mIndex);
}
++mIndex;
}
}
}
