網(wǎng)頁批注Y軸位置如何自適應(yīng)避免重疊？

巧妙解決網(wǎng)頁批注y軸重疊：自適應(yīng)算法詳解

本文將探討如何構(gòu)建類似word文檔的網(wǎng)頁批注功能，重點在于避免批注重疊，并確保其在頁面上的布局舒適美觀。 核心問題是如何動態(tài)計算新增批注的垂直位置（Y軸），使其既與現(xiàn)有批注保持適當(dāng)距離，又避免相互遮擋。

Word文檔的批注布局通常采用兩種策略： 如果新批注與現(xiàn)有批注距離較遠(yuǎn)，則將其放置在距離文本最近的位置；如果距離較近，則緊挨現(xiàn)有批注，但絕不重疊。 實現(xiàn)這一功能的關(guān)鍵在于設(shè)計高效的Y軸坐標(biāo)計算算法。

一個有效的方案是結(jié)合絕對定位和數(shù)據(jù)結(jié)構(gòu)。我們可以用數(shù)組存儲每個批注的信息，每個數(shù)組元素包含批注的頂部位置（top）和高度（height）：

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

通過遍歷此數(shù)組，計算每個批注的實際頂部位置（currentTop）。 這類似于瀑布流布局，但需加入math.max操作以防止重疊：

const 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);

該算法迭代計算每個批注的currentTop，確保其不會與之前的批注重疊。 Math.max(n.top, (s.currentTop || s.top) + s.height) 這行代碼至關(guān)重要，它比較了批注的原始頂部位置和基于先前批注計算出的頂部位置，取較大值作為最終的currentTop，從而有效避免重疊。

通過此算法，我們可以動態(tài)計算每個批注的Y軸位置，實現(xiàn)類似Word文檔批注間距效果，提升用戶體驗。