我正在使用 SVG 图形绘制饼图。我得到了饼图的度数 - 例如 277 度 - 和直径 - 例如 200px - 我需要画一个 277 度的圆。
对于 SVG 图形,我需要将 277 度解析为该圆将结束的点。
我不是最擅长数学的,所以我想出了一个公式/javascript 函数,它允许我获取度值并得出圆圈结束位置的 x,y 点。
我的 Javascript 函数(在底部)能否正确地将度数解析为正确的点?你能帮我开发我的算法来从度值获取坐标吗? 或者也许有一个我不知道的现有算法我可以使用?
我的算法:(我需要帮助)
所以我给出的值是:圆直径:200 像素,圆大小:277 度。
- 我需要围绕点 0,0 旋转时 277 结束的点。
- 277 在第一象限结束,这意味着我需要使用 sin (正确吗?)
所以我现在知道的三 Angular 形的值是:斜边=100px(半径), Angular =7 度(277-270)。
sin(7) = o/100; 0.1219 = o/100; o = 12.2;
因此 y 点是 12.2(对我来说 0,0 是左上角所以它实际上是 midY-x = 100-12.2 = 87.8;(正确吗?)
现在要确定 x 位置,我使用 cos(正确吗?)。
余弦(7) = a/100; a = 99.25;
- 因此x点为99.25或100-99.25=0.75;
所以277度的x,y坐标是0.75,87.8。对吗?
所以在代码中这个算法将是:
function resolveToPoint( deg, diameter )
{
if ( deg <= 0)
return 0;
var x = 0;
var y = 0;
var angle = 0;
var rad = diameter/2;
var midX = rad;
var midY = rad;
if (deg <= 90)
angle = 90 - deg;
else if (deg <= 180)
angle = deg - 90;
else if (deg <= 270)
angle = deg - 180;
else if (deg <= 360)
angle = deg - 270;
// Q: Will I ALWAYS use cos to determine the x & sin for the x NO MATTER what quadrant the angle is in??
x = Math.cos(angle) * rad;
y = Math.sin(angle) * rad;
if (deg <= 90)
{
x = midX + x;
y = midY - y;
}
else if (deg <= 180)
{
x = midX + x;
y = midY + y;
}
else if (deg <= 270)
{
x = midX - x;
y = midY + y;
}
else if (deg <= 360)
{
x = midX - x;
y = midY - y;
}
return {mX: x, mY: y};
}
然后我将像这样在 SVG 中使用它:
function outputPiegraph( point, rad, diameter )
{
var svg = '<svg width="%spx" height=""%spx" id='pie' style="background-color: green;">
<path d="M%spx,%spx L%spx, %spx A%spx,"%spx 1 1,1 %spx,%spx z"
fill="red" stroke="blue" stroke-width="2" />"
</svg>';
return sprintf(svg, diameter, diameter, point.mX, point.mY, rad, rad, rad, diameter);
}
最佳答案
这是从极坐标到笛卡尔坐标的简单转换:
function resolveToPoint(deg, diameter) {
var rad = Math.PI * deg / 180;
var r = diameter / 2;
return {mX: r * Math.cos(rad), mY: r * Math.sin(rad)};
}
http://en.wikipedia.org/wiki/Polar_coordinates#Converting_between_polar_and_Cartesian_coordinates
关于javascript - 算法:将度数解析为 x,y 以绘制 SVG 饼图的函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8796690/