2

HTML

<rect id="red" style="fill: red;" height="100" width="20"></rect>

JS

var layer = 
{  
    sizeReal   : { "width": 20, "height": 100 }                   
,   sizeScaled : { "width": 10, "height": 50 }
,   position   : { "x": 200, "y": 200 } 

,   scale      : 0.5
,   rotation   : 0
,   matrix     : [ 1, 0, 0, 1, 0, 0 ]
};

// Not sure if its the cleanest way but it works it rotates itself arounds its center.
//
$("#red")[0].setAttribute( 'transform', 'translate(' + layer.position.x + ',' + layer.position.y +') rotate(' + layer.rotation +',' + ( layer.sizeScaled.width  / 2 ) + ',' + ( layer.sizeScaled.height / 2 ) + ') scale(' + layer.scale + ',' + layer.scale +')' )

今、私はマトリックスだけで同じことをしたいと思っています。シルベスターを使用して行列を乗算しています。

質問を明確にするためにフィドルを作成しました:)

http://jsfiddle.net/xYsHZ/3/

赤い四角形が緑の四角形と同じように動作するようにします。私は何を間違っていますか？

4

2 に答える 2

1

修理済み！！行列要素の順序が間違っていました:)

$("#red")[0].setAttribute( 'transform', 'matrix(' + layer.matrix[ 0 ][ 0 ] + ',' + layer.matrix[ 1 ][ 0 ] + ',' + layer.matrix[ 0 ][ 1 ] + ',' + layer.matrix[ 1 ][ 1 ] + ',' + layer.matrix[ 0 ][ 2 ] + ',' + layer.matrix[ 1 ][ 2 ] + ')' );
},50);

http://jsfiddle.net/6DR3D/2/

于 2012-12-04T11:52:35.150 に答える
0

問題はrotate(angle, x, y)通話です。この呼び出しは、ポイント (x,y) を中心に指定された角度で回転します。ただし、代わりに、layer.position を中心に回転するようにマトリックスを構築します。

オブジェクトに対して特定の点 (x,y) を中心に回転するには、まず (-x,-y) に変換し、次に回転してから (x,y) に変換する必要があります。

したがって、行列乗算関数 Mul がある場合、次のようになります。

var m1 = GetMatrix(0, 0, {"x":-layer.sizeScaled.width/2, "y":-layer.sizeScaled.height/2});
var m2 = GetMatrix(layer.rotation, layer.scale, layer.position);
var m3 = GetMatrix(0, 0, {"x":layer.sizeScaled.width/2, "y":layer.sizeScaled.height/2});

var m = Mul(Mul(m3,m2), m1); //i.e. apply the matricdes in order m1, then m2, then m3
于 2012-12-02T02:14:29.093 に答える