Android实现四色填充地图功能
先上效果图:
明显是一个自定义view,先解析svg资源(该资源不严谨,请勿在正规),获取每个省的path,再用四色算法设置每个省的颜色,先列举主要方法解析svg文件
InputStream inputStream = context.getResources().openRawResource(R.raw.china);
proviceItems = new ArrayList<>();
try {
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = null;
builder = factory.newDocumentBuilder();
Document document = builder.parse(inputStream);
Element rootElement = document.getDocumentElement();
NodeList items = rootElement.getElementsByTagName("path");
items就是每个省份的边框了,遍历全部省份确定地图的最左最右最上最下,从而确定地图的真正宽高,然后再对比自定义View的宽度,确定画图的缩放比例,再定义自定义View的高度
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = MeasureSpec.getSize(widthMeasureSpec);
if (totalRect != null && width != 0) {
//获取到地图的矩形的宽度
double mapWidth = totalRect.width();
//获取到比例值
scale = (float) (width / mapWidth);
//用宽度重新定义高度
heightMeasureSpec = MeasureSpec.makeMeasureSpec((int) (totalRect.height() * scale), MeasureSpec.EXACTLY);
}
super.onMeasure(widthMeasureSpec,heightMeasureSpec);
}
重写onDraw方法,把每个省依次华进去,如果有点击事件,被点击有变化的话,多数情况下都是要最后一个话
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (proviceItems != null) {
int tatalNum = proviceItems.size();
canvas.save();
canvas.scale(scale, scale);
ProviceItem selsetProviceItem = null;
// 先画没被选中的
for (int i = 0; i < tatalNum; i++) {
if (!proviceItems.get(i).isSelect()) {
proviceItems.get(i).drawItem(canvas, paint);
} else {
selsetProviceItem = proviceItems.get(i);
}
}
//被选中的最后画,因为被选中的有阴影
if (selsetProviceItem != null) {
selsetProviceItem.drawItem(canvas, paint);
}
}
}
把每个省都画到地图上的方法
paint.setStrokeWidth(1);
paint.setColor(drawColor);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawPath(path, paint);
if (isSelect) {
//被选择设置一下阴影
paint.setShadowLayer(20, 0, 0, Color.WHITE);
} else {
//没选中去掉阴影
paint.clearShadowLayer();
}
canvas.drawPath(path, paint);
接下来就是关于颜色的选择问题了,写一个获得颜色的工具类,主要参数和构造方法
//存放颜色种类,并非真正的颜色
private int[] colorTypes;
//板块接壤矩阵,1为接壤
private int[][] isBorder;
//准备填充的颜色列表
private int[] colors;
//颜色多少种类
private int TYPE_SIZE ;
//总共有几个板块
private int plateCount;
public ColorFillUtil(int[][] isBorder, int[] colors) throws Exception{
plateCount = isBorder.length;
if (plateCount != isBorder[0].length) {//板块相邻关系必须是方阵,不能是矩阵
throw new Exception("colors's length must be equal to isBorder's length!");
}
this.colors = colors;
TYPE_SIZE = colors.length;
this.isBorder = isBorder;
}
思路就是从第一个省份开始慢慢尝试填充颜色,尝试方法就是从可选的颜色种类中,依次填充进去,然后再判断是否和已经填充的身份,是否有接壤并且同个颜色的,如果有就换一个颜色,如果最后每个颜色都尝试了还是不行就说明上一个板块填充有误,要回退到上个板块,如果上板块还是不行再回退,最后直到每个板块都设置好颜色,颜色种类如果小于4可能会填充失败。详细见后面代码,以下是自定义省份的been
public class ProviceItem {
private int index;
private Path path;
//省份颜色
private int drawColor;
//是否被点击
private boolean isSelect;
public ProviceItem(Path path) {
this.path = path;
}
public void setDrawColor(int drawColor) {
this.drawColor = drawColor;
}
public void setIndex(int index) {
this.index = index;
}
public boolean isSelect() {
return isSelect;
}
public void setSelect(boolean select) {
isSelect = select;
}
public void drawItem(Canvas canvas, Paint paint) {
paint.setStrokeWidth(1);
paint.setColor(drawColor);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
canvas.drawPath(path, paint);
if (isSelect) {
//被选择设置一下阴影
paint.setShadowLayer(20, 0, 0, Color.WHITE);
} else {
//没选中去掉阴影
paint.clearShadowLayer();
}
canvas.drawPath(path, paint);
}
public boolean isTouch(float x, float y) {
//创建一个矩形
RectF rectF = new RectF();
//获取到当前省份的矩形边界
path.computeBounds(rectF, true);
//创建一个区域对象
Region region = new Region();
//将path对象放入到Region区域对象中
region.setPath(path, new Region((int) rectF.left, (int) rectF.top, (int) rectF.right, (int) rectF.bottom));
//返回是否这个区域包含传进来的坐标
boolean resule = region.contains((int) x, (int) y);
//无法通过代码确定两个省份是否接壤所以只能获取下标,人工构造省份相邻矩阵,如果
// if (result) {
// Log.d("ProviceItemIndex-----", index + "");
// }
return result;
}
}
自定义view的代码
public class MapView extends View {
private Paint paint;
private Context context;
//整个地图所占用的矩形,在重新设配之前
private RectF totalRect;
private List<ProviceItem> proviceItems;
//绘制地图的颜色
private int[] colorArray = new int[]{0xFF1383f2, 0xFFFFDC00, 0xFFFF3D33, 0xFF4ADE8C};
//适配比例
private float scale = 0;
int[] colors;
//中国省份接壤关系矩阵,划分34个省份,自治区,市和特别行政区等,但是多一个颜色表示国外的颜色项目中最后没有用到
int[][] isBorder = {
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1},
{0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 1},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
};
public MapView(Context context) {
super(context);
}
public MapView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context);
}
public MapView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
private void init(Context context) {
this.context = context;
paint = new Paint();
paint.setAntiAlias(true);
//开线程解析数据
loadThread.start();
}
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = MeasureSpec.getSize(widthMeasureSpec);
if (totalRect != null && width != 0) {
//获取到地图的矩形的宽度
double mapWidth = totalRect.width();
//获取到比例值
scale = (float) (width / mapWidth);
//用宽度重新定义高度
heightMeasureSpec = MeasureSpec.makeMeasureSpec((int) (totalRect.height() * scale), MeasureSpec.EXACTLY);
}
super.onMeasure(widthMeasureSpec,heightMeasureSpec);
}
protected void onDraw(Canvas canvas) {
//如果省份数据还没加载出来,实际缩放比例没定义出来啥都不用干
if (proviceItems != null||scale==0) {
super.onDraw(canvas);
int tatalNum = proviceItems.size();
canvas.save();
canvas.scale(scale, scale);
ProviceItem selsetProviceItem = null;
// 先画没被选中的
for (int i = 0; i < tatalNum; i++) {
if (!proviceItems.get(i).isSelect()) {
proviceItems.get(i).drawItem(canvas, paint);
} else {
selsetProviceItem = proviceItems.get(i);
}
}
//被选中的最后画,因为被选中的有阴影
if (selsetProviceItem != null) {
selsetProviceItem.drawItem(canvas, paint);
}
}
}
private Thread loadThread = new Thread(new Runnable() {
public void run() {
InputStream inputStream = context.getResources().openRawResource(R.raw.china);
proviceItems = new ArrayList<>();
try {
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = null;
builder = factory.newDocumentBuilder();
Document document = builder.parse(inputStream);
Element rootElement = document.getDocumentElement();
NodeList items = rootElement.getElementsByTagName("path");
//定义一个不可能存在屏幕上的很右边的点Integer.MAX_VALUE作为最左边,同理定义一个不能存在屏幕上的很左边的点-1作为为最左边
//因为循环每个省份的最左最右最上最下,左边下标只会越来越小
float left = Integer.MAX_VALUE;
float right = -1;
float top = Integer.MAX_VALUE;
float bottom = -1;
for (int i = 0; i < items.getLength(); i++) {
Element element = (Element) items.item(i);
String pathData = element.getAttribute("android:pathData");
Path path = PathParser.createPathFromPathData(pathData);
ProviceItem proviceItem = new ProviceItem(path);
//设置省份下标
//proviceItem.setIndex(i);
proviceItems.add(proviceItem);
RectF rectF = new RectF();
path.computeBounds(rectF, true);
left = Math.min(left, rectF.left);
right = Math.max(right, rectF.right);
top = Math.min(top, rectF.top);
bottom = Math.max(bottom, rectF.bottom);
}
//创建整个地图
totalRect = new RectF(left, top, right, bottom);
try {
if (colors == null) {
colors = new ColorFillUtil(isBorder, colorArray).getColors();
int totalNumber = proviceItems.size();
for (int i = 0; i < totalNumber; i++) {
proviceItems.get(i).setDrawColor(colors[i]);
}
handler.sendEmptyMessage(0);
}
} catch (Exception e) {
e.printStackTrace();
}
} catch (ParserConfigurationException e) {
e.printStackTrace();
} catch (SAXException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
});
private Handler handler = new Handler(Looper.getMainLooper()) {
public void handleMessage(@NonNull Message msg) {
//返回主线程调用以下方法
//重新测量,调用onMeasure
requestLayout();
//重新绘图,系统调用onDraw
invalidate();
}
};
public boolean onTouchEvent(MotionEvent event) {
//将当前手指触摸到位置传过去 判断当前点击的区域
handlerTouch(event.getX(), event.getY());
return super.onTouchEvent(event);
}
/**
* 判断区域
*
* @param x
* @param y
*/
private void handlerTouch(float x, float y) {
//判空
if (proviceItems == null || proviceItems.size() == 0) {
return;
}
for (ProviceItem proviceItem : proviceItems) {
//入股点击的是这个省份的范围之内 就把当前省份的封装对象绘制的方法 传一个true
proviceItem.setSelect(proviceItem.isTouch(x / scale, y / scale));
}
postInvalidate();
}
颜色选择工具类
/**
* 板块颜色填充工具
*/
public class ColorFillUtil {
//存放颜色种类,并非真正的颜色
private int[] colorTypes;
//板块接壤矩阵,1为接壤
private int[][] isBorder;
//准备填充的颜色列表
private int[] colors;
//颜色多少种类
private int TYPE_SIZE ;
//总共有几个板块
private int plateCount;
public ColorFillUtil(int[][] isBorder, int[] colors) throws Exception{
plateCount = isBorder.length;
if (plateCount != isBorder[0].length) {//板块相邻关系必须是方阵,不能是矩阵
throw new Exception("colors's length must be equal to isBorder's length!");
}
this.colors = colors;
TYPE_SIZE = colors.length;
this.isBorder = isBorder;
}
/**
* 获取最后的结果
* @return
*/
public int[] getColors() {
colorTypes = new int[plateCount];
int index = 0;
int colorType = 0;
while (index < plateCount) {
if (setColor(index, colorType)) {
//设置颜色种类暂时成功,接着下一个,直到全部颜色设置完成,设置颜色种类从0开始尝试
index++;
colorType = 0;
} else {
//找不到合适的颜色要回退,上一个板块修改颜色
index--;
colorType = colorTypes[index] + 1;
if (index == 0)
//无法求解,可能是是颜色种类太少
return null;
}
}
return getRealColors();
}
/**
* 返回真正的颜色列表
* @return
*/
private int[] getRealColors() {
int[] result = new int[plateCount];
for (int i = 0; i < plateCount; i++) {
result[i] = colors[colorTypes[i]];
}
return result;
}
/**
* 尝试填充颜色 填充成功返回true
* @param index 准备填充的板块下标
* @param colorType 准备填充的颜色种类
* @return
*/
private boolean setColor(int index, int colorType) {
if (colorType >= TYPE_SIZE) return false;
while (colorType < TYPE_SIZE) {
//是否可以设置颜色种类
boolean canSet = true;
//循环判断准备填充的颜色与之前的颜色是否冲突
for (int i = 0; i < index; i++) {
//isBorder[i][index] == 1 表示之前已经填充的第i个板块和准备填充的板块是接壤的
//colorType == colorTypes[i] 同时准备填充的颜色种类又是一样的,则准备填充的颜色要改变,再重新尝试填充
if (isBorder[i][index] == 1 && colorType == colorTypes[i]) {
++colorType;
canSet = false;
break;
}
}
if (canSet) {
colorTypes[index] = colorType;
return true;
}
}
//找不到合适的颜色,要回退
return false;
}
}
部分资源文件
https://pan.baidu.com/s/1Tgq84epnaFhmiEBotGeBgw
评论