给定一个以(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
最佳答案
扩展@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" />
Live demo
关于svg - 如何计算圆弧的SVG路径,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/5736398/