如何计算圆弧(圆)的SVG路径

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

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

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

x, y, r, d1, d2, direction

意义

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

当前回答

对@opsb的回答稍加修改。我们不能用这种方法画一个完整的圆。如果我们给(0,360)它什么也画不出来。所以做了一点小小的修改来解决这个问题。显示有时达到100%的分数可能很有用。

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 endAngleOriginal = endAngle;
    if(endAngleOriginal - startAngle === 360){
        endAngle = 359;
    }

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

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

    if(endAngleOriginal - startAngle === 360){
        var d = [
              "M", start.x, start.y, 
              "A", radius, radius, 0, arcSweep, 0, end.x, end.y, "z"
        ].join(" ");
    }
    else{
      var d = [
          "M", start.x, start.y, 
          "A", radius, radius, 0, arcSweep, 0, end.x, end.y
      ].join(" ");
    }

    return d;       
}

document.getElementById("arc1").setAttribute("d", describeArc(120, 120, 100, 0, 359));

2016-08-29 06:32:24

其他回答

你可以使用我为上面的答案做的JSFiddle代码:

https://jsfiddle.net/tyw6nfee/

你所需要做的就是改变最后一行console.log代码，并给它自己的参数:

  console.log(describeArc(255,255,220,30,180));
  console.log(describeArc(CenterX,CenterY,Radius,startAngle,EndAngle))

2017-10-04 08:10:24

这是一个老问题，但我发现代码很有用，节省了我三分钟的思考:)所以我在@opsb的答案中添加了一个小扩展。

如果你想把这个弧转换成一个切片(允许填充)，我们可以稍微修改代码:

好了!

2017-04-04 15:34:32

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 endAngleOriginal = endAngle;
    if(endAngleOriginal - startAngle === 360){
        endAngle = 359;
    }

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

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

    if(endAngleOriginal - startAngle === 360){
        var d = [
              "M", start.x, start.y, 
              "A", radius, radius, 0, arcSweep, 0, end.x, end.y, "z"
        ].join(" ");
    }
    else{
      var d = [
          "M", start.x, start.y, 
          "A", radius, radius, 0, arcSweep, 0, end.x, end.y
      ].join(" ");
    }

    return d;       
}

document.getElementById("arc1").setAttribute("d", describeArc(120, 120, 100, 0, 359));

2016-08-29 06:32:24

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

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中

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

现场演示

2013-08-27 18:44:09

您需要使用椭圆Arc命令。不幸的是，这需要指定起始点和结束点的笛卡尔坐标(x, y)，而不是现有的极坐标(半径，角度)，因此必须进行一些数学计算。下面是一个可以工作的JavaScript函数(虽然我还没有测试它)，我希望它是相当不言自明的:

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = angleInDegrees * Math.PI / 180.0;
  var x = centerX + radius * Math.cos(angleInRadians);
  var y = centerY + radius * Math.sin(angleInRadians);
  return [x,y];
}

哪些角度对应哪些时钟位置将取决于坐标系;只需要交换sin/cos项。

arc命令有以下参数:

rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y

第一个例子:

rx=ry=25 and x-axis-rotation=0, since you want a circle and not an ellipse. You can compute both the starting coordinates (which you should Move to) and ending coordinates (x, y) using the function above, yielding (200, 175) and about (182.322, 217.678), respectively. Given these constraints so far, there are actually four arcs that could be drawn, so the two flags select one of them. I'm guessing you probably want to draw a small arc (meaning large-arc-flag=0), in the direction of decreasing angle (meaning sweep-flag=0). All together, the SVG path is:

M 200 175 A 25 25 0 0 0 182.322 217.678

对于第二个例子(假设您的意思是走向相同的方向，因此是一个大的弧)，SVG路径是:

M 200 175 A 25 25 0 1 0 217.678 217.678

同样，我还没有测试这些。

如果你像@clocksmith一样，想知道他们为什么选择这个API，看看实现说明。他们描述了两种可能的弧参数化，“端点参数化”(他们选择的那个)和“中心参数化”(就像这个问题使用的那样)。在“端点参数化”的描述中，他们说:

端点参数化的优点之一是它允许一致的路径语法，其中所有路径命令都以新的“当前点”的坐标结束。

所以基本上，这是弧线被视为更大路径的一部分的副作用，而不是它们自己单独的物体。我认为如果您的SVG渲染器是不完整的，它可以跳过任何它不知道如何渲染的路径组件，只要它知道它们接受多少参数。或者它可能支持并行渲染具有多个组件的路径的不同块。或者他们这样做是为了确保舍入误差不会沿着复杂路径的长度累积。

实现说明对于最初的问题也很有用，因为它们有更多用于在两个参数化之间转换的数学伪代码(我第一次写这个答案时没有意识到这一点)。

2011-04-20 22:10:40

如何计算圆弧(圆)的SVG路径

推荐文章

最新文章

标签