Android如何利用svg实现可缩放的地图控件
时间：2022-06-06 09:32:06 | 栏目：Android代码 | 点击：次
序言
闲来无事写了个地图控件，基于SVG。可以缩放，可拖动，可点击。SVG具有体积小，不失真的优点。而且由于保存的是路径信息，可以做到复杂图形的点击判断功能。还是很香的。
效果
实现
原理，SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 使用 XML 格式定义图像。在xml中定义了路径，只需要将路径解析保存到path中。再绘制出来就行了。
svg地图的获取
使用如下地址
String url="https://pixelmap.amcharts.com/";
下载需要的地图
下载以后的地图内容是这样的。
这种xml格式需要转换为Android支持的格式，很简单。new一个Vector Asset
控件实现
svg解析
转换以后的svg图片也只有125kb。而且怎么放大也不会失真。svg真香。
转换为android的svg格式以后。其中每个path保存的就是每个省的地图数据，而其中的pathData就是具体的路径。
svg解析是放在单独的线程中进行的，避免造成UI卡顿，其原理就是解析XML文件。最后通过Android官方的。PathParser 将svg的路径数据解析成对应的path。
Path path = PathParser.createPathFromPathData(pathData);
还有一点就是定义了一个 MapItem用来保存下一级对象的路径，是否被点击等信息。其中的绘制功能，和判断是否被点击也是由该类完成。
class MapItem {
Path path;
private final Region region;
private boolean isSelected = false;
private final RectF rectF;
private final int index;
public boolean onTouch(float x, float y) {
if (region.contains((int) x, (int) y)) {
isSelected = true;
return true;
}
isSelected = false;
return false;
}
public MapItem(Path path, int index) {
this.path = path;
rectF = new RectF();
path.computeBounds(rectF, true);
region = new Region();
region.setPath(path, new Region(new Rect((int) rectF.left
, (int) rectF.top, (int) rectF.right, (int) rectF.bottom)));
this.index = index;
}
protected void onDraw(Canvas canvas, Paint paint) {
paint.reset();
paint.setColor(isSelected ? Color.YELLOW : Color.GRAY);
paint.setStyle(Paint.Style.FILL);
canvas.drawPath(path, paint);
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.RED);
canvas.drawPath(path, paint);
paint.setColor(Color.GRAY);
paint.setColor(Color.BLUE);
// canvas.drawText(index+"",rectF.centerX(),rectF.centerY(),paint);
}
}
缩放
关于缩放使用的是系统自带的GestureDetector和ScaleGestureDetector，其中GestureDetector用来实现拖动，滑动，ScaleGestureDetector用来实现双指缩放。具体用法可以自行百度。我讲一下其中需要注意的点。在SVG刚解析出来的时候需要，解析出其中的android:width
去掉其中的dp。比如上图的1920dp去掉以后就是1920 。这个就行svg中路径的绘制坐标系中的宽度。通过它和我们控件的宽度就行缩放就可以将svg图片完整的显示在控件里面。
上面的vectorWidth 就是记录的svg中的初始宽度，在onDraw中就行计算。其中的viewScale代表的就是将svg完整展示到view中的需要的缩放比，这个值初始化以后是不会改变的。
用户手指缩放改变的是变量userScale。 用户拖动改变的是offsetX,offsetY 手指缩放的中心点用变量focusX和focusY
这些变量最后都会作用到一个matrix中。再绘制之前调用
canvas.setMatrix(matrix);
就可以实现图形的缩放，拖动。
而invertMatrix是matrix的逆矩阵。用于将手势的坐标映射为svg中的坐标。所有手势操作之前都需要调用以下代码进行坐标转换。
invertMatrix.mapPoints(points);
还有一点需要注意。用户滚动和滑动都需要对距离和速度进行缩放。
源码
一共只有319行，直接粘贴过来了。
package com.trs.app.learnview.view;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Region;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.View;
import android.widget.Scroller;
import androidx.annotation.Nullable;
import androidx.core.graphics.PathParser;
import com.trs.app.learnview.R;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.NodeList;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
/**
* Created by zhuguohui
* Date: 2021/12/28
* Time: 10:56
* Desc:
*/
public class MapView extends View {
private List<MapItem> list = new ArrayList<>();
private Paint paint;
private int vectorWidth = -1;
private Matrix matrix = new Matrix();
private Matrix invertMatrix = new Matrix();
private float viewScale = -1f;
private float userScale = 1.0f;
private boolean initFinish = false;
private int bgColor;
private GestureDetector gestureDetector;
private int offsetX, offsetY;
private Scroller scroller;
private float[] points;
private float[] pointsFocusBefore;
private float focusX, focusY;
private ScaleGestureDetector scaleGestureDetector;
private boolean showDebugInfo = false;
private static final int MAX_SCROLL = 10000;
private static final int MIN_SCROLL = -10000;
private int mapId = R.raw.ic_african;
public MapView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
bgColor = Color.parseColor("#f5f5f5");
paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.GRAY);
scroller = new Scroller(getContext());
gestureDetector = new GestureDetector(getContext(), onGestureListener);
scaleGestureDetector = new ScaleGestureDetector(getContext(), scaleGestureListener);
}
private ScaleGestureDetector.OnScaleGestureListener scaleGestureListener = new ScaleGestureDetector.OnScaleGestureListener() {
float lastScaleFactor;
boolean mapPoint = false;
@Override
public boolean onScale(ScaleGestureDetector detector) {
float scaleFactor = detector.getScaleFactor();
float[] points = new float[]{detector.getFocusX(), detector.getFocusY()};
pointsFocusBefore = new float[]{detector.getFocusX(), detector.getFocusY()};
if (mapPoint) {
mapPoint = false;
invertMatrix.mapPoints(points);
focusX = points[0];
focusY = points[1];
}
float change = scaleFactor - lastScaleFactor;
lastScaleFactor = scaleFactor;
userScale += change;
postInvalidate();
return false;
}
@Override
public boolean onScaleBegin(ScaleGestureDetector detector) {
lastScaleFactor = 1.0f;
mapPoint = true;
return true;
}
@Override
public void onScaleEnd(ScaleGestureDetector detector) {
}
};
private GestureDetector.OnGestureListener onGestureListener = new GestureDetector.OnGestureListener() {
@Override
public boolean onDown(MotionEvent e) {
return true;
}
@Override
public void onShowPress(MotionEvent e) {
}
@Override
public boolean onSingleTapUp(MotionEvent event) {
boolean result = false;
float x = event.getX();
float y = event.getY();
points = new float[]{x, y};
invertMatrix.mapPoints(points);
for (MapItem item : list) {
if (item.onTouch(points[0], points[1])) {
result = true;
}
}
postInvalidate();
return result;
}
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
offsetX += -distanceX / userScale;
offsetY += -distanceY / userScale;
postInvalidate();
return true;
}
@Override
public void onLongPress(MotionEvent e) {
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
scroller.fling(offsetX, offsetY, (int) ((int) velocityX / userScale), (int) ((int) velocityY / userScale), MIN_SCROLL,
MAX_SCROLL, MIN_SCROLL, MAX_SCROLL);
postInvalidate();
return true;
}
};
@Override
public boolean onTouchEvent(MotionEvent event) {
gestureDetector.onTouchEvent(event);
scaleGestureDetector.onTouchEvent(event);
return true;
}
public void setMapId(int mapId) {
this.mapId = mapId;
userScale=1.0f;
offsetY=0;
offsetX=0;
focusX=0;
focusY=0;
new Thread(new DecodeRunnable()).start();
}
private class DecodeRunnable implements Runnable {
@Override
public void run() {
//Dom 解析 SVG文件
InputStream inputStream = getContext().getResources().openRawResource(mapId);
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
try {
DocumentBuilder builder = factory.newDocumentBuilder();
Document doc = builder.parse(inputStream);
Element rootElement = doc.getDocumentElement();
String strWidth = rootElement.getAttribute("android:width");
vectorWidth = Integer.parseInt(strWidth.replace("dp", ""));
NodeList items = rootElement.getElementsByTagName("path");
list.clear();
for (int i = 1; i < items.getLength(); i++) {
Element element = (Element) items.item(i);
String pathData = element.getAttribute("android:pathData");
@SuppressLint("RestrictedApi")
Path path = PathParser.createPathFromPathData(pathData);
MapItem item = new MapItem(path, i);
list.add(item);
}
initFinish = true;
postInvalidate();
} catch (Exception e) {
e.printStackTrace();
}
}
};
@Override
public void computeScroll() {
if (scroller.computeScrollOffset()) {
offsetX = scroller.getCurrX();
offsetY = scroller.getCurrY();
invalidate();
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.save();
if (vectorWidth != -1 && viewScale == -1) {
int width = getWidth();
viewScale = width * 1.0f / vectorWidth;
}
if (viewScale != -1) {
float scale = viewScale * userScale;
matrix.reset();
matrix.postTranslate(offsetX, offsetY);
matrix.postScale(scale, scale, focusX, focusY);
invertMatrix.reset();
matrix.invert(invertMatrix);
}
canvas.setMatrix(matrix);
canvas.drawColor(bgColor);
if (initFinish) {
for (MapItem item : list) {
item.onDraw(canvas, paint);
}
}
showDebugInfo(canvas);
}
private void showDebugInfo(Canvas canvas) {
if (!showDebugInfo) {
return;
}
if (points != null) {
paint.setColor(Color.GREEN);
paint.setStyle(Paint.Style.FILL);
canvas.drawCircle(points[0], points[1], 20, paint);
}
paint.setColor(Color.BLUE);
paint.setStyle(Paint.Style.FILL);
canvas.drawCircle(focusX, focusY, 20, paint);
if (pointsFocusBefore != null) {
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.FILL);
canvas.drawCircle(pointsFocusBefore[0], pointsFocusBefore[1], 20, paint);
}
}
}
class MapItem {
Path path;
private final Region region;
private boolean isSelected = false;
private final RectF rectF;
private final int index;
public boolean onTouch(float x, float y) {
if (region.contains((int) x, (int) y)) {
isSelected = true;
return true;
}
isSelected = false;
return false;
}
public MapItem(Path path, int index) {
this.path = path;
rectF = new RectF();
path.computeBounds(rectF, true);
region = new Region();
region.setPath(path, new Region(new Rect((int) rectF.left
, (int) rectF.top, (int) rectF.right, (int) rectF.bottom)));
this.index = index;
}
protected void onDraw(Canvas canvas, Paint paint) {
paint.reset();
paint.setColor(isSelected ? Color.YELLOW : Color.GRAY);
paint.setStyle(Paint.Style.FILL);
canvas.drawPath(path, paint);
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.RED);
canvas.drawPath(path, paint);
paint.setColor(Color.GRAY);
paint.setColor(Color.BLUE);
// canvas.drawText(index+"",rectF.centerX(),rectF.centerY(),paint);
}
}
Demo
最后想看效果的可以下载demo运行。
String url="https://github.com/zhuguohui/MapView";
总结
做技术总是需要厚积薄发，这样工作才能游刃有余。项目中虽然不需要，但是学习的脚步不能停止。提高自己解决问题的广度和深度，才是程序员的核心价值。