android地图路径绘制,android：利用svg的path路径+canvas 开发自定义地图控件
需求：做小型地圖的一個(gè)顯示功能
實(shí)現(xiàn)思路：自定義view解析對應(yīng)的svg文件，在利用canvas的畫筆畫出相應(yīng)的地圖線條。各個(gè)線條圍成的區(qū)域可以表示成各個(gè)元素比如樹，街道，路燈，汽車等等一切事物。然后通過view的點(diǎn)擊事件可以給自定義控件添加點(diǎn)擊，長按，放大縮小等等操作。
需要美工給一個(gè)svg格式的圖片。
//當(dāng)然這里并不止一個(gè)path路徑，這里的path路徑就是地圖的線條
android:width="3000dp"
android:height="3000dp"
android:viewportWidth="3000"
android:viewportHeight="3000">
android:dataName="CCCC"
android:cabinId="9a43312887844fa3a2815dfac018f6ee"
android:pathData="M7,2297H157v60H7v-60Z"
android:strokeWidth="8.333"
android:fillType="evenOdd"
android:strokeColor="#000"/>
path標(biāo)簽內(nèi)可存放一切你想要存放的信息，可以是表示一棵樹，一棟房子都隨意，只需要按照相應(yīng)的格式解析出來存放到對象內(nèi)就行了。
//控件自適應(yīng)請重寫onMeasure方法，我這里是直接全屏了。
public class MapView extends View {
private Paint paint;
private Context mContext;
private int[] colors = new int[]{Color.BLUE,Color.CYAN,Color.YELLOW,Color.GREEN};
private List pathItemList = new ArrayList<>();
GestureDetector gestureDetector;
ScaleGestureDetector scaleGestureDetector;
//雙指操作下的中心位置
float focusX = 0,focusY = 0;
float posX = 0, posY = 0;
int viewWidth, viewHeight;
//是否初始化了
boolean hasInitViewSize;
float widthScale, heightScale;
float scaleFactor = 1.0f;
private int imgWidth = 3000,imgHeight=3000;
private MapPathItem selectPathItem;
//地圖最大的矩陣
private RectF mapRectF;
private List users;
private List usersLocationInfo;
private Bitmap userLocationIcon;
private itemClickListener itemClickListener;
public MapView(Context context) {
super(context);
}
public MapView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context) {
this.mContext = context;
this.paint = new Paint();
users = new ArrayList<>();
usersLocationInfo = new ArrayList<>();
userLocationIcon = BitmapFactory.decodeResource(getResources(),R.drawable.avtar_icon);
gestureDetector = new GestureDetector(context, new MySimpleOnGestureDetector());
scaleGestureDetector = new ScaleGestureDetector(context, new MySimpleScaleOnGestureDetector());
thread.start();
}
//雙指縮放
class MySimpleScaleOnGestureDetector extends ScaleGestureDetector.SimpleOnScaleGestureListener {
@Override
public boolean onScale(ScaleGestureDetector detector) {
scaleFactor *= detector.getScaleFactor();
scaleFactor = scaleFactor < 1 ? (float) 1 : scaleFactor > 3 ? 3 : scaleFactor;
focusX = detector.getFocusX();
focusY = detector.getFocusY();
invalidate();
return true;
}
}
//單指移動(dòng)
class MySimpleOnGestureDetector extends GestureDetector.SimpleOnGestureListener {
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
posX -= distanceX;
posY -= distanceY;
invalidate();
return true;
}
@Override
public boolean onSingleTapConfirmed(MotionEvent e) {
//點(diǎn)擊區(qū)域是艙段區(qū)域才觸發(fā)listener
for (MapPathItem item:pathItemList){
if(item.isTouch(e.getX()-posX,e.getY()-posY,scaleFactor)){
onTouch(e.getX(),e.getY());
}
}
return super.onSingleTapConfirmed(e);
}
}
public void initSize() {
viewWidth = getWidth();
viewHeight = getHeight();
if (viewWidth < 0 && viewHeight < 0) {
return;
}
hasInitViewSize = true;
widthScale = viewWidth / imgWidth;
heightScale = viewHeight / imgHeight;
scaleFactor = Math.min(widthScale, heightScale);
scaleFactor = 1f;
posX = viewWidth / 2 - imgWidth / 2;
posY = viewHeight / 2 - imgHeight / 2;
}
@Override
public boolean onTouchEvent(MotionEvent event) {
scaleGestureDetector.onTouchEvent(event); //雙指縮放
gestureDetector.onTouchEvent(event); //單指移動(dòng)
//點(diǎn)擊區(qū)域事件
return true;
}
@RequiresApi(api = Build.VERSION_CODES.N)
public void refreshUserLocation(List users){
usersLocationInfo.clear();
Log.e("users", String.valueOf(users.size()));
for (MapPathItem item:pathItemList){
users.forEach(userLocationInf -> {
if(item.getCabinId().equals(userLocationInf.getCabinId())){
usersLocationInfo.add(item);
}
});
}
Log.e("usersLocationInfosize", String.valueOf(usersLocationInfo.size()));
invalidate();
}
private void onTouch(float x, float y) {
for (MapPathItem item:pathItemList){
if(item.isTouch(x-posX,y-posY,scaleFactor)){
selectPathItem = item;
}
}
//從新繪制
if(selectPathItem!=null){
//設(shè)置點(diǎn)擊事件
//ToastShow.showText(getContext(),"點(diǎn)擊了item"+selectPathItem.getCabinId());
if(itemClickListener!=null){
itemClickListener.itemClick(selectPathItem);
}
Log.e("選中",selectPathItem.toString());
invalidate();
}
}
public interface itemClickListener{
void itemClick(MapPathItem selectPathItem);
}
private void checkBounds() { //檢查邊界
if (scaleFactor > widthScale) {
posX = Math.min(posX, (scaleFactor - 1) * (imgWidth / 2));
posX = Math.max(posX, viewWidth - imgHeight*scaleFactor - (scaleFactor - 1) * (imgWidth / 2));
} else {
posX = Math.max(posX, (scaleFactor - 1) * (imgWidth / 2));
posX = Math.min(posX, viewWidth - imgWidth*scaleFactor - (scaleFactor - 1) * (imgWidth / 2));
}
if (scaleFactor > heightScale) {
posY = Math.min(posY, (scaleFactor - 1) * (imgHeight / 2));
posY = Math.max(posY, viewHeight - imgHeight*scaleFactor - (scaleFactor - 1) * (imgHeight / 2));
} else {
posY = Math.max(posY, (scaleFactor - 1) * (imgHeight / 2));
posY = Math.min(posY, viewHeight - imgHeight*scaleFactor - (scaleFactor - 1) * (imgHeight / 2));
}
}
//子線程加載svg
private Thread thread = new Thread(new Runnable() {
@Override
public void run() {
InputStream inputStream = mContext.getResources().openRawResource(R.raw.cabins);
//數(shù)據(jù)流轉(zhuǎn)化為path DocumentBuilderFactory dom解析工廠
DocumentBuilderFactory documentBuilderFactory = DocumentBuilderFactory.newInstance();
try {
DocumentBuilder documentBuilder = documentBuilderFactory.newDocumentBuilder();
Document document = documentBuilder.parse(inputStream);
//根節(jié)點(diǎn)
Element documentElement = document.getDocumentElement();
String attribute = documentElement.getAttribute("android:viewportWidth");
Log.e("viewportWidth",attribute);
//子節(jié)點(diǎn)
NodeList nodeList = documentElement.getElementsByTagName("path");
//svg的上下左右邊界
float left = -1,top = -1,right = -1,bottom = -1;
//解析子節(jié)點(diǎn)屬性
for(int i = 0;i
Element element = (Element)nodeList.item(i);
//拿到路徑
String pathData = element.getAttribute("android:pathData");
String dataName = element.getAttribute("android:dataName");
String cabinId = element.getAttribute("android:cabinId");
Path path = PathParser.createPathFromPathData(pathData);
MapPathItem pathItem = new MapPathItem(path);
pathItem.setDataName(dataName);
pathItem.setCabinId(cabinId);
pathItem.setColor(Color.BLACK);
pathItemList.add(pathItem);
RectF rectF = new RectF();
path.computeBounds(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.min(rectF.right,right);
bottom = bottom ==-1?rectF.bottom:Math.min(rectF.bottom,bottom);
}
mapRectF = new RectF(left,top,right,bottom);
measure(getMeasuredWidth(),getMeasuredHeight());
handler.sendEmptyMessage(1);
} catch (Exception e) {
e.printStackTrace();
}
}
});
@SuppressLint("HandlerLeak")
private Handler handler = new Handler(){
@RequiresApi(api = Build.VERSION_CODES.N)
@Override
public void handleMessage(@NonNull Message msg) {
super.handleMessage(msg);
invalidate();
}
};
@RequiresApi(api = Build.VERSION_CODES.N)
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (!hasInitViewSize) {
initSize();
}
checkBounds();
canvas.translate(posX,posY);
//canvas.scale(scaleFactor, scaleFactor, focusX-posX, focusY-posY);
canvas.scale(scaleFactor,scaleFactor);
for (MapPathItem pathItem : pathItemList) {
pathItem.drawItem(canvas,paint,false);
}
if(selectPathItem!=null){
Log.e("sadasd","重繪");
selectPathItem.drawItem(canvas,paint,true);
}
if(usersLocationInfo.size()!= 0 ){
usersLocationInfo.forEach(user->{
user.drawUserIcon(canvas,paint,userLocationIcon);
});
}
}
public void setItemClickListener(MapView.itemClickListener itemClickListener) {
this.itemClickListener = itemClickListener;
}
}
public class MapPathItem {
//畫筆路徑
private Path path;
private int color;
private String dataName;
private String cabinId;
public MapPathItem(Path path) {
this.path = path;
}
public void setColor(int color) {
this.color = color;
}
public void drawItem(Canvas canvas, Paint paint,boolean isSelect){
if(isSelect){
//畫邊框
paint.setStrokeWidth(4);
paint.setStyle(Paint.Style.STROKE);
paint.setShadowLayer(6,0,0,Color.RED);
paint.setColor(Color.BLACK);
canvas.drawPath(path, paint);
//填充色
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.FILL);
paint.setStrokeWidth(4);
}else {
//清除陰影
paint.clearShadowLayer();
//畫邊框
paint.setStrokeWidth(2);
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.BLACK);
canvas.drawPath(path, paint);
//填充色
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.FILL);
paint.setStrokeWidth(2);
}
canvas.drawPath(path, paint);
}
public void drawUserIcon(Canvas canvas, Paint paint, Bitmap b) {
RectF rectF = new RectF();
path.computeBounds(rectF,true);
Rect src=new Rect(0,0,b.getWidth(),b.getHeight());
canvas.drawBitmap(b,src,rectF,paint);
}
/**
* 判斷當(dāng)前區(qū)域是否選中
* @param x
* @param y
* @param scaleFactor 縮放倍數(shù)
* @return
*/
public boolean isTouch(float x,float y,float scaleFactor){
RectF rectF = new RectF();
path.computeBounds(rectF,true);
//區(qū)域
Region region = new Region();
region.set((int)(rectF.left*scaleFactor),(int)(rectF.top*scaleFactor),(int)(rectF.right*scaleFactor),(int)(rectF.bottom*scaleFactor));
return region.contains((int)x,(int)y);
}
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;
}
}
總結(jié)
以上是生活随笔為你收集整理的android地图路径绘制,android：利用svg的path路径+canvas 开发自定义地图控件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android avd 使用方法,And
- 下一篇： android设置gradle位置,an