HTML5 Canvas中可拖動，可縮放的圖像

Question

我正在使用一個我計划使用HTML5的小項目。到目前為止，我已經設法建立了一個帶有一些小功能的小型演示，但它仍然缺乏必要的所有功能。 我希望這里的某個人可能有時間為初學者留出空余時間。

無論如何，這是我的演示： http ： //persturesson.com/demo/

現在，正如你所看到的，圖像（是的，它是一個圖像，而不是一個繪制的對象，圖像將為最終版本而改變，所以不要投入太多的東西）是可拖動的。 但我希望能夠像這樣動態調整圖像大小： http ： //simonsarris.com/project/canvasdemo/demo2.html

任何想知道如何在我的演示中加入這個演示的功能的人？

感謝所有投入。

Answer 1

我寫了你正在看的演示

所以相關的drawImage看起來像這樣：

context . drawImage(image, dx, dy, dw, dh)

這是目的地x，y，寬度和高度。 這意味着，無論原始圖像的大小如何，您都可以將其繪制得更大或更小。 在我的框示例中，您可以更改fillRect的寬度和高度，而在此處您應該只更改drawImage的dw和dh值。

所以在你的transform.js文件的第32行，而不是150,150的dw,dh值，應該有相當於保存（和修改）的寬度和高度，就像在我的演示中一樣。

其他一切（讓把手工作等）應該是完全一樣的。

如果還有任何問題，請告訴我！