参考：
SVG 有一个 <path> 标签，里面有很多个图形指令，而如果由多个M（Moveto）构成的，那么这个<path> 描述的图形可能会很复杂，比如构成一个圈包围一个圈，那么这个时候来了，填色的时候如何填？
比如：下方这两个图形，描述他们的形状是一样的，局别只在于填色规则是 nonzero 还是 evenodd
-
nonzero填色规则如下:- 找到待判断的点
- 从需要判定的点向任意方向发射线，然后计算图形与线段交点的处的走向；
- 计算结果从0开始，每有一个交点处的线段是从左到右的，就加1；每有一个交点处的线段是从右到左的，就减1；
- 这样计算完所有交点后，如果这个计算的结果不等于0，则该点在图形内，需要填充；如果该值等于0，则在图形外，不需要填充
-
evenodd填色规则如下:- 找到待判断的点
- 从需要判定的点向任意方向发射线，然后计算图形与线段交点的个数
- 个数为奇数则该点在图形内，则需要填充；个数为偶数，则该点在图形外，不需要填充
恩，看起来好像比较容易理解，但是怎么实现呢？？？
针对 nonzero 填色规则，目前我采用的是下方这个动图所示的填色方案，嗯，在到达这个动图的填色方案之前，自己瞎搞了好几个算法方案，此文主要记录这些算法的演进过程：
方案一：直白地按照描述细分点执行射线操作判断是否为填色区域
- 找到待判断的点
- 先找到这个<path>所描述的不规则图形的最小外切矩形
- 遍历这个矩形的所有点，找到属于这个 <path> 标签的所有点
- 拆分多个M为单个M
- 为每个M生成多边形，得到多边形点集
- 判断矩形点是否在某个M中的多边形中，如果在，那么就是属于后续需要判断是否需要填色的点
- 然后遍历这些点，执行下面步骤
- 从需要判定的点向任意方向发射线，然后计算图形与线段交点的处的走向
- 选择水平往右方向的射线
- 计算结果从0开始，每有一个交点处的线段是从左到右的，就加1；每有一个交点处的线段是从右到左的，就减1；
- 确定<path>不同M开始所画线段的走向，从左往右加1，从右往左减1
- 计算射线方向与<path>标签所描述图形（准换为多边形)的次数
- 这样计算完所有交点后，如果这个计算的结果不等于0，则该点在图形内，需要填充；如果该值等于0，则在图形外，不需要填充
- 找到点后，每个点用rect去填充（TODO：看起来可能有锯齿，下面的想法可能会解决这个问题）
- 一个想法（此方案好像也能用来实现渐进填色效果，及颜色慢慢往中心点填色）：
- 从左往右，从上至下，先找到第一个带填充的点，设置任意一个初始方向（其实是8个中的任意一个）
- (-1,0)
- (-1,1)
- (0,1)
- (1,1)
- (1,0)
- (1,-1)
- (0,-1)
- (-1,-1)
- 然后按照顺时针更新方向，寻找下一个点
- 当某个方向上存在一个新的点，则进行步骤3
- 当所有方向都找不到一个新的点时，则设置当前点为上一个点，然后重新重新执行步骤2
- 设置刚刚找到的点为当前点，设置当前点的初始方向为当前点到上一个点的方向，执行步骤2
- 当重新找回步骤1中的点时，结束，得出当前多边形的边线，用 stroke 描边，并将这些边点都为已填充状态
- 重新执行步骤1，寻找下一个待填充的点，一次循环下去，直到所有点都变为（多边形并且）已填充
- 从左往右，从上至下，先找到第一个带填充的点，设置任意一个初始方向（其实是8个中的任意一个）
- 或者从点击位置开始慢慢扩散出去填色
碰撞检测
将待判断点与每一个填色点（区域，再小的点，加上宽高也是一个区域）进行坐标对比
恩，实际测试是不太行，问题在哪也不太确定，而且会很耗计算量，因此此方案可行
方案二：图像混合
也尝试过图像混合，但是这明显要多个 Graphics 进行处理，DC 会升高，而且好像还比较难实现，因此不可取
方案三：拆分与合并多边形填色算法
总体思路：将Path中所有图形一个一个处理，每次处理两个多边形图形，然后得到一个新的多边形图形和它的绘制方向，然后将这个新的多边形作为新的输入与下一个图形进行处理，依次循环，最后得到一个多边形，对这个多边形进行填色即可
- 如果两个多边形之间是相交的关系（暂时没想好）（原则上，填色游戏是不会存在一条<path>标签上存在相交关系，因为这会是不同色块，而不同颜色是会分成两条 path）
- 计算相交点，得出3个或多个多边形
- 求出相交的所有交点
- ...
- 如果原始的两个多边形是方向相同
- 依次对这些拆分后的按照步骤1去进行，最后合并得出一个多边形
- 如果两个多边形之间是相离的关系（应该没有吧）（原则上，填色游戏是不会出现一条<path>标签上存在相离关系，因为这会是不同色块，而不同色块是会分成两条 <path>）
经过上面的分析，我们的基本只需要考虑多边形包含填色处理
多个包含关系的多边形填色算法-1
- 判断两个多边形包含关系，得出外部多边形以及内部多边形之分
- 多边形包含关系算法：https://www.zhihu.com/question/26593501
- 如果两个多边形方向相同，则取最外面多边形和他原来的绘制方向作为新的多边形输出
- 如果两个多边形方向相反：
- 求两个多边形之间一条连线，使得这条连线不会和后续待合并的多边形相交
- 连线在在内部多边形上的点为A1
- 连线在外部多边形上的点为A2
- 通过 A1 A2 连接两个多边形，输出一个多边形，过程如下：
- 从A1点开始，按照A1点所在多边形的方向，环绕一圈该多边形回到 A1
- 从A1连接到A2
- 以A2点开始，按照A2点所在多边形的方向，环绕一圈该多边形回到 A2
- 从A2连接到A1
- 最后得到一个方向为外部多边形方向，环绕两个多边形空白地方的新多边形
- 求两个多边形之间一条连线，使得这条连线不会和后续待合并的多边形相交
多个包含关系的多边形填色算法-2
在上面的算法1会出现一种问题
新生成的多边形会不断闭合空间，因此当多边形数量很多的时候，极有可能会出现空间已经很闭合，从而出现找不到一条连线去连接后续的多边形
因此我们需要改进算法1：当遇到不能找到连线的时候，往前回滚异步，生成另外一个新的多边形，然后重新寻找，知道找到，或者深度遍历完所有情况都找不到。差不多为下面的步骤
- 每次生成多边形，都记录当前多边形和下个多边形是哪两个点连接（记录下标即可）
- 生成的多边形不合适时，从上次记录的下个多边形连点下标开始完后继续寻找
- 如果都找完也不合适，那么置空后面那条子路径的下标缩影，同时在往上一层去寻找
- 当已经到达最上层并且最上层也已经遍历完毕了，也没有找到，那么就真的是找不到了
多个包含关系的多边形填色算法-3
即便在算法2的补充下，也有情况连不上，像下图，基本完全闭合的两个多边形，基本只有这两个多边形相连才能完成所有多边形相连的目标
很明显，上面算法1、2我们好好像走了一条错路，按照算法1、2，基本hold不足这种情况的。因此，我们要修正一下我们的思路：
从算法2中，我们了解到特殊情况下，基本只有相邻的多边形才能连接，其他多边形基本无法连接过去。
基于相邻 这个特征，我们提出下面算法：
按照广度遍历求出所有相邻（直线可达且不会和其他多边形相交的）多边形，按照深度遍历连接多边形
具体差不多是下图：
- A、B、C、D...等字母代表不同深度
- A1，A2，A3...等字母下标代表该深度下按照顺时针排序的节点
- 实际运用时，理论上可以忽略按照顺时针排序这个操作，无序排序也是可以的
- 特别地，只有A是需要特殊计算：找出一个离外边最近的多边形，即为A
按照广度遍历求出所有相邻多边形具体操作：
- 寻找到最大的多边形，使之能包含剩下的所有多边形
- 遍历出了最大的多边形外的剩余其他多边形，找到离最大多边形最近的一个多边形，将作为第一层深度的代表
- 假设第一层为A，第二层为B，每层不同的多边形用下标[0, n]表示
- 此时标记当前层(curLv)为第一层
- 遍历当前层所有节点（节点遍历顺序可以随意），为每个节点找到其子节点，使得子节点符合下面条件
- 子节点从剩余没有归层的多边形中寻找
- 和最大多边形方向相同的子节点：
- 跳过，因为肯定是填色的
- 和最大多边形方向相反的子节点：
- 当前节点边上必须有一个点，使之能连接到子节点边上的某个点，同时该条连线不能和任何多边形相交
- 找到时需要记下来这两个点，方便后续连线处理
- 找到的自己点标记为当前层的下一层
- 当前节点边上必须有一个点，使之能连接到子节点边上的某个点，同时该条连线不能和任何多边形相交
- 当步骤3的遍历完毕时，即得出所有节点的父子关系
- 遍历完毕定义，当前没有节点是没有归类到父子关系中
按照深度遍历连接多边形具体操作：
- 从最大多边形连接到第一层多边形（通过两者的最短路径，因为此路径不会和其他多边形相交）
- 从第一层多边形开始，依次遍历每个子节点，对每个子节点进行深度遍历，完成所有连接（需要对同一个节点下的子节点进行顺时针或者逆时针排序）
实际一顿操作下来，结果是准确的，但是计算量也是十分庞大，时间复杂度巨大
三角剖分-算法4
将填色区域转换成三角形，三角剖分（基于耳朵，嘴巴，单调多边形）
