如何计算(圆的)弧的 SVG 路径 [英] How to calculate the SVG Path for an arc (of a circle)

问题描述

给定一个以 (200,200) 为中心、半径为 25 的圆，如何绘制一条从 270 度到 135 度的圆弧以及从 270 到 45 度的圆弧?

Given a circle centered at (200,200), radius 25, how do I draw an arc from 270 degree to 135 degree and one that goes from 270 to 45 degree?

0 度表示它在 x 轴上(右侧)(表示它是 3 点钟位置)270度表示12点钟位置，90度表示6点钟位置

0 degree means it is right on the x-axis (the right side) (meaning it is 3 o' clock position) 270 degree means it is 12 o'clock position, and 90 means it is 6 o'clock position

更一般地说，圆的一部分的弧的路径是什么

More generally, what is a path for an arc for part of a circle with

x, y, r, d1, d2, direction

意义

center (x,y), radius r, degree_start, degree_end, direction

推荐答案

扩展@wdebeaum 的好答案，这里有一个生成弧形路径的方法:

Expanding on @wdebeaum's great answer, here's a method for generating an arced path:

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(" ");

    return d;       
}

使用

document.getElementById("arc1").setAttribute("d", describeArc(200, 400, 100, 0, 180));

并在您的 html 中

and in your html

<path id="arc1" fill="none" stroke="#446688" stroke-width="20" />

现场演示

这篇关于如何计算(圆的)弧的 SVG 路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！