在Raphael Javascript库中渲染SVG多边形
Rendering SVG polygons in Raphael Javascript library
据我所知,目前无法在Raphael Javascript库中显示SVG多边形。我正在构建一个需要在SVG中读取的应用程序,它们在Raphael中显示这些SVG,然而,这些SVG中的许多都使用多边形。
例如,我正在阅读一个SVG,其中有一个多边形,格式如下:
<polygon points="260.5,627.75 259.563,628.313 258.625,628.563 258.25...
所以,我想知道。。。有没有一种方法可以将多边形点转换为我可以在拉斐尔中绘制的路径?我见过一些使用python和PHP的应用程序,但到目前为止,我还找不到任何严格意义上的javascript。
如有任何帮助,我们将不胜感激。感谢
参见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)
最简单(也是最紧凑)的解决方案可能是这样的,因为多边形/多段线中的点总是绝对的:
多边形:
var pathstr = "M" + yourPolygonElm.getAttribute("points") + "Z";
折线:
var pathstr = "M" + yourPolylineElm.getAttribute("points");
这是因为在路径字符串("d"属性)中并不真正需要"L"。"M"首先意味着一个绝对的moveto,然后后面的所有坐标都是隐含的绝对linetos(或者如果你以"M"开头,那么你得到的是相对linetos)。
您可以使用http://readysetraphael.com/要将整个SVG文件转换为拉斐尔对象,这更容易!!
如果你只想让它工作:
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;
}
我想出了一个解决方案,希望这能有所帮助:
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);
}
- SVG/JavaScript:尝试选择和更改多边形点
- svg,多边形,JS函数错误
- 在多边形贴图上显示 svg 圆
- 如何对单个 SVG 多边形点进行动画处理
- D3 map - 将两个不相交的 SVG 多边形路径合并为一个路径
- 将 Google 地图多边形路径转换为 SVG 路径
- svg 多边形标签的宽度
- 对 SVG 多边形进行动画处理
- 在多边形中包含 png/svg
- SVG 多边形过渡
- 动画多边形点捕捉.svg
- 在svg多边形上单击时更改填充属性
- 在Raphael Javascript库中渲染SVG多边形
- 调整多边形点路径(svg)内的图像大小并使其不被剪裁
- SVG多边形边的厚度不规则
- 转换SVG多边形点到路径
- 通过Javascript更改svg多边形属性
- 转换SVG多边形路径到纬度和长坐标
- 随机放置svg多边形
- SVG多边形比例和相应的设置点