1200字范文 > 08_android_打造通用svg地图自定义组件

08_android_打造通用svg地图自定义组件

时间：2021-04-28 21:15:26

android_打造通用svg地图自定义组件

一.地图svg数据准备

这里笔者已经整理了云南省16个地州、129个县的svg path数据,如果你要绘制的是其他省份,甚至是中国地图,那么可以从下面这个网站上去拿,至于怎么转换成android中能够使用的数据格式,后面会做详细说明,先说句不用客气哈😄:

/tools/atlas/index.html#&lat=25.249702292968653&lng=101.86055250000003&zoom=6.5

二.从地图svg文件中提取path数据,拼接json数据

先声明一下,这里在做转换的时候,笔者没有找到更好的方法,并且也试过code了一下,希望能够实现自动根据viewport去重新计算path,但是最后都以失败告终,所以只能先用android studio将其转成矢量图标的xml文件,然后老老实实复制粘贴,最终整理成json文件

打开上一步中介绍的网址,下载你需要的城市的svg文件,这里还是以云南省为例,以下是下载好的svg文件的内容:

通过android studio将svg文件导入成矢量图标,千言万语不如来两张图:

最后会在drawable资源文件目录下生成矢量图标的xml文件:

可以看到里面有一个个的path标签,每个标签中的pathData正是我们需要绘制的每一个地图块的数据

接下来把这个xml里面的每一个path转为json,这里完全手输,让大家见笑了😄:

三.编写自定义组件,绘制svg地图

定义javabean

public class CityBean {public double fillAlpha;public String fillColor;public String strokeColor;public int strokeWidth;public String name;public String cabinId;public String pathData;}

public class MapPathItem {private Context context;//画笔路径private Path path;private int color;private int strokeColor;private String dataName;private String cabinId;private int fillAlpha;private int strokeWidth;public MapPathItem(Context context) {this.context = context;}public Path getPath() {return path;}public void setPath(Path path) {this.path = path;}public int getColor() {return color;}public void setColor(int color) {this.color = color;}public int getStrokeColor() {return strokeColor;}public void setStrokeColor(int strokeColor) {this.strokeColor = strokeColor;}public String getDataName() {return dataName;}public void setDataName(String dataName) {this.dataName = dataName;}public String getCabinId() {return cabinId;}public void setCabinId(String cabinId) {this.cabinId = cabinId;}public int getFillAlpha() {return fillAlpha;}public void setFillAlpha(int fillAlpha) {this.fillAlpha = fillAlpha;}public int getStrokeWidth() {return strokeWidth;}public void setStrokeWidth(int strokeWidth) {this.strokeWidth = strokeWidth;}}

读取每一个地图块的绘制信息,这里为了方便扩展,在自定义组件中定义一个方法,提供给外部去使用,这里假设我们之前转换的json是请求接口获得的:

public class SVGMapView extends View {private Context mContext;private List<MapPathItem> pathItemList = new ArrayList<>();public SVGMapView(Context context) {this(context, null);}public SVGMapView(Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);}public SVGMapView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);mContext = context;}public void setData(List<CityBean> datas) {//解析子节点属性for(int i = 0;i <datas.size(); i ++){//拿到路径String pathData = datas.get(i).pathData;String dataName = datas.get(i).name;String cabinId = datas.get(i).cabinId;String color = datas.get(i).fillColor;String strokeColor = datas.get(i).strokeColor;float fillAlpha = datas.get(i).fillAlpha;int strokeWidth = datas.get(i).strokeWidth;Path path = PathParser.createPathFromPathData(pathData);MapPathItem pathItem = new MapPathItem(mContext);pathItem.setPath(path);pathItem.setDataName(dataName);pathItem.setCabinId(cabinId);pathItem.setColor(Color.parseColor(color));pathItem.setStrokeColor(Color.parseColor(strokeColor));pathItem.setFillAlpha((int) (fillAlpha * 255));pathItem.setStrokeWidth(strokeWidth);pathItemList.add(pathItem);}//各个城市的数据可能是请求接口获取到的,//数据获取成功后,界面可能已经绘制完成,//所以这里需要通知控件重绘postInvalidate();}}

重写onDraw方法,通过pathItem绘制地图块,首先改造下MapPathItem这个类,让它自己去绘制

public class MapPathItem {...public void draw(Canvas canvas, Paint paint) {path.setFillType(Path.FillType.EVEN_ODD);//绘制边框paint.setStrokeWidth(strokeWidth);paint.setStyle(Paint.Style.STROKE);paint.setColor(strokeColor);paint.setAlpha(255);paint.setStrokeCap(Paint.Cap.ROUND);paint.setStrokeJoin(Paint.Join.ROUND);canvas.drawPath(path, paint);//绘制填充色paint.setColor(color);paint.setAlpha(fillAlpha);paint.setStyle(Paint.Style.FILL);canvas.drawPath(path, paint);}}

public class SVGMapView extends View {private Context mContext;private List<MapPathItem> pathItemList = new ArrayList<>();private Paint mPaint;...public SVGMapView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);mContext = context;init();}private void init() {mPaint = new Paint();}...@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);for (MapPathItem pathItem : pathItemList) {pathItem.draw(canvas,mPaint);}}}

