Преобразовать путь SVG в координаты многоугольника - PullRequest
Новая
       15

Преобразовать путь SVG в координаты многоугольника

0 голосов
/ 20 ноября 2018

Мне нужна функция или плагин, который преобразует команды пути для SVG-пути в многоугольные точки.

Я нашел один: https://github.com/Phrogz/svg-path-to-polygons

Проблема в том, что он не поддерживает дуги икривые как А и С. 

let pathData = 'M5,15 c5.5,0 10-4.5 10,-10 h10';
let points = pathDataToPolys(pathData, {tolerance:1, decimals:1});
console.log(points);
/*******************************************************************
[
  [ [5,15],[7,14.8],[10.6,13.3],[13.3,10.6],[14.8,7],[15,5],[25,5] ]
]

У меня есть путь как 'M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z'.Мне нужно, чтобы это было преобразовано в точки многоугольника.

Любая помощь или предложения высоко ценятся.

1 Ответ

0 голосов
/ 21 ноября 2018

Я думаю, что есть некоторая путаница, потому что неясно, какое преобразование вы ищете.Есть два решения с разными уровнями сложности.

  1. Сглаживание .Сглаживание - это термин, используемый 2D рендерами для обозначения шага в процессе рендеринга.Алгоритм выравнивания адаптивный.Он будет располагать точки многоугольника ближе друг к другу, когда путь имеет высокую кривизну.И он будет использовать меньше точек, когда путь прямее.

  2. Простое преобразование .Вы можете просто шагать вдоль кривой через равные промежутки времени и выбирать местоположение пути на каждом шаге.

Пример кода и вывод, который вы предоставляете в своем вопросе, заставляет его выглядеть так, как будто вы хотитеТип выравнивания.

Однако, если вы не суетливы, то вариант 2 действительно прост.SVG включает API, разработанный для этой задачи. 

var NUM_POINTS = 6;

var path = document.getElementById("test");
var len = path.getTotalLength();
var points = [];

for (var i=0; i < NUM_POINTS; i++) {
    var pt = path.getPointAtLength(i * len / (NUM_POINTS-1));
    points.push([pt.x, pt.y]);
}

console.log("points = ", points);
<svg>
  <path id="test" d="M5,15 c5.5,0 10-4.5 10,-10 h10"/>
</svg>
...