Raphaeljs 获取缩放路径的坐标答案

【问题标题】：Raphaeljs get coordinates of scaled pathRaphaeljs 获取缩放路径的坐标
【发布时间】：2013-01-24 14:51:19
【问题描述】：

我有一个创建形状的路径 - 例如。八角形

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

然后我使用它来创建我知道每个角的坐标的形状，因为它们在路径细节中。然后我使用 transform("S3.5") 重新缩放它 - 我需要能够获得新缩放形状中每个角的新坐标 - 这可能吗？

【问题讨论】：

标签： svg raphael vml

【解决方案1】：

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

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

【讨论】：

我对 getBBox 的理解是它在对象周围创建一个盒子，这意味着你不会得到每个角落的八角形？
由于某种原因，toMatrix（第 2 行）导致错误 - 它需要参数吗？
它说 .toMatrix 不是一个函数（使用 firebug）——我是否需要先包含或执行其他任何操作才能允许使用矩阵命令？
抱歉，语法错误，答案已更新。您还可以查看raphaeljs.com/reference.html#Raphael.toMatrix 和raphaeljs.com/reference.html#Raphael.mapPath 的文档

【解决方案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.

这显然是不受欢迎的内联代码块，并且只会处理野外路径的子集（尽管它可以扩展为适合通用用途）。但是，对于路径字符串使用绝对坐标的八边形情况，这个——或者类似的东西——应该能提供你所需要的。

【讨论】：