在 Raphael Javascript 库中渲染 SVG 多边形答案

【问题标题】：Rendering SVG polygons in Raphael Javascript library在 Raphael Javascript 库中渲染 SVG 多边形
【发布时间】：2012-03-30 05:17:17
【问题描述】：

据我所知，目前没有办法在 Raphael Javascript 库中显示 SVG 多边形。我正在构建一个需要读取 SVG 并在 Raphael 中显示它们的应用程序，但是，其中许多 SVG 使用多边形。

例如，我正在阅读具有这种格式的多边形的 SVG：

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

所以，我想知道...有没有办法将多边形点转换为我可以在 Raphael 中绘制的路径？我见过一些使用 python 和 PHP 的应用程序，但到目前为止我找不到任何严格意义上的 javascript。

任何帮助将不胜感激。谢谢

【问题讨论】：

您想要一个 JavaScript 解决方案？您的源数据是什么：带有 <polygon> 元素的实际 SVG 文件？并且您只想返回路径的 d 属性值作为结果？还是您希望将多边形就地转换为新的<path> 元素？

标签： javascript jquery svg raphael polygon

【解决方案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

Raphael 似乎想要整数，而不是小数。所以它必须是：

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)

【讨论】：

我已经编辑了这个问题。我正在寻找一种将我拥有的多边形点转换为 Raphael 路径的方法。
不要忘记正则表达式中的负值。另请注意，多边形/折线点之间不需要逗号；他们可能会使用空格。为什么floor 而不是round？在 SVG 路径数据中，您无需在第一次出现后重复命令名称。最后，由于多边形会自行闭合（而不是折线），因此您需要在数据末尾添加 Z 或 z。

【解决方案2】：

最简单（也是最紧凑）的解决方案可能是这样的，因为多边形/折线中的点总是绝对的：

多边形：

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

折线：

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

这是因为路径字符串中并不需要“L”（“d”属性）。 “M”首先表示绝对移动，然后所有坐标都是隐式绝对线（或者如果你以“m”开头，那么你会得到相对线）。

【讨论】：

【解决方案3】：

您可以使用http://readysetraphael.com/ 将整个 SVG 文件转换为 raphael 对象，更简单！！

【讨论】：

【解决方案4】：

如果你只是想让它工作：

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;
}

【讨论】：

【解决方案5】：

我想出了一个解决方案，希望对您有所帮助：

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);
}

【讨论】：