SVG的画台湾地图

最新推荐文章于 2023-09-12 16:29:27 发布
最新推荐文章于 2023-09-12 16:29:27 发布
阅读量1.3k 收藏
点赞数
分类专栏： Android的UI 文章标签： android svg
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/Poisx/article/details/72834121
版权

在Android比较复杂的界面就要使用SVG比较简单
使用步骤
1. 下载台湾地图的SVG
2. 用这个网站 将svg资源转换成相应的 Android代码
3. 利用Xml解析SVG的代码 封装成javaBean 最重要的得到Path
4. 重写OnDraw方法 利用Path绘制台湾地图
5. 重写OnTouchEvent方法，记录手指触摸位置，判断这个位置是否坐落在某个省份上

Path的分析

  1. M = moveto(M X,Y) ：将画笔移动到指定的坐标位置，相当于 android Path 里的moveTo()
  2. L = lineto(L X,Y) ：画直线到指定的坐标位置，相当于 android Path 里的lineTo()
  3. H = horizontal lineto(H X)：画水平线到指定的X坐标位置
  4. V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
  5. C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
  6. S = smooth curveto(S X2,Y2,ENDX,ENDY) 同样三次贝塞尔曲线，更平滑
  7. Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
  8. T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射 同样二次贝塞尔曲线，更平滑
  9. A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线 ，相当于arcTo()
  10. Z = closepath()：关闭路径（会自动绘制链接起点和终点）
android:pathData="M541.02,336.29L541.71,336.09
                L542.54,337.38L543.77,338.27
                L543.53,338.58L545.92,338.99.8,350.12L561.12,349.61L562.97,349.6L563.89,349.94
                L563.48,350.21L563.6,351.15L562.98,351.84L562.99,353.94L562.28,353.68L562.06,3
                53.97L561.87,355.49L561.13,355.88L561.38,356.41L560.77,357.72L561.33,357.73
                。。。。。
                L562.06,359L563.49,358.5L563.75,357.85L564.17,358.09L564.64
                ,361.19L565.52,361.68L564.51,362.21L564.67,363.38L565.17,363.21L565.35,364.41
                L566.19,364.53L566.23,365.29L567.26,365L568.99,365.25L569.63,364.91
                L539.3,337.63L539.84,336.78L540.31,336.88z" />
[颜色16进制地址] (http://www.cnblogs.com/zhxiaomiao/archive/2010/07/29/1787604.html)



**颜色要标准16进制**
**下面就是画台湾地图**

package com.math.activity.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Handler;
import android.os.Message;
import android.preference.PreferenceActivity;
import android.provider.DocumentsContract;
import android.support.annotation.Nullable;
import android.support.v4.view.GestureDetectorCompat;
import android.util.AttributeSet;
import android.util.Log;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;

import com.math.activity.R;
import com.math.activity.utils.PathParser;
import com.math.activity.utils.ProvinceItem;

import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.NodeList;
import org.xml.sax.SAXException;

import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;

/**
* 作者 : songli
* 时间 : 2017/6/1 15:21
* QQ : 2734030745
* 邮箱 :15850774503@163.com
*/

public class MapView extends View {
private static final String TAG = “MapView”;
private Context context;
private List itemList = new ArrayList();

private int[] colorArray = new int[]{0xFF000000, 0xFFFF0000, 0x80800000, 0x80000000};

private Paint paint;
/**
 * 每一个省份
 */
private ProvinceItem selectItem;


//放大陪数
private float scale = 1.3f;

private GestureDetectorCompat gestureDetectorCompat;

public MapView(Context context) {
    this(context, null);
}

public MapView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);

    init(context);
}

private void init(Context context) {
    this.context = context;
    paint = new Paint();
    paint.setAntiAlias(true);

    //加载SVG数据
    loadDateHhread.start();
    gestureDetectorCompat = new GestureDetectorCompat(context, new GestureDetector.SimpleOnGestureListener(){
        @Override
        public boolean onDown(MotionEvent e) {
            handlerTouch(e.getX(), e.getY());
            return super.onDown(e);
        }
    });
}

/**
 *  处理触摸事件的方法
 * @param x
 * @param y
 */
private void handlerTouch(float x, float y) {

    if (itemList != null){
        ProvinceItem temp = null;
        for (ProvinceItem item :itemList){
            //放大系数
            if (item.isTouch((int)(x / scale),(int)(y / scale))){

                temp = item;
                break;
            }
        }
        if (temp != null){
            selectItem = temp;
            postInvalidate();
        }

    }


}


Thread loadDateHhread = new Thread() {
    @Override
    public void run() {
        //拿到svg图片流
        InputStream inputStream = context.getResources().openRawResource(R.raw.taiwan);
        DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
        DocumentBuilder builder = null;


        try {
            builder = factory.newDocumentBuilder();
            Document doc = builder.parse(inputStream);

            //xml的path解析
            Element rootElement = doc.getDocumentElement();
            NodeList items = rootElement.getElementsByTagName("path");

            for (int i = 0; i < items.getLength(); i++) {
                Element element = (Element) items.item(i);
                String pathData = element.getAttribute("android:pathData");
                Log.d("tuch", pathData);
                //拿到path  封装ProvinceItem中
                Path path = PathParser.createPathFromPathData(pathData);
                ProvinceItem provinceItem = new ProvinceItem(path);
                itemList.add(provinceItem);

                handler.sendEmptyMessage(1);
            }
        } catch (SAXException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        } catch (ParserConfigurationException e) {
            e.printStackTrace();
        }

    }
};


