Android SVG图片解析Demo
SVG
SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。
对于一些不规则的图形使用svg图片还是挺方便的，尤其涉及到交互部分。看完本文你就再也不用怕美工丢一张svg过来了。
Demo
本文通过解析SVG实现了一张中国地图，先看下效果
这就是我们要实现的效果，画出一份中国地图，并且点击某个省份时候将该省份加粗，并在下面显示出省份名。
在写代码前需要先看一个SVG文件内容：
密密麻麻的是不是觉得有点眼花，我们找一条最短的看一下：
<path id="820000" title="澳门" class="land" d="M505.56,515.13l0.35,0.51l-0.43,0.26L505.56,515.13z"/>
其实跟android布局文件差不多，只是后面的路径可能有点长而已，可以把d标签里的内容理解成路径Path。比如：
- M就是moveTo方法，将画笔移动到指定坐标。
- L -->lineTo，画直线。
- H -->horizeontal LineTo,画水平线
- V --> vertical lineTo，画垂直线
- C -->curveto，三次贝塞尔曲线
- Q -->quadratic Belzier curve，二次贝塞尔曲线
- Z --> closePath，关闭路径
其实知道个大概意思就够了，没必要把路径完全看懂。
代码
首先我们需要先封装一个省份的类，省份包含路径、颜色、是否选中、名字。别忘了把svg图片拷贝到res/raw路径下面。
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.Region;
public class Province {
//省份的path
private Path path;
//背景颜色
private int backgroundColor;
//是否选中
private boolean isSelect = false;
//省份名字 比如河南、广东
private String name;
public void setName(String name) {
this.name = name;
}
public String getName() {
return name;
}
public void setSelect(boolean select) {
isSelect = select;
}
public void setBackgroundColor(int backgroundColor) {
this.backgroundColor = backgroundColor;
}
public void setPath(Path path) {
this.path = path;
}
//绘制
public void drawProvince(Canvas canvas, Paint paint){
paint.clearShadowLayer();
paint.setStrokeWidth(1);
paint.setColor(backgroundColor);
paint.setShadowLayer(0,0,0,0xffffff);
paint.setStyle(Paint.Style.FILL);
canvas.drawPath(path,paint);
paint.setStyle(Paint.Style.STROKE);
paint.setColor(0xFF000000);
//选中的话就加粗边界
if (isSelect){
paint.setStrokeWidth(3);
}
canvas.drawPath(path,paint);
}
//判断点击位置是否在省份的区域内
public boolean isSelect(float x,float y){
RectF rectF = new RectF();
path.computeBounds(rectF,true);
Region region = new Region();
region.setPath(path,new Region((int)rectF.left,(int)rectF.top,(int)rectF.right,(int)rectF.bottom));
return region.contains((int)x,(int)y);
}
}
然后写一个自定义view，来进行解析绘制，这里踩了个坑，设置颜色时候忘了给颜色加上透明度，断点调试好久才发现画的地图是透明的所以看不到。代码这东西总是在你意想不到的地方出问题。
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.core.graphics.PathParser;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.NodeList;
import org.xml.sax.SAXException;
import java.io.IOException;
import java.io.InputStream;
import java.util.LinkedList;
import java.util.List;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
public class MapView extends View {
//上下文
Context context;
//存放整个地图的RectF，用来计算地图宽高
private RectF mapRectF;
//所有省份的集合
private List<Province> provinces;
//画笔
private Paint paint;
//缩放因子，因为地图宽度大概率超过屏幕宽度，所以需要缩放
private float scale = 1.0f;
//异步解析图片是否完成标志位
boolean finishParse = false;
//颜色数组，每个省份的颜色，记得颜色要写成不透明的（FF），
private int[] colorArray = {0xFF03DAC5,0xFFE68133,0xFF5AE633,0xFFF32C5B,0xFFC820F6,0xFF4657EF,0xFFE2EA1B,
0xFFFF9800,0xFFE89872,0xFF009688};
//记录点击的省份
private Province clickProvince = null;
public MapView(Context context) {
this(context,null);
}
public MapView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public MapView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context = context;
init();
}
private void init() {
//启动一个子线程解析svg文件
parseThread.start();
//初始化画笔
paint = new Paint();
//抗锯齿
paint.setAntiAlias(true);
//画笔宽度
paint.setStrokeWidth(1);
}
Handler handler = new Handler(){
@Override
public void handleMessage(@NonNull Message msg) {
//请求重新测量绘制
requestLayout();
//measure(getMeasuredWidth(),getMeasuredHeight());
invalidate();
}
};
//解析svg
Thread parseThread = new Thread(){
@Override
public void run() {
provinces = new LinkedList<>();
//打开raw目录下的china2.svg
InputStream inputStream = context.getResources().openRawResource(R.raw.china2);
//使用工厂模式创建一个DocumentBuilder
DocumentBuilderFactory documentBuilderFactory = DocumentBuilderFactory.newInstance();
try {
DocumentBuilder builder = documentBuilderFactory.newDocumentBuilder();
//得到对应的xml对象
Document parse = builder.parse(inputStream);
//得到svg文件中所有节点
Element documentElement = parse.getDocumentElement();
//获取到path节点的集合，注意这里是获取到了所有省份的path，所以需要遍历
NodeList pathList = documentElement.getElementsByTagName("path");
float left = -1;
float right = -1;
float top = -1;
float bottom = -1;
//遍历path集合
for (int i=0;i<pathList.getLength();i++){
//得到具体的一项，也就是一个省份
Element item = (Element) pathList.item(i);
//得到d标签里的内容，就是path路径
String attribute = item.getAttribute("d");
//得到title内容，就是省份名字
String name = item.getAttribute("title");
//通过PathParser将得到的路径字符串转成Path对象
Path pathFromPathData = PathParser.createPathFromPathData(attribute);
//new 一个省份，并设置路径，颜色，名字
Province province = new Province();
province.setPath(pathFromPathData);
//从数组中取出颜色
province.setBackgroundColor(colorArray[i%(colorArray.length-1)]);
province.setName(name);
//添加到地图省份集合中
provinces.add(province);
//得到上下左右的边界值
RectF rectF = new RectF();
pathFromPathData.computeBounds(rectF,true);
left = (left==-1)?rectF.left:Math.min(rectF.left,left);
right = right==-1?rectF.right:Math.max(right,rectF.right);
top = top==-1?rectF.top:Math.min(top,rectF.top);
bottom = bottom==-1?rectF.bottom:Math.max(bottom,rectF.bottom);
}
mapRectF = new RectF(left,top,right,bottom);
//解析完成
finishParse = true;
//回到主线程
handler.sendEmptyMessage(-1);
}catch (ParserConfigurationException e){
e.printStackTrace();
} catch (SAXException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
};
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
//如果测量完成 计算缩放因子
if (finishParse){
scale = width/mapRectF.width();
height = (int) mapRectF.height();
}
//这里高度就当成wrap_content处理了
setMeasuredDimension(width,height);
}
@Override
protected void onDraw(Canvas canvas) {
if(provinces == null || provinces.size() < 1 || !finishParse){
return;
}
//保存画布
canvas.save();
//设置缩放
canvas.scale(scale,scale);
//遍历省份集合
for(Province item:provinces){
//设置当前省份是否选中
if(clickProvince == item){
item.setSelect(true);
}else{
item.setSelect(false);
}
//开始绘制
item.drawProvince(canvas,paint);
}
super.onDraw(canvas);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
//处理点击事件
handlerTouchEvent(event.getX(),event.getY());
return true;
}
private void handlerTouchEvent(float x, float y) {
if(!finishParse){
return;
}
//遍历每个省份 看点击的坐标是否在省份中
for (Province province:provinces){
if(province.isSelect(x/scale,y/scale)){
//记录下点击的省份
clickProvince = province;
//重绘 加粗选中省份的边界
invalidate();
//找到点击省份 进行回调
provinceSelectListener.onProvinceSelect(clickProvince.getName());
return;
}
}
}
//省份点击事件的接口
public interface ProvinceSelectListener{
void onProvinceSelect(String name);
}
private ProvinceSelectListener provinceSelectListener;
//设置点击事件监听
public void setProvinceSelectListener(ProvinceSelectListener provinceSelectListener){
this.provinceSelectListener = provinceSelectListener;
}
}
MainActivity代码贴出来：
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;
import butterknife.BindView;
import butterknife.ButterKnife;
public class MainActivity extends AppCompatActivity implements MapView.ProvinceSelectListener{
@BindView(R.id.tv_province)
TextView tv_province;
@BindView(R.id.china_map)
MapView chinaMap;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
//设置listener
chinaMap.setProvinceSelectListener(this);
}
//设置点击的响应
@Override
public void onProvinceSelect(String name) {
tv_province.setText(name);
}
}
布局文件如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<com.honeywell.chinasvg.MapView
android:id="@+id/china_map"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/tv_province"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Hello World!"
/>
</LinearLayout>
总结
其实一点也不复杂，调用系统的api就可以了，以前还以为会很复杂。基本上注释写的比较清楚了，相信大家都能看的懂。解析别的svg文件的话把解析时候的标签名换一下就行，如果需要源码的我再把源码上传。
Demo中的中国地图svg下载