坐标计算

圆内坐标判断

interface CircleInfo {
  centerX: number;   // 圆心X坐标
  centerY: number;   // 圆心Y坐标
  radius: number;    // 圆半径
}

/**
 * 处理坐标点与圆形边界的关系
 * @param point 要检测的坐标点
 * @param circle 圆形相关信息
 * @returns 如果在限制范围内返回原坐标，否则返回最近边界点
 */
const handleCircleBoundary = (point: Point, elRect: DOMRect): Point => {
  const circle = {
    centerX: targetRect.left + targetRect.width / 2 + window.scrollX,
    centerY: targetRect.top + targetRect.height / 2 + window.scrollY,
    radius: targetRect.width / 2,
  };
    
  // 计算最大允许半径
  const maxRadius = circle.radius
  
  // 计算坐标点相对于圆心的偏移量
  const dx = point.x - circle.centerX;
  const dy = point.y - circle.centerY;
  
  // 计算当前距离
  const distance = Math.sqrt(dx ​** 2 + dy ​** 2);

  // 在限制范围内直接返回原坐标
  if (distance <= maxRadius) return point;

  // 超出范围时计算边界点
  const scale = maxRadius / distance;
  return {
    x: circle.centerX + dx * scale,
    y: circle.centerY + dy * scale
  };
};

使用

// 这里的target必须是一个已经使用 border-radius:100% 的html元素
// 也就是一个圆形元素实例
targetRect = target.getBoundingClientRect() as DOMRect;

// 基于元素圆心，使用鼠标点击获取的x，y
let distance_x = x - rect.left - rect.width / 2 + window.scrollX;
let distance_y = y - rect.top - rect.height / 2 + window.scrollY;


// 基于视口中心，使用鼠标点击获取的x，y
let distance_x = x - innerWidth / 2 + window.scrollX;
let distance_y = y - innerHeight / 2 + window.scrollY;

// 判断x，y是否在园内
const {x,y} = handleCircleBoundary(distance_x,distance_y, targetRect)

圆内坐标判断​

圆内坐标判断