Handler handler = new Handler() {
    @Override
    public void handleMessage(Message msg) {

        if (itemList != null) {

            int totalNumber = itemList.size();
           // Log.d(TAG, "次数：" + totalNumber);
            for (int i = 0; i < totalNumber; i++) {
                /*int color = Color.WHITE;*/
                int color = Color.YELLOW;
                int flag = i;
                Log.d(TAG, "次数：" + i);
                //分配颜色
                switch (flag) {
                    case 1:
                    case 5:
                    case 9:
                    case 13:
                    case 17:
                    case 20:
                        Log.d(TAG, "颜色：" + flag);

                        color = colorArray[0];
                        break;
                    case 2:
                    case 6:
                    case 10:
                    case 14:
                    case 18:
                    case 21:
                        Log.d(TAG, "颜色：" + flag);
                        color = colorArray[1];
                        break;
                    case 3:
                    case 7:
                    case 11:
                    case 15:
                    case 19:
                    case 22:
                        color = colorArray[2];
                        Log.d(TAG, "颜色：" + flag);
                        break;
                    case 4:
                    case 8:
                    case 12:
                    case 16:
                    case 0:
                    case 23:
                        color = colorArray[3];
                        Log.d(TAG, "颜色：" + flag);
                        break;
                    default:
                        color = Color.BLACK;
                        break;
                }

                itemList.get(i).setDrawColor(color);
            }

            postInvalidate();
        }
    }
};

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    if (itemList != null) {
        canvas.save();
        canvas.scale(scale, scale);
        for (ProvinceItem provinceItem : itemList) {
            //绘制未被选择
            if (provinceItem != selectItem) {
                provinceItem.draw(canvas, paint, false);
            }
        }

        //绘制选择的
        if (selectItem != null) {
            selectItem.draw(canvas, paint, true);
        }
    }
}


@Override
public boolean onTouchEvent(MotionEvent event) {
//将事件转交给
    return gestureDetectorCompat.onTouchEvent(event);
}

}





**用一个工具类**

package com.math.activity.utils;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.Region;

/**
* 一个区
* 作者 : songli
* 时间 : 2017/6/1 15:31
* QQ : 2734030745
* 邮箱 :15850774503@163.com
*/

public class ProvinceItem {

// 路径
private Path path;
//绘制颜色
private int drawColor;


public ProvinceItem(Path path) {
    this.path = path;
}

/**
 * @param canvas
 * @param paint
 * @param isSelect
 */
public void draw(Canvas canvas, Paint paint, boolean isSelect) {

    if (isSelect) {
        //绘制背景
        paint.setStrokeWidth(2);
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.FILL);
        paint.setShadowLayer(8, 0, 0, 0xfff);

        //path
        canvas.drawPath(path, paint);
        //绘制省份
        paint.clearShadowLayer();
        paint.setColor(drawColor);
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeWidth(2);
        canvas.drawPath(path, paint);
    } else {
           //没有被选择
        paint.clearShadowLayer();
        ;
        //绘制内容
        paint.setStrokeWidth(1);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(drawColor);
        canvas.drawPath(path, paint);

        //绘制边境线
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(0xff00e8f4);

        canvas.drawPath(path, paint);
    }

}

/**
 *  是否在区上
 * @param x
 * @param y
 * @return
 */
public boolean isTouch(int x, int y){
    RectF rectF = new RectF();
    //
    path.computeBounds(rectF, true);

    Region region = new Region();

    region.setPath(path, new Region((int)rectF.left, (int)rectF.right, (int)rectF.top, (int)rectF.bottom));

    return region.contains(x,y);
}
public Path getPath() {
    return path;
}

public void setPath(Path path) {
    this.path = path;
}

public int getDrawColor() {
    return drawColor;
}

public void setDrawColor(int drawColor) {
    this.drawColor = drawColor;
}

}

