父div内生成文本span随机不重叠位置的技术问题咨询

核心问题点与修复方法 #

• 尺寸读取不准确
  你获取的getBoundingClientRect()返回height为0，是因为读取尺寸时元素还未真正挂载到DOM渲染树。需要先将待测量的span设置为opacity: 0、position: absolute，插入父容器后再读取clientWidth、clientHeight属性，测量完成后再调整位置、设置可见，不会出现页面闪烁问题。
• 碰撞检测逻辑不完整
  仅判断新元素的top、right是否落在已有元素范围内，会漏判大量重叠场景。正确的轴对齐矩形碰撞检测逻辑如下：

// 入参为两个元素的getBoundingClientRect返回值，或自定义的left/right/top/bottom对象
const checkOverlap = (existRect, newRect) => {
  return !(
    newRect.left > existRect.right ||  // 新元素在已有元素右侧，无重叠
    newRect.right < existRect.left ||  // 新元素在已有元素左侧，无重叠
    newRect.top > existRect.bottom ||  // 新元素在已有元素下方，无重叠
    newRect.bottom < existRect.top     // 新元素在已有元素上方，无重叠
  )
}

只有当上述四个条件全部不成立时，两个元素才存在重叠，需要重新生成位置。

• 父容器溢出校验缺失
  生成随机位置时，需要提前扣除单词自身的宽高，避免超出父容器边界：
  • left随机值范围：0 ≤ left ≤ 父容器.clientWidth - 新单词宽度
  • top随机值范围：0 ≤ top ≤ 父容器.clientHeight - 新单词高度
• 重试机制优化
  如果连续随机重试超过100次仍未找到可用位置，可适当缩小当前单词的字体尺寸后再重试，避免词量过大时程序卡住。

内容的提问来源于stack exchange，提问作者Alex Motor