基于SVG的, 可缩放,可拖动,可点击的地图控件

Posted -SOLO-

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于SVG的, 可缩放,可拖动,可点击的地图控件相关的知识,希望对你有一定的参考价值。

序言

在21世纪这个大数据时代,显示报表的时候没有一个地图控件,会让别人觉得很low


于是花了点时间研究了android怎么实现这种地图控件,可以做到缩放,拖动,点击,放大也不失真。最后选用SVG实现,因为SVG具有体积小,不失真的优点。而且由于保存的是路径信息,可以做到复杂图形的点击判断功能。还是很香的。

效果

实现

原理,SVG 意为可缩放矢量图形(Scalable Vector Graphics)。
SVG 使用 XML 格式定义图像。在xml中定义了路径,只需要将路径解析保存到path中。再绘制出来就行了。

svg地图的获取

使用如下地址(需要科学上网)

Pixel Map

首页是这样的,支持世界上所有国家

下载需要的地图下载以后的地图内容是这样的。
这种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);

    

缩放

关于缩放使用的是系统自带的GestureDetectorScaleGestureDetector,其中GestureDetector用来实现拖动,滑动,ScaleGestureDetector用来实现双指缩放。具体用法可以自行百度。我讲一下其中需要注意的点。在SVG刚解析出来的时候需要,解析出其中的android:width

去掉其中的dp。比如上图的1920dp去掉以后就是1920 。这个就行svg中路径的绘制坐标系中的宽度。通过它和我们控件的宽度就行缩放就可以将svg图片完整的显示在控件里面。

上面的vectorWidth 就是记录的svg中的初始宽度,在onDraw中就行计算。其中的viewScale代表的就是将svg完整展示到view中的需要的缩放比,这个值初始化以后是不会改变的。

用户手指缩放改变的是变量userScale
用户拖动改变的是offsetX,offsetY
手指缩放的中心点用变量focusXfocusY

这些变量最后都会作用到一个matrix中。再绘制之前调用

 canvas.setMatrix(matrix);

就可以实现图形的缩放,拖动。

invertMatrixmatrix的逆矩阵。用于将手势的坐标映射为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.draw

以上是关于基于SVG的, 可缩放,可拖动,可点击的地图控件的主要内容,如果未能解决你的问题,请参考以下文章

SVG 详解——自定义可点击的中国地图

SVG 详解——自定义可点击的中国地图

SVG可缩放矢量图形

Photoshop 之类的画布图像可拖放、可缩放的图像在拖动时出现绝对位置问题

svg简介与使用

SVG(可缩放矢量图形)