3

I want to get new Path (Arc) point after applying the translate rotate and scale on the path . I am Putting an example:

MY Path is shown like This

AS You seen Translate ,rotate and scale is applied on my path.

I am using this code for getting new path with translate(0,0) rotate(0,0,0) and scale(0,0) I am using matrixTransform(sCTM) method to get new point in the case of line after applying new transform and scale. But in the case of arc i am not getting the right path. 

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)");
Fuzzyma
  • 7,619
  • 6
  • 28
  • 60
Nitesh singh
  • 915
  • 11
  • 21

1 Answers1

0

IN the case of line the Matrix return 2 value x point and y point . but in the case of arc the matrix retuen 6 value cx cy rotation swepflag largefalg x y. in this code first i check path is arc or line if line then add the x,y coordinate only but in the case of arc i add all 6 point to the make new path arc path.

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.pathSegTypeAsLetter != "A" && segObj.pathSegTypeAsLetter !="a") {``
                        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; 
                        }
                    } else {
                        // to check the arc have rotation value of x and y 
                        if (segObj.x && segObj.y && segObj.r1 && segObj.r2) {
                            var mySVGPoint = svgRoot.createSVGPoint();
                            mySVGPoint.x = segObj.x
                            mySVGPoint.y = segObj.y
                            mySVGPoint.r1 = segObj.r1
                            mySVGPoint.r2 = segObj.r2
                            mySVGPoint.angle = segObj.angle 
                            mySVGPoint.largeArcFlag = segObj.largeArcFlag
                            mySVGPoint.sweepFlag =  segObj.sweepFlag;
                            mySVGPointTrans = mySVGPoint.matrixTransform(sCTM)
                            segObj.x = mySVGPointTrans.x
                            segObj.y = mySVGPointTrans.y
                            var largeFlag = segObj.largeArcFlag ? 1 : 0 ;
                            var sweepFlag = segObj.sweepFlag ? 0 : 1;
                            //add all parameter when arc 
                            d = d + segObj.pathSegTypeAsLetter + segObj.r1 + "," + segObj.r2 + " " +  segObj.angle + " " + largeFlag + " " + sweepFlag + " " +  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)");
Nitesh singh
  • 915
  • 11
  • 21