Алгоритм: функция для разрешения градусов к x, y для рисования круговых диаграмм SVG

Question

Я работаю с графикой SVG для рисования круговых диаграмм.Мне даны градусы, на которых должна быть круговая диаграмма - например, 277 градусов - и диаметр - например, 200 пикселей - и мне нужно нарисовать круг из 277 градусов.

С графикой SVG мне нужно разрешить эти 277 градусов доточка, где этот круг закончится.

Я не самый лучший в математике, поэтому я придумал функцию формулы / javascript, которая позволит мне принять значение в градусах и придумать топор, точку yгде круг закончится.

Правильно ли моя функция Javascript (внизу) разрешит градусы в правильную точку?Можете ли вы помочь мне разработать мой алгоритм для получения координаты из значения в градусах? Или, может быть, существует какой-то существующий алгоритм, о котором я не могу знать?

Мой алгоритм: (Который мне требуется помощь)
Итак, мне даны следующие значения: Диаметр круга: 200 пикселей, размер круга: 277 градусов.

• Мне требуется точка, в которой 277 заканчивается при вращении вокруг точки 0,0.
• 277 заканчивается в 1-м квадранте, что означает, что мне нужно использовать sin (isэто правильно?)

• Итак, значения, которые я знаю сейчас о треугольнике: гипотенуза = 100px (радиус), угол = 7 градусов (277-270).

  грех (7) = о / 100;0,1219 = о / 100;o = 12,2;

• Следовательно, точка y равна 12,2 (для меня ради 0,0 верхний левый угол, поэтому его действительно midY-x = 100-12,2 = 87,8; (правильно?)

• Теперь, чтобы определить x pos, я использую cos (это правильно?).

  cos (7) = a / 100; a = 99.25;

• Следовательно, точка x равна 99,25 или 100-99,25 = 0,75;

Таким образом, координата x, y, равная 277 градусам, равна 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);
}

Answer 1

Это простое преобразование из полярных в декартовы координаты:

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

Answer 2

Если вы рассматриваете единичную окружность, то X-координата для данного (в радианах) угла задается косинусом, аналогично, Y-координата задается синусом.Таким образом, вы можете легко решить эту проблему следующим образом.

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

  return {mX : x, mY: y};
}