2

実際、私はキャンバスに画像をロードし、それに落書きしてから回転させています。その正常に動作します。画像を回転させた後落書きや何かを書き込もうとすると、前の座標に従って（つまり、画像を回転させる前に）線が印刷されます。

このコードを使用して、画像を回転させています。

image.setRotationDeg(image.getRotationDeg()+90); (or)
image.setRotationDeg(90);

画像を回転させた後、マウスの位置（またはマウスの座標）を正しく取得できません。画像を回転させた後、普通に落書きしたいです。

この状況で私を助けてください。

4

2 に答える 2

0

特にKinetic.JSについては確信が持てませんが（使用したことはありません）、純粋にキャンバス指向の観点からは、context.save（）およびcontext.restore（）メソッドを使用します。

Kinetic.JS のドキュメントをチェックして、同様のものが利用可能かどうかを確認してください。通常、キャンバスを回転すると、座標を含むすべてが回転します。save() と restore() を使用すると、現在のキャンバスの状態 (座標セットと変換) を保存し、いくつかのアクションを実行してから、後でそれらを復元できます。

関連リンク: http://html5.litten.com/understanding-save-and-restore-for-the-canvas-context/

Canvas を使用してからしばらく経ちましたので、私の説明が明確でない場合はご容赦ください。リンクがそれをよりよく説明するのに役立つことを願っています。うまくいけば、少なくとも Kinetic.JS に詳しい人が参加するまでは、これがあなた自身の研究の正しい軌道に乗るのに役立つことを願っています.

于 2012-10-10T20:53:39.073 に答える
0

ディスクを回転させる素晴らしいチュートリアルを見てきました。これはあなたを助けることができます。 http://www.techrecite.com/html5-canvas-disc-rotation-animation-using-kineticjs/

于 2013-10-20T14:31:54.020 に答える