Raphaeljs get coordinates of scaled path

Question

I have a path to create a shape - eg. an octagon

pathdetail="M50,83.33 L83.33,50 L116.66,50 L150,83.33 L150,116.66 L116.66,150 L83.33,150 L50,116.66Z";
paper.path(pathdetail);
paper.path(pathdetail).transform("S3.5");

I then use this to create the shape which I know the coordinates of each corner as they are in the pathdetail. I then rescale it using transform("S3.5") - I need to be able to get the new coordinates of each corner in the new scaled shape - is this possible to do?

Answer 1

Raphael provides an utility to apply matrix transforms to paths, first you need to convert the transformation to a matrix, apply the transformation and apply it to the element:

var matrix = Raphael.toMatrix(pathdetail, "S3.5");
var newPath = Raphael.mapPath(pathdetail, matrix);
octagon.path(newPath);

Answer 2

If I understand correctly, you want to find the transformed coordinates of each of the eight points in your octagon -- correct? If so, Raphael does not have an out of the box solution for you, but you should be able to get the information you need relatively easily using some of Raphael's core utility functions.

My recommendation would be something like this:

var pathdetail = "your path definition here.  Your path uses only absolute coordinates...  right?";
var pathdetail = Raphael.transformPath( pathdetail, "your transform string" );

//  pathdetail will now still be a string full of path notation, but its coordinates will be transformed appropriately

var pathparts = Raphael.parsePathString( pathdetail );
var cornerList = [];

//  pathparts will not be an array of path elements, each of which will be parsed into a subarray whose elements consist of a command and 0 or more parameters.
//  The following logic assumes that your path string uses ONLY ABSOLUTE COORDINATES and does
//  not take relative coordinates (or H/V directives) into account.  You should be able to 
//  code around this with only a little additional logic =)
for ( var i = 0; i < pathparts.length; i++ )
{
    switch( pathparts[i][0] )
    {
        case "M" :
        case "L" :
            //  Capture the point
            cornerList.push( { x: pathparts[i][1], y: pathparts[i][2] } );
            break;
        default :
            console.log("Skipping irrelevant path directive '" + pathparts[i][0] + "'" );
            break;
    }
}

// At this point, the array cornerList should be populated with every discrete point in your path.

This is obviously an undesirable chunk of code to use inline and will only handle a subset of paths in the wild (though it could be expanded to be suitable for general purpose use). However, for the octagon case where the path string uses absolute coordinates, this -- or something much like it -- should give you exactly what you need.