概念：SVG指可伸缩矢量图形，使用 XML 格式定义图形， 图像在放大或改变尺寸的情况下其图形质量不会有所损失
通常用SVG用来制作地图，或者不规则的UI图（点击事件不太好用传统布局来控制，类似中国地图）
svg的图像格式 一般是由 UI设计师来做，让她出图给你SVG文件。
工具类网站
编辑Svg地址
http://editor.method.ac/
在线编辑Svg
https://www.zhangxinxu.com/sp/svg/
svg语法教程
http://www.w3school.com.cn/svg/ 如果失效请百度SVG语法
地图数据
https://www.amcharts.com/download/ 全世界所有地图
我们先进入在线编辑SVG网址，看看SVG是个什么结构，我们随便画一条弯曲的线条，然后查看自动生成的文件
里面生成的一些语法符号，就代表着我画的这条件的所有位置信息，有很多断点，可以想象成大量的点组成了连续的曲直线。具体符号代表如下
Path支持的指令
path支持的指令有：
M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
L = lineto(L X,Y) ：画直线到指定的坐标位置
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径
其实我们项目里面，安卓系统也自动加载了SVG，比如drawable目录下教ic_lancher_background.xml,里面全是path路径。既然安卓系统能自动加载出来，肯定有解析path的工具类。找了一下，他的路径在 \android-6.0.0_r1\frameworks\base\core\java\android\util包里面，工具类PathParese.java
案例：使用.svg文件加载中国地图
我们首先把安卓系统的PathParser复制进来（系统自带，调用不到是因为有hide注解隐藏掉了）
如果要画中国地图可以让UI给一张svg或者直接在上面网站直接下载，如果是.svg后缀结尾的放在raw目录
接下来我们就要去解析这个china.svg图片了，自定义View,在里面解析,地图上各个省份的颜色可以自定义,需要注意的是缩放比例，如果你的宽度用了marchParent，可能这个地图不会铺满横向，应该把地图左右两端最大距离求出来，然后和屏幕尺寸宽度相对比求出缩放因子，这样不管你在布局用多长宽度他都是等比例的，高度同理。另外一个就是点击各个不同省份，需要当前省份的边界线加粗（自定义）。我们也可以封装一个类，叫ProvinceItem这个类，里面包含画笔（每个省都是一个个画出来的最后拼接），包括边界线，还有点击时间。
public class ProviceItem {
//path对象
private Path path;
//绘制的颜色
private int drawColor;
public ProviceItem(Path path) {
this.path = path;
}
public void setDrawColor(int drawColor) {
this.drawColor = drawColor;
}
void drawItem(Canvas canvas, Paint paint,boolean isSelect){
if(isSelect){
//选中时，绘制描边效果
paint.clearShadowLayer();
paint.setStrokeWidth(1);
paint.setStyle(Paint.Style.FILL);
paint.setColor(drawColor);
canvas.drawPath(path, paint);
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.BLACK);
canvas.drawPath(path, paint);
}else{
//这是不选中的情况下 设置边界
paint.setStrokeWidth(2);
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.FILL);
paint.setShadowLayer(8,0,0,0xffffff);
canvas.drawPath(path,paint);
//后面是填充
paint.clearShadowLayer();
paint.setColor(drawColor);
paint.setStyle(Paint.Style.FILL);
paint.setStrokeWidth(2);
canvas.drawPath(path, paint);
}
}
public boolean isTouch(float x,float y){
//创建一个矩形
RectF rectF = new RectF();
//获取到当前省份的矩形边界
path.computeBounds(rectF, true);
//创建一个区域对象
Region region = new Region();
//将path对象放入到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);
}
}
public class MapView extends View {
//上下文
private Context context;
//画笔
private Paint paint;
//所有的省份的集合
private List itemList;
//绘制地图的颜色
private int[] colorArray = new int[]{0xFF239BD7, 0xFF30A9E5, 0xFF80CBF1, 0xFFFFFFFF};
//适配比例
private float scale=1.0f;
//地图的矩形对象
private RectF totalRect;
//被选中的省
private ProviceItem select;
//是否XML已经加载完毕
private boolean inEnd=false;
public MapView(Context context) {
super(context);
}
public MapView(Context context,AttributeSet attrs) {
super(context, attrs);
init(context);
}
public MapView(Context context,AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
/**
* 定义init方法 用来初始化我们paint对象
* @param context
*/
private void init(Context context) {
this.context = context;
paint = new Paint();
paint.setAntiAlias(true);
//开启解析XML文件的线程
loadThread.start();
}
/**
* 创建线程 用来解析XML文件
*/
private Thread loadThread = new Thread(){
@Override
public void run() {
//定义输入流加载中国地图XML文件
InputStream inputStream = context.getResources().openRawResource(R.raw.china);
//定义一个集合
List list = new ArrayList<>();
try {
//取得DocumentBuilderFactory实例
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = null;
builder = factory.newDocumentBuilder();
Document doc = builder.parse(inputStream);
//获取到xml文件的根目录
Element rootElement = doc.getDocumentElement();
//获取根据节点下面的某些节点
NodeList items = rootElement.getElementsByTagName("path");
//首先 定义四个点
float left = -1;
float right = -1;
float top = -1;
float bottom = -1;
//遍历所有的path节点
for(int x=0;x0){
canvas.save();
canvas.scale(scale,scale);
for (ProviceItem proviceItem : itemList) {
if(select != proviceItem){
proviceItem.drawItem(canvas,paint,false);
}
}
if(select !=null){
select.drawItem(canvas,paint,true);
}
}
}
/**
* 重新测量 做适配使用
* @param widthMeasureSpec
* @param heightMeasureSpec
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//获取到当前控件宽高值
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
if(totalRect !=null){
//获取到地图的矩形的宽度
double mapWidth = totalRect.width();
//获取到比例值
scale = (float) (width/mapWidth);
}
setMeasuredDimension(MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(height , MeasureSpec.EXACTLY));
}
@Override
public boolean onTouchEvent(MotionEvent event) {
//将当前手指触摸到位置传过去 判断当前点击的区域
handlerTouch(event.getX(),event.getY());
return super.onTouchEvent(event);
}
/**
* 判断区域
* @param x
* @param y
*/
private void handlerTouch(float x, float y) {
//判空
if(itemList ==null || itemList.size() ==0){
return;
}
//定义一个空的被选中的省份
ProviceItem selectItem =null;
for (ProviceItem proviceItem : itemList) {
//入股点击的是这个省份的范围之内 就把当前省份的封装对象绘制的方法 传一个true
if(proviceItem.isTouch(x/scale,y/scale)){
selectItem = proviceItem;
}
}
if(selectItem !=null){
select = selectItem;
postInvalidate();
}
}
}
效果如图
还可以使用XML去加载SVG图，一般用于动画，但是动画我们倾向于用java代码去写。
使用XML加载SVG
矢量图一定是UI给我们的，我们去阿里巴巴矢量图随便下载个图片并且选用他的SVG格式。下载后以英文名命名
我们下载的是.svg文件，那么在AS里面怎样转换成XML文件呢？我们在drawable目录下右键操作选择本地的svg文件就可以在对应文件夹自动生成XML文件。
第一步转化svg--xml
这里我们自己添加了一些属性，包括线段粗细大小，特别要注意的是，一个path最好对应一个name，name后面还需要绑定的，一个path代表画的一段东西，这里有几个字母按道理说是有几个path的，但是这里只给出一个path将就着用。
第二步：新建动画控制器
新建animator目录,这个文件我理解为控制动画播放的次数，从头到尾还是从尾到头等等一些属性，可以自己查阅动画xml属性。
第三步:绑定器
把svg和动画控制器这两个xml关联起来,
第四步：在布局设置绑定器属性
第五步：UI视图展示
总体来说svg比较适合用于一些不规则图形的点击事件，例如地图，六边形等等都比较合适。太复杂的图不建议用svg，因为加载svg需要耗费一定的性能。效果不一定比直接写自定义View要好。简单的可以用SVG。帧动画容易OOM。
demo地址:https://github.com/283006603/svg-china_demo