Question

我有一条创造形状的道路 - 例如。八角形

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");

然后我用它来创建我知道每个角的坐标的形状，因为它们在pathdetail中。然后我使用transform（“S3.5”）重新缩放它 - 我需要能够以新的缩放形状获得每个角的新坐标 - 这可能吗？

Answer 1

Raphael提供了一个将矩阵变换应用于路径的实用程序，首先需要将变换转换为矩阵，应用变换并将其应用于元素：

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

Answer 2

如果我理解正确，你想找到八角形中八个点中每个点的变换坐标 - 对吗？如果是这样，Raphael没有为您提供开箱即用的解决方案，但您应该能够使用Raphael的一些核心实用功能相对轻松地获取所需的信息。

我的推荐是这样的：

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.

这显然是一个不受欢迎的内核代码块，只能处理野外路径的子集（尽管它可以扩展为适合通用目的）。但是，对于路径字符串使用绝对坐标的八边形情况，这个 - 或类似的东西 - 应该能够准确地为您提供所需的信息。

Raphaeljs获得缩放路径的坐标

2 个答案: