在Raphael Javascript库中渲染SVG多边形

据我所知,目前没有办法在Raphael Javascript库中显示SVG多边形。 我正在构建一个需要读取SVG的应用程序,并将它们显示在Raphael中,但是,其中很多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')

为了回应你的编辑

你应该能够拿分属性,作为一个字符串,并更换所有的坐标格式为x,yL 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");

这是因为路径字符串中不需要“L”(“d”属性)。 “M”表示首先是一个绝对的moveto,然后所有的坐标都是隐式的绝对linetos(或者如果你以“m”开头,那么你会得到相对的linetos)。


你可以使用http://readysetraphael.com/将整个SVG文件转换为raphael对象,这很容易!

链接地址: http://www.djcxy.com/p/76487.html

上一篇: Rendering SVG polygons in Raphael Javascript library

下一篇: how to stroke individual paths?