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

Question

Я пытаюсь преобразовать путь svg к полигону svg в javascript. Я нашел эту функцию для сканирования по пути и извлечения ее координат.

var length = path.getTotalLength(); 
    var p=path.getPointAtLength(0); 
    var stp=p.x+","+p.y; 

    for(var i=1; i<length; i++){ 

     p=path.getPointAtLength(i); 
     stp=stp+" "+p.x+","+p.y; 

    } 

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

Answer 1

ОК получил это .. функция getPathSegAtLength() возвращает номер фактического сегмента пути. с этим легко.

var len = path.getTotalLength(); 
    var p=path.getPointAtLength(0); 
    var seg = path.getPathSegAtLength(0); 
    var stp=p.x+","+p.y; 

    for(var i=1; i<len; i++){ 

     p=path.getPointAtLength(i); 

     if (path.getPathSegAtLength(i)>seg) { 

     stp=stp+" "+p.x+","+p.y; 
     seg = path.getPathSegAtLength(i); 

     } 

    } 

Answer 2

перебрать сегментов, использовать что-то вроде этого:

var segList = path.normalizedPathSegList; // or .pathSegList 

for(var i=1; i<segList.numberOfSegments; i++){ 
    var seg = segList.getItem(i); 
} 

Если вы хотите, чтобы уменьшить количество вершин, то вы можете использовать в качестве Simplify.jsdescribed here.

Answer 3

path.getPointAtLength() подходит для грубых целей, когда вам не нужна скорость и качество. Если вы получаете каждый пиксель, вы получаете тысячи точек, но качество по-прежнему низкое, потому что путь SVG может иметь десятичные значения, например. 0,1, 0,2.

Если вы хотите получить более точную информацию, позвоните, например. path.getPointAtLength(0.1) вы получаете легко десятки тысяч точек в сложных дорожках и в течение последних секунд или десятков секунд. И после этого вам нужно уменьшить счетчик точки (https://stackoverflow.com/a/15976155/1691517), который длится снова секунды. Но все же качество может быть низким, если неправильные точки удалены.

Лучшая техника - сначала преобразовать все сегменты пути в кубические кривые, например. используя Raphael's path2curve(), а затем используйте некоторый адаптивный метод (http://antigrain.com/research/adaptive_bezier/), чтобы преобразовать кубические сегменты в точки и одновременно получить как скорость, так и качество. И после этого нет необходимости сокращать точки, потому что сам адаптивный процесс имеет параметры для настройки качества.

Я сделал функцию, которая делает все это, и я собираюсь опубликовать ее, когда она достаточно оптимизирована для скорости. Качество и надежность, по-видимому, на 100% после тестирования с тысячами случайных путей, и скорость еще значительно быстрее, чем с path.getPointAtLength().