分解SVG变换矩阵 [英] Decomposing svg transformation matrix

问题描述

我有一条折线(1)，该折线与另一个组内的组同在.这两个群体都以各种方式发生了转变.转换后，我需要获得折线点的确切位置，但这并不容易，因为手头只有转换属性. 我正在尝试将这些转换复制到另一个折线(2)，以便获取转换后的点位置.我从折线(1)获得了globalMatrix，并借助以下方法: http://svg. dabbles.info/snaptut-matrix-play 和互联网，我来了: http://jsfiddle.net/3c4fuvfc/3/

I have a polyline(1) that is withing group that is within another group. Both of these groups are transformed in every way. I need to get the exact locations of the polyline points after the transformations but it isn't easy since there is only transform attribute at hand. I'm trying to replicate these transformations to another polyline(2) so I would get the transformed point locations. I get the globalMatrix from the polyline(1) and with the help of this: 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).这里应该如何实现缩放? 在尝试复制转换时以这些顺序完成的顺序重要吗? 分解正确吗，这似乎很奇怪:

It works if there isn't any rotation applied. If rotation is applied then all the points are a little off. Of course the scaling isn't done yet, maybe it fixes this issue? And then there is the issue of scaling: polyline(1) is sometimes flipped around ( typically s-1,1 or s1,-1). How is scaling supposed to be implemented here? Is it important in which order these are done when trying to replicate transformations? Is the decomposing done right, this seems odd:

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

谢谢

推荐答案

我不确定我是否对该问题有误解，但您似乎正在为获取已有信息而做大量工作.

I'm not sure if I'm misunderstanding the problem, but you seem to be doing a lot of work for information you already have.

您有矩阵(el.matrix().globalTransform)，所以为什么不仅将其应用于每个点.我不确定分解矩阵有什么帮助?

You have the matrix ( el.matrix().globalTransform ), so why not just apply to to each point. I'm not sure what what help decomposing the matrix is giving you ?

所以您可以执行此操作，遍历所有点，应用矩阵，然后将折线与现有矩阵展平...

So you could do this, iterate over the points, apply the matrix, and your polyline is flattened with the existing matrix...

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

可以在此处

这篇关于分解SVG变换矩阵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！