使在畫布上繪制的圖像可拖動/可調整大小？

Question

我為您完成了此JSFiddle，以使其更易於解釋。

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

有兩張圖片，一張在頂部，中間是一個灰色的環繞，中間是一個透明的矩形。 后面的圖片也只是白色的紅色方塊。 我希望用戶能夠將圖像拖到后面（紅色方塊）並調整圖像大小。 我有幾個問題：

1. 我不知道如何使圖像可拖動，我已經在Google上搜索過，但我不太了解。

2. 該圖像位於靜態圖像的后面，單擊只會單擊頂部的圖像，而不是后面的圖像。

3. 后面的圖像有時是在前面的圖像之后繪制的，所以我認為我需要延遲繪制前面的圖像。 我也不知道該怎么做。

顯然，這些圖像只是出於您的目的而制作的。 一旦用戶調整了圖像的大小並將其移動到正確的位置，將按下載，將畫布轉換為png並保存到服務器，然后下載給用戶。 使用PHP，尚不確定如何做到這一點，但我想我可以解決這個問題。也許：)這主要是因為拖動和調整大小這時讓我很煩。

如果有人可以提供幫助，那就太好了，我將非常感謝您。 :)這是我第一次在這里提出問題的經驗。

Answer 1

歡迎來到StackOverflow :)

有很多方法可以解決此問題。 您可以使用純HTML或SVG或Canvas做到這一點。 對於畫布，您需要創建自己的持久對象並拖動代碼。 我已經制作了有關在畫布上制作和移動可選形狀的教程。 （盡管我實際上正在大修它們，以使它們更容易理解，所以請在一兩天內繼續關注）。

SVG可能更容易實現所有這些功能，因為事件已內置到每個SVG對象中。 有關可拖動SVG對象的教程應該很容易找到。

您將需要有一個代碼，該代碼將在每次放開一個對象時進行檢查，以查看該對象是否正確位於所需的范圍之內。 准備好跟蹤許多x，y位置以及每個對象的寬度和高度。

至於3：發生這種情況是因為您沒有使用圖像的onload事件。 請參閱類似這樣的有關StackOverflow的其他問題以尋求幫助： 繪制到HTML5 Canvas的圖像在首次加載時無法正確顯示