算法:将度数解析为 x,y 以绘制 SVG 饼图的函数

问题描述 投票:0回答:2

我正在使用 SVG 图形来绘制饼图。我得到了饼图的度数 - 例如 277 度 - 和直径 - 例如 200px - 我需要画一个 277 度的圆。

使用 SVG 图形,我需要将 277 度解析为该圆的终点。

我不是最擅长数学,所以我想出了一个公式/javascript 函数,它可以让我获取度值并得出圆结束的 x,y 点。

我的Javascript函数(在底部)能正确地将度数解析为正确的点吗?你能帮我开发我的算法来从角度值获取坐标吗? 或者也许有一个我可以使用但我不知道的现有算法?

我的算法:(我需要帮助)
所以我给出的值是:圆直径:200px,圆大小:277 度。

  • 我需要绕点0,0旋转时277结束的点。
  • 277 在第一象限结束,这意味着我需要使用 sin (正确吗?)
  • 所以我现在知道的三角形的值是:斜边=100px(半径),角度=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(正确吗?)。

    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);
}
javascript html algorithm svg
2个回答
6
投票

这是从极坐标到笛卡尔坐标的简单转换:

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


1
投票

如果考虑单位圆,则给定(基于弧度)角度的 X 坐标由余弦给出,同样,Y 坐标由正弦给出。因此,您可以按照以下方式轻松解决此问题。

function resolveToPoint(deg, diameter) {  
  var radians = deg / 180 * Math.PI;
  var x = diameter / 2 * Math.cos(radians);
  var y = diameter / 2 * Math.sin(radians);

  return {mX : x, mY: y};
}
© www.soinside.com 2019 - 2024. All rights reserved.