2

私は動的jsを使用しています。Kinetic.groupに画像や線などを追加し、グループを回転させようとしていますが、正しく回転しています。しかし、グループを回転させた後、線を描画しようとすると、現在のマウス位置で正しく描画されません。回転前の状態で描いています。

グループを回転させても、ステージ座標が回転していないように見えることが問題かもしれません。これを防ぐにはどうすればよいですか？

参照コード - - 

var rootGroup = new Kinetic.Group({
                    x:  stage.getWidth()/3, 
                    y:  stage.getWidth()/6, 
                    draggable: true,
                    offset: [images.darthVader.width/2, images.darthVader.height/2]
                });
rootGroup.add(line);
rootGroup.setRotationDeg(rootGroup.getRotationDeg()+90);

このようにして、私は線を引いています。

 var activeline = new Kinetic.Line({
   points: [{x:0,y:0}],
   stroke: "blue",
   strokeWidth: 3,
   lineCap: "round",
   lineJoin: "round",
 });
 var mousePos = stage.getMousePosition();

 points.push({
            x: mousePos.x,
            y: mousePos.y
 });

 activeline.setPoints(points);
 rootGroup.add(activeline);
4

2 に答える 2

0

私は KineticJS に詳しくありませんが、変換マトリックスをデフォルトの状態にリセットする必要があるようです。OpenGL には glLoadIdentity() メソッドがあります。KineticJS で同様の方法を検索します。

このチュートリアルを参照してください http://www.html5canvastutorials.com/advanced/html5-canvas-reset-transform-tutorial/

于 2012-10-15T08:37:03.473 に答える
0

これでかなり近づくはずです：http://jsfiddle.net/k4qB8/24/

 // This rotates that added active line along with your group.
 // This makes the draw direction correct
 activeline.setRotationDeg(0-rootGroup.getRotationDeg());
于 2013-01-04T15:34:09.727 に答える