问一个网页定位的问题？

作者站长头像
站长
· 阅读数 14

问题背景：我现在在做一个类似word一样的批注功能。问一个网页定位的问题？word的批注功能界面如上。我现在想实现像它一样的批注间距的效果。它的批注的间距其实应该是分成两种格式：1.批注间隔远的，就近原则显示比如最上面的批注1区域，和下面的批注距离很远，它就把批注定位在离批注文字很近的位置。2.批注紧挨着的，就自适应紧挨在一起，不会相互重叠比如图片中下面的三条批注。

我现在想得到的就是，当用户增加批注时，就直接定位批注的Y轴位置，然后在批注区域创建，但是创建前需要做自适应，不然可能会出现批注重叠的情况，这个自适应没思路怎么做

回复
1个回答
avatar
test
2024-07-16

如果是我做，这个需求用 absolute 做。然后统计 top，height 自顶向下，做最大值

这样我们就可以把问题变成一个计算问题。然后就是做算法优化了

补一下数据结构

[
    {top: 100, height: 200},
    {top: 800, height: 200},
    {top: 820, height: 200},
    {top: 1020, height: 200},
]

计算出来就和瀑布流差不多，只不过多了一个 Math.max 而已

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)

answer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容