如何计算圆弧(圆)的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

当前回答

一个图像和一些Python

只是为了更好地澄清并提供另一种解决方案。Arc [A]命令使用当前位置作为起点，因此您必须先使用Moveto [M]命令。

那么Arc的参数如下:

rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, xf, yf

如果我们定义下面的svg文件:

你可以用M来设定起点，用参数xf和yf (A)来设定终点。

我们正在寻找圆，所以我们设rx = ry现在基本上它会尝试找到所有半径为rx的圆相交于起点和终点。

import numpy as np

def write_svgarc(xcenter,ycenter,r,startangle,endangle,output='arc.svg'):
    if startangle > endangle: 
        raise ValueError("startangle must be smaller than endangle")
    
    if endangle - startangle < 360:
        large_arc_flag = 0
        radiansconversion = np.pi/180.
        xstartpoint = xcenter + r*np.cos(startangle*radiansconversion)
        ystartpoint = ycenter - r*np.sin(startangle*radiansconversion)
        xendpoint = xcenter + r*np.cos(endangle*radiansconversion)
        yendpoint = ycenter - r*np.sin(endangle*radiansconversion)
        #If we want to plot angles larger than 180 degrees we need this
        if endangle - startangle > 180: large_arc_flag = 1
        with open(output,'a') as f:
            f.write(r"""<path d=" """)
            f.write("M %s %s" %(xstartpoint,ystartpoint))
            f.write("A %s %s 0 %s 0 %s %s" 
                    %(r,r,large_arc_flag,xendpoint,yendpoint))
            f.write("L %s %s" %(xcenter,ycenter))
            f.write(r"""Z"/>""" )
    
    else:
        with open(output,'a') as f:
            f.write(r"""<circle cx="%s" cy="%s" r="%s"/>"""
                    %(xcenter,ycenter,r))

你可以在我写的这篇文章中有更详细的解释。

2018-05-03 15:48:48

其他回答

您需要使用椭圆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

对于寻求答案的人(我也是)，如果不是必须使用arc，绘制部分圆的一个更简单的解决方案是使用SVG的stroke-dasharray <circle>。

将虚线数组分为两个元素，并将其范围缩放到所需的角度。起始角度可以使用冲程-达霍夫集进行调整。

看不见一个余弦。

完整的例子和解释: https://codepen.io/mjurczyk/pen/wvBKOvP

2019-12-08 06:16:26

扩展@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

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

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

好了!

2017-04-04 15:34:32

PHP有人知道吗?

将接受的答案转换为PHP代码。帮助在服务器上生成弧。

function polarToCartesian($centerX, $centerY, $radius, $angleInDegrees) {
   $angleInRadians = ($angleInDegrees-90) * pi() / 180.0;

  return array(
    "x"=> $centerX + ($radius * cos($angleInRadians)),
    "y"=> $centerY + ($radius * sin($angleInRadians)),
  );
}

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

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

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

     $d = implode(" ", array(
        "M", $start["x"], $start["y"], 
        "A", $radius, $radius, 0, $largeArcFlag, 0, $end["x"], $end["y"]));

    return $d;       
}

<svg>
    <path fill="none" stroke="#446688" stroke-width="20" d="<?= describeArc(150, 150, 100, 0, 30) ?>" />
</svg>

2022-10-08 14:17:31

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

推荐文章

最新文章

标签