SVG <path>中定義了若干指令【詳見(jiàn)MDN】
M x,y 移動(dòng)指令,映射Path中的 moveTo
L x,y 畫直線指令越驻,映射Path中的lineTo
H x 畫水平線指令,映射Path中的lineTo,不過(guò)要使用上一個(gè)坐標(biāo)的y
V y 畫垂直線指令道偷,映射Path中的lineTo,不過(guò)要使用上一個(gè)坐標(biāo)的x
C x1,y1,x2,y2,x,y 三次貝塞爾曲線指令缀旁, 映射Path中的cubicTo
S x2,y2,x,y 跟在C指令后面使用,用C指令的結(jié)束點(diǎn)做控制點(diǎn)勺鸦,映射cubicTo
Q x1,y1,x,y 二次貝塞爾曲線指令并巍,映射quadTo
T x,y 跟在Q指令后面使用,使用Q的x,y做控制點(diǎn)祝旷,映射quadTo
Z path關(guān)閉指令履澳,映射close
- A 指令,用來(lái)畫弧怀跛,還沒(méi)有搞明白怎么處理
- 在SVG中指令大寫為絕對(duì)坐標(biāo)距贷,小寫為相對(duì)坐標(biāo),但在android Path中似乎是沒(méi)有分別的
分享一個(gè)工具類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);
//記錄最后一個(gè)操作點(diǎn)
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': {//基于上個(gè)坐標(biāo)在水平方向上劃線吻谋,因此y軸不變
String ps[] = findPoints(i);
lastPoint.set(Float.parseFloat(ps[0]), lastPoint.y);
lPath.lineTo(lastPoint.x, lastPoint.y);
}
break;
case 'v':
case 'V': {//基于上個(gè)坐標(biāo)在水平方向上劃線忠蝗,因此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會(huì)跟在C或是S命令后面使用,用前一個(gè)點(diǎn)做起始控制點(diǎn)
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命令會(huì)跟在Q后面使用漓拾,用Q的結(jié)束點(diǎn)做起始點(diǎn)
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': {//結(jié)束
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;
}
}
}