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

4

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

enter image description here

我的数据是用简单的矩形数据结构建模的。为了简单起见,我希望用线条来绘制所有边框(即使没有重叠)。我计划在浏览器中使用SVG绘制矩形和边框,但我只是寻找一个通用的解决方案,不依赖于特定平台。
这个问题领域对我来说是新的。我在这个领域没有太多经验,但我很乐意接受任何可以得到的信息。

有没有可能在某个点上有超过2个矩形重叠?在图像中,最高的堆栈为2。 - maraca
检测两个矩形相交的算法? - Arash
@marca -- 绝对的,矩形是由用户提供的,可以有各种大小和重叠。我提供了一个简单的模型,但我应该添加更多的重叠。让我来做这个。 - Wesley Workman
@arash -- 检测交叉点已经很清楚了。我现在遇到的问题是如何评估N个交叉点,以及在没有重叠和有重叠时如何正确绘制边框。此外,如果应该绘制实线(因为它是最上面的重叠)还是虚线(因为某些东西在它上面),似乎很难知道是否存在重叠。 - Wesley Workman
如何进行成对比较?然后您可以使用相同的算法... - Arash
1个回答

2

从图片上看,矩形的边框似乎只受到在其上方的矩形的影响。

按照从上到下的顺序绘制矩形。对于要绘制的下一个矩形的八个角相邻的边对,遍历所有当前绘制的矩形,找到包含该角并重叠该边最长部分的矩形。将该部分边渲染为重叠状态。

如果这样做太慢了,可以使用二维线段树来存储所有当前绘制的矩形,以便快速识别包含给定角的矩形。


谢谢你的回答。我更新了我的模型,以展示矩形可以有各种大小和重叠,因为有一些问题。我不认为这真的改变了你的答案,你同意吗? - Wesley Workman
我按照这个确切的技巧做了,并且成功了。我知道这个答案没有深入细节,但是这里的哲学是将它们全部分解成行。按最高z顺序排序处理矩形。对于每个正在检查的矩形,将其分成4条线。然后测试这些4条线与其上方每个矩形的4条线。随着确定相交的线,将线分解为更小的段。以不同的方式呈现相交的线。总共大约有140行代码。谢谢! - Wesley Workman

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接