SVG文件本就是XML格式,因此可以直接进行XML解析,大家的方案都是使用工具(Android Studio 或者在线解析)将SVG转换为Android可识别的Drawable资源文件,但这样就没法去根据需要实时修改了,因此只能从SVG中的path标签入手。
一般SVG文件使用记事本打开后是这些内容:
其中path标签的内容就是我们需要的数据,我们使用 DocumentBuilder 和 XPath 来解析此XML,从而得到path对象。
File file = new File("/storage/emulated/0/Tencent/QQfile_recv/more.svg");
try {
DocumentBuilder builder = DocumentBuilderFactory.newInstance().newDocumentBuilder();
Document document = builder.parse(file);
String xpathExpression = "//@*"; // 选择所有节点
XPathFactory xpf = XPathFactory.newInstance();
XPath xpath = xpf.newXPath();
XPathExpression expression = xpath.compile(xpathExpression);
// 得到整个xml的每个节点
NodeList svgPaths = (NodeList) expression.evaluate(document, XPathConstants.NODESET);
ArrayList pathList = new ArrayList<>();
for (int i = 0; i < svgPaths.getLength(); i++) {
// 对应path标签中的d节点
if (svgPaths.item(i).getNodeName().equals("d")) {
Data data = new Data();
data.mPath = PathParser.createPathFromPathData(svgPaths.item(i).getTextContent());
// 此d节点前面应该是fill节点,fill节点是此路径绘制的颜色
if (i > 0 && svgPaths.item(i - 1).getNodeName().equals("fill")) {
data.mFillColor = svgPaths.item(i - 1).getTextContent();
} else if (i > 0){
// d节点的前一个不是fill节点,可能是其他节点,此时往上查找,直到找到fill节点或者再次
// 遇到d节点(证明没有fill节点,默认为黑色)为止
for (int j = i -1; j >= 0 ; j--) {
if (svgPaths.item(j).getNodeName().equals("fill")) {
data.mFillColor = svgPaths.item(j).getTextContent();
break;
} else if (svgPaths.item(j).getNodeName().equals("d")) {
// 如果找到了上一个path中的d标签都没有找到fill标签,则代表此path没有fill,为黑色
data.mFillColor = "#000000";
break;
}
}
}
pathList.add(data);
}
}
} catch (ParserConfigurationException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} catch (XPathExpressionException e) {
e.printStackTrace();
} catch (SAXException e) {
e.printStackTrace();
}
}
class Data {
String mFillColor;
Path mPath;
}
当然你也可以自己解析d标签的内容,m代表移动,对应path中的moveTo,l代表画线等具体可以查询path的相关方法,但Android自己便可以从Drawable下的XML解析成VectorDrawable,那官方应该有相关的解析方法,全局搜索有关path的信息,果然找到了一个PathParser类。
关于PathParser,这个类原本是在android.support.graphics.drawable下的类,无法访问到,因此直接拷贝出来,使用createPathFromPathData方法便能将d标签下的数据转换为path对象。
通过以上步骤,得到了一个SVG文件的所有path对象,然后根据pathList便可以将矢量图绘制出来。
这里使用一个自定义的IamgeView展示矢量图,在onDraw方法中将path绘制出来即可。
@Override
public void onDraw(Canvas canvas) {
canvas.save();
for (int i = 0; i < pathList.size(); i++) {
Paint paint = new Paint();
paint.setColor(Color.parseColor(pathList.get(i).mFillColor));
canvas.drawPath(pathList.get(i).mPath, paint);
}
canvas.restore();
}
如此便将矢量图绘制到了自定义的IamgeView上,当然也可以直接新建Canvas便可将矢量图按需求进行绘制。
也可以通过此方式将两个或者几个矢量图叠加在一起,每一张SVG最终都生成一个pathList,矢量图的叠加其实也就是path的叠加。
这里对这些path进行一些简单的操作,比如放大,和平移,当然旋转也可以,只要是Matrix拥有的效果均能实现
查看Path这个类,发现有个一addPath(Path src, Matrix matrix)方法,这就完美了,直接可以传入Matrix,再也不用手动计算值了
这里,我重写了ImageView的onTouchEvent方法,当点击时,将SVG图片放大1.1倍,代码如下所示:
@Override
public boolean onTouchEvent(MotionEvent ev) {
final int action = ev.getAction();
switch (action & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN: {
Matrix matrix = new Matrix();
matrix.postScale(1.1f,1.1f);
// matrix.postTranslate(5f,5f);
for (int i = 0; i < pathList.size(); i++) {
Path path = new Path();
path.addPath(pathList.get(i).mPath, matrix);
pathList.get(i).mPath = path;
}
break;
}
}
return true;
}
演示效果如下图:
加载本地SVG图片并放大.gif
欢迎大家交流指正😁