TransWikia.com

Конвертировать PATH из SVG в POLYLINE

Stack Overflow на русском Asked on August 30, 2021

Я создаю алгоритм, и мне нужна ваша помощь. У меня есть этот векторный файл (SVG), и я хотел бы знать, есть ли способ экспортировать / преобразовать это изображение в polyline SVG только без дуги, Besier?

Что-то вроде этого:

введите сюда описание изображения

Допустим есть круг с радиусом N. Мне бы хотелось, чтобы JS-скрипт преобразовывал этот круговой путь в несколько линий (количество которых я мог бы определить, столько, сколько я хочу) таким образом, чтобы эти линии повторяли контур круга. Я просто хотел бы знать начальную X, Y и конечную X, Y координаты каждой строки, чтобы я мог экспортировать ее в текстовый файл следующим образом:

0,0 100,100 (что означает рисование линии от 0,0 до 100,100) 100,100 200,200 (что означает рисование линии от 100,00 до 200,00) … .. -100,100 0,0 (завершает круг рисованием последняя строка от -100,100 до 0,0).

Как я могу это сделать? Я знаю, что это делает polyline в SVG, так как я могу получить изображение SVG, которое использует «PATH», и заставить его использовать ТОЛЬКО POLYLINE?

Свободный перевод вопроса Convert PATH from SVG to POLYLINE от участника @Samul.

One Answer

Процесс, о котором вы говорите, обычно называется "flattening" «выравнивание». Это то, что каждая 2D векторная библиотека делает, как часть рендеринга.

Вы сможете найти много информации об этом, если вы будете искать по этому термину.

Если вы работаете в среде с доступом к SVG DOM (например, в браузере), вы также можете использовать удобную функцию getPointAtLength(), доступную для элементов пути.

var  numPoints = 16;

var  mypath = document.getElementById("mypath");
var  pathLength = mypath.getTotalLength();
var  polygonPoints= [];

for (var i=0; i<numPoints; i++) {
  var p = mypath.getPointAtLength(i * pathLength / numPoints);
  polygonPoints.push(p.x);
  polygonPoints.push(p.y);
}

var  mypolygon = document.getElementById("mypolygon");
mypolygon.setAttribute("points", polygonPoints.join(","));
path {
  fill: none;
  stroke: black;
  stroke-width: 0.5;
}

polygon {
  fill: none;
  stroke: green;
  stroke-width: 0.5;
}
<svg viewBox="0 0 100 100">
  <path id="mypath" d="M 10,50
                       C 0 0 60 0 80,30
                       C 100,60 20,100 10,50"/>
  <polygon id="mypolygon" points=""/>
</svg>

Свободный перевод ответа Convert PATH from SVG to POLYLINE от участника @Paul LeBeau.

Answered by Alexandr_TT on August 30, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP