如何使用SVG圆弧为指南针的8个方向绘制1/4圆弧

Question

如何绘制从8个不同方向开始的圆弧，并形成1/4圆？就像指南针。大约一个小时以来，我一直在尝试每种组合，试图让它成为一个弧形，就像一个带尾巴的"r"的开头，但我无法让它发挥作用。我想看看它是如何在各个方向上完成的，这样我就可以更好地了解如何操作它

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))
};
}
console.log(describeArc(0, 250, 25, -90, 0))
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;
}

path {
float: left;
stroke-linecap: round;
}

<svg style="display: inline-block; width: 50px; height: 250px" viewBox="-20 -20 120 520" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="
M 0 300
l 0 -50
M 0 225 A 25 25 0 0 0 -25 275"
fill="none" stroke="#000" stroke-width="10px" />
</g>
</svg>

我完成了这个功能，但似乎并没有像我预期的那样工作。

Answer 1

您的函数polarToCartesian将极坐标转换为笛卡尔坐标
我不认为这是你想要的，但你应该在startAngle、endAngle 的console.log中放入以下参数集

0，45 | 45，90 | 90，135 | 135，180 | 180，225 | 225，270 | 270，315 | 315，360 |。

x和y参数需要再次计算为笛卡尔坐标空间中的不同坐标。这些取决于第一个坐标的起点。绘制任何取决于在圆中旋转的东西时，你需要考虑圆心在哪里。圆心的坐标最好描述为0，0，然后将圆移动到所需位置。坐标取决于半径，即25。所以我建议：

0，-25|17.677-17.677|25，0|17.67717.677|0，25|-17.67717.677|-25，0|-17.677，17.677atr

17.677是由a²+b²=c²的毕达哥拉斯定理得到的。

如果你知道半径，因为直角三角形可以由半径(作为斜边(制成，你会得到一个边相等的三角形，斜边为45°
因此，其中一条相等边的长度为√(c²/2(。

function equalSideLength(radius){
return Math.sqrt(Math.pow(radius, 2)/2);
}

为了说明输出的示例，首先只显示圆圈的四分之一和八分之一，我建议使用以下计划，根据需要添加笔划属性，并将fill设置为none(为可读性添加空白，然后添加比例以查看它！(。别忘了把整幅画翻译到你需要的地方。

<svg width="1000" height="1000">
<g transform="translate(100 100) scale(50)">
<path d="M0 0 L 0 -2 A2 2 0 0 1  2  0 " fill="red"/>
<path d="M0 0 L 2  0 A2 2 0 0 1  0  2" fill="yellow"/>
<path d="M0 0 L 0  2 A2 2 0 0 1 -2  0" fill="pink"/>
<path d="M0 0 L-2  0 A2 2 0 0 1  0 -2" fill="green"/>
</g>

<g transform="translate(400 100) scale(50)">
<path d="M0 0 L 0   -2   A2 2 0 0 1  1.4  -1.4" fill="red"/>
<path d="M0 0 L 1.4 -1.4 A2 2 0 0 1  2     0  " fill="yellow"/>
<path d="M0 0 L 2    0   A2 2 0 0 1  1.4   1.4" fill="pink"/>
<path d="M0 0 L 1.4  1.4 A2 2 0 0 1  0     2  " fill="green"/>
<path d="M0 0 L 0    2   A2 2 0 0 1 -1.4   1.4" fill="orange"/>
<path d="M0 0 L-1.4  1.4 A2 2 0 0 1 -2     0  " fill="purple"/>
<path d="M0 0 L-2    0   A2 2 0 0 1 -1.4  -1.4" fill="blue"/>
<path d="M0 0 L-1.4 -1.4 A2 2 0 0 1  0    -2  " fill="grey"/>
</g>
<svg>