2

tympanus's swatchbook のように画像を回転させたい。
しかし、前のリンクが必要とするように、CSS 3などは使用しません。
私はむしろ、インスタンスごとにJQueryRotateを使用して、js ですべての回転を行います。これは、イメージを中心とする回転ポイントを除いて優れています。

それを行うライブラリを指摘するのではなく、画像の適切な回転方法を学びたいと思います。特に、その方法で回転のポイントを変更する方法を学びたいので、スウォッチブック効果を達成できます。欲しいです。

しかし、それを行うライブラリを知っていれば、私もそれをとても気に入っています。

ありがとう

編集：

質問を書いているうちに、あることに気づきました。その画像のホルダーを拡大できました。あまり明るくもエレガントでもなく、とても良いわけでもありませんが、それは始まりです. x3roによる提案を確認します:画像回転アルゴリズム

HTML スニペット:

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<div id="dvImg" style="position:relative;border: 1px solid black;">
    <img src="https://www.google.com/images/srpr/logo3w.png" id="image" style="position:absolute;top:0;left:12px;margin:auto;border: 1px solid black;">
<div>

js スニペット:

$("#dvImg").width($("#image").width()*2);
$("#dvImg").height($("#image").height()*2);
$("#image").css({ left: $("#image").width() + "px", top: $("#image").height()});

$("#image").mouseover(function() {
    $("#dvImg").rotate({animateTo:90});
});
4

1 に答える 1

3

自分で回転を行いたい場合は、次の質問をご覧ください：画像回転アルゴリズム。もちろん、これはJavaScript固有の説明ではありませんが、多かれ少なかれ簡単にキャンバスベースのソリューションに翻訳できるはずです。jQueryRotateの実装についてはまだ調べていませんが、おそらく調べる価値もあります。

とはいえ、「左下隅にピボットポイントを使用して画像を回転させる方法」に関するJavaScript固有のチュートリアルはおそらくありません：D

@Jasperが指摘しているように、IE9より前のバージョンのIEではサポートされていませんが、 ExplorerCanvasが示すcanvasように、以前のバージョンでもキャンバスAPI（の大部分）を取得する方法と手段があることを知っておくとよいでしょう。 。

于 2012-11-01T14:48:27.327 に答える