可以看到通过以上步骤,一个完整的省级svg地图就画出来了,但是地图区域并没有居中

四.地图居中显示

获取实际绘制区域的大小

public void setData(List<CityBean> datas) {//svg的上下左右边界float left = -1,top = -1,right = -1,bottom = -1;//解析子节点属性for(int i = 0;i <datas.size(); i ++){//拿到路径String pathData = datas.get(i).pathData;String dataName = datas.get(i).name;String cabinId = datas.get(i).cabinId;String color = datas.get(i).fillColor;String strokeColor = datas.get(i).strokeColor;float fillAlpha = datas.get(i).fillAlpha;int strokeWidth = datas.get(i).strokeWidth;Path path = PathParser.createPathFromPathData(pathData);MapPathItem pathItem = new MapPathItem(mContext);pathItem.setPath(path);pathItem.setDataName(dataName);pathItem.setCabinId(cabinId);pathItem.setColor(Color.parseColor(color));pathItem.setStrokeColor(Color.parseColor(strokeColor));pathItem.setFillAlpha((int) (fillAlpha * 255));pathItem.setStrokeWidth(strokeWidth);pathItemList.add(pathItem);//获取实际绘制地图区域的大小RectF rectF = new RectF();puteBounds(rectF,true);left = left == -1 ? rectF.left : Math.min(rectF.left, left);top = top == -1 ? rectF.top : Math.min(rectF.top, top);right = right == -1 ? rectF.right : Math.max(rectF.right, right);bottom = bottom == -1 ? rectF.bottom : Math.max(rectF.bottom, bottom);}//mapRectF记录了实际绘制地图区域的大小mapRectF = new RectF(left, top, right, bottom);//各个城市的数据可能是请求接口获取到的,//数据获取成功后,界面可能已经绘制完成,//所以这里需要通知控件重绘postInvalidate();}

这里需要借助Matrix对象获取实际绘制区域的大小,通过实际绘制区域的大小以及控件的大小来计算x,y的偏移量,通过Matrix对象进行平移变化实现居中:

public class SVGMapView extends View {private Context mContext;private List<MapPathItem> pathItemList = new ArrayList<>();private Paint mPaint;private RectF mapRectF;private Matrix mTransformMatrix;private boolean hasInit;private int viewWidth;private int viewHeight;...private void init() {mPaint = new Paint();mTransformMatrix = new Matrix();}...@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);initPosition();canvas.setMatrix(mTransformMatrix);for (MapPathItem pathItem : pathItemList) {pathItem.draw(canvas,mPaint);}}private void initPosition() {if(hasInit) {return;}viewWidth = getWidth();viewHeight = getHeight();if (viewWidth < 0 && viewHeight < 0) {return;}int translateX = (int) (getLeft() - mapRectF.left) + (int) (viewWidth - mapRectF.width())/2;int translateY = (int) (getTop() - mapRectF.top) + (int) (viewHeight - mapRectF.height())/2;mTransformMatrix.postTranslate(translateX, translateY);hasInit = true;}}

