如何避免极坐标定位的ipsum-button按钮相互重叠？

我希望将多个ipsum-button按钮随机分布在屏幕上，但不出现相互重叠的情况。目前用极坐标计算位置，但出现了重叠问题：

我选择极坐标定位按钮是为了更高效有序地分布按钮，同时保留中心空白区域，这种方式在围绕焦点的环形布局中具有明显优势，理想效果如下：

当前我的实现代码如下：

位置生成函数 #

const generatePosition = (name: string, index: number) => {
    const hash = Array.from(name).reduce((acc, char) => acc + char.charCodeAt(0), 0) + index;
    const angle = (hash % 360) * (Math.PI / 180); // Convert hash to angle (radians)
    const radius = 35 + (hash % 15); // Radius between 35% and 50% of the area
    const x = 50 + radius * Math.cos(angle); // Map to x coordinate
    const y = 50 + radius * Math.sin(angle); // Map to y coordinate
    return { x, y };
};

CSS样式 #

.ipsum-button {
    position: absolute;
    width: 100px;
    height: 100px;
    padding: 0.8rem;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
  }

React渲染代码 #

{ipsumButtons.map((button) => (
  <button
    key={button.name}
    className={`${styles['ipsum-button']} ${selectedipsums.includes(button.name) ? styles['active-ipsum'] : ''}`}
    style={{
      backgroundColor: button.color,
      top: `${button.position.y}%`,
      left: `${button.position.x}%`,
    }}
    onClick={() => toggleipsumSelection(button.name)}
  >
    {button.name}
  </button>
))}

解决方案 #

要解决重叠问题，核心是加入碰撞检测和位置调整机制，同时修正定位逻辑的细节：

1. 修正按钮定位逻辑

原来的top和left是将按钮左上角定位在计算点，而我们需要的是按钮中心对齐计算点，必须添加transform: translate(-50%, -50%)，这是碰撞检测准确的前提：

.ipsum-button {
    /* 原有样式不变 */
    transform: translate(-50%, -50%);
}

2. 实现碰撞检测函数

判断两个按钮中心的距离是否小于按钮直径（按钮大小一致，直接用2倍半径即可）：

// 检测两个按钮是否重叠
const isOverlapping = (pos1: {x: number, y: number}, pos2: {x: number, y: number}, buttonRadiusPercent: number) => {
  const dx = pos1.x - pos2.x;
  const dy = pos1.y - pos2.y;
  const distance = Math.sqrt(dx * dx + dy * dy);
  // 距离小于两个半径之和则重叠
  return distance < 2 * buttonRadiusPercent;
};

3. 生成无重叠位置的批量函数

改进原有位置生成逻辑，加入碰撞检测和重试机制，同时限制半径范围避免按钮溢出容器：

const generateNonOverlappingPositions = (buttons: typeof ipsumButtons, containerWidth: number, containerHeight: number) => {
  const buttonSize = 100; // 按钮固定宽高
  const buttonRadiusPx = buttonSize / 2;
  // 将按钮半径转为百分比（适配不同屏幕尺寸）
  const buttonRadiusXPercent = (buttonRadiusPx / containerWidth) * 100;
  const buttonRadiusYPercent = (buttonRadiusPx / containerHeight) * 100;
  const buttonRadiusPercent = Math.max(buttonRadiusXPercent, buttonRadiusYPercent);

  const positions: {x: number, y: number}[] = [];

  buttons.forEach((button, index) => {
    let position: {x: number, y: number};
    let attempts = 0;
    const maxAttempts = 50; // 防止无限循环

    do {
      // 基于原有哈希逻辑生成初始位置
      const hash = Array.from(button.name).reduce((acc, char) => acc + char.charCodeAt(0), 0) + index;
      const angle = (hash % 360) * (Math.PI / 180);
      // 限制半径范围：最小保留中心空白，最大避免按钮溢出容器
      const minRadius = 35;
      const maxRadius = 50 - buttonRadiusPercent;
      const radius = minRadius + (hash % (maxRadius - minRadius));
      const x = 50 + radius * Math.cos(angle);
      const y = 50 + radius * Math.sin(angle);

      position = { x, y };
      attempts++;

      // 检查是否与已生成的位置重叠
      const hasOverlap = positions.some(pos => isOverlapping(pos, position, buttonRadiusPercent));
      if (!hasOverlap || attempts >= maxAttempts) break;
    } while (true);

    positions.push(position);
  });

  return positions;
};

4. 在React组件中应用

结合useEffect生成位置，并监听窗口大小变化重新计算：

import { useEffect, useState } from 'react';

// ... 组件内部
const [ipsumButtonsWithPositions, setIpsumButtonsWithPositions] = useState<typeof ipsumButtons>([]);

useEffect(() => {
  const updatePositions = () => {
    const containerWidth = window.innerWidth;
    const containerHeight = window.innerHeight;
    const positions = generateNonOverlappingPositions(ipsumButtons, containerWidth, containerHeight);
    const buttonsWithPositions = ipsumButtons.map((btn, idx) => ({
      ...btn,
      position: positions[idx]
    }));
    setIpsumButtonsWithPositions(buttonsWithPositions);
  };

  updatePositions();
  // 窗口 resize 时重新计算位置
  window.addEventListener('resize', updatePositions);
  return () => window.removeEventListener('resize', updatePositions);
}, [ipsumButtons]);

5. 更新渲染代码

使用生成好的带位置的按钮数据进行渲染：

{ipsumButtonsWithPositions.map((button) => (
  <button
    key={button.name}
    className={`${styles['ipsum-button']} ${selectedipsums.includes(button.name) ? styles['active-ipsum'] : ''}`}
    style={{
      backgroundColor: button.color,
      top: `${button.position.y}%`,
      left: `${button.position.x}%`,
    }}
    onClick={() => toggleipsumSelection(button.name)}
  >
    {button.name}
  </button>
))}

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