Как нарисовать 1/4 ar c для 8 направлений компаса с SVG дугами?

Question

Как нарисовать ар c, начиная с 8 разных направлений и делая круг 1/4? Как компас. Я около часа пробовал каждую комбинацию, пытаясь сделать так, чтобы это было ar c, как начало «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>

Я получил эту функцию от SO, но, похоже, не работает так, как я ожидал.

Answer 1

Ваша функция polarToCartesian преобразует полярные координаты в декартовы.
Не думаю, что это то, что вам нужно, но вы бы поместили следующие аргументы в console.log для startAngle, endAngle

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,677, 17,677 | 0, 25 | -17,677, 17,677 | -25, 0 | -17.677, 17.677

17.677 получается по теореме Пифагора a² + b² = c².

И если вы знаете радиус, потому что прямоугольный треугольник может быть сделан из радиуса (как гипотенуза), вы получите треугольник с равными сторонами с гипотенузой в 45 °.
Таким образом, длина одна из равных сторон √ (с² / 2).

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

Чтобы проиллюстрировать пример выходных данных, сначала просто показав четверти, а затем восьмые части круга, я бы предложил следующий план, добавив атрибут штрихов по мере необходимости и установив заполнение в ноль (пробелы добавлены для удобочитаемость и масштаб добавить, чтобы увидеть это!). И не забудьте перевести весь рисунок туда, где он вам нужен.

<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>