“`

chen_song_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深圳绘制SVG地图数据
r2673673120的专栏
10-19 2848
在网上找了一圈，没有发现深圳的SVG地图数据，更没有详尽到区级，于是自己花半天时间画了一个，需要的拿去吧[偷笑]
html5 svg世界地图热点动画特效特效代码
03-20
html5 svg世界地图热点动画特效是一款html5 svg绘制圆形世界地图热点线性动画展示特效。
jvectormap 中国地图 (包括香港、台湾、澳门)
weixin_30858241的博客
01-27 1530
一个完整的中国地图（各个省，市。还有国两制），谢谢大家。 忘了网上哪位的范例，我加了些修改。 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>中国地图 (包括香港、台湾、澳门)</title> 4 <style type="te...
Echarts之map地图隐藏港澳台等区域
ZT的专栏
05-18 9220
只是提供一种思路： china.js中找到echarts.registerMap(‘china’, {中的”features”KEY值 形如：{ "id": "710000", "geometry": { "type": "MultiPolygon", "coordinates": [
数据可视化Echarts实现地图系列绘制svg作为底图
最新发布
qq_61788891的博客
09-12 4076
从v5.1.0开始，ECharts 支持在和中使用 SVG 作为底图，所以我们这里直接使用svg。
svg格式 世界地图
03-13
世界地图作为数据可视化和地理信息展示的重要工具，SVG格式的世界地图具有诸多优势。下面将详细阐述SVG格式的特点，以及在制作和使用SVG世界地图时的相关知识点。 1. SVG格式的优势： - **矢量图像**：SVG图像由...
全国各省市SVG地图 全国各省市SVG地图
06-05
全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG...
HTML5 SVG地图旋转动画特效
06-24
HTML5 SVG地图旋转动画特效是一种基于SVG（Scalable Vector Graphics）技术的视觉表现手法，用于创建具有动态效果的地球模型。SVG是一种基于XML的矢量图像格式，它支持交互性和动画，使得在网页上展示复杂的图形变得...
中国地图svg_地图_中国地图的SVG_
10-02
中国地图SVG是一种基于矢量图形格式的中国地理信息表示方式，常用于网页和应用程序中，以提供交互式、可缩放的地图展示。SVG（Scalable Vector Graphics）是一种XML标记语言，可以创建清晰、可无限放大的图形，无论...
SVG 版 世界地图
04-18
SVG版世界地图，文件格式xml，可以通过浏览器打开，适合相关学习~
全国各省市svg地图
10-29
全国各省市，世界svg地图， 新疆维吾尔自治区, 西藏自治区," 内蒙古自治区, 青海省,: 四川省,: 黑龙江省, 甘肃省,: 云南省,: 广西壮族自治区, 湖南省,: 陕西省,: 广东省,: 吉林省,: 河北省,: 湖北省,: 贵州省,: 山东省,: 江西省,: 河南省,: 辽宁省,: 山西省,: 安徽省,: 福建省,: 浙江省,: 江苏省,: 重庆市, 宁夏回族自治区, 海南省, 台湾省, 北京市, 天津市, 上海市, 香港特别行政区,: 澳门特别行政区,:
letswrite-taiwan-map-basic:D3、Vue 画一个台湾地图
04-30
D3、Vue 画一个台湾地图 笔记文： Demo：
中国 地图 Chinamap svg 格式的
01-25
中国 地图 Chinamap svg 格式的中国 地图 Chinamap svg 格式的中国 地图 Chinamap svg 格式的中国 地图 Chinamap svg 格式的
台湾地图shp
03-22
台湾各个县市的详细地图信息，从当地政府网站下载，保证准确
台灣地區行政區劃矢量文件
03-07
台灣地區行政區劃文件，具體到各個縣，不包含POI以及道路等相關敏感信息，請放心下載。
svg 地图_一键生成全球任意城市的路网地图
weixin_39987313的博客
12-10 3850
今天给大家伙推荐一款设计神器，做设计的小伙伴可能会非常喜欢，当然，小白也能使用。输入全球任意城市名称，一键生成该城市的路网数据。1 City roadsCity roads 是一个让人惊艳的路网地图生成网站，它可以一键生成全球任意城市的路网地图，你可以修改路网地图的背景颜色和线条颜色，生成多张不同风格的路网地图。它的使用方法非常简单，我们只需要在网站的搜索框输入你需要生成地图的城市，这里...
中国地图制图规范
热门推荐
lntu_ling
02-21 1万+
一、行政区界线 1、疆域范围 完整的中国疆域除包括陆地，台湾岛，海南岛，各群岛和岛屿，还应该包括与陆地毗邻的渤海（内海），黄海，东海，南海及台湾以东的太平洋等辽阔海域，在绘制中国全图时，需要保证四至范围的完整 2、未定国界 未定国界全长453米，目前，乌孜别里山口以北绘制已定国界，以南沿萨雷阔勒分水岭标绘未定国界 3、海上界线 我国地图只表示位于南海的海上界线，称为海上岛屿归属范围...
用SVG实现动态交互式地图
做最好的自己
06-04 1万+
用SVG实现动态交互式地图SVG是目前最火热的图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形，它是基于XML，由W3C联盟进行开发。SVG可以实现无损缩放，在性能上要比其它格式的图片更好，今天教大家用SVG实现一个动态交互式地图，先上效果图： 一、 实现思路 下载含有台湾地图的SVG，地图资源可以在这个网站上https://www.am
android svg动画
05-19
在 Android 中使用 SVG 动画可以通过两种方式实现：通过 AnimatedVectorDrawable 或使用 SVG 库和动画框架。 1. AnimatedVectorDrawable AnimatedVectorDrawable 是 Android 中的矢量图动画库。它允许开发者创建逐...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值