【问答】用SVG矢量图形自定义不规则控件——中国地图

1、提出问题

在必问上有一位同学提出了关于不规则项的绘制问题，具体可参照如下链接：https://biwen.csdn.net/question/3399

2、分析问题

■　笔者的分析：
由于指定的图形为不规则的，同时需要根据数据对不规则项设置不同的颜色，滑动到不同的不规则项还需要改变背景色。其中的不规则，就需要开发者去绘制去自定义。

在做复杂的自定义动画的时候，我们的开发者会先定义Path来规划动画的路径。然后再在不同的节点去设置动画。本例中其实也可以参照这个思想去解决问题。矢量图标SVG其实就是定义多个PathData绘制图形的。

■　SVG
在解决问题之前，我们准备一下关于SVG的知识：
https://www.w3school.com.cn/svg/index.asp

由于我们需要解析路径数据PathData，先了解一下：

• M = moveto(M X,Y) ：将画笔移动到指定的座标位置
• L =lineto(L X,Y) ：画直线到指定的座标位置
• H = horizontal lineto(H X)：画水平线到指定的X座标位置
• V = vertical lineto(V Y)：画垂直线到指定的Y座标位置
• C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
• S = smooth curveto(S X2,Y2,ENDX,ENDY)
• Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
• T = smooth quadratic Belzier curveto(T ENDX,EN