有趣的自定义View —— SVG区域点击交互

一，前期基础知识储备

实现效果如下：两张SVG图片，实现点击交互，被点击的区域显示特征色。

SVG图片点击交互

 

1）SVG是什么？

SVG 文件是纯粹的 XML文件。

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用来定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• SVG 是万维网联盟的标准
• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

栅格图

栅格图也称位图，它由像素点组成，每个像素点分配特定的色值和位置。我们平时生活和工作中遇到的图像大部分都是栅格图，它对图片在空间和亮度上都做了离散化。

矢量图

矢量的定义为既有大小又有方向的几何对象，那矢量图顾名思义为由矢量组成的图像。矢量图由矢量定义的直线和曲线组成，可以放在特定位置使用颜色填充，它基于数学公式计算获得，所以无论放大还是缩小都不会失真。

2）SVG优势是什么？

与其他图像格式相比，使用 SVG 的优势在于：

• SVG 可被非常多的工具读取和修改（比如记事本）
• SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大
• SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
• SVG 可以与 Java 技术一起运行
• SVG 是开放的标准
• SVG 文件是纯粹的 XML

3）SVG工具——用以创建SVG图片

① PNG 转SVG图片：在线网站 https://www.pngtosvg.com/

上传一张平常的PNG图片，然后网站将其转换为SVG图片；

② SVG转vector标签：在线网站 https://inloop.github.io/svg2android/ 

通常情况下，可以直接使用一张SVG图片（标签为svg）；但有时需要转为vector标签使用。

4）SVG内部指令

仅作了解，Android开发者使用上述两个工具即可实现正常使用。

• M = moveto 相当于 android Path 里的moveTo(),用于移动起始点
• L = lineto 相当于 android Path 里的lineTo()，用于画线
• H = horizontal lineto 用于画水平线
• V = vertical lineto 用于画竖直线
• C = curveto 相当于cubicTo(),三次贝塞尔曲线
• S = smooth curveto 同样三次贝塞尔曲线，更平滑
• Q = quadratic Belzier curve quadTo()，二次贝塞尔曲线
• T = smooth quadratic Belzier curveto 同样二次贝塞尔曲线，更平滑
• A = elliptical Arc 相当于arcTo()，用于画弧
• Z = closepath 相当于closeTo(),关闭path作者：MinicupSimon

坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下；
所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系；
指令和数据间的空格可以省略；同一指令出现多次可以只用一个。

5）直接将SVG作为图片源需要的配置

// 增加配置信息
android {
  defaultConfig {
    vectorDrawables.useSupportLibrary = true
  }
}

// View中使用声明
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_search"/>

 

二，上代码，具体实现

1）下载分别代表China和USA的SVG图片；（文末资源中有给出）

https://www.amcharts.com/svg-maps/?map=china

2）将下载得到的SVG格式图片转为vector标签；（使用上面的网站）

手动作图 — 提醒你们

3）自定义View继承View；

核心思路：读取SVG图片中的“pathData”信息，将其转为Android中的Path路径，最后借助Canvas绘制出来。

自定义View代码如下：

package com.seotm.coloring.china.view;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.os.Handler;
import android.os.Looper;
import android.support.v4.graphics.PathParser;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

import com.seotm.coloring.china.bean.SvgItem;

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;


/**
 * ① 不是直接使用svg图片，需要将svg图片转换为vector标签页才能使用 利用网站在线转换；
 * ② svg图片本身要有足够的颜色信息，意味着初始的那张png图片必须是色彩丰富的，不能是黑白的；
 */
public class SvgView extends View {

    private Context context;//上下文
    private List<SvgItem> itemList;//各省地图列表 各省地图颜色 与路径
    private Paint paint;    //初始化画笔
    private SvgItem select; //选中的省份
    private RectF totalRect;//中国地图的矩形范围
    private float scale = 1.0f;//中国地图的缩放比例
    private int resId;

