7

svg には、次element.getCTM()のように返すメソッドがありますSVGMatrix。

[a c e][b d f][0 0 1]

この行列から sx 、 sy 、および回転角度を計算したいと思います。

4

1 に答える 1

11

このテーマについては、読んで学ぶべきことがたくさんあります。私は基本的な答えを出しますが、ゲームやアニメーションをやろうとしているのであれば、これはそれを行う方法ではないことに注意してください.

a == sxとd == sy、したがって、次のようにこれらにアクセスします。

var r, ctm, sx, sy, rotation;

r   = document.querySelector('rect'); // access the first rect element
ctm = r.getCTM();
sx  = ctm.a;
sy  = ctm.d;

次に、回転a == cos(angle)とb == sin(angle). Asin と acos だけでは完全な角度を得ることができませんが、一緒に使用すると可能です。あなたはatanを使いたいのでtan = sin/cos、実際に使いたいこの種の問題のためにatan2：

RAD2DEG = 180 / Math.PI;
rotation = Math.atan2( ctm.b, ctm.a ) * RAD2DEG;

逆三角関数と単位円を研究すれば、なぜこれが機能するのか理解できるでしょう。

SVG 変換に関する W3C の不可欠なリソースは次のとおりです: http://www.w3.org/TR/SVG/coords.html。少し下にスクロールすると、上で述べたことについてさらに多くのことを読むことができます。

UPDATE、プログラムでアニメーションを行う方法の使用例。変換を個別に保存しておき、これらが更新されると、SVG 要素の変換を上書き/更新します。

var SVG, domElement, ...

// setup
SVG        = document.querySelector( 'svg' );
domElement = SVG.querySelector( 'rect' );
transform  = SVG.createSVGTransform();
matrix     = SVG.createSVGMatrix();
position   = SVG.createSVGPoint();
rotation   = 0;
scale      = 1;

// do every update, continuous use
matrix.a = scale;
matrix.d = scale;
matrix.e = position.x;
matrix.f = position.y;

transform.setMatrix( matrix.rotate( rotation ) );
domElement.transform.baseVal.initialize( transform ); // clear then put
于 2012-01-02T14:09:47.433 に答える