Визуализация SVG-полигонов в библиотеке Raphael Javascript

Question

Насколько я знаю, в настоящее время нет способа отображать SVG-полигоны в библиотеке Raphael Javascript.Я создаю приложение, которое должно читать в SVG, и они отображают их в Raphael, однако многие из этих SVG используют многоугольники.

Например, я читаю в SVG с многоугольником в этом формате:

<polygon points="260.5,627.75 259.563,628.313 258.625,628.563 258.25...

Итак, мне интересно ... Есть ли способ преобразовать точки многоугольника в путь, который я мог бы нарисовать в Рафаэле?Я видел несколько приложений, использующих Python и PHP, но до сих пор не могу найти ничего, что является строго javascript.

Любая помощь будет принята с благодарностью.Спасибо

Answer 1

См. Paper.path. Вы можете указать свой собственный путь. Например. красный треугольник:

paper.path('M 50 0 L 100 100 L 0 100 Z').attr('fill', 'red')

В ответ на ваши изменения :

Вы должны иметь возможность взять атрибут points в виде строки и заменить все координаты в формате x,y на L x,y - это сделает правильный путь для SVG. Вы можете сначала хотеть команду moveTo. Итак, это:

260.5,627.75 259.563,628.313 258.625,628.563

станет:

M 260.5,627.75 L 259.563,628.313 L 258.625,628.563

Рафаэль, кажется, хочет целые числа, а не десятичные дроби. Так должно быть:

M 260,627 L 259,628 L 258,628

Чтобы это произошло:

var polygonPoints = '260.5,627.75 259.563,628.313 258.625,628.563';
var convertedPath = polygonPoints.replace(/([0-9.]+),([0-9.]+)/g, function($0, x, y) {
    return 'L ' + Math.floor(x) + ',' + Math.floor(y) + ' ';
}).replace(/^L/, 'M'); // replace first L with M (moveTo)

Answer 2

Самое простое (и наиболее компактное) решение, вероятно, примерно такое, поскольку точки в многоугольнике / полилинии всегда абсолютны:

многоугольник:

var pathstr = "M" + yourPolygonElm.getAttribute("points") + "Z";

ломаная:

var pathstr = "M" + yourPolylineElm.getAttribute("points");

Это потому, что в строке пути «L» на самом деле не требуется (атрибут «d»). «M» означает сначала абсолютное перемещение, а затем все последующие координаты являются неявными абсолютными штрихами (или, если вы начнете с «m», вы получите относительные переводы строк).

Answer 3

вы можете использовать http://readysetraphael.com/ для конвертации всего SVG-файла в объект Raphael, это проще !!

Answer 4

Я нашел решение, надеюсь, это поможет:

this.createPolygon(304,0,0,500,912,500,608,0,'red');

createPolygon: function(x1,y1,x2,y2,x3,y3,x4,y4,color){
    return this.stage.path('M '+x1+' '+y1+' L '+x2+' '+y2+' L '+x3+' '+y3+' L '+x4+' '+y4+' Z').attr('fill',color);
}

Answer 5

Если вы просто хотите, чтобы это работало:

var polys = document.querySelectorAll('polygon,polyline');
Array.prototype.forEach.call(polys,convertPolyToPath);

function convertPolyToPath(poly){
  var path = document.createElementNS('http://www.w3.org/2000/svg','path');
  var points = poly.getAttribute('points').split(/\s+|,/);
  var x0=points.shift(), y0=points.shift();
  var pathdata = 'M'+x0+','+y0+'L'+points.join();
  if (poly.tagName=='polygon') pathdata+='z';
  path.setAttribute('d',pathdata);
  poly.parentNode.replaceChild(poly,path);
  return path;
}

Если вы хотите развернуться в SVG DOM:

function convertPolyToPath(poly){
  var path = document.createElementNS(poly.ownerSVGElement.namespaceURI,'path');
  var segs = path.pathSegList;
  var pts  = poly.points;
  for (var i=0,len=pts.numberOfItems;i<len;++i){
    var pt = pts.getItem(i);
    var func = i==0 ? 'createSVGPathSegMovetoAbs' : 'createSVGPathSegLinetoAbs';
    segs.appendItem(path[func](pt.x,pt.y))
  }
  if (poly.tagName=='polygon') segs.appendItem(path.createSVGPathSegClosePath());
  poly.parentNode.replaceChild(poly,path);
  return path;
}

Редактировать : См. Обаиз вышесказанного в действии здесь:
http://phrogz.net/svg/convert_polys_to_paths.svg

Наконец, если у вас есть точки в виде строки (.getAttribute('points')) и вы просто хотите получить данные пути:

function svgPolyPointsToPathData(points,closePath){
  points = points.split(/\s+|,/);
  var pathdata = 'M'+points.shift()+','+points.shift()+'L'+points.join();
  if (closePath) pathdata+='z';
  return pathdata;
}