c# - 如何处理动态放置标签的重叠

Question

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

在上面的屏幕截图中，扇区 (0,0) 位于左上角。在扇区 (1,1) 中，我突出显示了两个带有彼此非常接近的箭头的标签。在扇区 (2,1) 中，我圈出了两个完全重叠的标签。我需要能够以某种方式放置标签，使它们不会重叠并且有一定的距离。我追求的是一种简单的算法，它允许我将标签放置在竞争点上。

蓝色/黑色单元格是 Items Control 上的虚拟化项目， Canvas 作为 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);

Answer 1

一个建议:

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

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

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

在一般情况下，用几何方法计算 Voronoi 图是极其困难的。但是如果你使用数字图像，绘制几何实体并计算 distance map 就足够了。来自他们。

这需要您对数字图像处理技术有所了解。