jQueryを使ってPhotoshopで '自由な変形'のように画像を回転させるには？

Question

私はどこでも検索しましたが、jQueryでイメージの境界線や「サイズ変更可能」のようなものを回転（度）する方法が見つかりませんでした。私が言っていることはPhotoshopの「自由な変形」ボーダーのようなもので、画像の各隅で回転する4つの場所があります。

Answer 1

IEのDirectXフィルタで画像を回転することはできますが、問題は解決しないと思います。あなたは、その仕事を完了させるために、FlashやSilverlightのようなものを使わなければならないかもしれません。

私はその種の力を持つJavaScriptを認識していません。ここでは一人の実験だが、結果は非常に良いではありません。

http://www.walterzorn.com/rotate_img/rotate_img.htm

これもかなりクールです、とFlashを使用しています：

http://www.swfir.com/examples/multiple/

Answer 2

Thisは役立つかもしれません。私は専門家ではありませんが、あなたはIEで90度の増分しかないようです。

Answer 3

私はjavascriptでこれを行うと思いますが、キャンバス要素を使用しています。

以下のプラグインが使用してみてください：あなたはJavascriptを使用している場合 http://wilq32.googlepages.com/wilq32.rollimage222

Answer 4

を、サーバが作業を行うと、AJAX呼び出しを経由して結果を得ることはできませなぜ？ ImageMagickライブラリ（http://www.imagemagick.org/script/index.php）をご覧ください。エンドユーザが回転パラメータを指定している場合は、javascriptでそれらの入力をキャプチャし、ImageMagick（または別のライブラリ）による処理のためにサーバに送り返し、イメージクライアント側を更新します。

Answer 5

Here's a starting point WebKitで動作します。 （私はSafari 4を使用していました）。私は年齢の中で実際の数学を行う必要はありませんでしたので、ドラッグの距離に基づいて正しい回転角度を把握しなければなりません。また、回転ボックスは、回転を開始するとわずかにオフセットされます。それらは、異なる中心点を中心に回転している可能性があります。

Answer 6

CSS3はrotationをサポートしていますが、現時点ではクロムとサファリだけがWebkitを使用したCSS3ローテーションをサポートしています。ここにはCSS3の回転の良いexampleがあります。あなたのブラウザでそれが動作するかどうかを確認する場合は、このlinkを試してみてください。それは働く時計でなければなりません。

今のところ、troynts answerはあなたの最善の策のようです。

今後、またはサファリやクロムでこれを行うことができます。

$(this).css('-webkit-transform','rotate(45deg)'); 

Answer 7

私はraphaeljs（raphaeljs.com）を使用しています。キャンバスに描画することができます。したがって、まず背景の矩形を追加してから、イメージを追加して最後に回転させることができます。したがって、境界を示す。私が見つけることができる限り、これはwilq32の回転では不可能です。