将Raphael路径转换为线段数组[[x1,y1],[x2,y2],... [xn,yn]

时间:2015-06-25 18:07:49

标签: svg d3.js raphael

有没有办法将Raphael线路转换为数组[x1,y1],[x2,y2],... [xn,yn]?所以我可以根据与其他路径的交集对路径进行一些自定义更改。我想只获取带坐标的路径数组,而不是任何字符,所以我可以在下面的代码中使用路径数组。 https://github.com/eweitnauer/svg-erase/blob/master/erase.js

从现有代码

<path fill="none" stroke="#3c5980" d="M461.34375,214L461.34375,214C460.84375,214,458.84375,214,458.34375,214C457.84375,214,458.34375,214,458.34375,214C458.34375,214,460.1770833333333,214,458.34375,214C456.5104166666667,214,451.34375,214,447.34375,214C443.34375,214,440.1770833333333,213.33333333333334,434.34375,214C428.5104166666667,214.66666666666666,419.1770833333333,215.66666666666666,412.34375,218C405.5104166666667,220.33333333333334,399.5104166666667,223.33333333333334,393.34375,228C387.1770833333333,232.66666666666666,380.0104166666667,241,375.34375,246C370.6770833333333,251,368.1770833333333,254,365.34375,258C362.5104166666667,262,360.1770833333333,266.3333333333333,358.34375,270C356.5104166666667,273.6666666666667,355.0104166666667,277,354.34375,280C353.6770833333333,283,354.34375,284.6666666666667,354.34375,288C354.34375,291.3333333333333,353.5104166666667,296.3333333333333,354.34375,300C355.1770833333333,303.6666666666667,356.6770833333333,306.6666666666667,359.34375,310C362.0104166666667,313.3333333333333,365.84375,316.8333333333333,370.34375,320C374.84375,323.1666666666667,380.5104166666667,327,386.34375,329C392.1770833333333,331,399.0104166666667,331.5,405.34375,332C411.6770833333333,332.5,419.5104166666667,333,424.34375,332C429.1770833333333,331,431.84375,328,434.34375,326C436.84375,324,437.5104166666667,322.6666666666667,439.34375,320C441.1770833333333,317.3333333333333,445.1770833333333,313,445.34375,310C445.5104166666667,307,445.5104166666667,304.8333333333333,440.34375,302C435.1770833333333,299.1666666666667,422.6770833333333,295,414.34375,293C406.0104166666667,291,398.34375,290.6666666666667,390.34375,290C382.34375,289.3333333333333,374.0104166666667,289.1666666666667,366.34375,289C358.6770833333333,288.8333333333333,349.34375,289,344.34375,289C339.34375,289,338.6770833333333,288.5,336.34375,289C334.0104166666667,289.5,331.6770833333333,291.3333333333333,330.34375,292C329.0104166666667,292.6666666666667,328.6770833333333,292.5,328.34375,293C328.0104166666667,293.5,328.34375,294.6666666666667,328.34375,295" stroke-width="4" stroke-dasharray="0" stroke-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1;"></path>

如下所示。

paths = [[727,152], [727,151], [725,150], [721,148], [713,144], [704,140], [692,137], [678,135], [667,134], [656,134], [646,134], [635,137], [625,142], [615,148], [603,159], [594,170], [585,181], [582,193], [577,210], [572,232], [567,266], [563,296], [563,319], [567,338], [573,353], [582,367], [591,377], [601,390], [615,398], [628,406], [642,411], [660,415], [677,417], [692,417], [707,417], [724,413], [743,407], [758,399], [769,388], [775,378], [781,365], [785,351], [790,335], [794,323], [794,312], [794,302], [791,293], [786,283], [782,276], [776,270], [771,264], [763,261], [750,256], [731,252], [713,244], [693,240], [670,238], [650,237], [638,237], [628,239], [621,244], [616,249], [611,257], [604,267], [601,277], [598,288], [598,301], [598,317], [601,333], [608,345], [619,361], [630,371], [639,381], [648,388], [656,393], [666,397], [673,398], [684,399], [696,400], [705,399], [716,393], [724,386], [730,378], [734,370], [737,363], [737,357], [737,350], [737,341], [734,335], [728,327], [723,324], [715,321], [709,320], [700,320], [693,320], [685,321], [678,324], [672,326], [667,328], [666,329], [666,330] ]

我实际上可以使用以下代码获取它。但是有没有任何有效的方法,因为它会做数百万次。

var bot = convertor(Raphael.parsePathString(path));
    var convertor = function(pathparts){
        var cornerList = [];
for ( var i = 0; i < pathparts.length; i++ )
{
    var ar = [], part = pathparts[i][0]; 
    switch( part )
    {
        case "M" :
        case "L" :
            //  Capture the point
            ar.push(pathparts[i][1]);
            ar.push(pathparts[i][2]);
            cornerList.push(ar);
            break;
        default :
            console.log("Skipping irrelevant path directive '" + pathparts[i][0] + "'" );
            break;
    }

}
 return cornerList;

    }

1 个答案:

答案 0 :(得分:0)

我建议你改用它:

//assume pathElement hold the path instance.
var pathElement = <your path instance>
var segments = pathElement.pathSegList;
//segments will hold the array of SVGPathSegLine