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

Question

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

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

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

Answer 1

从图片中看，矩形的边框看起来只受顶部矩形的影响。

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

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