Question

我正在开发基于svg的应用程序。在这里，用户可以绘制不同的形状，如rect，circle，line等。我需要将这些形状转换为＆＃39; path＆＃39;然后我需要路径中的所有点。

我的解决方案适用于所有形状，除了＆＃39; circle＆＃39;。一旦用户完成绘图，我将圆圈转换为＆＃39;路径＆＃39;使用＆＃39; arc＆＃39;。当我尝试使用“getPointAtLength＆＃39; ，我在不同的浏览器中得到不同的值。这改变了最终结果。

enter image description here

到目前为止，＆＃39; Opera＆＃39;显示最佳效果。下面是我的代码。我有三个问题：

1）我如何解决这个问题？

2）有没有其他方法可以找到svg路径中的所有点？

3）有没有其他方式以路径的形式表示圆圈？

jsFiddle Link是http://jsfiddle.net/xfpDA/

  <body>
        <script>
            function roundDecimalNumber(number, places) {
                        var place;
                        if (!places)
                                place = 3;
                        else
                                place = places;                        
                        number=parseFloat(number);                        
                        number = number.toFixed(place);
                        number = parseFloat(number);
                        return number;
                }

            function path2Array(node) {
                var pointsArray = new Array();
                var point,tx,ty,cordinatesXY;

                for (var i = 0; i < node.getTotalLength(); i+=0.2) {
                    point = node.getPointAtLength(i);
                     tx=roundDecimalNumber(point.x);
                     ty=roundDecimalNumber(point.y);                   
                     cordinatesXY = {
                        x: tx,
                        y: ty
                    };
                    pointsArray.push(cordinatesXY);
                }
                return pointsArray;
            }
        </script>

        <svg id="svg" width="800" height="600" viewBox="528 139 268 192">
        <path id="square" fill="none" stroke="blue" d="M 636.866, 216.994 a 25.490,29.18 0 1,0 50.981,0 a 25.490,29.180 0 1,0 -50.981,0 z"/>
        </svg>

        <script>
            var svg=document.getElementById('svg');
            var pathSquare=document.getElementById('square');            
            pathPoints=path2Array(pathSquare);
            var d='';
            var point;
            for(var i=0;i<pathPoints.length;i++){
                point=pathPoints[i];
                if(i===0)
                {
                    d='M '+point.x+','+point.y+' L ';                        
                }
                else{
                    d+=point.x+' '+point.y+' ';
                }
            }

        var dynamicSquare=document.createElementNS("http://www.w3.org/2000/svg", "path");
        dynamicSquare.setAttribute("d", d);
        dynamicSquare.setAttribute("fill", 'none');
        dynamicSquare.setAttribute("stroke",  'red');
        dynamicSquare.setAttribute("transform",  'matrix(1 0 0 1 100 0)');
        svg.appendChild(dynamicSquare);
        </script>
</body>

我在ubuntu上，firefox版本是28.0

Svg getPointAtLength在不同浏览器中的工作方式有何不同？

0 个答案: