Конвертировать Круг в Полилинию - PullRequest
Новая
       30

Конвертировать Круг в Полилинию

1 голос
/ 03 марта 2020

У меня есть svg circle вроде: 

<circle stroke-width="10px" cx="317.5" cy="108.5" r="52.71147882577384"></circle>

Мы можем рассматривать это как некоторую точку с определенным радиусом.

Вопрос: как нарисовать ломаную линию (набор маленьких линий), чтобы воспроизвести этот круг?

Ответы [ 2 ]

3 голосов
/ 03 марта 2020

Вам нужно будет нарисовать многоугольник со многими сторонами. В следующем примере вершины многоугольника находятся на расстоянии 0,1 радиана друг от друга. В зависимости от размера круга вам может понадобиться использовать меньшее значение, 

let r = 52.71;// the radius of the circle
let cx = 317.5;// the x coord of the center of the circle
let cy = 108.5;// the y coord of the center of the circle
let points = "";// the points for the polyline

for (let a = 0; a <= 2*Math.PI; a+=.1) {
  let x = cx + r * Math.cos(a);
  let y = cy + r * Math.sin(a);
  points += `${x}, ${y} `;
}
// close the path
//if you are using polygon instead of polyline you may skip this line
points += `${cx + r}, ${cy} `;
// set the atribute points for the polyline
poly.setAttributeNS(null, "points", points)
svg{border: solid}
<svg viewBox ="260 50 115 115" width="200">
  <circle id="c" cx="317.5" cy="108.5" r="52.71" fill="gold"></circle>
  <polyline id="poly" points="" stroke="red" fill="none" />
</svg>
1 голос
/ 03 марта 2020 

const NUM_VERTICES = 30;
const DELTA_THETA = 2 * Math.PI / NUM_VERTICES;

function getVertices(options) {
  const { cx, cy, r } = options;
  
  function getParametricCoordinates(t) {
    return [
      r * Math.cos(t) + cx,
      r * Math.sin(t) + cy,
    ];
  }
  
  const vertices = [];
  for (let i = 0; i <= NUM_VERTICES; i++) {
    const t = i * DELTA_THETA;
    const vertex = getParametricCoordinates(t);
    vertices.push(vertex);
  }
  return vertices;
}

const svg = document.getElementById('svg');
const polyline = document.getElementById('polyline');
const vertices = getVertices({ cx: 317.5, cy: 108.5, r: 52.71147882577384 } );
vertices.forEach(vertex => {
  const point = svg.createSVGPoint();
  point.x = vertex[0];
  point.y = vertex[1];
  polyline.points.appendItem(point);
});
<svg width="450" height="250" id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <polyline id="polyline" stroke-width="10" />
</svg>
...