摘要： 切分功能的绘图工具、交互逻辑和拆分思路简介。
关键词： 前端 矩形切分 svg
一、绘图工具
选用svg作为绘图工具，以下只讲解本次开发涉及到的概念。
1.坐标系
坐标系的原点在视图的左上方，原点向右延申为x轴正向，原点向下延申为y轴正向。
2.矩形绘制
矩形选用polygon绘制封闭图形，这里涉及到的属性为：
stroke="red"
stroke-width="2"
fill-opacity="0.5"
fill="blue"
points=" 10,10 1500,10 1500,520 10,520"
3.切线绘制
切线选用line绘制，这里涉及到的属性为：
x1="0" y1="0"
x2="10" y2="10"
stroke="black"
stroke-width="5"
stroke-dasharray="5 5"
二、交互逻辑
1.矩形
鼠标在矩形上移动切线，点击矩形可以生成多条切线。
2.切线
切线分为两种类型，横向切线和纵向切线。且每次鼠标点击只能生成一种类型的切线。
切线的位置利用mousemove方法获取鼠标点位，并使用throttle限制函数的执行频率，避免性能问题。
3.范围和间距
切线只能在矩形之内，在svg坐标系内，矩形存在x轴和y轴的可移动范围，我们分别将其命名为xLimit，yLimit。
这两种边界中，还分为矩形边界和切分线边界；矩形边界在未切分时就已存在，且min。切分边界线随着切分线的增加而增加，且min=max。
在存储边界数据时需要将间距(minDistance)作为常量计算在内，防止切线与已有边界过近。
数据格式如下：
xLimit: [{min,max}],//矩形边界min max; 切分线边界min=max
yLimit: [],//矩形边界min max; 切分线边界min=max
三、矩形切分
至此，矩形与切线都已准备就绪，先从单个切线入手开始切分矩形。
1.一条切线
一条切线纵切矩形，在矩形上生成两个交点，将所有点位个数标示；原矩形的四个顶点命名为A、B、C、D；
如下图
遍历矩形的四个顶点，首先拿到A点。
设A点的x轴坐标值为Ax，A点的y轴坐标值为Ay。
设置动态点F，x轴坐标值为Fx，A点的y轴坐标值为Fy，此坐标根据限制条件动态变化。
①找到Ay=Fy Fx与Ax距离最近的 F1
②找到 Ax=Fy Fy与Ay距离最近的 F2
③找到 F1x=Fx 且 F1y=F2y 的 F3
至此切分后第一个矩形的四个点都已找到，分别为A F1 F2 F3，这里F2=D。
遍历到B点时，沿用以上逻辑找到四个点，B F4 F5 F6，这里F6=C
B点遍历完毕后，所有点位都被归类完毕。
2.四条切线
四条切线横切、纵切矩形，在矩形上形成两类交点，一类切线与边界交点，一类横纵切线交点，两类交点分别生成2个和4个交点，图中点位个数部分标示；原矩形的四个顶点命名为A、B、C、D；如下图
遍历矩形的四个顶点，过程与上文一致，遍历完后，将会得到分别包含ABCD原矩形顶点的四个矩形点位集合。
但是剩余点位依旧还在，如下图中央图形所示。
回顾上文中的遍历过程，只遍历到B点后，所有点位都已归集完毕；但是当切线增加后，只遍历顶点就无法满足要求了。
为了避免以上情况，我们可以利用递归方法解决问题。
上文A点的执行过程就是矩形点位搜集的基本处理，我们将点位按照重复的数量从小到大排列；每一次矩形点位搜集完成后，都会从点位集合中选出四个点。当ABCD四个点位处理完毕后就只剩下五个小矩形，继续处理外围的四个点位，处理完毕后只剩下最后一个矩形。
这里点位的存放顺序非常重要，需要确保点位顺序从小到大排列。
假如此顺序不能保证，比如从重复数为4的点位开始，那么从X轴和Y轴找到的两个点就无法确保与初始点位形成90°的夹角，也就不能组成一个矩形了。
四、矩形点位集合整理顺序
矩形的点位都已找到，但是排列的顺序不对，会影响polygon的绘制，因此还需整理点位顺序。
计算点位与坐标系原点的距离，四个点位中最大值与最小值分别为第一个点和第三个点。
计算点位、坐标系原点和X轴的tan值，四个点位中最大值与最小值分别为第四个点和第二个点。
五、代码实现
本文讲解了实现思路，具体代码实现需要结合业务逻辑完成。本文最后附带demo中包含了一些文中未提到的方法，都是属于业务需要而实现的代码。建议大家可以根据自己的业务逻辑自行实现。
六、总结
以上是整个拆分功能的基本逻辑，包含了图形工具、交互逻辑和拆分思路。
整个功能从输入输出的角度来看，输入一组矩形点位，可以返回N组矩形点位。
图形工具除了svg，也可以使用canvas，可以结合自己的业务情况来确定选用哪种工具。
参考：
SVG基础篇｜SVG简介 juejin.cn/post/699179…
