分解svg变换矩阵

Question

我有一条折线 (1)，它与另一个组中的组一起使用。这两个群体都在各个方面发生了转变。我需要在转换后获得折线点的确切位置，但这并不容易，因为手头只有转换属性。我正在尝试将这些转换复制到另一条折线 (2)，以便获得转换后的点位置。我从 polyline(1) 中获取了 globalMatrix，并借助于此：http://svg.dabbles.info/snaptut-matrix-play and Internet, I've come to this: http://jsfiddle.net/3c4fuvfc/3/

如果没有应用任何旋转，它会起作用。如果应用旋转，那么所有的点都会有点偏离。当然缩放还没有完成，也许它解决了这个问题？然后是缩放问题：折线 (1) 有时会翻转（通常是 s-1,1 或 s1,-1）。应该如何在这里实施缩放？尝试复制转换时，这些操作的顺序是否重要？分解是否正确，这看起来很奇怪：

scaleX: Math.sqrt(matrix.a * matrix.a + matrix.b * matrix.b),
scaleY: Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d),

谢谢

Answer 1

我不确定我是否误解了这个问题，但你似乎为已有的信息做了很多工作。

您有矩阵 ( el.matrix().globalTransform )，那么为什么不只应用于每个点。我不确定分解矩阵对您有何帮助？

所以你可以这样做，遍历点，应用矩阵，你的折线与现有矩阵展平...

var m = r1.transform().globalMatrix;
var pts = poly.attr('points');
var ptsarray = [];

for( var c = 0; c < pts.length ; c += 2 ) {     
   ptsarray.push( m.x( pts[c], pts[c+1] ), 
                  m.y( pts[c], pts[c+1] ) );

}
poly.attr('points', ptsarray )

jsfiddle

可以找到使用 Snap 矩阵转换坐标 here

分解svg变换矩阵

Decomposing svg transformation matrix

svg

snap.svg

coordinate-transformation