    public SvgView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }


    public SvgView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void init(Context context, int resId) {
        this.context = context;
        paint = new Paint();
        paint.setAntiAlias(true);
        itemList = new ArrayList<>();
        loadThread.start();
        this.resId = resId;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //获取当前控件的高度 让地图宽高适配当前控件
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        if (totalRect != null) {
            double mapWidth = totalRect.width();
            scale = (float) (width / mapWidth); //获取控件高度为了让地图能缩放到和控件宽高适配
        }
        setMeasuredDimension(MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
                MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY));
    }

    /*不是直接使用svg图片，需要将svg图片转换为vector标签页才能使用*/
    private Thread loadThread = new Thread() {
        @Override
        public void run() {
            final InputStream inputStream = context.getResources().openRawResource(resId);// 读取地图svg 把要解析的XML文档转化为输入流，以便 DOM 解析器解析它
            DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); // 获取DocumentBuilderFactory实例，调用 DocumentBuilderFactory.newInstance() 方法得到创建 DOM 解析器的工厂
            DocumentBuilder builder = null;
            try {
                builder = factory.newDocumentBuilder(); // 调用工厂对象的 newDocumentBuilder方法得到 DOM 解析器对象
                Document doc = builder.parse(inputStream);// 解析svg的输入流 调用 DOM 解析器对象的 parse()方法解析XML文档，得到代表整个文档的Document对象，进行可以利用DOM特性对整个XML文档进行操作了
                Element rootElement = doc.getDocumentElement(); // 得到 XML文档的根节点
                NodeList items = rootElement.getElementsByTagName("path");

                NodeList items2 = rootElement.getChildNodes(); // 得到节点的子节点
                String str = rootElement.getAttribute("");
                //获取地图的整个上下左右位置，
                float left = -1;
                float right = -1;
                float top = -1;
                float bottom = -1;
                List<SvgItem> list = new ArrayList<>();
                for (int i = 0; i < items.getLength(); i++) {
                    Element element = (Element) items.item(i);
                    String pathData = element.getAttribute("android:pathData"); // 取得节点的属性值 可以读取path内的具体属性值
                    String idData = element.getAttribute("android:id"); // 具体属性值 — id
                    String colorData = element.getAttribute("android:fillColor"); // 具体属性值 — color

                    Log.d("HorseView", "run_000: " + pathData);
                    Log.d("HorseView", "run_111: " + colorData);
                    Log.d("HorseView", "run_222: " + idData);
                    @SuppressLint("RestrictedApi")
                    Path path = PathParser.createPathFromPathData(pathData);

                    SvgItem SvgItem = new SvgItem(path);//设置路径
                    SvgItem.setDrawColor(colorData);//设置颜色
                    //取每个省的上下左右 最后拿出最小或者最大的来充当 总地图的上下左右
                    RectF rect = new RectF();
                    path.computeBounds(rect, true);
                    left = left == -1 ? rect.left : Math.min(left, rect.left);
                    right = right == -1 ? rect.right : Math.max(right, rect.right);
                    top = top == -1 ? rect.top : Math.min(top, rect.top);
                    bottom = bottom == -1 ? rect.bottom : Math.max(bottom, rect.bottom);
                    list.add(SvgItem);
                }
                itemList = list;
                totalRect = new RectF(left, top, right, bottom);//设置地图的上下左右位置

                //加载完以后刷新界面
                Handler handler = new Handler(Looper.getMainLooper());
                handler.post(new Runnable() {
                    @Override
                    public void run() {
                        requestLayout();
                        invalidate();
                    }
                });
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    };

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        handleTouch(event.getX() / scale, event.getY() / scale);
        return super.onTouchEvent(event);
    }

    private void handleTouch(float x, float y) {
        if (itemList == null) {
            return;
        }
        SvgItem selectItem = null;
        for (SvgItem SvgItem : itemList) {
            if (SvgItem.isTouch(x, y)) {
                selectItem = SvgItem;
            }
        }
        if (selectItem != null) {
            select = selectItem;
            postInvalidate();
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (itemList != null) {
            canvas.save();
            canvas.scale(scale, scale);//把画布缩放匹配到本控件的宽高
            for (SvgItem SvgItem : itemList) {
                if (SvgItem != select) {
                    SvgItem.drawItem(canvas, paint, false);
                } else {
                    SvgItem.drawItem(canvas, paint, true);
                }
            }
        }
    }
}

下面开始重点解析实现的关键： DocumentBuilderFactory解析XML

 

① javax.xml.parsers 包中的DocumentBuilderFactory用于创建DOM模式的解析器对象 ， DocumentBuilderFactory是一个抽象工厂类，它不能直接实例化，但该类提供了一个newInstance方法 ，这个方法会根据本地平台默认安装的解析器，自动创建一个工厂的对象并返回；
② 调用 DocumentBuilderFactory.newInstance() 方法得到创建 DOM 解析器的工厂；

DocumentBuilderFactory doc=DocumentBuilderFactory.newInstance();

 

③ 调用工厂对象的 newDocumentBuilder方法得到 DOM 解析器对象；

DocumentBuilder db=doc.newDocumentBuilder();

④ 把要解析的 XML 文档转化为输入流，以便 DOM 解析器解析它；

final InputStream inputStream = context.getResources().openRawResource(resId);

⑤  调用 DOM 解析器对象的 parse() 方法解析 XML 文档，得到代表整个文档的 Document 对象，进行可以利用DOM特性对整个XML文档进行操作了；

Document doc = builder.parse(inputStream);

⑥ 得到 XML 文档的根节点；

Element rootElement = doc.getDocumentElement(); 

⑦ 得到节点的子节点；

NodeList items = rootElement.getElementsByTagName("path");

⑧ 得到子节点中的各个属性；

Element element = (Element) items.item(i);
String pathData = element.getAttribute("android:pathData");
String idData = element.getAttribute("android:id"); 
String colorData = element.getAttribute("android:fillColor");

⑨ 将得到的pathData转为Android的path类；

Path path = PathParser.createPathFromPathData(pathData);

至此，我们已成功从SVG图片中拿到path路径，然后借助Canvas绘制出来即可。这里有用到手指点击区域的判断，借助JavaBean实现，代码如下：

核心：一条path即为一个JavaBean，这样就可以控制各个path的绘制情况，可以绘制多个，也可以像Demo一样只绘制一个。

public class SvgItem {

    private Path path;

    /**
     * 绘制颜色
     * */
    private String drawColor;
    public void setDrawColor(String drawColor){
        this.drawColor = drawColor;
    }

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

    public void drawItem(Canvas canvas, Paint paint, boolean isSelect){
        if (isSelect){
            //绘制内部颜色
            paint.clearShadowLayer();
            paint.setStrokeWidth(1);
            paint.setStyle(Paint.Style.FILL);
            paint.setColor(0xffffff00); // 填充的颜色为黄色
            canvas.drawPath(path,paint);
            //绘制边界
            paint.setStyle(Paint.Style.STROKE);
            paint.setColor(0xFFD0E8F4);
            canvas.drawPath(path,paint);
        }else {
            paint.setStrokeWidth(2);
            paint.setColor(Color.BLACK);
            paint.setStyle(Paint.Style.FILL);
            paint.setShadowLayer(8,0,0,0xffffff);
            canvas.drawPath(path,paint);
            //绘制边界
            paint.clearShadowLayer();
            paint.setColor(Color.parseColor(drawColor));
            paint.setStyle(Paint.Style.FILL);
            paint.setStrokeWidth(2);
            canvas.drawPath(path,paint);
        }
    }

    /*判断手指点击区域是否落入*/
    public boolean isTouch(float x,float y){
        RectF rectF = new RectF();
        path.computeBounds(rectF,true);
        Region region = new Region();
        region.setPath(path,new Region((int)rectF.left,(int)rectF.top,(int)rectF.right,(int) rectF.bottom));
        return  region.contains((int)x,(int)y);
    }
}

4）Activity内使用，传入资源id即可；

    <com.seotm.coloring.china.view.SvgView
        android:id="@+id/img2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

public class MainActivity1 extends AppCompatActivity {

    private SvgView svgView1, svgView2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_china);
        svgView1 = findViewById(R.id.img1);
        svgView1.init(this, R.raw.china);
        svgView2 = findViewById(R.id.img2);
        svgView2.init(this, R.raw.usa_low);
    }

}

 

最后，在此自定义View提出几个延伸的方向：

① 如何实现上一步颜色绘制的保存？ —— 用集合装载已经被点击的区域的JavaBean，onDraw内绘制前在做判断；

② 如何实现图片的缩放？ —— 建议只采用双指缩放，避免与点击矛盾；

③ 如何绘制代表区域块的数字？ —— 暂时还没有思绪，如何实现非规则path区域内的定位，还望不吝赐教。