Algorithm 具有不同重叠边框的矩形边框绘制算法

我正在寻找有关如何围绕矩形绘制边框以及为重叠边框提供稍微不同的渲染的信息。这些矩形是用户生成的，因此它们可以有各种大小和重叠。用户指定z顺序。以下是一个例子：

我的数据是用简单的rect数据结构建模的。为简单起见，我希望用线绘制所有边界（即使没有重叠）。我计划在浏览器中使用SVG绘制矩形和边框，但我只是在寻找一种平台无关的通用解决方案

---

这个问题域对我来说是新的。我在这方面没有太多的经验，但我很乐意接受我能得到的信息。

从图片上看，矩形的边界似乎只受其顶部矩形的影响

按从上到下的顺序绘制矩形。对于要绘制的下一个矩形的八个角邻接边对中的每一个，循环遍历当前绘制的所有矩形，以找到包含角并与边的最长部分重叠的矩形。将边的该部分渲染为重叠

---

如果速度太慢，请使用二维线段树存储当前绘制的所有矩形，以便快速识别包含给定角点的矩形。

是否可能在某一点上有两个以上的矩形重叠？在图像中，最高的堆栈是2。@marca——当然，矩形是用户提供的，可以有各种大小和重叠。为了简单起见，我提供了一个最小的模型，但是我应该添加更多的重叠。让我来做吧。@arash——检测交叉点很容易理解。我很难理解的是如何计算N个交点。然后在没有重叠时正确绘制边框，而在有重叠时正确绘制边框。此外，似乎很难知道什么时候有重叠，它应该是实心的（因为它是最上面的重叠）还是虚线的（因为它上面有东西）。两两比较怎么样？然后你可以使用相同的算法…谢谢你的回答。我更新了我的模型，以显示矩形可以有各种大小和重叠，因为有一些问题。我不认为这真的改变了你的答案，你同意吗？我遵循了这个精确的技巧，并且成功了。我知道这个答案没有深入的细节，但这里的哲学是把它们都分解成几行。首先处理按最高z顺序排序的矩形。对于要检查的每个矩形，将其分成4行。然后对照上面每个矩形的4行测试这4行。确定直线相交时，将直线分解为较小的线段。以不同方式渲染相交线。总而言之，大约有140行代码。非常感谢。