如何在SVG中细分不规则多边形

给定一个形状不确定的多边形，并且您知道从哪个路径开始，我需要使用开始路径作为指导，将这些多边形（以SVG格式定义）分割为n个形状

这很难解释，但想想体育场中的座位区和座位排：

在处理矩形时，它似乎并不太难。我一直坚持的是如何处理一个不规则形状的多边形。一个通用的解决方案将是最好的，特别是如果它可以处理曲线，但我可以看出这只会使问题变得复杂

有没有什么具体的算法可以让我开始学习？我已经开始钻研多边形三角剖分，以及如何使用耳朵剪辑方法以单调的方式分解这些多边形，但我的头开始在这里旋转

---

PS：不确定这是否非常重要，但这些多边形是在SVG中定义的。

这里有一个非常简单的方法：根据需要的除法/行数在顶部和底部顶点（从左到右排序）之间进行插值

我使用以下工具进行了快速测试：

PShape svg，shape；
整数分割=3；
ArrayList top=新的ArrayList（）；
ArrayList bottom=新的ArrayList（）；
int numVerts；
int ptSize=5；
无效设置（）{
svg=loadShape（“shape.svg”）；
大小（（int）svg.width，（int）svg.height）；
shape=svg.getChild（0）；
//查找顶部和底部顶点
numVerts=shape.getVertexCount（）；
float minY=高度，maxY=0；
for（int i=0；imaxY）maxY=v.y；
} 
浮动yThresh=（最大最小）*.25；//1/4高度作为顶部/底部阈值
//基于最小和最大y值和阈值存储属于顶部和底部的顶点
for（int i=0；i

这里是shape.svg：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<polygon fill="#D8D8D8" points="279,100 479,60 681,100 641,501 480,482 322,501 "/>
</svg>

这是一个预览，顶部顶点标记为绿色，底部标记为红色，插值顶点标记为蓝色：

正如@Joseph O'Rourke提到的，如果底部路径和底部路径不相似（我想顶点数量和从左到右的顺序相同），那么问题就更具挑战性了。

---

在这种情况下，应该可以实现混合算法（例如）。如果您已经在使用SVG格式的各种形状，您应该能够通过事先在或Illustrator中尝试混合来测试混合是否解决了问题。

两个示例多边形的路径和起点是什么？多边形是否始终是对称的？对称性：否。我们的元数据将保留多边形的哪一侧确定“前排”，以便我们知道起始点是什么。顶部路径是底部起始路径的缩放版本吗？如果不是，则问题更具挑战性。请参阅类似问题。只需使用距前导路径多段线的

i*w

距离创建笔划线，然后构建多边形

w

是层厚度，

i=0,1,2,3，…

是否希望路径始终保持不变，分步骤移动。或者你想让你的路径根据直线的坡度而缩小/增大？太棒了，谢谢。我现在有了一切我需要的东西，可以开始一个全面的解决方案。很高兴这有帮助！请记住我提到的限制：我的天真方法总是假设顶点数相等的顶部和底部路径。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="960px" height="560px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<polygon fill="#D8D8D8" points="279,100 479,60 681,100 641,501 480,482 322,501 "/>
</svg>