Question

我希望在路径上应用平移旋转和缩放后获得新的路径（弧）点。我举个例子：

MY Path显示如下

如您所见，翻译，旋转和缩放应用于我的路径。

我正在使用此代码获取带有translate（0,0）rotate（0,0,0）和scale（0,0）的新路径我正在使用matrixTransform（sCTM）方法来获取新点的情况下应用新的变换和比例后的线。但在弧线的情况下，我没有得到正确的道路。

var path = d3.select("g")[0][0]; // Get g tag
            var d = "";
            // console.log(path.select('path').getAttr('d'));
            var sCTM = path.getCTM(); // get transform data
            var svgRoot = path.ownerSVGElement // get svg tag
            var pathId = d3.select("g path")[0][0]; // get path
            var segList = pathId.pathSegList // 
            var segs = segList.numberOfItems
                //---change segObj values
                // create D after apply transform elements
            for (var k = 0; k < segs; k++) {
                var segObj = segList.getItem(k)
                if (segObj.x && segObj.y) {
                    var mySVGPoint = svgRoot.createSVGPoint();
                    mySVGPoint.x = segObj.x
                    mySVGPoint.y = segObj.y
                    mySVGPointTrans = mySVGPoint.matrixTransform(sCTM)
                    console.log("testing my object",mySVGPointTrans);
                    segObj.x = mySVGPointTrans.x;
                    segObj.y = mySVGPointTrans.y;
                    d = d + segObj.pathSegTypeAsLetter + mySVGPointTrans.x + "," + mySVGPointTrans.y; 
                }
            }
            d3..select("g").select("path").attr("d",d);
            //---force removal of transform--
            path.setAttribute("transform", "translate(0,0)rotate(0,0,0)skewX(0)scale(1,1)");

Answer 1

在行的情况下，Matrix返回2值x点和y点。但是在弧的情况下，矩阵重新调整6值cx cy旋转 swepflag largefalg x y。在这段代码中我首先检查路径是弧还是线如果行然后只添加x，y坐标，但在arc i add的情况下所有6指向新的路径弧路径。

–

在弧SVG上应用平移旋转和缩放后获取新路径

1 个答案: