Блог

Главная - Вопросы по программированию - Превратить SVG в последовательность точек

Превратить SVG в последовательность точек

#svg #polygon #bezier

#svg #полигон #Безье

Вопрос:

Учитывая SVG, существует ли библиотека, которая помогает мне превратить любой путь к файлу в последовательность точек, которые лежат на пути, при этом длина пути между двумя последовательными точками равна 1 (или какой-либо другой константе)?

Ответ №1:

Библиотека не нужна. API SVGGeometryElement делает это возможным в течение нескольких строк кода:

 function getPointsAlongPath (path, distance) {
  const length = path.getTotalLength();
  const points = [];

  for (let step = 0; step <= length; step = step   distance) {
    points.push(path.getPointAtLength(step));
  }
  
  return points;
}

const result = getPointsAlongPath(document.querySelector('circle'), 5);
console.log(result.map(p => [p.x, p.y]));  
 <svg width="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="none" stroke="black" />
</svg>