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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (16)

给定一个圆心在(200,200),半径25的圆,我如何画一个从270度到135度的弧线,以及从270度到45度的弧线?

就是这样:已知x, y, r, d1, d2, 方向

怎么画出一个圆的部分路径?

提问于
用户回答回答于

下面是一个生成弧形路径的方法:

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));

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

实例演示

用户回答回答于

这里有一个应该可以工作的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和x-axis-rotation= 0,因为你想要一个圆而不是一个椭圆。你可以使用上面的函数计算起始坐标(你应该在这个坐标M上)和结束坐标(x,y),分别产生(200,175)和(182.322,217.678)。有了这些限制,实际上有四个弧可以绘制,所以两个标志选择其中之一。我猜你可能想画一个小弧(意思是large-arc-flag0),沿着减小角度的方向(含义sweep-flag= 0)。总之,SVG的路径是:

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

扫码关注云+社区