Question

我有一条折线（1），它与另一组内的组相关。这两个群体都以各种方式转变。我需要在变换后得到折线点的确切位置，但这并不容易，因为手头只有变换属性。我试图将这些变换复制到另一条折线（2），这样我就可以获得变换后的点位置。我从折线（1）获得了globalMatrix，并借助于此http://svg.dabbles.info/snaptut-matrix-play和互联网，我来到了这里：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变换矩阵

1 个答案: