javascript - Raphaëlを使用して無地の画像を回転するには?

Question

これは非常に些細な質問かもしれませんし、そうでないかもしれませんが、繰り返しになりますが、私はこの JavaScript ライブラリーにまったく慣れていません (つまり、今日このライブラリーについて読み始めたばかりです)。Raphaël を使用してサーバー上で単純な画像 (png/jpeg など) を回転するにはどうすればよいですか? 事前にSVGに変換する必要がありますか？つまり、 http://raphaeljs.comでこのデモを複製する必要があります。

Answer 1

キャンバスに画像を配置し、回転変換を適用します。次に例を示します。

var paper = Raphael("thepaper", 300, 300);
var theImage = paper.image("http://i.stack.imgur.com/Zg08b.png", 0, 0, 128, 128);
theImage.transform("R45");

ここで実際に動作するデモを見ることができます。

animationを適用することで、非常に簡単にアニメーション化できます。最後の行を次のように変更します。

theImage.animate({"transform": "R45"}, 10000);

ここで動作していることがわかります。これにより、10 秒間で 45 度回転します。