如何从正方形中路径裁剪出指定角度的弧形区域？

核心需求 #

• 以蓝色（上边界）、红色（下边界）线条作为高度限制，裁剪出的弧形需支持任意角度
• 保证正方形容器内的重要内容不被裁剪丢失
• 弧形用于标记圆形选择界面位置，无需闭合

优化实现代码 #

// 点绕中心旋转工具函数
const rotatePoint = (center, point, angle) => {
  const cos = Math.cos(angle);
  const sin = Math.sin(angle);
  return {
    x: cos * (point.x - center.x) + sin * (point.y - center.y) + center.x,
    y: cos * (point.y - center.y) - sin * (point.x - center.x) + center.y
  };
};

const cutArc = (size, angle) => {
  const radian = (Math.PI / 180) * angle;
  const halfAngle = radian / 2;
  
  // 创建正方形容器
  const container = document.createElement('div');
  container.style.position = 'fixed';
  container.style.left = `${window.innerWidth / 2 - size / 2}px`;
  container.style.top = `${window.innerHeight / 2 - size / 2}px`;
  container.style.width = `${size}px`;
  container.style.height = `${size}px`;
  container.style.background = 'rgba(0,0,0,0.5)';
  container.style.zIndex = 99999;
  container.style.borderLeft = '2px solid orange';
  container.style.borderRight = '2px solid orange';

  // 创建高度限制线条（蓝色上边界、红色下边界）
  const limitLines = document.createElement('div');
  limitLines.style.position = 'absolute';
  limitLines.style.left = '-2px';
  limitLines.style.top = `${size / 3}px`;
  limitLines.style.width = `${size}px`;
  limitLines.style.height = `${size / 3}px`;
  limitLines.style.borderTop = '1px solid blue';
  limitLines.style.borderBottom = '1px solid red';
  limitLines.style.zIndex = 99999;

  // 高度限制范围：上边界y坐标、下边界y坐标（相对于容器中心）
  const center = { x: size / 2, y: size / 2 };
  const upperY = center.y - size / 6; // 对应size/3的位置
  const lowerY = center.y + size / 6; // 对应2*size/3的位置

  // 生成弧形上边缘点（沿上边界高度的圆弧）
  const upperPoints = [];
  // 生成弧形下边缘点（沿下边界高度的圆弧）
  const lowerPoints = [];

  // 计算圆弧半径：确保在高度限制内，取中心到上下边界的垂直距离
  const radius = size / 6;

  // 从-半角度到+半角度生成点，步长取0.05弧度保证平滑
  for (let theta = -halfAngle; theta <= halfAngle; theta += 0.05) {
    // 上边缘点：y固定为upperY，x根据角度计算
    const upperX = center.x + radius * Math.sin(theta);
    upperPoints.push({ x: upperX, y: upperY });

    // 下边缘点：y固定为lowerY，x根据角度计算
    const lowerX = center.x + radius * Math.sin(theta);
    lowerPoints.push({ x: lowerX, y: lowerY });
  }

  // 构建裁剪路径：上边缘从右到左，下边缘从左到右，形成开放弧形区域
  const pathPoints = [...upperPoints.reverse(), ...lowerPoints];
  const clipPath = `polygon(${pathPoints.map(p => `${(p.x / size) * 100}% ${(p.y / size) * 100}%`).join(', ')})`;
  
  container.style.clipPath = clipPath;
  container.appendChild(limitLines);
  document.body.appendChild(container);
};

// 测试：300px正方形，120度弧形
cutArc(300, 360/3);

关键优化说明 #

1. 精准高度限制：明确蓝色（上边界）对应容器size/3位置，红色（下边界）对应2*size/3位置，所有裁剪点严格限制在这个垂直范围内
2. 平滑弧形生成：通过小步长遍历角度区间，生成足够多的点保证弧形平滑，同时避免内容丢失
3. 简化路径计算：直接基于容器中心计算坐标，避免原代码中复杂的缩放偏移，减少计算误差
4. 适配任意角度：通过角度转弧度、半角度遍历的逻辑，支持传入任意角度值（0~360度）

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