欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android如何利用svg實(shí)現(xiàn)可縮放的地圖控件

 更新時(shí)間：2022年01月20日 14:35:34   作者：solo_99  
這篇文章主要給大家介紹了關(guān)于Android如何利用svg實(shí)現(xiàn)可縮放的地圖控件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

序言

閑來無事寫了個(gè)地圖控件，基于SVG?？梢钥s放，可拖動(dòng)，可點(diǎn)擊。SVG具有體積小，不失真的優(yōu)點(diǎn)。而且由于保存的是路徑信息，可以做到復(fù)雜圖形的點(diǎn)擊判斷功能。還是很香的。

效果

實(shí)現(xiàn)

原理，SVG 意為可縮放矢量圖形（Scalable Vector Graphics）。 SVG 使用 XML 格式定義圖像。在xml中定義了路徑，只需要將路徑解析保存到path中。再繪制出來就行了。

svg地圖的獲取

使用如下地址

String url="https://pixelmap.amcharts.com/";

下載需要的地圖

下載以后的地圖內(nèi)容是這樣的。

這種xml格式需要轉(zhuǎn)換為Android支持的格式，很簡單。new一個(gè)Vector Asset

控件實(shí)現(xiàn)

svg解析

轉(zhuǎn)換以后的svg圖片也只有125kb。而且怎么放大也不會(huì)失真。svg真香。

轉(zhuǎn)換為android的svg格式以后。其中每個(gè)path保存的就是每個(gè)省的地圖數(shù)據(jù)，而其中的pathData就是具體的路徑。

svg解析是放在單獨(dú)的線程中進(jìn)行的，避免造成UI卡頓，其原理就是解析XML文件。最后通過Android官方的。PathParser 將svg的路徑數(shù)據(jù)解析成對(duì)應(yīng)的path。

 Path path = PathParser.createPathFromPathData(pathData);

還有一點(diǎn)就是定義了一個(gè) MapItem用來保存下一級(jí)對(duì)象的路徑，是否被點(diǎn)擊等信息。其中的繪制功能，和判斷是否被點(diǎn)擊也是由該類完成。

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);

    }
}

縮放

關(guān)于縮放使用的是系統(tǒng)自帶的GestureDetector和ScaleGestureDetector，其中GestureDetector用來實(shí)現(xiàn)拖動(dòng)，滑動(dòng)，ScaleGestureDetector用來實(shí)現(xiàn)雙指縮放。具體用法可以自行百度。我講一下其中需要注意的點(diǎn)。在SVG剛解析出來的時(shí)候需要，解析出其中的android:width

去掉其中的dp。比如上圖的1920dp去掉以后就是1920 。這個(gè)就行svg中路徑的繪制坐標(biāo)系中的寬度。通過它和我們控件的寬度就行縮放就可以將svg圖片完整的顯示在控件里面。

上面的vectorWidth 就是記錄的svg中的初始寬度，在onDraw中就行計(jì)算。其中的viewScale代表的就是將svg完整展示到view中的需要的縮放比，這個(gè)值初始化以后是不會(huì)改變的。

用戶手指縮放改變的是變量userScale。 用戶拖動(dòng)改變的是offsetX,offsetY 手指縮放的中心點(diǎn)用變量focusX和focusY

這些變量最后都會(huì)作用到一個(gè)matrix中。再繪制之前調(diào)用

 canvas.setMatrix(matrix);

就可以實(shí)現(xiàn)圖形的縮放，拖動(dòng)。

而invertMatrix是matrix的逆矩陣。用于將手勢的坐標(biāo)映射為svg中的坐標(biāo)。所有手勢操作之前都需要調(diào)用以下代碼進(jìn)行坐標(biāo)轉(zhuǎn)換。

invertMatrix.mapPoints(points);

還有一點(diǎn)需要注意。用戶滾動(dòng)和滑動(dòng)都需要對(duì)距離和速度進(jìn)行縮放。

源碼

一共只有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運(yùn)行。

String url="https://github.com/zhuguohui/MapView";

總結(jié)

做技術(shù)總是需要厚積薄發(fā)，這樣工作才能游刃有余。項(xiàng)目中雖然不需要，但是學(xué)習(xí)的腳步不能停止。提高自己解決問題的廣度和深度，才是程序員的核心價(jià)值。

到此這篇關(guān)于Android如何利用svg實(shí)現(xiàn)可縮放的地圖控件的文章就介紹到這了,更多相關(guān)Android svg實(shí)現(xiàn)可縮放地圖控件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

最新評(píng)論