Android如何利用svg實現可縮放的地圖控件
更新時間：2022年01月20日 14:35:34 作者：solo_99
這篇文章主要給大家介紹了關于Android如何利用svg實現可縮放的地圖控件的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
序言
閑來無事寫了個地圖控件，基于SVG。可以縮放，可拖動，可點擊。SVG具有體積小，不失真的優(yōu)點。而且由于保存的是路徑信息，可以做到復雜圖形的點擊判斷功能。還是很香的。
效果
實現
原理，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);
}
}縮放
關于縮放使用的是系統(tǒng)自帶的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";
總結
做技術總是需要厚積薄發(fā)，這樣工作才能游刃有余。項目中雖然不需要，但是學習的腳步不能停止。提高自己解決問題的廣度和深度，才是程序員的核心價值。
到此這篇關于Android如何利用svg實現可縮放的地圖控件的文章就介紹到這了,更多相關Android svg實現可縮放地圖控件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
這篇文章主要為大家介紹了Android10 啟動之SystemServer源碼分析,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
本文主要講解 Android下拉刷新+加載更多+滑動刪除的示例，這里整理了相關資料并附示例代碼供大家學習參考，有需要的小伙伴可以參考下2016-08-08
Android創(chuàng)建簡單發(fā)送和接收短信應用
收發(fā)短信應該是每個手機最基本的功能之一了，即使是許多年前的老手機也都會具備這項功能，而Android 作為出色的智能手機操作系統(tǒng)，自然也少不了在這方面的支持。今天我們開始自己創(chuàng)建一個簡單的發(fā)送和接收短信的應用，需要的朋友可以參考下2016-04-04
本篇文章主要介紹了Android設備與外接U盤實現數據讀取操作的示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
利用adt-bundle輕松搭建Android開發(fā)環(huán)境與Hello world（Linux）
這篇文章主要介紹了利用adt-bundle在Linux下輕松搭建Android開發(fā)環(huán)境與Hello world，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要為大家詳細介紹了Android自定義ViewGroup實現彈性滑動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
android圖庫播放幻燈片時按power鍵滅屏再亮屏顯示keyguard
圖庫在播放幻燈片時，按power鍵滅屏，然后再亮屏，會發(fā)現幻燈片繼續(xù)在播放，沒有顯示keyguard，如何在亮屏后顯示解鎖界面，具體實現方法如下，感興趣的朋友可以參考下哈2013-06-06
基于Fedora14下自帶jdk1.6版本 安裝jdk1.7不識別的解決方法
本篇文章是對Fedora14下自帶jdk1.6版本，安裝jdk1.7不識別的解決方法進行了詳細的分析介紹，需要的朋友參考下2013-05-05
本篇文章主要介紹了android自定義ImageView仿圖片上傳，具有一定的參考價值，有興趣的可以了解一下。2017-01-01
這篇文章主要為大家詳細介紹了Android自定義View實現滑動回彈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04