给定一个圆心为(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
当前回答
你可以使用我为上面的答案做的JSFiddle代码:
https://jsfiddle.net/tyw6nfee/
你所需要做的就是改变最后一行console.log代码，并给它自己的参数:
console.log(describeArc(255,255,220,30,180));
console.log(describeArc(CenterX,CenterY,Radius,startAngle,EndAngle))
其他回答
@opsb的回答很简洁，但中心点不准确，而且，正如@Jithin指出的那样，如果角度是360，那么什么都画不出来。
@Jithin修复了360度的问题，但如果你选择小于360度，那么你会得到一条线关闭弧环，这是不需要的。
我修复了这个问题，并在下面的代码中添加了一些动画:
function myArc(cx, cy, radius, max){ var circle = document.getElementById("arc"); var e = circle.getAttribute("d"); var d = " M "+ (cx + radius) + " " + cy; var angle=0; window.timer = window.setInterval( function() { var radians= angle * (Math.PI / 180); // convert degree to radians var x = cx + Math.cos(radians) * radius; var y = cy + Math.sin(radians) * radius; d += " L "+x + " " + y; circle.setAttribute("d", d) if(angle==max)window.clearInterval(window.timer); angle++; } ,5) } myArc(110, 110, 100, 360); <svg xmlns="http://www.w3.org/2000/svg" style="width:220; height:220;"> <path d="" id="arc" fill="none" stroke="red" stroke-width="2" /> </svg>
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>
一个图像和一些Python
只是为了更好地澄清并提供另一种解决方案。Arc [A]命令使用当前位置作为起点，因此您必须先使用Moveto [M]命令。
那么Arc的参数如下:
rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, xf, yf
如果我们定义下面的svg文件:
<svg viewBox="0 0 500px 500px"> <path fill="red" d=" M 100 100 A 40 40 00 0 180 100 Z " / > < / 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))
你可以在我写的这篇文章中有更详细的解释。
我会使用其他答案的代码，它们看起来都是互相复制的，但是我会让起点是开始角度的函数而终点是结束角度的函数。
我将使用绝对值使大圆弧标志与顺序无关，并通过360度模数使角度与数值大小无关。
var start = polarToCartesian(x, y, radius, startAngle);
var end = polarToCartesian(x, y, radius, endAngle);
largeArcFlag = Math.abs((endAngle - startAngle) % 360) <= 180 ? "0" : "1";
clockwiseFlag = (endAngle > startAngle) ? "1" : "0";
var d = [
"M", start.x, start.y,
"A", radius, radius, 0, largeArcFlag, clockwiseFlag, end.x, end.y
].join(" ");
向威利道歉;我还没读到最后，他也发现了同样的事情。如果你喜欢我的帖子，就给他投票吧!
这是一个老问题，但我发现代码很有用，节省了我三分钟的思考:)所以我在@opsb的答案中添加了一个小扩展。
如果你想把这个弧转换成一个切片(允许填充)，我们可以稍微修改代码:
function describeArc(x, y, radius, spread, startAngle, endAngle){ var innerStart = polarToCartesian(x, y, radius, endAngle); var innerEnd = polarToCartesian(x, y, radius, startAngle); var outerStart = polarToCartesian(x, y, radius + spread, endAngle); var outerEnd = polarToCartesian(x, y, radius + spread, startAngle); var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; var d = [ "M", outerStart.x, outerStart.y, "A", radius + spread, radius + spread, 0, largeArcFlag, 0, outerEnd.x, outerEnd.y, "L", innerEnd.x, innerEnd.y, "A", radius, radius, 0, largeArcFlag, 1, innerStart.x, innerStart.y, "L", outerStart.x, outerStart.y, "Z" ].join(" "); return d; } 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)) }; } var path = describeArc(150, 150, 50, 30, 0, 50) document.getElementById("p").innerHTML = path document.getElementById("path").setAttribute('d',path) <p id="p"> </p> <svg width="300" height="300" style="border:1px gray solid"> <path id="path" fill="blue" stroke="cyan"></path> </svg>
好了!
