批注定位自适应问题求解
在开发批注功能时，我们遇到了一个批注间距自适应的问题。批注间距分为两种格式：
批注间隔远：批注离文本很近，就近原则显示。批注紧挨着：批注之间不会相互重叠，自适应紧挨在一起。
用户的需求是创建批注时自动定位 Y 轴位置，同时防止出现批注重叠的情况。
解决思路
采用绝对定位，统计每个批注的顶部位置和高度，并使用最大值函数计算出每个批注的当前顶部位置。这个算法优化后类似于瀑布流，但在计算过程中加入了 Math.max 函数。
数据结构：
[ {top: 100, height: 200}, {top: 800, height: 200}, {top: 820, height: 200}, {top: 1020, height: 200},]
登录后复制
示例代码：
arr = [ {top: 100, height: 200}, {top: 800, height: 200}, {top: 820, height: 200}, {top: 1020, height: 200}, {top: 1430, height: 180},]arr.reduce((s, n, i) => { n.currentTop = Math.max(n.top, (s.currentTop || s.top) + s.height) return n})console.log(arr)
登录后复制
计算结果如下：
[ {top: 100, height: 200, currentTop: 100}, {top: 800, height: 200, currentTop: 1020}, {top: 820, height: 200, currentTop: 1040}, {top: 1020, height: 200, currentTop: 1240}, {top: 1430, height: 180, currentTop: 1430},]
登录后复制
通过这个算法，我们可以得到批注的正确 Y 轴位置，并避免批注重叠的情况。
以上就是如何利用算法实现批注间距自适应，防止批注重叠？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2807355.html
