CreateJS - 縮放畫布不會縮放鼠標座標

Question

我正在通過JSON數據和CreateJS創建Canvas中的練習的大項目。在HTML 5中使用它的目的是不必爲您的手機使用單獨的應用程序，您始終可以使用該網站。

一切工作正常，但在移動畫布被重新調整到全屏。這是通過檢查屏幕尺寸做的，如果它小到可以移動畫布是通過這個代碼縮放：

// browser viewport size 
var w = window.innerWidth; 
var h = window.innerHeight; 

// stage dimensions 
var ow = canvasWidth; 
var oh = canvasHeight; 

// keep aspect ratio 
var scale = Math.min(w/ow, h/oh); 
stage.scaleX = scale; 
stage.scaleY = scale; 

// adjust canvas size 
stage.canvas.width = ow * scale; 
stage.canvas.height = oh * scale; 

這對於大多數練習的偉大工程，像測驗和這樣的，在這裏你有要做的是點擊一個按鈕。不過，我們也有一些拖放練習，還有一個練習，您可以在其中繪製顏色。這些當然要依靠鼠標座標才能正常工作。問題是，當畫布縮放時，鼠標座標是而不是。所以當你拖動一個物品或者嘗試繪製時，會發生偏移。所以你的繪圖看起來就像你點擊的左邊，當拿起一個可拖動的對象時，它不會正確地跟隨你的點擊。

如果我從一開始就編寫代碼，我很確定我將如何重新計算座標，但是由於它們是由CreateJS計算的，所以我不知道該怎麼去做。

這是由人大約一年前here，其中有人提出這個解決方案報告爲一個問題：

我能夠通過添加頂層容器和附上我的位圖，爲解決此並對其進行縮放。

整個練習是在一個容器內，我試圖擴展，但無濟於事。我也嘗試將比例作爲參數發送給創建的練習的各個部分（例如菜單，背景圖像等），而不是將它們全部縮放在一起，並且似乎能夠正常工作，因爲我可以排除繪圖層。但由於它是一個大型項目，許多不同的練習和部件需要縮放，所以需要一段時間才能實現，而且我不確定這是一個可行的解決方案。

有沒有一種簡單的方法來重新調整鼠標座標以及CreateJS中的畫布大小？我在這裏找到了純JavaScript的例子，但是對於CreateJS尤其沒有。

Answer 1

繼續搜索，最後偶然發現了這個，我從未見過： EaselJS - dragging children of scaled parent。這正是我所期待的。我需要改變我這個畫座標：

var coords = e.target.globalToLocal(e.stageX, e.stageY); 

然後，我可以用coords.x和coords.y而不是直接使用e.stageX和e.stageY像以前一樣的。