キャンバスで描かれたイメージをドラッグ可能/サイズ変更可能にするには？

Question

私はこのJSFiddleを説明しやすくしました。

http://jsfiddle.net/eAV6w/30/

は、2枚の画像、中央に透明な矩形グレーサラウンドである上に他方があります。赤い四角の白だけの写真もあります。私は、ユーザーの周りに画像をドラッグして（赤い四角形）、画像のサイズを変更できるようにしたいと思います。私はいくつかの問題を抱えて：

1. 私は、画像をドラッグできるようにする方法を知りませんが、私はGoogleで検索しましたが、私は実際にそれを理解していません。

2. イメージは静的イメージの背後にあります。クリックすると、後ろのイメージではなく上のイメージがクリックされます。

3. 後ろに画像が表示されることがありますので、正面の画像に遅延描画が必要です。私はこれを行う方法もわかりません。

明らかに画像はあなたの目的のために作成されています。ユーザーがイメージのサイズを変更して正しい位置に移動すると、プレスダウンロードが行われ、キャンバスがpngに変換されてサーバーに保存され、ユーザーにダウンロードされます。 PHPを使用して、まだこれを行う方法はわかりませんが、私はこれを動作させることができます。おそらく:)主にドラッグとサイズ変更のビットで、分時に迷惑になります。

誰でも助けることができれば、それはすばらしく、私はたくさんのことに感謝します。 :)これは私の最初の経験でここで質問しています。

Answer 1

はStackOverflowのへようこそ:)

あなたはこのに近づく可能性が多くの方法があります。純粋なHTMLやSVG、Canvasでこれを行うことができます。キャンバスの場合、独自の永続オブジェクトとドラッグ・コードを作成する必要があります。私はtutorials on making and moving selectable shapes on a canvas.を作りました（実際に私はそれらをもっと理解しやすくするためにそれらを見直しているので、1日か2日に調整してください）。

イベントはすべてのSVGオブジェクトに既に組み込まれているため、SVGはこれをすべてやる方が簡単かもしれません。ドラッグ可能なSVGオブジェクトに関するチュートリアルは簡単に見つけられるはずです。

オブジェクトは、オブジェクトが存在する境界内に正しく入っているかどうかを確認するたびにチェックするコードが必要です。各オブジェクトのx、yの位置と幅と高さの多くを追跡する準備をしてください。

3：これは、画像のonloadイベントを使用していないために発生しています。ヘルプのためにこのようなStackOverflowの他の質問を参照してください：Image drawn to HTML5 Canvas does not display correctly on first load