五.手势处理 - 地图跟随手指移动

通过实现View的OnTouchListener接口,重写onTouche方法实现

public class SVGMapView extends View implements View.OnTouchListener {...private void init() {mPaint = new Paint();mTransformMatrix = new Matrix();setOnTouchListener(this);}...@Overridepublic boolean onTouch(View v, MotionEvent event) {float x = 0, y = 0;// 拿到触摸点的个数final int pointerCount = event.getPointerCount();// 得到多个触摸点的x与y均值for (int i = 0; i < pointerCount; i++){x += event.getX(i);y += event.getY(i);}x = x / pointerCount;y = y / pointerCount;/*** 每当触摸点发生变化时，重置mLasX , mLastY*/if (pointerCount != lastPointerCount){mLastX = x;mLastY = y;}lastPointerCount = pointerCount;switch (event.getAction()){case MotionEvent.ACTION_MOVE:moveX = x - mLastX;moveY = y - mLastY;mLastX = x;mLastY = y;mTransformMatrix.postTranslate(moveX, moveY);postInvalidate();break;case MotionEvent.ACTION_UP:case MotionEvent.ACTION_CANCEL:lastPointerCount = 0;break;}return true;}}

六.手势处理 - 双指缩放

定义初始缩放比,按照初始缩放比例进行绘制

定义最小缩放比例和最大缩放比例,实现双指缩放:

public class SVGMapView extends View implements View.OnTouchListener {...private float initScale = 2.0f;private ScaleGestureDetector scaleGestureDetector;/*** 用于存放矩阵的9个值*/private final float[] matrixValues = new float[9];private float minScale = 1.5f;private float maxScale = 3.6f;...private void init() {mPaint = new Paint();mTransformMatrix = new Matrix();setOnTouchListener(this);scaleGestureDetector = new ScaleGestureDetector(mContext, new MySimpleScaleOnGestureDetector());}...@Overridepublic boolean onTouch(View v, MotionEvent event) {scaleGestureDetector.onTouchEvent(event);...return true;}//双指缩放class MySimpleScaleOnGestureDetector extends ScaleGestureDetector.SimpleOnScaleGestureListener {@Overridepublic boolean onScale(ScaleGestureDetector detector) {float scale = getScale();float scaleFactor = detector.getScaleFactor();/*** 缩放的范围控制*/if ((scale < maxScale && scaleFactor > 1.0f)|| (scale > minScale && scaleFactor < 1.0f)){/*** 最大值最小值判断*/if (scaleFactor * scale < minScale){scaleFactor = minScale / scale;}if (scaleFactor * scale > maxScale){scaleFactor = maxScale / scale;}/*** 设置缩放比例*/mTransformMatrix.postScale(scaleFactor, scaleFactor, viewWidth/2, viewHeight/2);postInvalidate();}return true;}}/*** 获得当前的缩放比例** @return*/public final float getScale(){mTransformMatrix.getValues(matrixValues);return matrixValues[Matrix.MSCALE_X];}}

七.边界检测

通过上面的步骤,已经实现了svg地图的绘制、单指拖拽、双指缩放,但是svg可以随意拖拽到任意位置,我们需要将拖拽的范围限制为控件的边界,首先我们需要获取地图经平移变换后,实际显示的区域,可以通过mTransformMatrix获取

private RectF getMatrixRectF(){RectF rect = new RectF();if(mapRectF != null) {mTransformMatrix.mapRect(rect, mapRectF);}return rect;}

由于地图可以缩放,所以需要分别对地图显示区域超过控件的范围时,以及地图区域不超过控件范围的情况进行处理

public class SVGMapView extends View implements View.OnTouchListener {...@Overridepublic boolean onTouch(View v, MotionEvent event) {scaleGestureDetector.onTouchEvent(event);float x = 0, y = 0;// 拿到触摸点的个数final int pointerCount = event.getPointerCount();// 得到多个触摸点的x与y均值for (int i = 0; i < pointerCount; i++){x += event.getX(i);y += event.getY(i);}x = x / pointerCount;y = y / pointerCount;/*** 每当触摸点发生变化时，重置mLasX , mLastY*/if (pointerCount != lastPointerCount){mLastX = x;mLastY = y;}lastPointerCount = pointerCount;switch (event.getAction()){case MotionEvent.ACTION_MOVE:moveX = x - mLastX;moveY = y - mLastY;mLastX = x;mLastY = y;mTransformMatrix.postTranslate(moveX, moveY);checkBounds();postInvalidate();break;case MotionEvent.ACTION_UP:case MotionEvent.ACTION_CANCEL:lastPointerCount = 0;break;}return true;}.../*** 移动时，进行边界判断*/private void checkBounds() {RectF rect = getMatrixRectF();float deltaX = 0, deltaY = 0;if(rect.width() > viewWidth) {if(rect.left > 0) {deltaX = -rect.left;}if(rect.right < viewWidth) {deltaX = viewWidth - rect.right;}} else {if(rect.left < 0) {deltaX = -rect.left;}if(rect.right > viewWidth) {deltaX = viewWidth - rect.right;}}if(rect.height() > viewHeight) {if(rect.top > 0) {deltaY = -rect.top;}if(rect.bottom < viewHeight) {deltaY = viewHeight - rect.bottom;}} else {if(rect.top < 0) {deltaY = -rect.top;}if(rect.bottom > viewHeight) {deltaY = viewHeight - rect.bottom;}}mTransformMatrix.postTranslate(deltaX, deltaY);}private RectF getMatrixRectF(){RectF rect = new RectF();if(mapRectF != null) {mTransformMatrix.mapRect(rect, mapRectF);}return rect;}}

八.各色块点击监听

public class MapPathItem {...public boolean isTaped(float x, float y){RectF rectF = new RectF();puteBounds(rectF,true);Region region =new Region();//给定路径region.setPath(this.path, new Region((int) rectF.left, (int) rectF.top, (int) rectF.right, (int) rectF.bottom));return region.contains((int) x, (int)y);}}

public class SVGMapView extends View implements View.OnTouchListener {private Context mContext;private List<MapPathItem> pathItemList = new ArrayList<>();private Paint mPaint;private RectF mapRectF;private Matrix mTransformMatrix;private boolean hasInit;private int viewWidth;private int viewHeight;private int lastPointerCount;private float mLastX;private float mLastY;private float moveX;private float moveY;private float initScale = 2.0f;private ScaleGestureDetector scaleGestureDetector;/*** 用于存放矩阵的9个值*/private final float[] matrixValues = new float[9];private float minScale = 1.5f;private float maxScale = 3.6f;private Rect clipBounds;private GestureDetector gestureDetector;...private void init() {mPaint = new Paint();mTransformMatrix = new Matrix();setOnTouchListener(this);scaleGestureDetector = new ScaleGestureDetector(mContext, new MySimpleScaleOnGestureDetector());gestureDetector = new GestureDetector(mContext, new MySimpleOnGestureDetector());}...@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);initPosition();canvas.setMatrix(mTransformMatrix);for (MapPathItem pathItem : pathItemList) {pathItem.draw(canvas,mPaint);}clipBounds = canvas.getClipBounds();}...@Overridepublic boolean onTouch(View v, MotionEvent event) {if (gestureDetector.onTouchEvent(event)) {return true;}scaleGestureDetector.onTouchEvent(event);...return true;}...class MySimpleOnGestureDetector extends GestureDetector.SimpleOnGestureListener {@Overridepublic boolean onSingleTapConfirmed(MotionEvent e) {float scale = getScale();//点击行政区域触发listenerfloat cX = e.getX() / scale + clipBounds.left;float cY = e.getY() / scale + clipBounds.top;for (int i = 0; i < pathItemList.size(); i++){MapPathItem item = pathItemList.get(i);if(item.isTaped(cX, cY)) {Toast.makeText(mContext, item.getDataName(), Toast.LENGTH_SHORT).show();break;}}return true;}}}