如何处理动态放置标签的重叠答案

【问题标题】：How to handle overlapping of dynamically placed labels如何处理动态放置标签的重叠
【发布时间】：2015-08-31 11:33:24
【问题描述】：

我正在 WPF 中创建一个可视化工具来显示我正在编写的游戏的流场信息，并且遇到了一些标签彼此非常接近的问题。

在上面的屏幕截图中，扇区 (0,0) 位于左上角。在扇区 (1,1) 中，我用箭头突出显示了两个彼此非常接近的标签。在扇区 (2,1) 中，我圈出了两个完全重叠的标签。我需要能够以某种方式放置标签，以便它们不会重叠并且有一定距离。我更喜欢一个简单的算法，让我可以在有争议的地方放置标签。

蓝色/黑色单元格是项目控件上的虚拟化项目，其中画布作为 ItemsPanel。红色扇形方块位于一个装饰器上，而绿色线条、方框、贝塞尔曲线和红色成本标签位于第二个装饰器上。两个装饰器都使用绘图上下文以及在渲染时动态创建的所有内容。

var typeface = new Typeface(new FontFamily("Segoe UI"), FontStyles.Normal, FontWeights.Normal, FontStretches.Normal);
var formattedText = new FormattedText(curve.Cost.ToString(), CultureInfo.CurrentUICulture, FlowDirection.LeftToRight, typeface, 12, Brushes.Red, null, TextFormattingMode.Display);

var textLocation = new Point(midPoint2.X - (formattedText.WidthIncludingTrailingWhitespace / 2), midPoint2.Y - formattedText.Height);
drawingContext.DrawText(formattedText, textLocation);

【问题讨论】：

标签： c# wpf algorithm label overlap

【解决方案1】：

一个建议：

一组几何实体的 Voronoi 图是将平面划分为多个区域，在这些区域中，点与给定实体之间的距离比与所有其他实体之间的距离更近。

如果您构建曲线的 Voronoi 图，并且将标签完全放置在相应的区域中，则可以解决您的问题。

假设所有标签具有相同的范围（相同的边界框），您可以通过应用erosion 操作找到合适的空白空间，即移除区域轮廓上所需宽度/高度的像素层。剩余的像素可能是标签的中心。

在一般情况下，通过几何方法计算 Voronoi 图非常困难。但如果您使用数字图像，只需绘制几何实体并从中计算 distance map。

这要求您对数字图像处理技术有一定的了解。

【讨论】：

【解决方案2】：

在考虑了几种放置标签的方法之后词云，基于物理的方法，voronoi 图。我决定将我的方法基于An Empirical Study of Algorithms for Point-Feature Label Placement，因为我可以看到一种简单快捷的定位标签的方法。第 2 页给了我一个想法，即为所需的点设置四个可能的位置，我用非常简单的规则构建了自己的实现。

我用两个方法创建了一个名为 PointLabelPlacer 的类添加标签 ComputeNewPositions

我会将我的所有标签连同点一起发送到 AddLabel 方法。一旦我完成并准备好，我会调用 ComputeNewPositions。这将针对所有四个可能的位置计算来自另一个标签的重叠位置的数量。

如果位置与另一个标签的原始点重叠，我也会标记它。

如果两个标签完全重叠，我会再次选择第一个没有重叠的标签，但我会将所有其他标签位置标记为已使用

然后我会选择我发现的第一个重叠最少的点，并且没有与另一个点重叠并且没有标记为已使用。

如果毕竟找不到替代位置，我默认在左上角并允许重叠。

这是以黄色显示的备用位置

这是最终结果

【讨论】：