车辆模拟地图站点名称按需显示的算法实现

很长一段时间没有更新博客了，因为工作实在是太忙了，每天都有公司的事情忙不完。

最近我在进行车辆模拟地图的开发，实现控制站点名称按需显示时，遇到了一些问题，经过一番折腾，终于实现了。最终界面如下图所示：

站点显示需求：

首末站必须显示，从第一个站开始，如果站点名称能显示下，则显示，如果站点名称会重叠则隐藏，以此类推。当界面宽度变化时，车辆模拟地图自动变化，保证站点名称能够最大限度的显示。

最开始我使用了比例换算法，但算法复杂度是O(n)，结果总是不准。尽管一开始我就觉得算法的复杂度应该是O(n^2)。我之前一直想着只遍历一次就能算出来，也尝试过把需求描述得很详细去问chatgpt，但它输出的算法错误代码让我很困扰。

需要注意的地方：由于站点的名称内容是千奇百怪的，可以有空格，各种特殊图标，所以站点文字的长度计算是一个问题，这里是通过canvas来计算的。还有，这里我添加了一个限制，站点文字内容最大显示120px，超出隐藏并显示省略号，站点名称上添加了title显示全称。

最核心的算法：

获取前面最近一个显示站点的索引：

下行站点的计算有些差别，因为下行站点是从右至左，所以left基本上是反着的：

另外获取站点中心点位置的方法

说明：站点的布局采用css绝对定位。第一个版本这块我是采用的svg画的，后来发现扩展起来越来越麻烦，周末就在家花了半天时间全部改造为html实现了。

我最开始的有问题代码是上下行站点共用的，最大的问题是会出现跳站点显示的情况，代码如下的：

完！

未经允许不得转载：大白鲨游戏网 » 车辆模拟地图站点名称按需显示的算法实现