js 已知圆弧的起点坐标、终点坐标、半径，圆心坐标，如何计算弧线上的坐标？

阅读 1.4k

/**
 * 计算圆弧上的点
 * @param {Object} center - 圆心坐标，格式 {x, y}
 * @param {number} radius - 圆的半径
 * @param {Object} startPoint - 起点坐标，格式 {x, y}
 * @param {Object} endPoint - 终点坐标，格式 {x, y}
 * @param {number} [numPoints=100] - 要计算的点数（默认100个点）
 * @param {boolean} [clockwise=true] - 是否顺时针方向
 * @returns {Array} - 圆弧上的点数组，每个点为 {x, y}
 */
function calculateArcPoints(center, radius, startPoint, endPoint, numPoints = 100, clockwise = true) {
  const { x: cx, y: cy } = center;
  const { x: x1, y: y1 } = startPoint;
  const { x: x2, y: y2 } = endPoint;

  // 计算起点和终点相对于圆心的角度
  let startAngle = Math.atan2(y1 - cy, x1 - cx);
  let endAngle = Math.atan2(y2 - cy, x2 - cx);

  // 确保角度范围在0到2π之间
  if (startAngle < 0) startAngle += 2 * Math.PI;
  if (endAngle < 0) endAngle += 2 * Math.PI;

  let deltaAngle = endAngle - startAngle;

  if (clockwise) {
    if (deltaAngle > 0) {
      deltaAngle -= 2 * Math.PI;
    }
  } else {
    if (deltaAngle < 0) {
      deltaAngle += 2 * Math.PI;
    }
  }

  // 计算每个点的角度步长
  const step = deltaAngle / (numPoints - 1);

  const points = [];
  for (let i = 0; i < numPoints; i++) {
    const angle = startAngle + step * i;
    const x = cx + radius * Math.cos(angle);
    const y = cy + radius * Math.sin(angle);
    points.push({ x, y });
  }

  return points;
}


const center = { x: 0, y: 0 };
const radius = 5;
const startPoint = { x: 5, y: 0 };   // 0度
const endPoint = { x: 0, y: 5 };     // 90度
const numPoints = 10;                 // 计算10个点
const clockwise = false;              // 逆时针方向

const arcPoints = calculateArcPoints(center, radius, startPoint, endPoint, numPoints, clockwise);
console.log(arcPoints);

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SVG 圆弧示例</title>
</head>
<body>
  <svg width="200" height="200" viewBox="-10 -10 20 20" xmlns="http://www.w3.org/2000/svg" style="border:1px solid black;">
    <path id="arcPath" stroke="blue" fill="none" />
    <circle cx="0" cy="0" r="5" stroke="black" fill="none" />
    <circle cx="5" cy="0" r="0.1" fill="red" />
    <circle cx="0" cy="5" r="0.1" fill="green" />
  </svg>

  <script>
    function calculateArcPoints(center, radius, startPoint, endPoint, numPoints = 100, clockwise = true) {
      const { x: cx, y: cy } = center;
      const { x: x1, y: y1 } = startPoint;
      const { x: x2, y: y2 } = endPoint;

      let startAngle = Math.atan2(y1 - cy, x1 - cx);
      let endAngle = Math.atan2(y2 - cy, x2 - cx);

      if (startAngle < 0) startAngle += 2 * Math.PI;
      if (endAngle < 0) endAngle += 2 * Math.PI;

      let deltaAngle = endAngle - startAngle;

      if (clockwise) {
        if (deltaAngle > 0) {
          deltaAngle -= 2 * Math.PI;
        }
      } else {
        if (deltaAngle < 0) {
          deltaAngle += 2 * Math.PI;
        }
      }

      const step = deltaAngle / (numPoints - 1);

      const points = [];
      for (let i = 0; i < numPoints; i++) {
        const angle = startAngle + step * i;
        const x = cx + radius * Math.cos(angle);
        const y = cy + radius * Math.sin(angle);
        points.push({ x, y });
      }

      return points;
    }

    const center = { x: 0, y: 0 };
    const radius = 5;
    const startPoint = { x: 5, y: 0 };
    const endPoint = { x: 0, y: 5 };
    const numPoints = 50;
    const clockwise = false;

    const arcPoints = calculateArcPoints(center, radius, startPoint, endPoint, numPoints, clockwise);

    // 转换点为SVG路径数据
    const pathData = arcPoints.map((point, index) => {
      return `${index === 0 ? 'M' : 'L'} ${point.x} ${point.y}`;
    }).join(' ');

    // 设置SVG路径
    document.getElementById('arcPath').setAttribute('d', pathData);
  </script>
</body>
</html>

js 已知圆弧的起点坐标、终点坐标、半径，圆心坐标，如何计算弧线上的坐标？

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？

前端有没有办法实现页面截图？